這篇文章主要講解了“react和es6的概念是什么及有什么功能”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“react和es6的概念是什么及有什么功能”吧！
創(chuàng)新互聯(lián)建站主要從事成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)長興,10年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108
react是Facebook推出的一個(gè)聲明式，高效且靈活的用于構(gòu)建用戶界面的JavaScript開發(fā)框架；它為程序員提供了一種子組件不能直接影響外層組件的模型，數(shù)據(jù)改變時(shí)對HTML文檔的有效更新，和現(xiàn)代單頁應(yīng)用中組件之間干凈的分離。es6是JavaScript的下一個(gè)版本標(biāo)準(zhǔn)，它的目標(biāo)是使得JavaScript語言可以用來編寫復(fù)雜的大型應(yīng)用程序，成為企業(yè)級開發(fā)語言。
react.js是 Facebook 推出的一個(gè)用來構(gòu)建用戶界面的 JavaScript 開發(fā)框架。
React 是一個(gè)聲明式，高效且靈活的用于構(gòu)建用戶界面的 JavaScript 庫。使用 React 可以將一些簡短、獨(dú)立的代碼片段組合成復(fù)雜的 UI 界面，這些代碼片段被稱作“組件”。
由于 React的設(shè)計(jì)思想極其獨(dú)特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關(guān)注和使用，認(rèn)為它可能是將來 Web 開發(fā)的主流工具。
React 是一個(gè)為數(shù)據(jù)提供渲染為 HTML 視圖的開源 JavaScript 庫。React 視圖通常采用包含以自定義 HTML 標(biāo)記規(guī)定的其他組件的組件渲染。React 為程序員提供了一種子組件不能直接影響外層組件的模型，數(shù)據(jù)改變時(shí)對 HTML 文檔的有效更新，和現(xiàn)代單頁應(yīng)用中組件之間干凈的分離。
React的優(yōu)勢是：
更適合大型應(yīng)用和更好的可測試性
Web端和移動端原生APP通吃
更大的生態(tài)系統(tǒng)，更多的支持和好用的工具
比較適合中大型項(xiàng)目
es6全稱ECMAScript6（ECMAScript的第6個(gè)版本），是于2015年6月正式發(fā)布的JavaScript語言的標(biāo)準(zhǔn)，正式名為ECMAScript 2015（ES2015）。
ECMAScript 6 目前基本成為業(yè)界標(biāo)準(zhǔn)，它的普及速度比 ES5 要快很多，主要原因是現(xiàn)代瀏覽器對 ES6 的支持相當(dāng)迅速，尤其是 Chrome 和 Firefox 瀏覽器，已經(jīng)支持 ES6 中絕大多數(shù)的特性。
在此后ECMA Script每年發(fā)布一個(gè)大版本新增加一些重要特性，我們稱之為ES6+。
了解ES和JS之間的關(guān)系
ES = ECMAScript 是一個(gè)動態(tài)腳本語言的‘標(biāo)準(zhǔn)’，JS = JavaScript是對ES的標(biāo)準(zhǔn)，默認(rèn)，主流的‘實(shí)現(xiàn)’，由于商標(biāo)權(quán)的問題，歐洲計(jì)算機(jī)協(xié)會制定的語言標(biāo)準(zhǔn)不能叫做JS，只能叫ES；
ES6新標(biāo)準(zhǔn)的目的是：使得JS可以用來開發(fā)大型的Web應(yīng)用，成為企業(yè)級開發(fā)語言。而企業(yè)級開發(fā)語言就是：適合模塊化開發(fā)，擁有良好的依賴管理；
為什么要學(xué)ES6？ES6的用處是什么？
ES5不能滿足目前前端越來越復(fù)雜，龐大的現(xiàn)狀，可以說已經(jīng)過時(shí)了，ES6是對ES5的增強(qiáng)和升級。
1.主流的瀏覽器都已經(jīng)全面支持ES6
2.行業(yè)內(nèi)較新的前端框架都已經(jīng)全面使用ES6的語法
3.微信小程序,uni-app等都是基于ES6的語法
4.從就業(yè)出發(fā)，中小型公司，全棧，簡歷上多一個(gè)技能，試用期也能更快的上手。
變量
let
一個(gè)作用域中只能聲明一個(gè)let變量，若子作用域中也聲明了let變量，則不影響父作用域中的let變量。
var
一個(gè)作用域中可以聲明多個(gè)var變量，若子作用域中也聲明了var變量，也在影響父作用域中的var變量。
const
常量，相當(dāng)于final，不可被修改。
global
不聲明變量類型的變量默認(rèn)為全局變量(window屬性)。
面向?qū)ο?/strong>
原理
JavaScript 的面向?qū)ο筇匦允腔谠秃蜆?gòu)造函數(shù)的，與常見的基于類的不同。JavaScript 沒有 提供對象繼承的語言級別特性，而是通過原型復(fù)制來實(shí)現(xiàn)的。
三種創(chuàng)建對象方法
1. {pojo}（實(shí)例變量、實(shí)例方法、get、set）
2. function（實(shí)例變量、實(shí)例方法、prototype、apply、call）
3. class（實(shí)例變量、實(shí)例方法、prototype、extends、super）
prototype
只有函數(shù)、class才有原型，意義在于動態(tài)添加實(shí)例變量和實(shí)例方法及實(shí)現(xiàn)繼承。
繼承
call/apply
應(yīng)用在繼承關(guān)系中，子類向父類傳參時(shí)應(yīng)用此關(guān)鍵字
extends
繼承關(guān)系中使用，A extends B，則A是B的父類
super
在子類中調(diào)用父類的方法時(shí)應(yīng)用次關(guān)鍵字
ES5繼承方式
接下來我們手寫一套組合繼承（原型鏈繼承（繼承原型） + 構(gòu)造繼承（繼承屬性））。這種方式即可避免原型鏈繼承中無法實(shí)現(xiàn)多繼承，創(chuàng)建子類實(shí)例時(shí)，無法向父類構(gòu)造函數(shù)傳參的弊端，也可避免構(gòu)造繼承中不能繼承原型屬性/方法的弊端。
function Person(name,age){ /* 父類 */
this.name = name || 'father'; //實(shí)例變量
this.namesonF = this.nameson;
this.age = age;
this.talk = function(){alert("talk");}; //實(shí)例方法
};
function Son(name){ /* 子類 */
this.nameson = name || 'son';
// Person.call(this,'name',18); //繼承：構(gòu)造繼承，復(fù)制父類的實(shí)例屬性給子類，不能繼承原型屬性/方法
Person.apply(this,['name',18]); //繼承：構(gòu)造繼承，復(fù)制父類的實(shí)例屬性給子類，不能繼承原型屬性/方法
}
// Son.prototype = new Person("zhangsan",19); //繼承：原型鏈繼承，父類的實(shí)例作為子類的原型，拷貝屬性兩次，不合理
Son.prototype = Person.prototype; //繼承：原型鏈繼承，父類的實(shí)例作為子類的原型
Person.prototype.publicParam="param1"; //動態(tài)添加實(shí)例變量
Person.prototype.talk=function(){alert("talk");} //動態(tài)添加實(shí)例方法
var son = new Son(); //實(shí)例化對象，調(diào)用構(gòu)造函數(shù)(constructor)
ES6繼承方式
ES6的繼承創(chuàng)造了一種新的寫法，與Java、Scala等語言非常類似，默認(rèn)使用組合繼承（原型鏈繼承（繼承原型） + 構(gòu)造繼承（繼承屬性））的方式。
class Point {
constructor(x, y) {
this.x = x; //實(shí)例變量
this.y = y;
}
}
class Son extends Point {
constructor(z, w) {
super(z,w);
this.z = z; //實(shí)例變量
this.w = w;
}
}
var son = new Son(1,2);
arrow functions
箭頭函數(shù)，是ES6中新加入的語法，于Java的lambda，scala的函數(shù)式語法非常相似
代碼
var single = a => console.log(a);
var single = (a) => (console.log(a));
var single = (a, b) => {console.log(a + b)};
var single = (a, b) => {return a + b};
template string
模版字符串，字符串拼接的新語法
代碼
var templateStr = () => {
var str1 = "adsf\nsdfa";
var template1 = `
`;
var x = 1;
var y = 2;
var template2 = `${x} + ${y} = ${x + y}`;
var template3 = `${lettest4()}`;
console.log(str1)
console.log(template1)
console.log(template2)
console.log(template3)
}
destructuring
重構(gòu)/解構(gòu)，變量交互的語法
代碼
var destructuring = () => {
var [a,b,...c]=[1,2,3,4,5,6,7,8,9,10];
let [temp="replaceString"] = ["tempString"];
let [age2, [{name: fname},{age: fname2="replaceString"}]] = [20, [{name: 'qc'},{}]];
const [aa,bb,cc,dd,ee,ff]="hello";
let {name="replaceName",age,id}={name:'cursor',age:19,id:'vc6dfuoc91vpdfoi87s'};
let {type:tipType,min:minNumber}={type:'message',min:20};
let {sin,cos,tan,log}=Math;
var fun = function({x,y}={}){return [x,y];}
fun({x:100,y:2});
[a,b]=[b,a]; //交換
var map = [1,2,3]
var map=new Map();
map.set("id","007");
map.set("name","cursor");
for(let [key,value] of map){}
for(let [key] of map){}
for(let [,value] of map){}
var arr = [1,2,3,4]
for(let val of arr){val}
}
arguments
實(shí)參，ES6中加入的直接讀取參數(shù)的變量
代碼
function argumentsTest(a,b) {
for(let val of arguments)
{console.log(val)
}
}
感謝各位的閱讀，以上就是“react和es6的概念是什么及有什么功能”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對react和es6的概念是什么及有什么功能這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
