es6核心特性是什麼

es6核心特性有：1、使用Class關鍵字建立類，再通過範例化類來建立物件；2、箭頭函數，用於簡化回撥函數的書寫；3、解構賦值，可按照一定模式，從陣列和物件中提取值，對變數進行賦值；4、「For…of」迴圈，用於遍歷資料、陣列、類陣列物件。

本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

ES6核心特性

1、類 Class

ES6正式啟用 Class 關鍵字來建立"類」，再通過範例化"類」來建立「物件」。類抽象了物件的公共部分，通過範例化類可以得到一個具體的物件。

• 類名首字母使用大寫。
• 範例化類必須使用 New 關鍵字。
• 簡化物件導向的封裝、繼承、多型。
• 關鍵字 extends 可以用於建立一個子類。
• 類的 Constructor 函數，可以接收實參，並返回範例物件。
• 子類繼承父類別後，可以呼叫父類別的方法，也可重寫父類別的方法（優先呼叫）。
• 關鍵字 super 用於存取和呼叫物件父類別上的函數，建構函式和普通函數皆可。
• 使用 New 建立範例時會自動呼叫 Constructor 函數，如果不寫此函數，類函數會自動生成。
• 【注】子類在建構函式中使用super，必須放到 this 前面，即先呼叫父類別的構造方法，再使用子類構造方法。

// 1.使用Class關鍵字建立類
class 類名 {
    // 自有屬性
    constructor(形參1, 形參2, ...) {
        this.屬性名1 = 形參1;
        this.屬性名2 = 形參2;
        ...
    }
    // 共有屬性
    init() {
        函數體;
    }
    ...
}

// 2.利用類結合New關鍵字範例化物件
let Object = new 類名(實參1, 實參2, ...);

// 3.在已有類基礎上建立子類
class 子類 extends 類名 {
    // 自有屬性（與父類別相同）
    constructor(形參1, 形參2, 新形參1...) {
        //super函數呼叫父類別的constructor
        super(形參1, 形參2, ...);
        // 子類新增屬性需要單獨定義
        this.新屬性1 = 新形參1;
        ...
    }
    // 共有屬性（子類函數位於自身父級原型上，優先呼叫，父類別同名函數在更上層原型鏈上)
    init() {
        函數體;
    }
    ...
}

2、箭頭函數

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

注意事項

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

3、解構賦值

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

陣列解構賦值

• 如果等號的右邊資料是不可遍歷結構則會報錯。
• 完全解構：等號左右兩邊的結構完全相同，就會解析結構一一對應賦值。
• 不完全解構：等號左邊的模式，只匹配一部分的等號右邊的陣列，依舊可以解構成功。
• 解構賦值允許指定預設值，ES6內部使用嚴格相等運運算元（===）判斷某一位置是否有值，只有陣列成員嚴格等於 undefined 預設值才會生效。

物件解構賦值

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

字串解構賦值

• 字串也支援解構賦值，此時字串被轉換成了類陣列物件。
• 類陣列物件都有一個Length屬性，因此可以對這個屬性解構賦值。

函數引數解構賦值

// 函數引數支援解構賦值
function sum([x, y]) {
    return x + y;
}

// 傳入引數時，陣列引數解構為x與y
sum([1, 2]);

圓括號使用注意

• 函數引數禁用圓括號。
• 變數宣告語句禁用圓括號。
• 賦值語句的模式匹配部分禁用圓括號。
• 只有賦值語句的非模式匹配部分，可以使用圓括號。

4、For…of 迴圈

• 優點，支援Break，Continue 和 Return關鍵字， for-of迴圈用於遍歷資料、陣列、類陣列物件。
• 缺點，沒有提供下標，不能修改原陣列，只能遍歷索引陣列，不能遍歷 Hash 陣列（物件）。

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

Iterator

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

1. 迭代器是一個介面，能快捷的存取資料，通過Symbol.iterator來建立迭代器，通過迭代器的next()方法獲取迭代之後的結果。
2. 迭代器是用於遍歷資料結構的一個指標（類似於資料庫的遊標）

5、數值新增方法

Number.isInteger()

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

Math.trunc()

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

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

Math.sign()

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

6、字串新增方法

模板字串

模板字串用於簡化字串拼接，模板字串支援解析變數、換行、呼叫函數。

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

`文字${變數}文字${變數}文字`

includes()、startsWith()、endsWith()

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

padStart()、padEnd()

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

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

// 補全長度方法提示字串格式
'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表示一個物件的完整屬性。
• 除了屬性可以簡寫，函數也可以簡寫，即省略掉關鍵字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()方法的第一個引數是目標物件.後面的引數都是源物件。注意，如果目標物件與源物件有，同名屬性，或多個源物件有同名屬性，則後面的屬性會覆蓋前面的屬性。

8、陣列新增方法

Array.from()

• Array.from()用於將類陣列物件和可遍歷物件（包括Set和Map）轉為真正的陣列。
• Array.from()方法還可以接受第二個引數，作用類似於陣列的map方法，用來對每個元素進行處理，將處理後的值放入返回的陣列。

Array.of()

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

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

陣列範例的fill()

• fill()方法使用給定值，填充一個陣列。
• 用於空陣列的初始化非常方便。陣列中已有的元素，會被全部抹去。
• 方法支援第二個和第三個引數，用於指定填充的起始位置和結束位置。
• 如果填充的型別為物件，那被賦值的是同一個記憶體地址的物件，而不是深拷貝物件。

陣列範例的find()

• 用於找出第一個符合條件的陣列成員，如果沒有找到返回undefined。

findIndex()

• 用於找出第一個符合條件的陣列成員的位置，如果沒有找到返回-1。

includes()

• 表示某個陣列是否包含給定的值，返回布林值。

9、Let & Const

ES6中，除了全域性和區域性作用域，新增了塊級作用域。

Let

• 語法：let 變數名 = 變數值;
• let禁止在相同作用域內重複宣告同一個變數，所以不能在函數內部重新宣告引數。
• let宣告的變數只在 let 命令所在的程式碼塊內有效，帶有{塊級作用域}，不會導致宣告提升，可以記錄觸發滑鼠事件元素的下標。

Const

• 語法：const 常數名 = 常數值;
• 常數不佔記憶體空間，常數名一般使用純大寫。
• const宣告變數必須立即初始化，不能留到以後賦值。
• const宣告的常數只在所在的塊級作用域內有效，帶有{塊級作用域}，不會導致宣告提升，同樣存在暫時性死區，且同一常數禁止重複宣告，常數值無法改變。
• const宣告的變數，可以保證變數的記憶體地址不變，對於簡單型別的資料來說相當於常數，對於參照型別的資料只能保證其記憶體地址中指向實際資料的指標不變，而無法保證資料結構不變，將物件宣告為常數需要特別注意！

暫時性死區

暫時性死區（TDZ）一種語法規則，只要塊級作用域記憶體在 let 或 const 命令，內部宣告的變數就會"繫結"這個區域，形成封閉作用域，即程式碼塊內的變數必須先宣告再使用。

10、模組化開發

• 用於分工合作，每一個js都是一個模組，每個工程師都可以單獨開發自己的模組，主模組最後引入呼叫
• 1、子模組要公開暴露
  export var obj={};
  2、主模組引入並且使用
  import {obj as 別名} from 「./檔案路徑」
  3、HTML頁面引入時需要將type更換為module
  
• ES6模組功能主要有兩個命令構成，export和import，export用於規定獨立的對外介面，import用於輸入其他模組提供的功能，一個模組就是一個獨立的檔案，引入模組的script標籤的type要設定為module。

11、擴充套件運運算元 & Rest運運算元

ES6中新增了擴充套件運運算元和 Rest運運算元，它們可以很好地解決函數引數和陣列元素長度未知情況下的編碼問題，使得程式碼能更加健壯簡潔。

擴充套件運運算元

• 擴充套件運運算元用3個點表示...。
• 作用：將陣列或類陣列物件轉換為用逗號分隔的值序列，基本用法是拆解陣列和字串。

// 1.擴充套件運運算元代替apply()函數獲取陣列最大值
let arr = [1, 4, 2, 5, 3];

// apply()方法
Math.max.apply(null, arr);
// 擴充套件運運算元方法
Math.max(...arr);

// 2.擴充套件運運算元代替concat()函數合併陣列
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// concat()方法
arr1.concat(arr2);
// 擴充套件運運算元方法
[...arr1, ...arr2];

Rest運運算元（剩餘引數）

• Rest運運算元使用3個點表示...。
• 作用：與擴充套件運運算元相反，用於將以逗號分隔的值序列轉換成陣列。
• 使用rest運運算元進行解構時，res運運算元對應的變數必須放在最後一位，否則變數無法識別讀取多少個數值，就會丟擲錯誤。
• 函數的引數是一個使用逗號分隔的值序列，可以使用rest運運算元轉換成陣列以代替arguments的使用。

// 1.Rest運運算元與解構組合使用拆分陣列
let arr = [1, 2, 3, 4, 5];
// 將陣列拆分，第一個元素賦值到arr1，其餘元素賦值到arr2
let [arr1, ...arr2] = arr;
// 將陣列拆分，前兩個元素賦值到arr1與arr2，其餘元素賦值到arr3
let [arr1, arr2, ...arr3] = arr;

// 2.Rest運運算元代替arguments
function sum(...arg) {
    // 獲取形引陣列
    console.log(arg);
}
// 傳入形參
sum(形參1, 形參2, ...);

區分兩種運運算元

• 擴充套件運運算元和rest運運算元互為逆運算，擴充套件運運算元是將陣列分割成獨立的序列，而rest運運算元是將獨立的序列合併成一個陣列。
• 當三個點出現在函數形參上或賦值等號左側，則為rest運運算元。
• 當三個點出現在函數實參上或賦值等號右側，則為擴充套件運運算元。

拓展 | Let、Var、Const區別

• Let宣告的變數，存在塊級作用域，不存在變數提升，值可更改。
• Var宣告的變數，存在函數作用域，存在變數提升，值可更改。
• Const宣告的常數，存在塊級作用域，值不可更改。

拓展 | ES6遍歷物件屬性五種方法

• for…in

for…in用於遍歷物件和自身和繼承的可列舉屬性(不包含Symbol屬性)。

• Object.keys(obj)

Object.keys()函數返回一個陣列，包含物件自身所有可列舉屬性,不包含繼承屬性和Symbol屬性。

• Reflect.ownKeys(obj)

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

• Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames(obj)函數返回一個陣列，包含物件自身的可列舉屬性和不可列舉屬性，不包含繼承屬性和Symbol屬性。

• Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols(obj)函數返回一個陣列，包含物件自身所有Symbol屬性,不包含其他屬性。

【相關推薦：、】

以上就是es6核心特性是什麼的詳細內容，更多請關注TW511.COM其它相關文章！