es6核心特性有哪些

本篇內容主要講解“es6核心特性有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“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核心特性有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！