特性：1、let和const關(guān)鍵字，用于聲明變量；2、“for…of”循環(huán)，可迭代數(shù)據(jù)；3、Iterable，是實(shí)現(xiàn)可迭代協(xié)議的任何對(duì)象；4、Generator；5、默認(rèn)參數(shù)；6、解構(gòu)賦值語(yǔ)法，可以將屬性/值從對(duì)象/數(shù)組中取出；7、剩余/展開(kāi)參數(shù)；8、箭頭函數(shù)；9、對(duì)象字面量；10、Class；11、Map/Set/WeakMap/WeakSet數(shù)據(jù)結(jié)構(gòu)；12、Promise。

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

ECMAScript 6.0（以下簡(jiǎn)稱 ES6）是 Javascript 語(yǔ)言的下一代標(biāo)準(zhǔn)，正式發(fā)布與2015年6月。它的目標(biāo)，是使得Javascript語(yǔ)言可以用來(lái)編寫(xiě)復(fù)雜的大型應(yīng)用程序，成為企業(yè)級(jí)開(kāi)發(fā)語(yǔ)言。

ECMAScript 6，即所謂的現(xiàn)代 Javascript，具有強(qiáng)大的功能，例如塊作用域、類(lèi)、箭頭功、生成器以及許多其他有用的功能。

在Vue應(yīng)用開(kāi)發(fā)中使用的所有必要功能來(lái)改善編程體驗(yàn)，提高開(kāi)發(fā)效率及代碼質(zhì)量。通過(guò)Vue CLI的Babel或core-js集成，使開(kāi)發(fā)中的代碼嚴(yán)格按照配置規(guī)范進(jìn)行迭代，有助于團(tuán)隊(duì)協(xié)作。本文介紹幾個(gè)再Vue應(yīng)用開(kāi)發(fā)中常用的ES6的特征。

let/const

ES6最基本的功能：let和const。

let與var類(lèi)似，但使用let聲明的變量的作用域是在聲明它們的塊中。（Block指條件塊，for循環(huán)塊等）

例如，在條件塊中使用let將在塊內(nèi)作用域變量，在塊外不可用。

if (true) {     let foo = "word"; }  console.log(foo); // error

在這里，錯(cuò)誤是一件好事，因?yàn)樗梢苑乐乖谏a(chǎn)過(guò)程中發(fā)生潛在的錯(cuò)誤。

如果在上面的例子中使用var（就像在傳統(tǒng)的Javascript代碼中那樣)而不是let，就不會(huì)出現(xiàn)錯(cuò)誤。

const是另一個(gè)用于聲明變量的ES6關(guān)鍵字。不同之處在于const創(chuàng)建的變量在聲明之后不能更改，這個(gè)特點(diǎn)可以有效的避免BUG的出現(xiàn)，因此在編寫(xiě)代碼過(guò)程中，建議盡量寫(xiě)純函數(shù)（純函數(shù)，就是給定函數(shù)固定的輸入，輸出的結(jié)果就是固定的，不會(huì)受函數(shù)外的變量等的影響）。

例如：

const a = 2021 a = 2020 // error

有幾種創(chuàng)建變量的方法，我們應(yīng)該使用哪一種?

最好的做法是盡可能使用const。只有當(dāng)你需要一個(gè)以后需要更改的變量時(shí)才使用let，比如在for循環(huán)中。

for…of

說(shuō)到循環(huán)，在ES6語(yǔ)法中有一種更簡(jiǎn)單的方法來(lái)編寫(xiě)for循環(huán)，甚至不需要使用let。

例如，一個(gè)傳統(tǒng)的for循環(huán)是這樣的：

const arr = [1, 2, 3];  for (let i = 0; i < arr.length; i++) {     const item = arr[i];     console.log(item); }

在ES6中，非常簡(jiǎn)單：

const arr = [1, 2, 3];  for (const item of arr) {     console.log(item); }

不要與for..in語(yǔ)法混淆；他們是完全不同的東西。 for..in將獲得數(shù)組/對(duì)象中的屬性，而for..of將獲得實(shí)際想要迭代的數(shù)據(jù)。

Iterable

可迭代對(duì)象是實(shí)現(xiàn)可迭代協(xié)議的任何對(duì)象。(協(xié)議只是指需要通過(guò)在對(duì)象中使用特定名稱的特定方法來(lái)滿足的需求)。

例如，下面是一個(gè)實(shí)現(xiàn)了iterable協(xié)議的對(duì)象：

const twice = {     [Symbol.iterator]() {         let i = 0;         const iterator = {             next() {                 if (i < 2) {                     return { value: i++, done: false };                 } else {                     return { value: undefined, done: true };                 }             },         };         return iterator;     }, };

現(xiàn)在可以在for..of循環(huán)中使用此twice對(duì)象：

for(const x of twice){   console.log(x) }

這會(huì)對(duì)twice對(duì)象進(jìn)行兩次循環(huán)，分別得到0和1。

為了創(chuàng)建一個(gè)可迭代對(duì)象，實(shí)際上實(shí)現(xiàn)了兩個(gè)協(xié)議，iterable協(xié)議和iterator協(xié)議。

為了滿足作為可迭代對(duì)象的要求，需要一個(gè)名為[Symbol.iterator]的方法。

const twice = {   [Symbol.iterator]() {     ...   } }

方法名中應(yīng)用了兩個(gè)新的ES6技巧。

首先，Symbol.iterator 一個(gè)內(nèi)置的符號(hào)值，而Symbol是ES6中用于創(chuàng)建唯一標(biāo)簽/標(biāo)識(shí)符的基本類(lèi)型。

其次，包裝屬性鍵的方括號(hào)使它成為一個(gè)動(dòng)態(tài)計(jì)算的鍵。這里的關(guān)鍵是表達(dá)式符號(hào)。迭代器將被求值為，通常不關(guān)心實(shí)際的求值是什么。這個(gè)不重要的細(xì)節(jié)被抽象掉了。

這就是可迭代的協(xié)議?，F(xiàn)在仍然需要處理迭代器協(xié)議來(lái)創(chuàng)建可迭代的對(duì)象，因?yàn)楸仨殢?[Symbol.iterator] 函數(shù)返回一個(gè)迭代器

迭代器協(xié)議更簡(jiǎn)單。只需要一個(gè)對(duì)象有一個(gè)next方法即可返回帶有兩個(gè)鍵的對(duì)象：value和done。當(dāng)要停止迭代時(shí)，只需返回對(duì)象{value：undefined，done：true}。

這是示例中的迭代器：

const iterator = {     next() {         if (i < 2) {             return { value: i++, done: false };         } else {             return { value: undefined, done: true };         }     }, };

總之，有一個(gè)同時(shí)滿足可迭代協(xié)議和迭代器協(xié)議的對(duì)象。如以下代碼：

const twice = {     [Symbol.iterator]() {         let i = 0;         const iterator = {             next() {                 if (i < 2) {                     return { value: i++, done: false };                 } else {                     return { value: undefined, done: true };                 }             },         };         return iterator;     }, };

數(shù)組和字符串可以使用for..of，進(jìn)行迭代。這意味著這些內(nèi)置類(lèi)型包含與上面的類(lèi)似的[Symbol.iterator]方法。

Generator：生成器

與迭代相關(guān)的另一個(gè)功能是生成器。

上面的可迭代代碼依靠閉包來(lái)存儲(chǔ) i 變量。使用 generator 時(shí)，不必?fù)?dān)心自己構(gòu)造閉包：

function* twiceGen() {     let i = 0;     while (i < 2) {         yield i;         i++;     } }  const twice = twiceGen();

該代碼實(shí)現(xiàn)了與可迭代示例相同的行為，但更為簡(jiǎn)單。

可以與for..of完全相同地使用它：

for(const item of twice){   console.log(item) }

如你所見(jiàn)，它是一個(gè)帶有星號(hào)（*）聲明的函數(shù)。它使用yield關(guān)鍵字逐個(gè)抽取值，就像迭代器的next方法一樣。

生成器是一種多功能工具，基本上，它是一種允許暫停/恢復(fù)功能的機(jī)制。不必在for..of中使用上述twice對(duì)象。可以調(diào)用它的next方法。

function* twiceGen() {     const i = 0;     while (i < 2) {         yield i;     } }  const twice = twiceGen();  twice.next().value; // 0

此時(shí)，twiceGen函數(shù)在第一次運(yùn)行while循環(huán)后暫停。如果再次運(yùn)行相同的操作，它將恢復(fù)并播放循環(huán)的第二次運(yùn)行。

twice.next().value; // 1

生成器的妙處在于它還創(chuàng)建了一個(gè)可迭代的迭代器對(duì)象。這就是為什么我們能夠使用for..of（可迭代特權(quán)）迭代兩次并直接調(diào)用其next方法（迭代器特權(quán)）的原因。

Default Parameter：默認(rèn)參數(shù)

可能不會(huì)立即創(chuàng)建自己的迭代器、生成器，所以讓我們來(lái)看看其他一些ES6的獨(dú)創(chuàng)性，它們可以立即使你的代碼更加友好。

就像許多其他編程語(yǔ)言一樣，現(xiàn)在可以為函數(shù)參數(shù)設(shè)置默認(rèn)值。

過(guò)去是這樣實(shí)現(xiàn)默認(rèn)值的：

function addOne(num) {     if (num === undefined) {         num = 0;     }     return num + 1; }  addOne();

現(xiàn)在可以這樣：

function addOne(num = 0) {     return num + 1; }  addOne();

Destructuring Syntax：解構(gòu)語(yǔ)法

解構(gòu)賦值語(yǔ)法是一種 Javascript 表達(dá)式。通過(guò)解構(gòu)賦值, 可以將屬性/值從對(duì)象/數(shù)組中取出，賦值給其他變量。

如果要將對(duì)象傳遞給函數(shù)，則可以輕松選擇對(duì)象的屬性，然后使用ES6分解語(yǔ)法將它們放在單獨(dú)的變量中：

function foo({ a, b }) {     console.log(a, b); // 1, 2 }  foo({ a: 1, b: 2 });

這種解構(gòu)語(yǔ)法的好處是可以避免創(chuàng)建帶有附加代碼行的變量。因此不需要像下面這樣：

function foo(obj) {     const a = obj.a;     const b = obj.b;     console.log(a, b); // 1, 2 }

同樣，還可以在解構(gòu)語(yǔ)法中設(shè)置默認(rèn)值：

function foo({ a = 0, b }) {     console.log(a, b); // 0, 2 }  foo({ b: 2 });

解構(gòu)語(yǔ)法也適用于賦值：

function foo(obj) {     const { a, b } = obj;     console.log(a, b); // 1, 2 }

當(dāng)從參數(shù)以外的地方獲取對(duì)象時(shí)，這也很有用。

function getObj() {     return { a: 1, b: 2 }; }  function foo() {     const { a, b } = getObj();     console.log(a, b); // 1, 2 }

解構(gòu)技巧同樣也適用數(shù)組。

解構(gòu)參數(shù)：

function foo([a, b]) {     console.log(a, b); // 1, 2 }  foo([1, 2, 3]);

解構(gòu)賦值：

function foo(arr) {     const [a, b] = arr;     console.log(a, b); // 1, 2 }

Rest / Spread ：剩余 / 展開(kāi)參數(shù)

在解構(gòu)數(shù)組時(shí)，可以使用 ... 語(yǔ)法來(lái)獲取數(shù)組中的所有其他項(xiàng)。

function foo([a, b, ...c]) {     console.log(c); // [3, 4, 5] }  foo([1, 2, 3, 4, 5]);

c現(xiàn)在是一個(gè)包含自己的數(shù)組，包含了其余的元素：3，4，5。這里的操作就是Rest操作。

這個(gè)語(yǔ)法同樣適用于賦值：

function foo(arr) {     const [a, b, ...c] = arr;     console.log(c); // [3, 4, 5] }  foo([1, 2, 3, 4, 5]);

rest操作符也可以單獨(dú)使用，無(wú)需解構(gòu)：

function foo(...nums) {     console.log(nums); // [1, 2, 3, 4, 5] }  foo(1, 2, 3, 4, 5);

在這里，我們將數(shù)字作為獨(dú)立參數(shù)傳遞，而不是作為單個(gè)數(shù)組傳遞。但是在函數(shù)內(nèi)部，使用rest運(yùn)算符將數(shù)字作為單個(gè)數(shù)組收集。當(dāng)遍歷這些參數(shù)時(shí)，這很有用。

rest語(yǔ)法 ... 與另一個(gè)ES6特性操作符擴(kuò)展完全相同。

例如，如果要將兩個(gè)數(shù)組合并為一個(gè)：

const a = [1, 2]; const b = [3, 4]; const c = [...a, ...b]; console.log(c); // [1, 2, 3, 4]

spread操作符用于將所有項(xiàng)展開(kāi)，并將它們放入不同的數(shù)組中。

spread也適用于對(duì)象：

const obj = { a: 1, b: 2 }; const obj2 = { ...obj, c: 3 }; console.log(obj2); // { a: 1, b: 2, c: 3 }

現(xiàn)在，第二個(gè)對(duì)象除了其自身的屬性外，還應(yīng)包含第一個(gè)對(duì)象的所有內(nèi)容。

Arrow Function：箭頭函數(shù)

ES6提供了創(chuàng)建函數(shù)，對(duì)象和類(lèi)的更簡(jiǎn)單方法。

箭頭函數(shù)表達(dá)式的語(yǔ)法比函數(shù)表達(dá)式更簡(jiǎn)潔，并且沒(méi)有自己的this，arguments，super或new.target。箭頭函數(shù)表達(dá)式更適用于那些本來(lái)需要匿名函數(shù)的地方，并且它不能用作構(gòu)造函數(shù)。

使用箭頭語(yǔ)法來(lái)創(chuàng)建更簡(jiǎn)潔的函數(shù)：

const addOne = (num) => {     return num + 1; };

箭頭語(yǔ)法對(duì)于創(chuàng)建單行函數(shù)更加簡(jiǎn)潔友好。

const addOne = (num) => num + 1;

此函數(shù)將自動(dòng)返回表達(dá)式num +1的求值作為返回值，不需要顯式的使用return關(guān)鍵字。

如果函數(shù)僅接受一個(gè)參數(shù)，甚至可以省略括號(hào)（但是在嚴(yán)格語(yǔ)法上還是建議加上括號(hào)）：

const addOne = num => num + 1;

但是如果沒(méi)有任何參數(shù)，仍然需要一對(duì)空括號(hào)：

const getNum = () => 1;

但是，此語(yǔ)法有一個(gè)警告，如果我們返回的是對(duì)象字面量，則無(wú)法使用，會(huì)報(bào)錯(cuò)：

const getObj = () => { a: 1, b: 2 } // error

這將產(chǎn)生語(yǔ)法錯(cuò)誤，因?yàn)榻馕銎鲗⒓俣ɑɡㄌ?hào)用于函數(shù)塊，而不是對(duì)象字面量。

為了避免這個(gè)錯(cuò)誤，必須將對(duì)象字面量包裝在一對(duì)括號(hào)中：

const getObj = () => ({ a: 1, b: 2 });

另一件需要記住的事情是，this關(guān)鍵字不能在箭頭函數(shù)中使用。它不會(huì)出現(xiàn)錯(cuò)誤；相反，它只會(huì)從周?chē)姆秶峁┫嗤?code>this引用。

function thatOrThis() {     const that = this;     const compare = () => {         console.log(that === this); // true     };     compare(); }  thatOrThis();

以上代碼給出的值則為：true

Object literal extensions：對(duì)象字面量的擴(kuò)展

ES6也提供了一種更簡(jiǎn)單的方法來(lái)創(chuàng)建對(duì)象字面量。

如果在一個(gè)對(duì)象中放入兩個(gè)項(xiàng)目，它們的屬性鍵與變量相同，可以用傳統(tǒng)的Javascript做這樣的事情：

const a = 1; const b = 2; const obj = {     a: a,     b: b, };

但是在ES6中，語(yǔ)法可以更簡(jiǎn)單：

const a = 1;const b = 2;const obj = { a, b };

如果把方法放到對(duì)象字面量中，可以這樣做:

const a = 1; const b = 2; const obj = {     a,     b,     getA() {         return this.a;     },     getB() {         return this.b;     }, };

基本上，沒(méi)有function關(guān)鍵字和冒號(hào)。

Class：類(lèi)

ES6提供了類(lèi)似于其他面向?qū)ο笳Z(yǔ)言的類(lèi)構(gòu)造。現(xiàn)在不必依賴于混淆構(gòu)造函數(shù)和原型方式。

class Person {     constructor(name, hobby) {         this.name = name;         this.hobby = hobby;     }      introduce() {         console.log(`大家好，我的名字叫：${this.name}，我喜歡${this.hobby}。`);     } }  const devpoint = new Person("DevPoint", "coding"); devpoint.introduce();

附帶說(shuō)明，introduce方法中的字符串稱為模板字符串，它是使用反引號(hào)而不是引號(hào)創(chuàng)建的。這樣可以使用美元符號(hào)和大括號(hào)將表達(dá)式插入字符串。

與常規(guī)字符串拼接相比，模板字符串的好處是它可以跨越多行：

const str = `line 1 line 2 line 3 `; console.log(str);

它被稱為模板字符串，因?yàn)樗鼘?duì)實(shí)現(xiàn)模板很有用。

function pStr(text) {     return `<p>${text}</p>`; }  pStr("Hello world"); // <p>Hello world</p>

一個(gè)類(lèi)可以從另一個(gè)類(lèi)繼承（重用現(xiàn)有類(lèi)的代碼）：

class Person {     constructor(name, hobby) {         this.name = name;         this.hobby = hobby;     }      introduce() {         console.log(`大家好，我的名字叫：${this.name}，我喜歡${this.hobby}。`);     } }  class ProfessionalPerson extends Person {     constructor(name, hobby, profession) {         super(name, hobby); // 執(zhí)行 Person 的構(gòu)造函數(shù)         this.profession = profession;     }      introduce() {         super.introduce(); // 調(diào)用 Person 類(lèi)的方法         console.log(`我的職業(yè)是 ${this.profession}。`);     } }  const devpoint = new ProfessionalPerson("DevPoint", "coding", "程序員"); devpoint.introduce();

這里使用extends關(guān)鍵字在兩個(gè)類(lèi)之間創(chuàng)建繼承關(guān)系，其中Person為父類(lèi)。代碼中用了兩次super關(guān)鍵字，第一次是在構(gòu)造函數(shù)中調(diào)用父類(lèi)的構(gòu)造函數(shù)，第二次，像使用對(duì)象一樣使用它來(lái)調(diào)用父類(lèi)的introduce方法。super關(guān)鍵字的行為會(huì)因使用的位置而異。

在構(gòu)造函數(shù)中使用時(shí)，super關(guān)鍵字將單獨(dú)出現(xiàn)，并且必須在使用this關(guān)鍵字之前使用。如下代碼就是有異常的。

class ProfessionalPerson extends Person {     constructor(name, hobby, profession) {         this.profession = profession;    // 這里會(huì)出現(xiàn)異常         super(name, hobby); // 執(zhí)行 Person 的構(gòu)造函數(shù)     }      introduce() {         super.introduce(); // 調(diào)用 Person 類(lèi)的方法         console.log(`我的職業(yè)是 ${this.profession}。`);     } }

Map / Set / WeakMap / WeakSet

ES6新增了兩種數(shù)據(jù)結(jié)構(gòu)：Map和Set

Map是鍵-值對(duì)的集合，并且能夠記住鍵的原始插入順序。

const mapPerson = new Map(); mapPerson.set("name", "DevPoint"); mapPerson.set("profession", "Coding"); const myName = mapPerson.get("name"); console.log(myName); // DevPoint

Map對(duì)象可以使用任何對(duì)象類(lèi)型作為鍵?？雌饋?lái)是不有點(diǎn)像Object，下面我們可以看看他們的比較：

Set對(duì)象就像一個(gè)數(shù)組，但是僅包含唯一項(xiàng)。Set對(duì)象是值的集合，可以按照插入的順序迭代它的元素。 Set中的元素只會(huì)出現(xiàn)一次，即 Set 中的元素是唯一的。

const numbers = new Set(); numbers.add(1); numbers.add(1); console.log(numbers); // Set { 1 }

盡管兩次add是同樣的值，程序本身不會(huì)出現(xiàn)任何異常，但該集合仍然只包含一項(xiàng)。

讓談?wù)剚?lái)學(xué)習(xí)一點(diǎn)更復(fù)雜的知識(shí)，WeakMap和WeakSet。它們分別是Map和Set的弱引用版本。

WeakMap其鍵必須是Object，而值可以是任意的。

WeakSet 對(duì)象是一些對(duì)象值的集合, 并且其中的每個(gè)對(duì)象值都只能出現(xiàn)一次，在WeakSet的集合中是唯一的。

它和 Set 對(duì)象的區(qū)別有兩點(diǎn):

• 與Set相比，WeakSet 只能是對(duì)象的集合，而不能是任何類(lèi)型的任意值。
• WeakSet持弱引用：集合中對(duì)象的引用為弱引用。 如果沒(méi)有其他的對(duì)WeakSet中對(duì)象的引用，那么這些對(duì)象會(huì)被當(dāng)成垃圾回收掉。 這也意味著WeakSet中沒(méi)有存儲(chǔ)當(dāng)前對(duì)象的列表。 正因?yàn)檫@樣，WeakSet 是不可枚舉的。

一旦不再引用WeakMap的鍵，便會(huì)對(duì)其進(jìn)行垃圾回收（由Javascript運(yùn)行時(shí)從內(nèi)存中刪除）。

let key1 = {}; const key2 = {}; const wm = new WeakMap(); wm.set(key1, 1); wm.set(key2, 2); key1 = null; // 取消引用

在key1被取消引用之后，它的對(duì)應(yīng)值將被垃圾回收，意味著它將在未來(lái)的某個(gè)時(shí)間點(diǎn)消失。

同樣，如果將一個(gè)對(duì)象添加到WeakSet中，然后再取消引用它，它也將被垃圾回收。

let item1 = {}; const item2 = {}; const ws = new WeakSet(); ws.add(item1); ws.add(item2); item1 = null; // 取消引用

Promise

Promise 對(duì)象用于表示一個(gè)異步操作的最終完成 (或失敗)及其結(jié)果值。是ES6的一個(gè)常用功能，它是對(duì)傳統(tǒng)函數(shù)回調(diào)模式的改進(jìn)。

一個(gè) Promise 必然處于以下幾種狀態(tài)之一：

• 待定（pending）: 初始狀態(tài)，既沒(méi)有被兌現(xiàn)，也沒(méi)有被拒絕。
• 已兌現(xiàn)（fulfilled）: 意味著操作成功完成。
• 已拒絕（rejected）: 意味著操作失敗。

例如，這是使用傳統(tǒng)回調(diào)的方式：

setTimeout(function () {     const currentTime = new Date();     console.log(currentTime); }, 1000);

這是一個(gè)計(jì)時(shí)器，顯示一秒鐘后的時(shí)間。

這是一個(gè)使用相同setTimeout邏輯的Promise對(duì)象：

const afterOneSecond = new Promise(function (resolve, reject) {     setTimeout(function () {         const currentTime = new Date();         resolve(currentTime);     }, 1000); });

它接受帶有兩個(gè)參數(shù)的函數(shù)：resolve和reject。這兩個(gè)都是當(dāng)有返回值時(shí)可以調(diào)用的函數(shù)。調(diào)用resolve函數(shù)返回一個(gè)值，可以調(diào)用reject函數(shù)返回一個(gè)錯(cuò)誤。

然后，可以使用then語(yǔ)法將回調(diào)函數(shù)附加到這個(gè)afteronessecond對(duì)象上:

afterOneSecond.then((t) => console.log(t));

promise相對(duì)于傳統(tǒng)回調(diào)的好處是promise對(duì)象可以被傳遞。因此，在設(shè)置promise之后，可以自由地將它發(fā)送到其他地方，以處理計(jì)時(shí)器解析后要做的事情。

另一個(gè)很酷的事情是，promise可以與多個(gè)then子句鏈接在一起，即promise的鏈?zhǔn)秸{(diào)用。

afterOneSecond.then((t) => t.getTime())               .then((time) => console.log(time));

每個(gè)then子句將其值作為參數(shù)返回到下一個(gè)then子句。

實(shí)用方法

下面就來(lái)介紹在VUE中，比較實(shí)用的ES6的方法或?qū)傩浴?/p>

Object.assign()

Object.assign() 方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象分配到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。提供了一種簡(jiǎn)單的方法來(lái)淺克隆現(xiàn)有對(duì)象。

const obj1 = { a: 1 } const obj2 = Object.assign({}, obj1)

String.prototype.repeat()

構(gòu)造并返回一個(gè)新字符串，該字符串包含被連接在一起的指定數(shù)量的字符串的副本。

const str = "DevPoint ".repeat(3);console.log(str); // DevPoint DevPoint DevPoint

String.prototype.startsWith()

用來(lái)判斷當(dāng)前字符串是否以另外一個(gè)給定的子字符串開(kāi)頭（區(qū)分大小寫(xiě)），并根據(jù)判斷結(jié)果返回 true 或 false。

const str = "DevPoint".startsWith("D"); const str2 = "DevPoint".startsWith("d"); console.log(str); // true console.log(str2); // false

String.prototype.endsWith()

用來(lái)判斷當(dāng)前字符串是否是以另外一個(gè)給定的子字符串“結(jié)尾”的，根據(jù)判斷結(jié)果返回 true 或 false。

const str = "DevPoint".endsWith("t");  console.log(str); // true

String.prototype.includes()

用于判斷一個(gè)字符串是否包含在另一個(gè)字符串中，根據(jù)情況返回 true 或 false。

const str = "DevPoint".includes("P"); console.log(str); // true

Array.prototype.find()

返回?cái)?shù)組中滿足提供的過(guò)濾函數(shù)的第一個(gè)元素的值，否則返回 undefined。

const arrNumbers = [5, 12, 8, 130, 44]; const foundNumbers = arrNumbers.find((number) => number > 10); console.log(foundNumbers);   // 12是數(shù)組第一個(gè)大于10的數(shù)

Function.name

這不是方法而是屬性，返回函數(shù)實(shí)例的名稱，每個(gè)函數(shù)都有一個(gè)name屬性，該屬性提供字符串形式的函數(shù)名稱

// setTimeout.name; // "setTimeout"  const weather = () => {     console.log("今天天氣真好！"); }; const devpoint = () => {};  // 限制回到函數(shù)的名稱 const enter = (callback) => {     const accessName = ["weather"];     if (accessName.includes(callback.name)) {         callback();     } }; enter(devpoint); enter(weather);

上述代碼只執(zhí)行了函數(shù) weather。

總結(jié)

ES6的新特征，某種程度上代表的Javascript在未來(lái)的態(tài)度，這些新的特征讓我迫不及待應(yīng)用到項(xiàng)目中，不斷接受新挑戰(zhàn)，提升自己技能。

（學(xué)習(xí)視頻分享：vuejs入門(mén)教程、編程基礎(chǔ)視頻）