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

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

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

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

ES6核心特性

1、類 Class

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

• 類名首字母使用大寫。

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

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

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

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

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

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

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

• 【注】子類在構(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)鍵字實例化對象
let Object = new 類名(實參1, 實參2, ...);

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

2、箭頭函數(shù)

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

• 事件中簡化箭頭函數(shù)需要注意 this 指向為 window。

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

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

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

注意事項

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

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

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

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

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

• 第二個場合是需要動態(tài)this的時候，也不應(yīng)使用箭頭函數(shù)。

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

3、解構(gòu)賦值

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

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

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

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

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

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

對象解構(gòu)賦值

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

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

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

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

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

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

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

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

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

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

圓括號使用注意

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

• 變量聲明語句禁用圓括號。

• 賦值語句的模式匹配部分禁用圓括號。

• 只有賦值語句的非模式匹配部分，可以使用圓括號。

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

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

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

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

Iterator

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

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

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

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

Number.isInteger()

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

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

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

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

Math.trunc()

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

• 對于非數(shù)值，Math.trunc()內(nèi)部使用Number方法將其先轉(zhuǎn)為數(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ù)值，會自動轉(zhuǎn)為數(shù)值，對于無法轉(zhuǎn)為數(shù)值的值，會返回NaN。

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

6、字符串新增方法

模板字符串

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

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

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

includes()、startsWith()、endsWith()

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

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

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

padStart()、padEnd()

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

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

• 如果原字符串的長度等于或大于最大長度，則字符串補全不生效，返回原字符串。

• 如果用來補全的字符串與原字符串兩者的長度之和超過了最大長度，則會截去超出位數(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方法表示將原字符串重復(fù)n次，返回一個新字符串。

replaceAll()

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

7、對象新增方法

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

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

Object.is()

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

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

Object.assign()

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

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

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

Array.from()

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

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

Array.of()

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

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

• 此方法可以彌補數(shù)組構(gòu)造函數(shù)Array()因為參數(shù)個數(shù)的不同的差異。

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

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

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

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

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

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

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

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

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

findIndex()

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

includes()

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

9、Let & Const

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

Let

• 語法：let 變量名 = 變量值;

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

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

Const

• 語法：const 常量名 = 常量值;

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

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

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

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

暫時性死區(qū)

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

10、模塊化開發(fā)

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

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

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

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

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

擴展運算符

• 擴展運算符用3個點表示...。

• 作用：將數(shù)組或類數(shù)組對象轉(zhuǎn)換為用逗號分隔的值序列，基本用法是拆解數(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個點表示...。

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

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

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

// 1.Rest運算符與解構(gòu)組合使用拆分?jǐn)?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ù)組。

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

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

拓展 | 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屬性,不包含其他屬性。

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

網(wǎng)站標(biāo)題：es6核心特性有哪些
瀏覽路徑：http://jinyejixie.com/article36/podopg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、網(wǎng)站排名、、標(biāo)簽優(yōu)化、服務(wù)器托管、全網(wǎng)營銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)