ES7及ES8的新特性
阿新 • • 發佈：2018-12-16
其實最近用的比較多的還是ES6，但是瞭解新的技術又是必不可少的，大部分都是通過部落格和掘金去學習，偶爾會看一些視訊並去驗證這樣的結果；
-
ES7新特性:
在Es6的基礎上增加了三項：求冪運算子（**），Array.prototype.includes()方法、函式作用域中嚴格模式的變更。
（1）Array.prototype.include(). 查詢一個值在不在數組裡；接收兩個引數：要搜尋的值和搜尋的開始索引。當第二個引數被傳入時，該方法會從索引處開始往後搜尋（預設索引值為0）。若搜尋值在陣列中存在則返回true，否則返回false。
與indexOf相比較：
更加簡便（從返回值來說一個是下標一個是值）
精確性：兩個NaN被認為是相等的，即使在NaN === NaN結果是false的情況下。這一點和indexOf()的行為不同，indexOf()嚴格使用===判斷。
let demo = [1, NaN, 2, 3]
demo.indexOf(NaN) //-1
demo.includes(NaN) //true
includes()只能判斷簡單型別的資料，對於複雜型別的資料，比如物件型別的陣列，二維陣列，這些，是無法判斷的
（2）求冪運算子（**）
3 ** 2 ／／9。 等同於 Math.pow(3,2); let a = 3; a **= 2 //9
Es8新特性：
（1）非同步函式（Async functions）
由於javascript語言的執行環境是單執行緒的，一般使用回撥函式實現非同步程式設計，假如有多個巢狀的話，程式碼顯得很亂；
Promise,將函式的巢狀改成鏈式呼叫；.then(()=>回撥方法)；
promise的缺點是：請求任務過多時.then也會相對增加；
Generator:非同步程式設計機制，在dva中effects中就是使用的這種；函式執行時，返回的是一個指向內部狀態的指標物件，必須呼叫遍歷器物件的next方法，使得指標移向下一個狀態。也就是說，每次呼叫next方法，內部指標就從函式頭部或上一次停下來的地方開始執行，直到遇到下一個yield表示式（或return語句）為止。換言之，Generator 函式是分段執行的，yield表示式是暫停執行的標記，而next方法可以恢復執行。
function* helloWorldGenerator() {
yield 'hello';
yield 'world';
return 'ending';
}
var hw = helloWorldGenerator();
hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }
缺點：流程管理不方便；
async function asyncFunc(params) {
const result1 = await this.login()
const result2 = await this.getInfo()
}
變體
非同步函式存在以下四種使用形式：
* 函式宣告： async function foo() {}
* 函式表示式： const foo = async function() {}
* 物件的方式： let obj = { async foo() {} }
* 箭頭函式： const foo = async () => {}
並行處理多個非同步結果：
async function asyncFunc() {
const [result1, result2] = await Promise.all([
otherAsyncFunc1(),
otherAsyncFunc2()
]);
console.log(result1, result2);
}
async function asyncFunc() {
try {
await otherAsyncFunc();
} catch (err) {
console.error(err);
}
}
（2）Object.entries()和Object.values()
將一個具有鍵值對的資料結構或是陣列，返回一個二維陣列；
Object.entries({ one: 1, two: 2 }) //[['one', 1], ['two', 2]]
Object.entries([1, 2]) //[['0', 1], ['1', 2]]注意：鍵值對中，如果鍵的值是Symbol，編譯時將會被忽略。例如：
Object.entries({ [Symbol()]: 1, two: 2 }) //[['two', 2]]
進行物件屬性的遍歷：
let obj = { a: 1, b: 2 };
for (let [k,v] of Object.entries(obj)) {
console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`);
}
//輸出結果如下：
'a': 1
'b': 2
Object.values():工作原理和上面很像，只返回鍵值對中屬性值；返回陣列順序也和上面很像；
Object.values({ one: 1, two: 2 }) //[1, 2]
Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b']
（3）字串填充：padStart和padEnd
padStart函式通過填充字串的首部來保證字串達到固定的長度，反之，padEnd是填充字串的尾部來保證字串的長度的。該方法提供了兩個引數：字串目標長度和填充欄位，其中第二個引數可以不填，預設情況下使用空格填充。
'Vue'.padStart(10) //' Vue'
React'.padStart(10, 'Hello') //'HelloReact'
填充函式只有在字元長度小於目標長度時才有效，若字元長度已經等於或小於目標長度時，填充字元不會起作用，而且目標長度如果小於字串本身長度時，字串也不會做截斷處理，只會原樣輸出。
(4)Object.getOwnProentyDescriptors()指定屬性描述符；
該方法會返回目標物件中所有屬性的屬性描述符，該屬性必須是物件自己定義的，不能是從原型鏈繼承來的;第二個引數可以是
該方法返回的描述符，會有兩種型別：資料描述符、存取器描述符。返回結果中包含的鍵可能的值有：configurable、enumerable、value、writable、get、set；
使用過Object.assign()的同學都知道，assign方法只能拷貝一個屬性的值，而不會拷貝它背後的複製方法和取值方法。Object.getOwnPropertyDescriptors()主要是為了解決Object.assign()無法正確拷貝get屬性和set屬性的問題。
http://www.cnblogs.com/zhuanzhuanfe/p/7493433.html。原文地址；
ES7與ES6相比較而言，兩者更加貼近，在ES6基礎上做修改。而ES8新增更多的新特性，通過他人的部落格瞭解還不夠透徹，只是把精華部分摘取出來，自己理解的比較少；