站長資訊網
es6不是框架，而是一種JavaScript語言的標準。es6是ECMAScript的第6版，是一種由Ecma國際（國際性會員制度的信息和電信標準組織）通過ECMA-262標準化的腳本程序設計語言；它是腳本語言JavaScript的核心，提供語言的語法和基本對象。
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
es6不是框架，而是一種JavaScript語言的標準。
es6全稱ECMAScript6（ECMAScript的第6個版本），是于2015年6月正式發布的JavaScript語言的標準，正式名為ECMAScript 2015（ES2015）。它的目標是使得JavaScript語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。
而ECMAScript是一種由Ecma國際通過ECMA-262標準化的腳本程序設計語言。這種語言在萬維網上應用廣泛，它往往被稱為JavaScript或JScript，所以它可以理解為是JavaScript的一個標準，但實際上后兩者是ECMA-262標準的實現和擴展。
JavaScript 與 ECMAScript 的關系
有時人們會將 JavaScript 與 ECMAScript 看作是相同的，其實不然，JavaScript 中所包含的內容遠比 ECMA-262 中規定的多得多，完整的 JavaScript 是由以下三個部分組成：
-
核心（ECMAScript）：提供語言的語法和基本對象；
-
文檔對象模型（DOM）：提供處理網頁內容的方法和接口；
-
瀏覽器對象模型（BOM）：提供與瀏覽器進行交互的方法和接口。
而ECMAScript是JavaScript的核心，描述了語言的基本語法(var、for、if、array等)和數據類型(數字、字符串、布爾、函數、對象(obj、[]、{})、null、未定義)，ECMAScript是一套標準，定義了一種語言（比如JS）是什么樣子。
ECMAScript是由ECMA-262定義的ECMAScript是一種在國際認可的標準的腳本語言規范，與Web瀏覽器沒有依賴關系。ECMA-262標準主要規定了這門語言由以下組成部分：
-
語法
-
變量和數據類型
-
關鍵字和保留字
-
操作符
-
控制語句
-
對象
ECMAScript 6 目前基本成為業界標準，它的普及速度比 ES5 要快很多，主要原因是現代瀏覽器對 ES6 的支持相當迅速，尤其是 Chrome 和 Firefox 瀏覽器，已經支持 ES6 中絕大多數的特性。【推薦學習：javascript高級教程】
為什么要學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 = "adsfnsdfa"; 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) } }
【
