react和es6的概念是什么及有什么功能

這篇文章主要講解了“react和es6的概念是什么及有什么功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“react和es6的概念是什么及有什么功能”吧！

react是Facebook推出的一個聲明式，高效且靈活的用于構建用戶界面的JavaScript開發框架；它為程序員提供了一種子組件不能直接影響外層組件的模型，數據改變時對HTML文檔的有效更新，和現代單頁應用中組件之間干凈的分離。es6是JavaScript的下一個版本標準，它的目標是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。

react是什么

react.js是 Facebook 推出的一個用來構建用戶界面的 JavaScript 開發框架。

React 是一個聲明式，高效且靈活的用于構建用戶界面的 JavaScript 庫。使用 React 可以將一些簡短、獨立的代碼片段組合成復雜的 UI 界面，這些代碼片段被稱作“組件”。

由于 React的設計思想極其獨特，屬于革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具。

React 是一個為數據提供渲染為 HTML 視圖的開源 JavaScript 庫。React 視圖通常采用包含以自定義 HTML 標記規定的其他組件的組件渲染。React 為程序員提供了一種子組件不能直接影響外層組件的模型，數據改變時對 HTML 文檔的有效更新，和現代單頁應用中組件之間干凈的分離。

React的優勢是：

• 更適合大型應用和更好的可測試性

• Web端和移動端原生APP通吃

• 更大的生態系統，更多的支持和好用的工具

• 比較適合中大型項目

es6是什么

es6全稱ECMAScript6（ECMAScript的第6個版本），是于2015年6月正式發布的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。

ECMAScript 6 目前基本成為業界標準，它的普及速度比 ES5 要快很多，主要原因是現代瀏覽器對 ES6 的支持相當迅速，尤其是 Chrome 和 Firefox 瀏覽器，已經支持 ES6 中絕大多數的特性。

在此后ECMA Script每年發布一個大版本新增加一些重要特性，我們稱之為ES6+。

了解ES和JS之間的關系

ES = ECMAScript 是一個動態腳本語言的‘標準’，JS = JavaScript是對ES的標準，默認，主流的‘實現’，由于商標權的問題，歐洲計算機協會制定的語言標準不能叫做JS，只能叫ES；

ES6新標準的目的是：使得JS可以用來開發大型的Web應用，成為企業級開發語言。而企業級開發語言就是：適合模塊化開發，擁有良好的依賴管理；

為什么要學ES6？ES6的用處是什么？

ES5不能滿足目前前端越來越復雜，龐大的現狀，可以說已經過時了，ES6是對ES5的增強和升級。

1.主流的瀏覽器都已經全面支持ES6

2.行業內較新的前端框架都已經全面使用ES6的語法

3.微信小程序,uni-app等都是基于ES6的語法

4.從就業出發，中小型公司，全棧，簡歷上多一個技能，試用期也能更快的上手。

變量

• let
        一個作用域中只能聲明一個let變量，若子作用域中也聲明了let變量，則不影響父作用域中的let變量。

• var
        一個作用域中可以聲明多個var變量，若子作用域中也聲明了var變量，也在影響父作用域中的var變量。

• const
        常量，相當于final，不可被修改。

• global
        不聲明變量類型的變量默認為全局變量(window屬性)。

面向對象

• 原理
        JavaScript 的面向對象特性是基于原型和構造函數的，與常見的基于類的不同。JavaScript 沒有 提供對象繼承的語言級別特性，而是通過原型復制來實現的。

• 三種創建對象方法

  1. {pojo}（實例變量、實例方法、get、set） 
  2. function（實例變量、實例方法、prototype、apply、call） 
  3. class（實例變量、實例方法、prototype、extends、super）

prototype

只有函數、class才有原型，意義在于動態添加實例變量和實例方法及實現繼承。

繼承

• call/apply
        應用在繼承關系中，子類向父類傳參時應用此關鍵字

• extends
        繼承關系中使用，A extends B，則A是B的父類

• super
        在子類中調用父類的方法時應用次關鍵字

• ES5繼承方式
        接下來我們手寫一套組合繼承（原型鏈繼承（繼承原型） + 構造繼承（繼承屬性））。這種方式即可避免原型鏈繼承中無法實現多繼承，創建子類實例時，無法向父類構造函數傳參的弊端，也可避免構造繼承中不能繼承原型屬性/方法的弊端。

function Person(name,age){                                             /* 父類 */
    this.name = name || 'father';                            //實例變量
    this.namesonF = this.nameson;
    this.age = age;
    this.talk = function(){alert("talk");};                 //實例方法
};
function Son(name){                                                     /* 子類 */
    this.nameson = name || 'son';
    // Person.call(this,'name',18);                          //繼承：構造繼承，復制父類的實例屬性給子類，不能繼承原型屬性/方法
    Person.apply(this,['name',18]);                          //繼承：構造繼承，復制父類的實例屬性給子類，不能繼承原型屬性/方法
}
// Son.prototype = new Person("zhangsan",19);                   //繼承：原型鏈繼承，父類的實例作為子類的原型，拷貝屬性兩次，不合理
Son.prototype = Person.prototype;                            //繼承：原型鏈繼承，父類的實例作為子類的原型

Person.prototype.publicParam="param1";                       //動態添加實例變量
Person.prototype.talk=function(){alert("talk");}            //動態添加實例方法

var son = new Son();                                         //實例化對象，調用構造函數(constructor)

• ES6繼承方式
        ES6的繼承創造了一種新的寫法，與Java、Scala等語言非常類似，默認使用組合繼承（原型鏈繼承（繼承原型） + 構造繼承（繼承屬性））的方式。

class Point {
    constructor(x, y) {
        this.x = x;                                           //實例變量
        this.y = y;
    }
}
class Son extends Point {
    constructor(z, w) {
        super(z,w);
        this.z = z;                                           //實例變量
        this.w = w;
    }
}
var son = new Son(1,2);

arrow functions

箭頭函數，是ES6中新加入的語法，于Java的lambda，scala的函數式語法非常相似

• 代碼

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 = `<ul><li>first</li> <li>second</li></ul>`;

    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

重構/解構，變量交互的語法

• 代碼

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

實參，ES6中加入的直接讀取參數的變量

• 代碼

function argumentsTest(a,b) { 
	for(let val of arguments)
		{console.log(val)
	}
}

感謝各位的閱讀，以上就是“react和es6的概念是什么及有什么功能”的內容了，經過本文的學習后，相信大家對react和es6的概念是什么及有什么功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！