本文介紹一些ES6/ES7好玩實用又簡單的特性，或許對寫代碼的效率也有一定幫助噢。

ES6/ES7的出現已經有一段時間了，里面的一些新特性你們是否了解呢？本騷年將結合自身的一些使用經歷介紹一些簡單實用的新特性/語法糖。

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

「解構」知多少

解構賦值

• 數組和對象

數組的變量的取值與位置相關，而對象的屬性與變量名有關。

數組和對象的解構賦值其實用得不多，畢竟這樣代碼閱讀性可能不大好，尤其數組的解構賦值和變量順序緊緊關聯。

默認值

解構賦值允許指定默認值。我猜你們很多都用到對象的默認值，數組的用過嗎？

從上面代碼我們可以發現兩點：

ES6內部使用嚴格相等運算符（===），如果一個數組成員不嚴格等于undefined，默認值是不會生效的。

默認值是表達式時候，會遵守惰性求值（只有在用到的時候，才會求值）。

函數參數的解構

函數參數的解構就比較有趣了，當然應用場景會更多。

參數解構，同時設置默認值，再也不需要長長的if判斷和處理了:

數組和對象

別小看這三個點...，身為拓展運算符，它們還是很方便的。

這里面需要注意的是：

解構賦值必須是最后一個參數，否則會報錯。

解構賦值不會拷貝繼承自原型對象的屬性（即不會繼承來自__proto__的屬性）。

配合解構賦值

解構賦值配合拓展運算符，還可以很方便地擴展某個函數的參數，引入其他操作。

快速拷貝拓展對象

取出參數對象的所有可遍歷屬性，拷貝到當前對象之中。

快速合并兩個對象。

我們會發現，使用拓展運算符...進行對象的拷貝和合并，其實與ES6中另外一個語法糖Object.assign()效果一致：

需要注意的有：

• 它們都只會拷貝源對象自身的并且可枚舉的屬性到目標對象身上
• 它們都是淺拷貝，即對象數組等將拷貝引用值
• 對多個對象進行拷貝時，相同的屬性名，后面的將覆蓋前面的

rest參數

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

替換arguments:

同樣要注意的是，rest只能是最后一個參數。

說到arguments，這里插播一下尾調用優化。

• 尾遞歸

遞歸非常耗費內存，因為需要同時保存成千上百個調用幀，很容易發生“棧溢出”錯誤（stack overflow）。
但對于尾遞歸來說，由于只存在一個調用幀，所以永遠不會發生“棧溢出”錯誤。

• 尾調用優化

ES6的尾調用優化只在嚴格模式下開啟，正常模式是無效的。因為在正常模式下，函數內部有兩個變量，可以跟蹤函數的調用棧：

func.arguments：返回調用時函數的參數。

func.caller：返回調用當前函數的那個函數。

一起來「拓展」

對象的拓展

對象拓展了一些很方便的屬性，簡化了我們很多的工作。常用的：

• Object.assign()

用于將所有可枚舉的屬性的值從一個或多個源對象復制到目標對象。它將返回目標對象。

• Object.keys()

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

聽著好復雜，但是很多時候當我們需要遍歷某個對象的時候就很方便了：

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

數組的拓展

數組也拓展了一些屬性：

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

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

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

參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。

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

數據結構的拓展

• Set

它類似于數組，但是成員的值都是唯一的，沒有重復的值。Set本身是一個構造函數，用來生成Set數據結構。

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

• Map

JavaScript的對象（Object），本質上是鍵值對的集合（Hash結構），但是傳統上只能用字符串當作鍵。

原因是對象只接受字符串作為鍵名，所以obj被自動轉為字符串[object Object]。

Map數據結構類似于對象，也是鍵值對的集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對象）都可以當作鍵。
也就是說，Object結構提供了“字符串—值”的對應，Map結構提供了“值—值”的對應，是一種更完善的Hash結構實現。

關于簡寫那些事

屬性的簡寫

ES6允許直接寫入變量和函數，作為對象的屬性和方法。

箭頭函數

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

箭頭函數有幾個使用注意點：

函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。

不可以當作構造函數，即不可以使用new命令。

不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用Rest參數代替。

最關鍵的是第一點：this對象的指向是可變的，但是在箭頭函數中，它是固定的。

結束語

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。