拷貝的分類

1. 淺拷貝： 只能對基本類型的值拷貝，如果所要拷貝的對象的某個(gè)屬性的值是對象的話，那么目標(biāo)對象拷貝得到的是這個(gè)對象的引用。
2. 深拷貝： 和原對象一樣的屬性和原型，相互之間互不影響（不一樣的內(nèi)存地址）

在寫這篇博客之前，看了很多博客實(shí)現(xiàn)的淺拷貝，發(fā)現(xiàn)大家實(shí)現(xiàn)的方法或多或少都有些不足，今天就把這些坑說一說。

• 我需不需要拷貝原對象的原型？
• 對象中有以Symbol為屬性名的屬性我需不需要拷貝？
• 對象中有不可遍歷的屬性，我要不要拷貝？

逐個(gè)屬性遍歷（ES6之前）

通過逐個(gè)遍歷對象的屬性并復(fù)制，來實(shí)現(xiàn)淺拷貝，但這種方法有兩個(gè)弊端：

• 不可遍歷以symbol為屬性名的屬性
• 不可遍歷不可枚舉屬性

Symbol 作為屬性名，該屬性不會出現(xiàn)在for...in、for...of循環(huán)中，也不會被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。

// 淺拷貝函數(shù)
function shallowClone(obj) {
    const newObj = {};
    for (let i in obj) {
        newObj[i] = obj[i];
    }
    return newObj;
}
// 被拷貝對象
const obj1 = {
    a: 1,
    b: 'hellow world',
    c: true,
    d: Symbol('symbol'),
    [Symbol('e')]: 'e',
}
Object.defineProperty(obj1, 'f', {
  value: 'f',
  enumerable: false,
}) // 添加不可枚舉屬性
const obj2 = shallowClone(obj1);

obj2 // {a: 1, b: "hellow world", c: true, d: Symbol(symbol)}

所拷貝的對象并沒有以symbol為屬性名的屬性，也不能拷貝不可遍歷的屬性，所以這種方法并不是最佳實(shí)踐。

ES6下的淺拷貝

ES6新增了許多操作對象或者遍歷對象的API，下面分別測試下能不能實(shí)現(xiàn)完美的淺拷貝

Object.assign()

通過和空對象合并來實(shí)現(xiàn)淺拷貝：

const obj1 = {
    a: 1,
    b: 'hellow world',
    c: true,
    d: Symbol('symbol'),
    [Symbol('e')]: 'e',
}
const obj2 = Object.assign({},obj1) // ES6新擴(kuò)展： Object.assign() 
obj2 // {a: 1, b: "hellow world", c: true, d: Symbol(symbol), Symbol(e): "e"}

發(fā)現(xiàn)可以實(shí)現(xiàn)對以symbol為屬性名的屬性的拷貝，但是對于不可枚舉屬性O(shè)bject.assign()還是無能為力。
我們在MDN上發(fā)現(xiàn)Object.assign()不可以遍歷出不可枚舉屬性：

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

解構(gòu)賦值+rest

那我們看看更加優(yōu)雅的解構(gòu)賦值+rest能不能實(shí)現(xiàn)完美的淺克隆通過ES6的解構(gòu)賦值可以更簡單的實(shí)現(xiàn)淺拷貝：

const obj1 = {
    a: 1,
    b: 'hellow world',
    c: true,
    d: Symbol('symbol'),
    [Symbol('e')]: 'e',
}
Object.defineProperty(obj1, 'f', {
  value: 'f',
  enumerable: false,
});
let { ...obj2 } = obj1
obj2 // {a: 1, b: "hellow world", c: true, d: Symbol(symbol), Symbol(e): "e"}

發(fā)現(xiàn)依然不能解決不可遍歷屬性的問題。

ES7下的淺拷貝

Object.getOwnPropertyDescriptors

Object.getOwnPropertyDescriptor() 方法返回指定對象上一個(gè)自有屬性對應(yīng)的屬性描述符。（自有屬性指的是直接賦予該對象的屬性，不需要從原型鏈上進(jìn)行查找的屬性）

Object.getOwnPropertyDescriptors方法可以配合Object.create方法實(shí)現(xiàn)淺拷貝

const shallowClone = (obj) => Object.create(
    Object.getPrototypeOf(obj),
    Object.getOwnPropertyDescriptors(obj)
);
const obj1 = {
    a: 1,
    b: 'hellow world',
    c: true,
    d: Symbol('symbol'),
    [Symbol('e')]: 'e',
}
Object.defineProperty(obj1, 'f', {
    value: 'f',
    enumerable: false,
});
const obj2 = shallowClone(obj1);

obj2 //{a: 1, b: "hellow world", c: true, d: Symbol(symbol), f: "f"}

基本上完美實(shí)現(xiàn)了對所有類型屬性的拷貝，可以看見即使是淺拷貝，要踩得坑還是很多的。