JavaScript Assign 淺拷貝與深拷貝

最近使用JavaScript處理物件時被雷到，故寫此篇文章記錄以警惕自己與他人。

剛從Java轉換至JavaScript，遇到了Assign的地雷，才知道原來JavaScript的Assign有區分淺拷貝與深拷貝。

基本型別如：String、Number、Boolean。

let a = 5;
let b = a;
b = 20;
console.log(a); // 5
console.log(b); // 20

在修改b的時候不會修改到a。

物件型別時，Assign指派過去的是Reference（參考）。

let obj1 = { a: 10, b: 20, c: 30 };
let obj2 = obj1;
obj2.b = 500;
console.log(obj1); // { a: 10, b: 500, c: 30 }  <-- b被改到了
console.log(obj2); // { a: 10, b: 500, c: 30 }

複製一份obj1到obj2，

接著把obj2的b改成500，

但卻也把obj1的b一同改成500，

因為他們的根本就是同一個物件，

這個就是所謂的淺拷貝。

避免發生這樣的錯誤，需要完全的複製物件又不能修改到原本的物件。

個人最推薦使用lodash這個函式庫，

其中有個方法為_.cloneDeep()

let obj2 = _.cloneDeep(obj1);

以上。

參考文章：

1. http://larry850806.github.io/2016/09/20/shallow-vs-deep-copy/
2. https://pjchender.blogspot.com/2016/03/javascriptby-referenceby-value.html