ES6+ 新特性

阮老師ES6  https://es6.ruanyifeng.com/

簡單說一下，ES6是2015年出版的，官方的說法是ECMAScript 2015

ES7----ECMAScript 2016

。。。以次類推

轉載鏈接：https://www.jianshu.com/p/a64a6aa4cd95

ES7

ES7在ES6的基礎上主要添加了兩項內容：

• Array.prototype.includes()方法
• 求冪運算符（**）

Array.prototype.includes()方法

includes() 方法用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。

var array = [1, 2, 3]; console.log(array.includes(2)); // expected output: true var pets = ['cat', 'dog', 'bat']; console.log(pets.includes('cat')); // expected output: true console.log(pets.includes('at')); // expected output: false 

Array.prototype.includes()方法接收兩個參數：

• 要搜索的值
• 搜索的開始索引。

當第二個參數被傳入時，該方法會從索引處開始往后搜索（默認索引值為0）。若搜索值在數組中存在則返回true，否則返回false。 且看下面示例：

['a', 'b', 'c', 'd'].includes('b')         // true
['a', 'b', 'c', 'd'].includes('b', 1)      // true
['a', 'b', 'c', 'd'].includes('b', 2)      // false

乍一看，includes的作用跟數組的indexOf重疊，為什么要特意增加這么一個api呢？主要區別有以下幾點：

• 返回值。看一個函數，先看他們的返回值。indexOf的返回數是值型的，includes的返回值是布爾型，所以在if條件判斷的時候includes要簡單得多，而indexOf 需要多寫一個條件進行判斷。

var ary = [1]; if (ary.indexOf(1) !== -1) { console.log("數組存在1") } if (ary.includes(1)) { console.log("數組存在1") } 

• NaN的判斷。如果數組中有NaN，你又正好需要判斷數組是否有存在NaN，這時你使用indexOf是無法判斷的，你必須使用includes這個方法。

var ary1 = [NaN]; console.log(ary1.indexOf(NaN))//-1 console.log(ary1.includes(NaN))//true 

• 當數組的有空的值的時候，includes會認為空的值是undefined，而indexOf不會。

var ary1 = new Array(3); console.log(ary1.indexOf(undefined));//-1 console.log(ary1.includes(undefined))//true 

求冪運算符（**）

加/減法我們通常都是用其中綴形式，直觀易懂。在ECMAScript2016中，我們可以使用**來替代Math.pow

4 ** 3 // 64 

效果等同於

Math.pow(4,3) 

值得一提的是，作為中綴運算符，**還支持以下操作

let n = 4; n **= 3; // 64

ES8

Async Functions也就是我們常說的Async/Await，相信大家對於這個概念都已經不陌生了。Async/Await是一種用於處理JS異步操作的語法糖，可以幫助我們擺脫回調地獄，編寫更加優雅的代碼。

通俗的理解，async關鍵字的作用是告訴編譯器對於標定的函數要區別對待。當編譯器遇到標定的函數中的await關鍵字時，要暫時停止運行，帶到await標定的函數處理完畢后，再進行相應操作。如果該函數fulfiled了，則返回值是fulfillment value，否則得到的就是reject value。

下面通過拿普通的promise寫法來對比，就很好理解了：

//普通回調

async function asyncFunc() {
const result1 = await otherAsyncFunc1();
console.log(result1);
const result2 = await otherAsyncFunc2();
console.log(result2);
}

// Equivalent to:
function asyncFunc() {
return otherAsyncFunc1()
.then(result1 => {
console.log(result1);
return otherAsyncFunc2();
})
.then(result2 => {
console.log(result2);
});
}
//多個請求回調,Promise.all代表全部執行完成
async function asyncFunc() {
const [result1, result2] = await Promise.all([
otherAsyncFunc1(),
otherAsyncFunc2(),
]);
console.log(result1, result2);
}

// Equivalent to:
function asyncFunc() {
return Promise.all([
otherAsyncFunc1(),
otherAsyncFunc2(),
])
.then([result1, result2] => {
console.log(result1, result2);
});
}

//遍歷數組或者對象的鍵值

Object.values and Object.entries
Object.values() 方法返回一個給定對象自己的所有可枚舉屬性值的數組，值的順序與使用for...in循環的順序相同 ( 區別在於for-in循環枚舉原型鏈中的屬性 )。

//String padding，字符填充
為 String 對象增加了 2 個函數：padStart 和 padEnd。

像它們名字那樣，這幾個函數的主要目的就是填補字符串的首部和尾部，為了使得到的結果字符串的長度能達到給定的長度。你可以通過特定的字符，或者字符串，或者默認的空格填充它。下面是函數的聲明：

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])
這些函數的第一個參數是 targetLength（目標長度），這個是結果字符串的長度。第二個參數是可選的 padString（填充字符），一個用於填充到源字符串的字符串。默認值是空格。

'es8'.padStart(2); // 'es8'
'es8'.padStart(5); // ' es8'
'es8'.padStart(6, 'woof'); // 'wooes8'
'es8'.padStart(14, 'wow'); // 'wowwowwowwoes8'
'es8'.padStart(7, '0'); // '0000es8'

'es8'.padEnd(2); // 'es8'
'es8'.padEnd(5); // 'es8 '
'es8'.padEnd(6, 'woof'); // 'es8woo'
'es8'.padEnd(14, 'wow'); // 'es8wowwowwowwo'
'es8'.padEnd(7, '6'); // 'es86666'

暫時先這樣，待續...