今日文章目录

• 番外篇：浅拷贝
• 番外篇：深拷贝
• 小结

ToDoList + 番茄钟时间管理，整体上练习到一段落了。今天JS练习来个番外篇：纪录目前学到的浅拷贝与深拷贝方法。

事前准备

在进行之前，要对 基础型别primitive value 与 物件型别reference value有基本认识：

• 基础型别: string number boolean null undefined symbol
• 物件型别: 除了基础型别以外，举凡 物件 函式 等。

两者在赋值上的差别：

基础型别: pass by value

```
    let a = 10;
    let b = a;
    a = 1000;
    console.log("a: ", a);  // a:  1000
    console.log("b: ", b);  // b:  10
```

• 以上范例可以看到，b复制a的值到自己的变数容器里，所以当a重新赋值，b并不受影响。
  

物件型别: pass by reference

```
    let c = {id: 1, name: "Joanna"};
    let d = c;
    c.name = "David";
    console.log("c: ", c);  // c: {id: 1, name: "David"}
    console.log("d: ", d);  // d: {id: 1, name: "David"}
```

• 以上范例可以看到，d指向与c相同的位址，所以当c重新赋值，代表相同位址的值更新，d一同受影响。
  

使用时机

当我们取得资料如下方，如果我们要针对资料进行修改，但又不想动到原本资料时，我们可以怎麽做呢？
通常会拷贝一份，在拷贝资料上进行修改，但可能会碰到 浅拷贝 与 深拷贝的坑，也就是今天要练习的部分。

const info = [
    "David", 
    false, 
    {
        name: "Joanna", 
        hobbies:["Coding", "Cooking"]
    }
];

const details = {
    id: 1,
    name: "Anna",
    contact:{
        phone: 0912345678,
        country: "Taiwan",
        hasVaccinated: true
    }
};

番外篇：浅拷贝

1. slice(start, beforeEnd):
   • 作用对象：阵列。
   • 用途：依据作用阵列，指定起始与结束索引，复制一新阵列。
   • 参数：start 起始索引，beforeEnd 结束索引以前。如果没有指定，会全部复制作用阵列。
   • 回传值：全新阵列。
   • 会改变作用阵列：不会。
     
2. Object.assign(target obj, resource1, resource2, ...)
   • 作用对象：物件target obj。
   • 用途：将多组物件合并成一组。
   • 参数：
     • target obj: 作用物件
     • resource1... : 要合并的来源物件，多组的话依 ,隔开
   • 回传值：回传合并完的 target obj。
   • 会改变作用物件：会。
     
3. [...array] {...obj} : spread operator
   • 重新建立新容器，内容从指定阵列或物件复制。
   • 旧内容，新容器:
     也就是说内容会依据 基础型别(copy by value) 或 物件型别(copy by reference)类型进行复制，属於物件型别的内容在修改的时候，更新指向位址的值，所有指向相同位址的其他内容也同时更新。
     
     

番外篇：深拷贝

• JSON.stringify() -> JSON.parse()

小结

在启动10天JS练习计划时，原本希望10天都练习到不同的功能。但在实际执行的时候，发现自己在练习ToDoList基本操作遇到一些坑，考量时间分配与自己能力情况下，选择好好把一个专项拆分成很小的项目，让这十天都有一点小进步。透过每天纪录，坦白说我每天都在担心产出，但还是得到一些收获：实际执行跟学会JS还是有很大的差距，抓紧努力练了，我要变强!!!

撑过20天的大家，可以开始倒数罗