ES6時代，你真的會克隆對象嗎？

開始之前

在開始聊克隆之前，我們還是先來看看js數據類型。js的數據類型分為基本數據類型和複雜數據類型。

基本數據類型：Number、Boolean、String、Null、String、Symbol（ES6 新增）

複雜數據類型：Object，其他引用類型（Array、Date、RegExp、Function、基本包裝類型（Boolean、String、Number）、Math等）都是Object類型的實例對象

克隆:基本數據 => 複製這個變數；複雜數據 => 拷貝引用（網上的介紹很多，不深入了）

常見淺拷貝

對於對象的克隆，應該大多數人都能實現出來，可能深、淺拷貝都能想出好幾種方式，我們先來聊聊淺拷貝。

一個常見的淺拷貝一般是下面這樣：

或者更嚴謹一點的實現數組的判斷：

好像是沒什麼問題呢，畢竟經過了好多項目的檢測，網上一搜就能出現一大堆。

但是，我們開頭介紹數據類型的時候就已經說過了，ES6新增了 類型，情況好像就有點不一樣了

Symbol

是ES6中引入的原始數據類型。 值通過 函數生成，是獨一無二的。同時，ES6中規定了對象的屬性名有兩種類型，一種是字元串，另一種就是 類型。凡是屬性名屬於 Symbol 類型，就不會與其他屬性名產生衝突。但是，隨之而來的問題是，我們的 循環不能遍歷出該屬性

作為屬性名，該屬性不會出現在、循環中，也不會被、 、返回。但是，它也不是私有屬性，有一個方法，可以獲取指定對象的所有 Symbol 屬性名。

有 類型，自然有遍歷 類型的方法。 + 的組合起來好像是能滿足我們要求的了。嗯，看起來還不錯，但是似乎有點麻煩了，有沒有更便捷一點的方式呢？或許新時代的男人--- ，要閃亮登場了，這個既能遍歷字元串，又能遍歷 的死變態（請允許我這麼誇他）。

返回一個數組，包含對象自身的所有屬性，不管是屬性名是或字元串，也不管是否可枚舉

Object.assign

這個時候熟悉ES6的人或許開始有疑問了，我們已經開始討論 和 ，為什麼淺克隆不直接用 或者展開運算符（ ）呢？

嗯，待我吃根火腿冷靜冷靜，好像你說的很對！ 的確是能拷貝 類型的呢。但是呢，但是呢，我們是一個有追求的猿類，多一種實現方式不是能讓我們多了解一些坑嗎？而且這種方式不是能讓我們更靈活的實現不可預知的需求嗎？對，沒錯，是這樣子的...

這個更完美的男人出來之後，好像淺拷貝部分也該結束了，正常來說，的確是這樣。不過我們再仔細想想上面的兩種方式，好像還是有點區別的呢。我們再來看看這兩個男人：

返回一個數組，包含對象自身的所有屬性，不管是屬性名是Symbol或字元串，也不管是否可枚舉

拷貝的屬性是有限制的，只拷貝源對象的自身屬性（不拷貝繼承屬性），也不拷貝不可枚舉的屬性

注意到了嗎？這裡面有一個是否可枚舉的概念，這個時候是不是應該感慨我們知道怎麼實現不可預知的需求了呢。

不可枚舉

我們先看個例子：

唉，的確是這樣呢！看來 也不是我們的理想歸宿啊。我們再回過頭來看看 ，上面挖的坑也該填了，我們在講 的時候， + 直接用 替代了，在從可枚舉的角度出發看看，好像哪裡不對， 只能循環遍歷對象自身的和繼承的可枚舉的屬性，且不含 。頭都大了嗎？來來來，喝完這杯，還有一杯，繼續接著來。這麼多循環，我們來縷縷頭緒：

循環遍歷對象自身的和繼承的可枚舉屬性（不含屬性）。

返回一個數組，包括對象自身的（不含繼承的）所有可枚舉屬性（不含屬性）的鍵名。

返回一個數組，包含對象自身的所有屬性（不含屬性，但是包括不可枚舉屬性）的鍵名。

返回一個數組，包含對象自身的所有屬性的鍵名。

返回一個數組，包含對象自身的所有鍵名，不管鍵名是或字元串，也不管是否可枚舉。

終於清晰了，或許也該結束了吧。

慢著，好像上面的例子讓我想到了什麼！！！

屬性描述符

我們在來思考一個例子：

好像並不是我們想要的呢，遍歷的方式好像也不適用了，這可怎麼辦。別急，還有 可以用。

ES2017 引入了方法，返回指定對象所有自身屬性（非繼承屬性）的描述對象

仔細閱讀下文檔，終於用 + 成功了呢

寫到這裡，淺拷貝部分也該結束了

結束語

可能實際項目中並不需要處理的這麼細緻，但是希望大家對各種遍歷、實現一個淺拷貝以及ES6的一些知識有一個總結和一點新的認識吧，本來想繼續寫深拷貝的，無賴篇幅已經不短，加上長夜漫漫，我想睡覺，深拷貝的問題更複雜，我先放放，日後再說。

原文：https://github.com/Alvin-Liu/Blog/issues/8

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！