本篇內(nèi)容主要講解“es6核心特性有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“es6核心特性有哪些”吧!

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、個(gè)舊ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的個(gè)舊網(wǎng)站制作公司

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

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

ES6核心特性

1、類 Class

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

• 類名首字母使用大寫。

• 實(shí)例化類必須使用 New 關(guān)鍵字。

• 簡(jiǎn)化面向?qū)ο蟮?code>封裝、繼承、多態(tài)。

• 關(guān)鍵字 extends 可以用于創(chuàng)建一個(gè)子類。

• 類的 Constructor 函數(shù)，可以接收實(shí)參，并返回實(shí)例對(duì)象。

• 子類繼承父類后，可以調(diào)用父類的方法，也可重寫父類的方法（優(yōu)先調(diào)用）。

• 關(guān)鍵字 super 用于訪問和調(diào)用對(duì)象父類上的函數(shù)，構(gòu)造函數(shù)和普通函數(shù)皆可。

• 使用 New 創(chuàng)建實(shí)例時(shí)會(huì)自動(dòng)調(diào)用 Constructor 函數(shù)，如果不寫此函數(shù)，類函數(shù)會(huì)自動(dòng)生成。

• 【注】子類在構(gòu)造函數(shù)中使用super，必須放到 this 前面，即先調(diào)用父類的構(gòu)造方法，再使用子類構(gòu)造方法。

// 1.使用Class關(guān)鍵字創(chuàng)建類
class 類名 {
    // 自有屬性
    constructor(形參1, 形參2, ...) {
        this.屬性名1 = 形參1;
        this.屬性名2 = 形參2;
        ...
    }
    // 共有屬性
    init() {
        函數(shù)體;
    }
    ...
}

// 2.利用類結(jié)合New關(guān)鍵字實(shí)例化對(duì)象
let Object = new 類名(實(shí)參1, 實(shí)參2, ...);

// 3.在已有類基礎(chǔ)上創(chuàng)建子類
class 子類 extends 類名 {
    // 自有屬性（與父類相同）
    constructor(形參1, 形參2, 新形參1...) {
        //super函數(shù)調(diào)用父類的constructor
        super(形參1, 形參2, ...);
        // 子類新增屬性需要單獨(dú)定義
        this.新屬性1 = 新形參1;
        ...
    }
    // 共有屬性（子類函數(shù)位于自身父級(jí)原型上，優(yōu)先調(diào)用，父類同名函數(shù)在更上層原型鏈上)
    init() {
        函數(shù)體;
    }
    ...
}

2、箭頭函數(shù)

• 箭頭函數(shù)用于簡(jiǎn)化回調(diào)函數(shù)的書寫。

• 事件中簡(jiǎn)化箭頭函數(shù)需要注意 this 指向?yàn)?window。

• 操作方法：省略function，在 () 和 {} 間添加 =>，單形參省略 ()，單語(yǔ)句函數(shù)體省略 {}，若單語(yǔ)句為 return 語(yǔ)句直接省略 {} 和 return 。

• 箭頭函數(shù)可以與變量解構(gòu)結(jié)合使用。

• 由于大括號(hào)被解釋為代碼塊，如果箭頭函數(shù)直接返回對(duì)象，必須在對(duì)象外面加.上括號(hào)，否則會(huì)報(bào)錯(cuò)。

注意事項(xiàng)

• 箭頭函數(shù)沒有自己的this對(duì)象。

• 無法使用yield命令，因此箭頭函數(shù)不能用作Generator函數(shù)。

• 無法當(dāng)作構(gòu)造函數(shù)，即不能對(duì)箭頭函數(shù)使用new命令，否則報(bào)錯(cuò)。

• 無法使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在，可以用rest參數(shù)代替。

• 第一個(gè)場(chǎng)合是定義對(duì)象的方法，且該方法內(nèi)部包括this。

• 第二個(gè)場(chǎng)合是需要?jiǎng)討B(tài)this的時(shí)候，也不應(yīng)使用箭頭函數(shù)。

• 箭頭函數(shù)內(nèi)部，還可以再使用箭頭函數(shù)。下面是一 個(gè)ES5語(yǔ)法的多重嵌套函數(shù)。

3、解構(gòu)賦值

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

數(shù)組解構(gòu)賦值

• 如果等號(hào)的右邊數(shù)據(jù)是不可遍歷結(jié)構(gòu)則會(huì)報(bào)錯(cuò)。

• 完全解構(gòu)：等號(hào)左右兩邊的結(jié)構(gòu)完全相同，就會(huì)解析結(jié)構(gòu)一一對(duì)應(yīng)賦值。

• 不完全解構(gòu)：等號(hào)左邊的模式，只匹配一部分的等號(hào)右邊的數(shù)組，依舊可以解構(gòu)成功。

• 解構(gòu)賦值允許指定默認(rèn)值，ES6內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）判斷某一位置是否有值，只有數(shù)組成員嚴(yán)格等于 undefined 默認(rèn)值才會(huì)生效。

對(duì)象解構(gòu)賦值

• 如果解構(gòu)失敗，變量的值等于 undefined。

• 對(duì)象屬性沒有次序，但變量必須與屬性同名，才能解析到正確的值。

• 對(duì)象解構(gòu)可以指定默認(rèn)值，默認(rèn)值生效的條件是對(duì)象的屬性值嚴(yán)格等于undefined。

• 對(duì)象解構(gòu)時(shí)，由于JavaScript引擎會(huì)將{}理解成一個(gè)代碼塊，從而發(fā)生語(yǔ)法錯(cuò)誤，需要將整個(gè)解構(gòu)賦值語(yǔ)句放在圓括號(hào)()里面，即可正確執(zhí)行。

字符串解構(gòu)賦值

• 字符串也支持解構(gòu)賦值，此時(shí)字符串被轉(zhuǎn)換成了類數(shù)組對(duì)象。

• 類數(shù)組對(duì)象都有一個(gè)Length屬性，因此可以對(duì)這個(gè)屬性解構(gòu)賦值。

函數(shù)參數(shù)解構(gòu)賦值

// 函數(shù)參數(shù)支持解構(gòu)賦值
function sum([x, y]) {
    return x + y;
}

// 傳入?yún)?shù)時(shí)，數(shù)組參數(shù)解構(gòu)為x與y
sum([1, 2]);

圓括號(hào)使用注意

• 函數(shù)參數(shù)禁用圓括號(hào)。

• 變量聲明語(yǔ)句禁用圓括號(hào)。

• 賦值語(yǔ)句的模式匹配部分禁用圓括號(hào)。

• 只有賦值語(yǔ)句的非模式匹配部分，可以使用圓括號(hào)。

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

• 優(yōu)點(diǎn)，支持Break，Continue 和 Return關(guān)鍵字， for-of循環(huán)用于遍歷數(shù)據(jù)、數(shù)組、類數(shù)組對(duì)象。

• 缺點(diǎn)，沒有提供下標(biāo)，不能修改原數(shù)組，只能遍歷索引數(shù)組，不能遍歷 Hash 數(shù)組（對(duì)象）。

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

Iterator

一種新的遍歷機(jī)制，擁有兩個(gè)核心。

1. 迭代器是一個(gè)接口，能快捷的訪問數(shù)據(jù)，通過Symbol.iterator來創(chuàng)建迭代器，通過迭代器的next()方法獲取迭代之后的結(jié)果。

2. 迭代器是用于遍歷數(shù)據(jù)結(jié)構(gòu)的一個(gè)指針（類似于數(shù)據(jù)庫(kù)的游標(biāo)）

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

Number.isInteger()

• Number.isInteger()，用來判斷數(shù)值是否為整數(shù)。

• 如果參數(shù)不是數(shù)值返回false。

• JavaScript內(nèi)部整數(shù)和浮點(diǎn)數(shù)采用同樣的儲(chǔ)存方法，所以25和25.0被視為同一個(gè)值。

• JavaScript數(shù)值存儲(chǔ)為64位雙精度格式，數(shù)值精度最多可以達(dá)到53個(gè)二進(jìn)制位(1個(gè)隱藏位與52個(gè)有效位)，如果數(shù)值的精度超過這個(gè)限度，第54位及后面的位就會(huì)被丟棄，方法失效。

Math.trunc()

• Math.trunc()方法用于去除一個(gè)數(shù)的小數(shù)部分，返回整數(shù)部分。

• 對(duì)于非數(shù)值，Math.trunc()內(nèi)部使用Number方法將其先轉(zhuǎn)為數(shù)值。

• 對(duì)于空值和無法截取整數(shù)的值，返回NaN。

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

Math.sign()

• Math. sign()方法用來判斷一個(gè)數(shù)到底是正數(shù)、負(fù)數(shù)、還是零。

• 如果參數(shù)是非數(shù)值，會(huì)自動(dòng)轉(zhuǎn)為數(shù)值，對(duì)于無法轉(zhuǎn)為數(shù)值的值，會(huì)返回NaN。

• 它會(huì)返回五種值，參數(shù)為正數(shù)返回+1，參數(shù)為負(fù)數(shù)返回-1，參數(shù)為0返回0，參數(shù)為-0返回-0，其他值返回NaN。

6、字符串新增方法

模板字符串

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

模板字符串（template string）是增強(qiáng)版的字符串，用反引號(hào)標(biāo)識(shí)，可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。

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

includes()、startsWith()、endsWith()

• includes()，返回布爾值，表示是否找到了參數(shù)字符串。

• startsWith()，返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。

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

padStart()、padEnd()

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

• padstart() 和 padEnd() 共接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是字符串補(bǔ)全生效的最大長(zhǎng)度第二個(gè)參數(shù)是用來補(bǔ)全的字符串，如果省略第二個(gè)參數(shù)，默認(rèn)使用空格補(bǔ)全長(zhǎng)度。

• 如果原字符串的長(zhǎng)度等于或大于最大長(zhǎng)度，則字符串補(bǔ)全不生效，返回原字符串。

• 如果用來補(bǔ)全的字符串與原字符串兩者的長(zhǎng)度之和超過了最大長(zhǎng)度，則會(huì)截去超出位數(shù)的補(bǔ)全字符串。

• padstart()的常見用途是為數(shù)值補(bǔ)全指定位數(shù)，也可以用于提示字符串格式。

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

trimStart()、trimEnd()

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

repeat()

• repeat方法表示將原字符串重復(fù)n次，返回一個(gè)新字符串。

replaceAll()

ES2021引入了replaceAll()方法，可以一次性替換所有匹配，它的用法與 replace()相同，返回一個(gè)新字符串，不會(huì)改變?cè)址?/p>

7、對(duì)象新增方法

• 在ES6中，可以直接在對(duì)象中寫入變量，key相當(dāng)于變量名，value相當(dāng)于變量值，并且可以直接省略value，通過key表示一個(gè)對(duì)象的完整屬性。

• 除了屬性可以簡(jiǎn)寫，函數(shù)也可以簡(jiǎn)寫，即省略掉關(guān)鍵字function。

Object.is()

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

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

Object.assign()

• object. assign()方法用于對(duì)象的合并,將源對(duì)象(source) 的所有可枚舉屬性,復(fù)制到目標(biāo)對(duì)象(target) 。

• obiect. assign()方法的第一個(gè)參數(shù)是目標(biāo)對(duì)象.后面的參數(shù)都是源對(duì)象。注意，如果目標(biāo)對(duì)象與源對(duì)象有，同名屬性，或多個(gè)源對(duì)象有同名屬性，則后面的屬性會(huì)覆蓋前面的屬性。

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

Array.from()

• Array.from()用于將類數(shù)組對(duì)象和可遍歷對(duì)象（包括Set和Map）轉(zhuǎn)為真正的數(shù)組。

• Array.from()方法還可以接受第二個(gè)參數(shù)，作用類似于數(shù)組的map方法，用來對(duì)每個(gè)元素進(jìn)行處理，將處理后的值放入返回的數(shù)組。

Array.of()

• Array.of()用于將一組值轉(zhuǎn)換為數(shù)組。

• Array. of()返回參數(shù)值組成的數(shù)組，如果沒有參數(shù)就返回一個(gè)空數(shù)組。

• 此方法可以彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()因?yàn)閰?shù)個(gè)數(shù)的不同的差異。

• Array.of()基本上可以替代Array()或new Array()，它不存在由于參數(shù)不同而導(dǎo)致的重載。

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

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

• fill()方法使用給定值，填充一個(gè)數(shù)組。

• 用于空數(shù)組的初始化非常方便。數(shù)組中已有的元素，會(huì)被全部抹去。

• 方法支持第二個(gè)和第三個(gè)參數(shù)，用于指定填充的起始位置和結(jié)束位置。

• 如果填充的類型為對(duì)象，那被賦值的是同一個(gè)內(nèi)存地址的對(duì)象，而不是深拷貝對(duì)象。

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

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

findIndex()

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

includes()

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

9、Let & Const

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

Let

• 語(yǔ)法：let 變量名 = 變量值;

• let禁止在相同作用域內(nèi)重復(fù)聲明同一個(gè)變量，所以不能在函數(shù)內(nèi)部重新聲明參數(shù)。

• let聲明的變量只在 let 命令所在的代碼塊內(nèi)有效，帶有{塊級(jí)作用域}，不會(huì)導(dǎo)致聲明提升，可以記錄觸發(fā)鼠標(biāo)事件元素的下標(biāo)。

Const

• 語(yǔ)法：const 常量名 = 常量值;

• 常量不占內(nèi)存空間，常量名一般使用純大寫。

• const聲明變量必須立即初始化，不能留到以后賦值。

• const聲明的常量只在所在的塊級(jí)作用域內(nèi)有效，帶有{塊級(jí)作用域}，不會(huì)導(dǎo)致聲明提升，同樣存在暫時(shí)性死區(qū)，且同一常量禁止重復(fù)聲明，常量值無法改變。

• const聲明的變量，可以保證變量的內(nèi)存地址不變，對(duì)于簡(jiǎn)單類型的數(shù)據(jù)來說相當(dāng)于常量，對(duì)于引用類型的數(shù)據(jù)只能保證其內(nèi)存地址中指向?qū)嶋H數(shù)據(jù)的指針不變，而無法保證數(shù)據(jù)結(jié)構(gòu)不變，將對(duì)象聲明為常量需要特別注意！

暫時(shí)性死區(qū)

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

10、模塊化開發(fā)

• 用于分工合作，每一個(gè)js都是一個(gè)模塊，每個(gè)工程師都可以單獨(dú)開發(fā)自己的模塊，主模塊最后引入調(diào)用

• 1、子模塊要公開暴露
  export var obj={};
  2、主模塊引入并且使用
  import {obj as 別名} from “./文件路徑”
  3、HTML頁(yè)面引入時(shí)需要將type更換為module

• ES6模塊功能主要有兩個(gè)命令構(gòu)成，export和import，export用于規(guī)定獨(dú)立的對(duì)外接口，import用于輸入其他模塊提供的功能，一個(gè)模塊就是一個(gè)獨(dú)立的文件，引入模塊的script標(biāo)簽的type要設(shè)置為module。

11、擴(kuò)展運(yùn)算符 & Rest運(yùn)算符

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

擴(kuò)展運(yùn)算符

• 擴(kuò)展運(yùn)算符用3個(gè)點(diǎn)表示...。

• 作用：將數(shù)組或類數(shù)組對(duì)象轉(zhuǎn)換為用逗號(hào)分隔的值序列，基本用法是拆解數(shù)組和字符串。

// 1.擴(kuò)展運(yùn)算符代替apply()函數(shù)獲取數(shù)組最大值
let arr = [1, 4, 2, 5, 3];

// apply()方法
Math.max.apply(null, arr);
// 擴(kuò)展運(yùn)算符方法
Math.max(...arr);

// 2.擴(kuò)展運(yùn)算符代替concat()函數(shù)合并數(shù)組
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// concat()方法
arr1.concat(arr2);
// 擴(kuò)展運(yùn)算符方法
[...arr1, ...arr2];

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

• Rest運(yùn)算符使用3個(gè)點(diǎn)表示...。

• 作用：與擴(kuò)展運(yùn)算符相反，用于將以逗號(hào)分隔的值序列轉(zhuǎn)換成數(shù)組。

• 使用rest運(yùn)算符進(jìn)行解構(gòu)時(shí)，res運(yùn)算符對(duì)應(yīng)的變量必須放在最后一位，否則變量無法識(shí)別讀取多少個(gè)數(shù)值，就會(huì)拋出錯(cuò)誤。

• 函數(shù)的參數(shù)是一個(gè)使用逗號(hào)分隔的值序列，可以使用rest運(yùn)算符轉(zhuǎn)換成數(shù)組以代替arguments的使用。

// 1.Rest運(yùn)算符與解構(gòu)組合使用拆分?jǐn)?shù)組
let arr = [1, 2, 3, 4, 5];
// 將數(shù)組拆分，第一個(gè)元素賦值到arr1，其余元素賦值到arr2
let [arr1, ...arr2] = arr;
// 將數(shù)組拆分，前兩個(gè)元素賦值到arr1與arr2，其余元素賦值到arr3
let [arr1, arr2, ...arr3] = arr;

// 2.Rest運(yùn)算符代替arguments
function sum(...arg) {
    // 獲取形參數(shù)組
    console.log(arg);
}
// 傳入形參
sum(形參1, 形參2, ...);

區(qū)分兩種運(yùn)算符

• 擴(kuò)展運(yùn)算符和rest運(yùn)算符互為逆運(yùn)算，擴(kuò)展運(yùn)算符是將數(shù)組分割成獨(dú)立的序列，而rest運(yùn)算符是將獨(dú)立的序列合并成一個(gè)數(shù)組。

• 當(dāng)三個(gè)點(diǎn)出現(xiàn)在函數(shù)形參上或賦值等號(hào)左側(cè)，則為rest運(yùn)算符。

• 當(dāng)三個(gè)點(diǎn)出現(xiàn)在函數(shù)實(shí)參上或賦值等號(hào)右側(cè)，則為擴(kuò)展運(yùn)算符。

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

• Let聲明的變量，存在塊級(jí)作用域，不存在變量提升，值可更改。

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

• Const聲明的常量，存在塊級(jí)作用域，值不可更改。

拓展 | ES6遍歷對(duì)象屬性五種方法

• for…in

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

• Object.keys(obj)

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

• Reflect.ownKeys(obj)

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

• Object.getOwnPropertyNames(obj)

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

• Object.getOwnPropertySymbols(obj)

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

到此，相信大家對(duì)“es6核心特性有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！