es7新特性
Es7在ES6的基礎(chǔ)上添加了三項(xiàng)內(nèi)容：

*求冪運(yùn)算符 （**）
Array.prototype.includes()方法.
函數(shù)作用域中嚴(yán)格模式的變更

Array.prototype.includes( )

includes()的作用，是查找一個值在不在數(shù)組里，若在，則返回true，反之返回false

Array.prototype.includes()方法接收兩個參數(shù)：要搜索的值和搜索的開始索引。當(dāng)?shù)诙€參數(shù)被傳入時，該方法會從索引處開始往后

搜索（默認(rèn)索引值為0）。若搜索值在數(shù)組中存在則返回true，否則返回false。

includes()方法有一點(diǎn)不同，兩個NaN被認(rèn)為是相等的，即使在NaN === NaN結(jié)果是false的情況下。
這一點(diǎn)和indexOf()的行為不同，indexOf()嚴(yán)格使用===判斷
includes()還有一個怪異的點(diǎn)需要指出，在判斷 +0 與 -0 時，被認(rèn)為是相同的。
在這一點(diǎn)上indexOf()與includes()的處理結(jié)果是一樣的，前者同樣會返回 +0 的索引值

es8新特性
異步函數(shù)(async function)
由于javascript是單線程的
做法通常是通過回調(diào)函數(shù)實(shí)現(xiàn)JavaScript的異步編程
假如存在還有更多的請求操作就會出現(xiàn)多層嵌套代碼就會亂成一團(tuán) 這種情況就被稱之為回調(diào)函數(shù)地獄
于是promise被提出了它將回調(diào)函數(shù)的嵌套改成了鏈?zhǔn)秸{(diào)用

promise的最大問題是代碼冗余 ，請求任務(wù)時一堆的then,也使原來的語義變得很不清楚此時我們可以引入另外一種異步編程的機(jī)制：generator

Es8引入了async函數(shù)使得異步操作變得更加方便
實(shí)例如下：

Async function asyncFunc(params){const result1 = await this.login()const result2 = await this.getInfo() }

異步函數(shù)存在以下四種使用形式：
函數(shù)聲明： async function foo() {}
函數(shù)表達(dá)式： const foo = async function() {}
對象的方式： let obj = { async foo() {} }
箭頭函數(shù)： const foo = async () => {}

處理單個異步結(jié)果：

async function asyncFunc(){const result = await otherAsyncFunc();console.log(result) }

順序處理多個異步結(jié)果：

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

并行處理多個異步結(jié)果：

async function asyncFunc(){const [result1,result2] = await.Promise.all({otherAsyncFunc1(),otherAsyncFunc2()})console.log(result1,result2); }

處理錯誤：

Async function asyncFunc(){try{Await otherAsyncFunc(); }catch(err){console.log(err)} }

Object.entries( )和Object.values( )
Object.entries( )
1.目標(biāo)對象是對象時，則每一個鍵值對都將會編譯成一個具有兩個元素的數(shù)組
2.目標(biāo)對象是數(shù)組時，則會將數(shù)組的下標(biāo)作為鍵值返回

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]]

Object.entries()返回的數(shù)組的順序與for-in循環(huán)保持一致，即如果對象的key值是數(shù)字，則返回值會對key值進(jìn)行排序，返回的是排序后的結(jié)果。例如：
Object.entries({ 3: 'a', 4: 'b', 1: 'c' }) //[['1', 'c'], ['3', 'a'], ['4', 'b']]

使用Object.entries()，我們還可以進(jìn)行對象屬性的遍歷。例如

let obj = { one: 1, two: 2 }; for (let [k,v] of Object.entries(obj)) {console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`); }

//輸出結(jié)果如下：
'one': 1
'two': 2

Object.values()
它的工作原理跟Object.entries()很像，顧名思義，它只返回自己的鍵值對中屬性的值。它返回的數(shù)組順序，也跟Object.entries()保持一致。

Object.values({ one: 1, two: 2 }) //[1, 2]
Object.values({ 3: 'a', 4: 'b', 1: 'c' }) //['c', 'a', 'b']

字符串填充：padStart和padEnd
ES8提供了新的字符串方法-padStart和padEnd。padStart函數(shù)通過填充字符串的首部來保證字符串達(dá)到固定的長度，反之，padEnd是填充字符串的尾部來保證字符串的長度的。該方法提供了兩個參數(shù)：字符串目標(biāo)長度和填充字段，其中第二個參數(shù)可以不填，默認(rèn)情況下使用空格填充。

'Vue'.padStart(10) //' Vue' 'React'.padStart(10) //' React' 'JavaScript'.padStart(10) //'JavaScript'

可以看出，多個數(shù)據(jù)如果都采用同樣長度的padStart，相當(dāng)于將呈現(xiàn)內(nèi)容右對齊。
上面示例中我們只定義了第一個參數(shù)，那么我們現(xiàn)在來看看第二個參數(shù)，我們可以指定字符串來代替空字符串。

'Vue'.padStart(10, '_*') //'_*_*_*_Vue' 'React'.padStart(10, 'Hello') //'HelloReact' 'JavaScript'.padStart(10, 'Hi') //'JavaScript' 'JavaScript'.padStart(8, 'Hi') //'JavaScript'

從上面結(jié)果來看，填充函數(shù)只有在字符長度小于目標(biāo)長度時才有效，若字符長度已經(jīng)等于或小于目標(biāo)長度時，填充字符不會起作用，而且目標(biāo)長度如果小于字符串本身長度時，字符串也不會做截斷處理，只會原樣輸出。
padEnd函數(shù)作用同padStart，只不過它是從字符串尾部做填充。來看個小例子：

'Vue'.padEnd(10, '_*') //'Vue_*_*_*_' 'React'.padEnd(10, 'Hello') //'ReactHello' 'JavaScript'.padEnd(10, 'Hi') //'JavaScript' 'JavaScript'.padEnd(8, 'Hi') //'JavaScript'

Object.getOwnPropertyDescriptors()
顧名思義，該方法會返回目標(biāo)對象中所有屬性的屬性描述符，該屬性必須是對象自己定義的，不能是從原型鏈繼承來的。先來看個它的基本用法：

let obj = {id: 1,name: 'test',get gender() {console.log('gender')},set grade(g) {console.log(g)} } Object.getOwnPropertyDescriptors(obj)

//輸出結(jié)果為：

{gender: {configurable: true,enumerable: true,get: f gender(),set: undefined},grade: {configurable: true,enumerable: true,get: undefined,set: f grade(g)},id: {configurable: true,enumerable: true,value: 1,writable: true},name: {configurable: true,enumerable: true,value: 'test',writable: true} }

方法還提供了第二個參數(shù)，用來獲取指定屬性的屬性描述符。

let obj = {id: 1,name: 'test',get gender() {console.log('gender')},set grade(g) {console.log(g)} } Object.getOwnPropertyDescriptors(obj, 'id')

//輸出結(jié)果為：

{id: {configurable: true,enumerable: true,value: 1,writable: true} }

由上述例子可知，該方法返回的描述符，會有兩種類型：數(shù)據(jù)描述符、存取器描述符。返回結(jié)果中包含的鍵可能的值有：configurable、enumerable、value、writable、get、set。
使用過Object.assign()的同學(xué)都知道，assign方法只能拷貝一個屬性的值，而不會拷貝它背后的復(fù)制方法和取值方法。Object.getOwnPropertyDescriptors()主要是為了解決Object.assign()無法正確拷貝get屬性和set屬性的問題。

let obj = {id: 1,name: 'test',get gender() {console.log('gender')} } Object.assign(obj)

//輸出結(jié)果為：

{gender: undefinedid: 1,name: 'test' }

此時，Object.getOwnPropertyDescriptors方法配合Object.defineProperties方法，就可以實(shí)現(xiàn)正確拷貝。

let obj = {id: 1,name: 'test',get gender() {console.log('gender')} } let obj1 = {} Object.defineProperties(obj1, Object.getOwnPropertyDescriptors(obj)) Object.getOwnPropertyDescriptors(obj1)

//輸出結(jié)果為：

{gender: {configurable: true,enumerable: true,get: f gender(),set: undefined},id: {configurable: true,enumerable: true,value: 1,writable: true},name: {configurable: true,enumerable: true,value: 'test',writable: true} }

上述代碼演示了，我們?nèi)绾蝸砜截愐粋€屬性值為賦值方法或者取值方法的對象。更多Object.getOwnPropertyDescriptors的使用細(xì)則，可參見阮一峰的博客文章，鏈接奉上：http://es6.ruanyifeng.com/#docs/object#Object-getOwnPropertyDescriptors
共享內(nèi)存和原子（Shared memory and atomics）
ES8引入了兩部分內(nèi)容：新的構(gòu)造函數(shù)SharedArrayBuffer、具有輔助函數(shù)的命名空間對象Atomics。共享內(nèi)存允許多個線程并發(fā)讀寫數(shù)據(jù)，而原子操作則能夠進(jìn)行并發(fā)控制，確保多個存在競爭關(guān)系的線程順序執(zhí)行。
共享內(nèi)存和原子也稱為共享陣列緩沖區(qū)，它是更高級的并發(fā)抽象的基本構(gòu)建塊。它允許在多個工作者和主線程之間共享SharedArrayBuffer對象的字節(jié)（緩沖區(qū)是共享的，用以訪問字節(jié)，將其包裝在類型化的數(shù)組中）。這種共享有兩個好處：
可以更快地在web worker之間共享數(shù)據(jù)
web worker之間的協(xié)調(diào)變得更加簡單和快速
那么，我們?yōu)槭裁匆牍蚕韮?nèi)存和原子的概念呢？以及SharedArrayBuffer的競爭條件是什么，Atomics又是如何解決這種競爭的？推薦下面的文章，文章講解很詳細(xì)，圖文并茂，帶你深入了解SharedArrayBuffer和Atomics。
內(nèi)存管理碰撞課程：https://segmentfault.com/a/1190000009878588
圖解 ArrayBuffers 和 SharedArrayBuffers：https://segmentfault.com/a/1190000009878632
用 Atomics 避免 SharedArrayBuffers 競爭條件：https://segmentfault.com/a/1190000009878699
Atomics對象提供了許多靜態(tài)方法，配合SharedArrayBuffer對象一起使用，可以幫助我們?nèi)?gòu)建一個內(nèi)存共享的多線程編程環(huán)境。Atomic操作安裝在Atomics模塊上。與其他全局對象不同，Atomics不是構(gòu)造函數(shù)。您不能使用new操作符或Atomics作為函數(shù)調(diào)用該對象。所有的屬性和方法Atomics都是靜態(tài)的，這一點(diǎn)跟Math類似。下面鏈接貼出了Atomics提供的一些基本方法：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics
關(guān)于共享內(nèi)存和原子的深入研究，也可以參考Axel Rauschmayer博士的《Exploring ES2016 and ES2017》一書中的內(nèi)容。具體章節(jié)鏈接如下：
http://exploringjs.com/es2016-es2017/ch_shared-array-buffer.html
函數(shù)參數(shù)列表與調(diào)用中的尾部逗號
該特性允許我們在定義或者調(diào)用函數(shù)時添加尾部逗號而不報錯。

let foo = function (a,b,c, ) {console.log('a:', a)console.log('b:', b)console.log('c:', c) } foo(1, 3, 4, )

//輸出結(jié)果為：
a: 1
b: 3
c: 4

上面這種方式調(diào)用是沒有問題的。函數(shù)的這種尾逗號也是向數(shù)組和字面量對象中尾逗號看齊，它適用于那種多行參數(shù)并且參數(shù)名很長的情況，開發(fā)過程中，如果忘記刪除尾部逗號也沒關(guān)系，ES8已經(jīng)支持這種寫法。
這么用有什么好處呢？
首先，當(dāng)我們調(diào)整結(jié)構(gòu)時，不會因?yàn)樽詈笠恍写a的位置變動，而去添加或者刪除逗號。
其次，在版本管理上，不會出現(xiàn)因?yàn)橐粋€逗號，而使本來只有一行的修改，變成兩行。例如下面：

從

(
'abc'
)
到

(
'abc',
'def'
)

在我們版本管理系統(tǒng)里，它會監(jiān)測到你有兩處更改，但是如果我們不必去關(guān)心逗號的存在，每一行都有逗號時，新加一行，也只會監(jiān)測到一行的修改。
建議的ES9功能
回想一下，每個ECMAScript功能提案都經(jīng)過了幾個階段：
階段4意味著功能將在下一個版本中（或之后的版本）。
階段3意味著功能仍然有機(jī)會被包含在下一個版本中。
第4階段和部分ECMAScript規(guī)范草案
以下功能目前在第4階段：
Template Literal Revision：模板文字修訂（蒂姆·迪士尼）
候選功能（第3階段）
以下功能目前在第3階段：
Function.prototype.toString 修訂版（Michael Ficarra）
global（Jordan Harband）
Rest/Spread Properties：Rest/Spread屬性（SebastianMarkb?ge）
Asynchronous Iteration：異步迭代（Domenic Denicola）
import() （Domenic Denicola）
RegExp Lookbehind Assertions：RegExp Lookbehind斷言（Daniel Ehrenberg）
RegExp Unicode Property Escapes：RegExp Unicode屬性轉(zhuǎn)義（Brian Terlson，Daniel Ehrenberg，Mathias Bynens）
RegExp named capture groups：RegExp命名捕獲組（Daniel Ehrenberg，Brian Terlson）
s (dotAll) flag for regular expressions：s（dotAll）標(biāo)志為正則表達(dá)式（Mathias Bynens，Brian Terlson）
Promise.prototype.finally() （Jordan Harband）
BigInt - 任意精度整數(shù)（Daniel Ehrenberg）
Class fields（Daniel Ehrenberg，Jeff Morrison）
Optional catch binding（Michael Ficarra）
ES6-ES8的學(xué)習(xí)網(wǎng)站
ES6：http://es6.ruanyifeng.com/
ES7：https://www.css88.com/archives/tag/es7
ES8：https://www.css88.com/archives/tag/es8
TC39提案--javascript發(fā)展委員會

轉(zhuǎn)載于:https://www.cnblogs.com/broad/p/9987614.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的ES7和ES8的了解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。