【Day20】浅层复制及深层复制

在 JavaScript 中，物件型别是利用传参考的方式来传递它的值，

因此当我们要复制出独立的物件型别时，

就必须使用浅层复制或深层复制的方式来复制它的值

浅层复制(Shallow Copy)

当我们用浅层复制来复制物件时，只能复制第一层的物件内容，

第二层之後的物件内容还是会以传参考的方式来传递，

这称为浅层复制(Shallow Copy)，

我们使用范例来看浅层复制(Shallow Copy)的方法有哪些：

1. for ... in

使用 for ... in 将值传入新物件中

const family = {
    name: '小明家',
    members: {
      dad: 'dad',
      mom: 'mom',
      son: '小明',
    },
};

const newFamily = {};

for (let key in family) {
    // key 为 family 的属性
    // family[key] 为该属性的值
    newFamily[key] = family[key];
};

newFamily.name = '威威家';

console.log(family);
console.log(newFamily);

console.log(newFamily === family);  // false

由结果可以看出在 newFamily 中 name 修改後，原物件 family 资料不变，

而且两个物件的记忆体位址也不同，

但是如果修改第二层的物件资料时

newFamily.members.son = 'weiwei';
console.log(family);
console.log(newFamily);

此时会连同 family 内的资料一并修改，

这就是所谓的浅层复制(Shallow Copy)，

以下列出浅层复制(Shallow Copy)的另外两种方法

2. Object.assign()

在 () 前面放空物件，後面放需要复制的物件型别内容

const newFamily2 = Object.assign({}, family);

3. 展开语法(...)

在物件实字 {} 内输入 ... 後放入需要复制的物件型别内容

const newFamily3 = {...family};

深层复制(Deep Copy)

完全复制物件型别内容，称为深层复制(Deep Copy)

范例：

我们会使用 JSON.stringify() 将物件转换成 JSON 格式，

再使用 JSON.parse() 将 JSON 格式转成物件

const family = {
    name: '小明家',
    members: {
      dad: 'dad',
      mom: 'mom',
      son: '小明',
    },
};

const newFamily = JSON.parse(JSON.stringify(family));

newFamily.members.son = 'weiwei';

console.log(family);
console.log(newFamily);