es6核心特性有：1、使用Class關鍵字創(chuàng)建類，再通過實例化類來創(chuàng)建對象；2、箭頭函數(shù)，用于簡化回調函數(shù)的書寫；3、解構賦值，可按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值；4、“For…of”循環(huán)，用于遍歷數(shù)據(jù)、數(shù)組、類數(shù)組對象。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

ES6核心特性

1、類 Class

ES6正式啟用 Class 關鍵字來創(chuàng)建"類”，再通過實例化"類”來創(chuàng)建“對象”。類抽象了對象的公共部分，通過實例化類可以得到一個具體的對象。

• 類名首字母使用大寫。
• 實例化類必須使用 New 關鍵字。
• 簡化面向對象的封裝、繼承、多態(tài)。
• 關鍵字 extends 可以用于創(chuàng)建一個子類。
• 類的 Constructor 函數(shù)，可以接收實參，并返回實例對象。
• 子類繼承父類后，可以調用父類的方法，也可重寫父類的方法（優(yōu)先調用）。
• 關鍵字 super 用于訪問和調用對象父類上的函數(shù)，構造函數(shù)和普通函數(shù)皆可。
• 使用 New 創(chuàng)建實例時會自動調用 Constructor 函數(shù)，如果不寫此函數(shù)，類函數(shù)會自動生成。
• 【注】子類在構造函數(shù)中使用super，必須放到 this 前面，即先調用父類的構造方法，再使用子類構造方法。

// 1.使用Class關鍵字創(chuàng)建類 class 類名 {     // 自有屬性     constructor(形參1, 形參2, ...) {         this.屬性名1 = 形參1;         this.屬性名2 = 形參2;         ...     }     // 共有屬性     init() {         函數(shù)體;     }     ... }  // 2.利用類結合New關鍵字實例化對象 let Object = new 類名(實參1, 實參2, ...);  // 3.在已有類基礎上創(chuàng)建子類 class 子類 extends 類名 {     // 自有屬性（與父類相同）     constructor(形參1, 形參2, 新形參1...) {         //super函數(shù)調用父類的constructor         super(形參1, 形參2, ...);         // 子類新增屬性需要單獨定義         this.新屬性1 = 新形參1;         ...     }     // 共有屬性（子類函數(shù)位于自身父級原型上，優(yōu)先調用，父類同名函數(shù)在更上層原型鏈上)     init() {         函數(shù)體;     }     ... }

2、箭頭函數(shù)

• 箭頭函數(shù)用于簡化回調函數(shù)的書寫。
• 事件中簡化箭頭函數(shù)需要注意 this 指向為 window。
• 操作方法：省略function，在 () 和 {} 間添加 =>，單形參省略 ()，單語句函數(shù)體省略 {}，若單語句為 return 語句直接省略 {} 和 return 。
• 箭頭函數(shù)可以與變量解構結合使用。
• 由于大括號被解釋為代碼塊，如果箭頭函數(shù)直接返回對象，必須在對象外面加.上括號，否則會報錯。

注意事項

• 箭頭函數(shù)沒有自己的this對象。
• 無法使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)。
• 無法當作構造函數(shù)，即不能對箭頭函數(shù)使用new命令，否則報錯。
• 無法使用arguments對象，該對象在函數(shù)體內不存在，可以用rest參數(shù)代替。
• 第一個場合是定義對象的方法，且該方法內部包括this。
• 第二個場合是需要動態(tài)this的時候，也不應使用箭頭函數(shù)。
• 箭頭函數(shù)內部，還可以再使用箭頭函數(shù)。下面是一 個ES5語法的多重嵌套函數(shù)。

3、解構賦值

解構賦值即解析結構再賦值，ES6允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring），這種寫法屬于"模式匹配"，只要等號兩邊模式相同，左邊的變量就會被賦予對應的值。

數(shù)組解構賦值

• 如果等號的右邊數(shù)據(jù)是不可遍歷結構則會報錯。
• 完全解構：等號左右兩邊的結構完全相同，就會解析結構一一對應賦值。
• 不完全解構：等號左邊的模式，只匹配一部分的等號右邊的數(shù)組，依舊可以解構成功。
• 解構賦值允許指定默認值，ES6內部使用嚴格相等運算符（===）判斷某一位置是否有值，只有數(shù)組成員嚴格等于 undefined 默認值才會生效。

對象解構賦值

• 如果解構失敗，變量的值等于 undefined。
• 對象屬性沒有次序，但變量必須與屬性同名，才能解析到正確的值。
• 對象解構可以指定默認值，默認值生效的條件是對象的屬性值嚴格等于undefined。
• 對象解構時，由于JavaScript引擎會將{}理解成一個代碼塊，從而發(fā)生語法錯誤，需要將整個解構賦值語句放在圓括號()里面，即可正確執(zhí)行。

字符串解構賦值

• 字符串也支持解構賦值，此時字符串被轉換成了類數(shù)組對象。
• 類數(shù)組對象都有一個Length屬性，因此可以對這個屬性解構賦值。

函數(shù)參數(shù)解構賦值

// 函數(shù)參數(shù)支持解構賦值 function sum([x, y]) {     return x + y; }  // 傳入?yún)?shù)時，數(shù)組參數(shù)解構為x與y sum([1, 2]);

圓括號使用注意

• 函數(shù)參數(shù)禁用圓括號。
• 變量聲明語句禁用圓括號。
• 賦值語句的模式匹配部分禁用圓括號。
• 只有賦值語句的非模式匹配部分，可以使用圓括號。

4、For…of 循環(huán)

• 優(yōu)點，支持Break，Continue 和 Return關鍵字， for-of循環(huán)用于遍歷數(shù)據(jù)、數(shù)組、類數(shù)組對象。
• 缺點，沒有提供下標，不能修改原數(shù)組，只能遍歷索引數(shù)組，不能遍歷 Hash 數(shù)組（對象）。

for (value of arr) {     執(zhí)行操作; }

Iterator

一種新的遍歷機制，擁有兩個核心。

1. 迭代器是一個接口，能快捷的訪問數(shù)據(jù)，通過Symbol.iterator來創(chuàng)建迭代器，通過迭代器的next()方法獲取迭代之后的結果。
2. 迭代器是用于遍歷數(shù)據(jù)結構的一個指針（類似于數(shù)據(jù)庫的游標）

5、數(shù)值新增方法

Number.isInteger()

• Number.isInteger()，用來判斷數(shù)值是否為整數(shù)。
• 如果參數(shù)不是數(shù)值返回false。
• JavaScript內部整數(shù)和浮點數(shù)采用同樣的儲存方法，所以25和25.0被視為同一個值。
• JavaScript數(shù)值存儲為64位雙精度格式，數(shù)值精度最多可以達到53個二進制位(1個隱藏位與52個有效位)，如果數(shù)值的精度超過這個限度，第54位及后面的位就會被丟棄，方法失效。

Math.trunc()

• Math.trunc()方法用于去除一個數(shù)的小數(shù)部分，返回整數(shù)部分。
• 對于非數(shù)值，Math.trunc()內部使用Number方法將其先轉為數(shù)值。
• 對于空值和無法截取整數(shù)的值，返回NaN。

// 低版本瀏覽器兼容語法 Math.trunc = Math.trunc || function (x) {     return x < 0 ? Math.ceil(x) : Math.f1oor(x); };

Math.sign()

• Math. sign()方法用來判斷一個數(shù)到底是正數(shù)、負數(shù)、還是零。
• 如果參數(shù)是非數(shù)值，會自動轉為數(shù)值，對于無法轉為數(shù)值的值，會返回NaN。
• 它會返回五種值，參數(shù)為正數(shù)返回+1，參數(shù)為負數(shù)返回-1，參數(shù)為0返回0，參數(shù)為-0返回-0，其他值返回NaN。

6、字符串新增方法

模板字符串

模板字符串用于簡化字符串拼接，模板字符串支持解析變量、換行、調用函數(shù)。

模板字符串（template string）是增強版的字符串，用反引號標識，可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

`文本${變量}文本${變量}文本`

includes()、startsWith()、endsWith()

• includes()，返回布爾值，表示是否找到了參數(shù)字符串。
• startsWith()，返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。
• endsWith()，返回布爾值，表示參數(shù)字符串是否在原字符串的尾部。
  -【注】這三個方法都支持第二個參數(shù)，表示開始搜索的位置。

padStart()、padEnd()

ES2017引入了字符串補全長度功能，padstart() 用于頭部補全，padEnd() 用于尾部補全。

• padstart() 和 padEnd() 共接受兩個參數(shù)，第一個參數(shù)是字符串補全生效的最大長度第二個參數(shù)是用來補全的字符串，如果省略第二個參數(shù)，默認使用空格補全長度。
• 如果原字符串的長度等于或大于最大長度，則字符串補全不生效，返回原字符串。
• 如果用來補全的字符串與原字符串兩者的長度之和超過了最大長度，則會截去超出位數(shù)的補全字符串。
• padstart()的常見用途是為數(shù)值補全指定位數(shù)，也可以用于提示字符串格式。

// 補全長度方法提示字符串格式 '12'.padStart(10, 'YYYY-MM-DD'); // "YYYY-MM-12" '08-31'.padStart(10, 'YYYY-MM-DD'); // "YYYY-08-31"

trimStart()、trimEnd()

trimStart()消除字符串頭部的空格，trimEnd()消除字符串尾部的空格，它們返回的都是新字符串，不會修改原始字符串，兩個方法對字符串頭部（尾部）的tab鍵、換行符等不可見的空白符號也有效。

repeat()

• repeat方法表示將原字符串重復n次，返回一個新字符串。

replaceAll()

ES2021引入了replaceAll()方法，可以一次性替換所有匹配，它的用法與 replace()相同，返回一個新字符串，不會改變原字符串。

7、對象新增方法

• 在ES6中，可以直接在對象中寫入變量，key相當于變量名，value相當于變量值，并且可以直接省略value，通過key表示一個對象的完整屬性。
• 除了屬性可以簡寫，函數(shù)也可以簡寫，即省略掉關鍵字function。

Object.is()

它用來比較兩個值是否嚴格相等，與嚴格比較運算符(===) 的行為基本- -致。

console.log(Object.is(+0, -0)); //false console.log(Object.is(NaN, NaN)); //true

Object.assign()

• object. assign()方法用于對象的合并,將源對象(source) 的所有可枚舉屬性,復制到目標對象(target) 。
• obiect. assign()方法的第一個參數(shù)是目標對象.后面的參數(shù)都是源對象。注意，如果目標對象與源對象有，同名屬性，或多個源對象有同名屬性，則后面的屬性會覆蓋前面的屬性。

8、數(shù)組新增方法

Array.from()

• Array.from()用于將類數(shù)組對象和可遍歷對象（包括Set和Map）轉為真正的數(shù)組。
• Array.from()方法還可以接受第二個參數(shù)，作用類似于數(shù)組的map方法，用來對每個元素進行處理，將處理后的值放入返回的數(shù)組。

Array.of()

• Array.of()用于將一組值轉換為數(shù)組。
• Array. of()返回參數(shù)值組成的數(shù)組，如果沒有參數(shù)就返回一個空數(shù)組。
• 此方法可以彌補數(shù)組構造函數(shù)Array()因為參數(shù)個數(shù)的不同的差異。
• Array.of()基本上可以替代Array()或new Array()，它不存在由于參數(shù)不同而導致的重載。

// 兼容版本Arrayof()方法 function Arrayof() {     return Array.prototype.slice.call(arguments); }

數(shù)組實例的fill()

• fill()方法使用給定值，填充一個數(shù)組。
• 用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素，會被全部抹去。
• 方法支持第二個和第三個參數(shù)，用于指定填充的起始位置和結束位置。
• 如果填充的類型為對象，那被賦值的是同一個內存地址的對象，而不是深拷貝對象。

數(shù)組實例的find()

• 用于找出第一個符合條件的數(shù)組成員，如果沒有找到返回undefined。

findIndex()

• 用于找出第一個符合條件的數(shù)組成員的位置，如果沒有找到返回-1。

includes()

• 表示某個數(shù)組是否包含給定的值，返回布爾值。

9、Let & Const

ES6中，除了全局和局部作用域，新增了塊級作用域。

Let

• 語法：let 變量名 = 變量值;
• let禁止在相同作用域內重復聲明同一個變量，所以不能在函數(shù)內部重新聲明參數(shù)。
• let聲明的變量只在 let 命令所在的代碼塊內有效，帶有{塊級作用域}，不會導致聲明提升，可以記錄觸發(fā)鼠標事件元素的下標。

Const

• 語法：const 常量名 = 常量值;
• 常量不占內存空間，常量名一般使用純大寫。
• const聲明變量必須立即初始化，不能留到以后賦值。
• const聲明的常量只在所在的塊級作用域內有效，帶有{塊級作用域}，不會導致聲明提升，同樣存在暫時性死區(qū)，且同一常量禁止重復聲明，常量值無法改變。
• const聲明的變量，可以保證變量的內存地址不變，對于簡單類型的數(shù)據(jù)來說相當于常量，對于引用類型的數(shù)據(jù)只能保證其內存地址中指向實際數(shù)據(jù)的指針不變，而無法保證數(shù)據(jù)結構不變，將對象聲明為常量需要特別注意！

暫時性死區(qū)

暫時性死區(qū)（TDZ）一種語法規(guī)則，只要塊級作用域內存在 let 或 const 命令，內部聲明的變量就會"綁定"這個區(qū)域，形成封閉作用域，即代碼塊內的變量必須先聲明再使用。

10、模塊化開發(fā)

• 用于分工合作，每一個js都是一個模塊，每個工程師都可以單獨開發(fā)自己的模塊，主模塊最后引入調用
• 1、子模塊要公開暴露
  export var obj={};
  2、主模塊引入并且使用
  import {obj as 別名} from “./文件路徑”
  3、HTML頁面引入時需要將type更換為module
• ES6模塊功能主要有兩個命令構成，export和import，export用于規(guī)定獨立的對外接口，import用于輸入其他模塊提供的功能，一個模塊就是一個獨立的文件，引入模塊的script標簽的type要設置為module。

11、擴展運算符 & Rest運算符

ES6中新增了擴展運算符和 Rest運算符，它們可以很好地解決函數(shù)參數(shù)和數(shù)組元素長度未知情況下的編碼問題，使得代碼能更加健壯簡潔。

擴展運算符

• 擴展運算符用3個點表示...。
• 作用：將數(shù)組或類數(shù)組對象轉換為用逗號分隔的值序列，基本用法是拆解數(shù)組和字符串。

// 1.擴展運算符代替apply()函數(shù)獲取數(shù)組最大值 let arr = [1, 4, 2, 5, 3];  // apply()方法 Math.max.apply(null, arr); // 擴展運算符方法 Math.max(...arr);  // 2.擴展運算符代替concat()函數(shù)合并數(shù)組 let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6];  // concat()方法 arr1.concat(arr2); // 擴展運算符方法 [...arr1, ...arr2];

Rest運算符（剩余參數(shù)）

• Rest運算符使用3個點表示...。
• 作用：與擴展運算符相反，用于將以逗號分隔的值序列轉換成數(shù)組。
• 使用rest運算符進行解構時，res運算符對應的變量必須放在最后一位，否則變量無法識別讀取多少個數(shù)值，就會拋出錯誤。
• 函數(shù)的參數(shù)是一個使用逗號分隔的值序列，可以使用rest運算符轉換成數(shù)組以代替arguments的使用。

// 1.Rest運算符與解構組合使用拆分數(shù)組 let arr = [1, 2, 3, 4, 5]; // 將數(shù)組拆分，第一個元素賦值到arr1，其余元素賦值到arr2 let [arr1, ...arr2] = arr; // 將數(shù)組拆分，前兩個元素賦值到arr1與arr2，其余元素賦值到arr3 let [arr1, arr2, ...arr3] = arr;  // 2.Rest運算符代替arguments function sum(...arg) {     // 獲取形參數(shù)組     console.log(arg); } // 傳入形參 sum(形參1, 形參2, ...);

區(qū)分兩種運算符

• 擴展運算符和rest運算符互為逆運算，擴展運算符是將數(shù)組分割成獨立的序列，而rest運算符是將獨立的序列合并成一個數(shù)組。
• 當三個點出現(xiàn)在函數(shù)形參上或賦值等號左側，則為rest運算符。
• 當三個點出現(xiàn)在函數(shù)實參上或賦值等號右側，則為擴展運算符。

拓展 | Let、Var、Const區(qū)別

• Let聲明的變量，存在塊級作用域，不存在變量提升，值可更改。
• Var聲明的變量，存在函數(shù)作用域，存在變量提升，值可更改。
• Const聲明的常量，存在塊級作用域，值不可更改。

拓展 | ES6遍歷對象屬性五種方法

• for…in

for…in用于遍歷對象和自身和繼承的可枚舉屬性(不包含Symbol屬性)。

• Object.keys(obj)

Object.keys()函數(shù)返回一個數(shù)組，包含對象自身所有可枚舉屬性,不包含繼承屬性和Symbol屬性。

• Reflect.ownKeys(obj)

Reflect.ownKeys(obj)函數(shù)返回一個數(shù)組，可包含枚舉屬性,不可枚舉屬性以及Symbol屬性,不包含繼承屬性。

• Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj)函數(shù)返回一個數(shù)組，包含對象自身的可枚舉屬性和不可枚舉屬性，不包含繼承屬性和Symbol屬性。

• Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj)函數(shù)返回一個數(shù)組，包含對象自身所有Symbol屬性,不包含其他屬性。

【