本文介紹一些ES6/ES7好玩實(shí)用又簡(jiǎn)單的特性，或許對(duì)寫代碼的效率也有一定幫助噢。

ES6/ES7的出現(xiàn)已經(jīng)有一段時(shí)間了，里面的一些新特性你們是否了解呢？本騷年將結(jié)合自身的一些使用經(jīng)歷介紹一些簡(jiǎn)單實(shí)用的新特性/語法糖。

基礎(chǔ)常用的一些如let、const等這里就不詳細(xì)介紹了，關(guān)于ES6/ES7的一些具體說明介紹大家可以參考ECMAScript 6 入門。

「解構(gòu)」知多少

解構(gòu)賦值

• 數(shù)組和對(duì)象

數(shù)組的變量的取值與位置相關(guān)，而對(duì)象的屬性與變量名有關(guān)。

數(shù)組和對(duì)象的解構(gòu)賦值其實(shí)用得不多，畢竟這樣代碼閱讀性可能不大好，尤其數(shù)組的解構(gòu)賦值和變量順序緊緊關(guān)聯(lián)。

默認(rèn)值

解構(gòu)賦值允許指定默認(rèn)值。我猜你們很多都用到對(duì)象的默認(rèn)值，數(shù)組的用過嗎？

從上面代碼我們可以發(fā)現(xiàn)兩點(diǎn)：

ES6內(nèi)部使用嚴(yán)格相等運(yùn)算符（===），如果一個(gè)數(shù)組成員不嚴(yán)格等于undefined，默認(rèn)值是不會(huì)生效的。

默認(rèn)值是表達(dá)式時(shí)候，會(huì)遵守惰性求值（只有在用到的時(shí)候，才會(huì)求值）。

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

函數(shù)參數(shù)的解構(gòu)就比較有趣了，當(dāng)然應(yīng)用場(chǎng)景會(huì)更多。

參數(shù)解構(gòu)，同時(shí)設(shè)置默認(rèn)值，再也不需要長(zhǎng)長(zhǎng)的if判斷和處理了:

數(shù)組和對(duì)象

別小看這三個(gè)點(diǎn)...，身為拓展運(yùn)算符，它們還是很方便的。

這里面需要注意的是：

解構(gòu)賦值必須是最后一個(gè)參數(shù)，否則會(huì)報(bào)錯(cuò)。

解構(gòu)賦值不會(huì)拷貝繼承自原型對(duì)象的屬性（即不會(huì)繼承來自__proto__的屬性）。

配合解構(gòu)賦值

解構(gòu)賦值配合拓展運(yùn)算符，還可以很方便地?cái)U(kuò)展某個(gè)函數(shù)的參數(shù)，引入其他操作。

快速拷貝拓展對(duì)象

取出參數(shù)對(duì)象的所有可遍歷屬性，拷貝到當(dāng)前對(duì)象之中。

快速合并兩個(gè)對(duì)象。

我們會(huì)發(fā)現(xiàn)，使用拓展運(yùn)算符...進(jìn)行對(duì)象的拷貝和合并，其實(shí)與ES6中另外一個(gè)語法糖Object.assign()效果一致：

需要注意的有：

• 它們都只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象身上
• 它們都是淺拷貝，即對(duì)象數(shù)組等將拷貝引用值
• 對(duì)多個(gè)對(duì)象進(jìn)行拷貝時(shí)，相同的屬性名，后面的將覆蓋前面的

rest參數(shù)

ES6引入rest參數(shù)（形式為...rest），用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對(duì)象了。
rest參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。

替換arguments:

同樣要注意的是，rest只能是最后一個(gè)參數(shù)。

說到arguments，這里插播一下尾調(diào)用優(yōu)化。

• 尾遞歸

遞歸非常耗費(fèi)內(nèi)存，因?yàn)樾枰瑫r(shí)保存成千上百個(gè)調(diào)用幀，很容易發(fā)生“棧溢出”錯(cuò)誤（stack overflow）。
但對(duì)于尾遞歸來說，由于只存在一個(gè)調(diào)用幀，所以永遠(yuǎn)不會(huì)發(fā)生“棧溢出”錯(cuò)誤。

• 尾調(diào)用優(yōu)化

ES6的尾調(diào)用優(yōu)化只在嚴(yán)格模式下開啟，正常模式是無效的。因?yàn)樵谡ＤＪ较?#xff0c;函數(shù)內(nèi)部有兩個(gè)變量，可以跟蹤函數(shù)的調(diào)用棧：

func.arguments：返回調(diào)用時(shí)函數(shù)的參數(shù)。

func.caller：返回調(diào)用當(dāng)前函數(shù)的那個(gè)函數(shù)。

一起來「拓展」

對(duì)象的拓展

對(duì)象拓展了一些很方便的屬性，簡(jiǎn)化了我們很多的工作。常用的：

• Object.assign()

用于將所有可枚舉的屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。

• Object.keys()

返回一個(gè)數(shù)組，成員是參數(shù)對(duì)象自身的（不含繼承的）所有可遍歷（enumerable）屬性的鍵名。

聽著好復(fù)雜，但是很多時(shí)候當(dāng)我們需要遍歷某個(gè)對(duì)象的時(shí)候就很方便了：

• Object.values()：與Object.keys()相似，返回參數(shù)對(duì)象屬性的鍵值
• Object.entries：同上，返回參數(shù)對(duì)象屬性的鍵值對(duì)數(shù)組

數(shù)組的拓展

數(shù)組也拓展了一些屬性：

• Array.from()：用于將兩類對(duì)象轉(zhuǎn)為真正的數(shù)組
• Array.of()：用于將一組值，轉(zhuǎn)換為數(shù)組
• 其它的entries()、keys()、values()等

這里只介紹可能比較常用的：

• Array.find()：用于找出第一個(gè)符合條件的數(shù)組成員

參數(shù)是一個(gè)回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)，直到找出第一個(gè)返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。

• Array.findIndex()：用法與find方法非常類似，返回第一個(gè)符合條件的數(shù)組成員的位置，如果所有成員都不符合條件，則返回-1。
• Array.includes()：返回一個(gè)布爾值，表示某個(gè)數(shù)組是否包含給定的值

數(shù)據(jù)結(jié)構(gòu)的拓展

• Set

它類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。Set本身是一個(gè)構(gòu)造函數(shù)，用來生成Set數(shù)據(jù)結(jié)構(gòu)。

從此我們的去重就可以這樣寫了：

• Map

JavaScript的對(duì)象（Object），本質(zhì)上是鍵值對(duì)的集合（Hash結(jié)構(gòu)），但是傳統(tǒng)上只能用字符串當(dāng)作鍵。

原因是對(duì)象只接受字符串作為鍵名，所以obj被自動(dòng)轉(zhuǎn)為字符串[object Object]。

Map數(shù)據(jù)結(jié)構(gòu)類似于對(duì)象，也是鍵值對(duì)的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對(duì)象）都可以當(dāng)作鍵。
也就是說，Object結(jié)構(gòu)提供了“字符串—值”的對(duì)應(yīng)，Map結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)，是一種更完善的Hash結(jié)構(gòu)實(shí)現(xiàn)。

關(guān)于簡(jiǎn)寫那些事

屬性的簡(jiǎn)寫

ES6允許直接寫入變量和函數(shù)，作為對(duì)象的屬性和方法。

箭頭函數(shù)

ES6允許使用“箭頭”（=>）定義函數(shù)。

箭頭函數(shù)有幾個(gè)使用注意點(diǎn)：

函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

不可以當(dāng)作構(gòu)造函數(shù)，即不可以使用new命令。

不可以使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用Rest參數(shù)代替。

最關(guān)鍵的是第一點(diǎn)：this對(duì)象的指向是可變的，但是在箭頭函數(shù)中，它是固定的。

結(jié)束語

這里我們介紹了ES6/ES7一些基礎(chǔ)比較普遍的點(diǎn)，像解構(gòu)、拓展表達(dá)式(...)、數(shù)組對(duì)象等拓展屬性等等，基本上是一些提高開發(fā)效率，減少冗余重復(fù)的代碼的新特性和新語法。
而像改變我們?cè)O(shè)計(jì)思維、甚至是解決方案的則是一些較復(fù)雜的，像Class、Module、Promise、async/await等等，咱們分篇講，或者查ECMAScript 6 入門手冊(cè)吧哈哈。

文章來源：騰訊工程師王貝珊

總結(jié)

以上是生活随笔為你收集整理的es6 对象中是否有键值_干货| ES6/ES7好玩实用的特性介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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