這篇覺得超推薦的，對於需要copy object, 還有assign variable在memory的位子
可以有很明確的瞭解。

雖然早就看完了這篇，但一直遲遲沒有更新心得文，
因為在工作上發生了點不愉快，

如個想要一個產品是好的，
那一定要有好的題材、材料、優秀的工人、檢測是否能更好的人，
檢測的人，似乎常常被懷疑是在雞蛋裡挑骨頭。
開始懷疑這份工作的價值，開始懷疑自己的價值。

沈澱了這麼久，我想大家應該也都是想要好好的把事情做好，
想要把工作做到自己追求的完美，
在時程壓力下，難免會有點摩擦，
但如何平淡的處理，就要好好訓練一下自己說話的藝術了。

也許是我自己表達的不夠清楚，造成大家覺得我在鬧事。
也許是彼此間互相傳遞訊息的時候出了短路，導致問題歸在我身上。
但經過這次，我想未來應該部會在發生一樣的事情了，
跌倒了！站起來就好了吧。
反正日子還是要過，不應該因為這件事情就放棄自己努力過的事情。

雖然萌生了想要放棄軟體的想法，但就這樣放棄，
好像對明天的自己也不好交代，
明天的我也許會覺得放下了一塊大石頭；
一個月後的我，大概會慢慢開始懷念努力的自己；
五年後的我，應該會後悔怎麼沒有成為登峰造極；
就這樣簡單的說放棄。

放棄很簡單，就像生命一樣
被逼上絕路就想自我了斷，但連放棄生命的勇氣都有了，堅持下去應該不會有多困難

Sweet are the uses of adversity

14 - JavaScript References VS Copying

首次上傳：2020/11/03

主題

介紹JavaScript中陣列與物件的引用(refrence)及複製(Copying)。

步驟

Step1. 原始型別

JavaScript中的原始型別(Primitive Type)：

String
Number
Boolean
Null
Undefine

Step2. 物件型別

JavaScript中的物件型別(Object Type)：

使用者自訂的物件 - var obj = {}
內建的物件型別 - Array, Date, Math, RegExp ..
對，Array也是個物件。

// JS的陣列中可以使用物件的字串用法
var arr = ['a', 'b', 'c'];
console.log(arr[0]); // 'a'
console.log(arr['0']); // 'a'

// JS的陣列也可以塞屬性
arr.test = function() { return 'Hi'; };
arr.test(); // 'Hi'

typeof(arr); // 'object'

Step3. Call by value

原始型別都是Call by value，當複製時不影響彼此，
如以下範例（上述個原始型別皆是）：

var a = 'a';
var b = a;
console.log(a, b); // a a
b = 'b';
console.log(a, b); // a b

最初的b = a使b指向與a同一個記憶體位置(存放字串a)，
而當b = 'b'時，b建立了一個記憶體位置存放字串b，並指向該位置。

Step4. Call by refrence

當物件型別被複製使用時，是會被彼此改變的
如以下範例：

// Array
var arr = ['a', 'b'];
var arr2 = arr;
console.log(arr, arr2);// ['a', 'b'] ['a', 'b']
arr2[1] = 'c';
console.log(arr, arr2);// ['a', 'c'] ['a', 'c']

// Object
var obj = { a: 1, b: 2 };
var obj2 = obj;
console.log(obj, obj2);// { a: 1, b: 2 } { a: 1, b: 2 }
obj2.b = 3;
console.log(obj, obj2);// { a: 1, b: 3 } { a: 1, b: 3 }

以陣列為例，當最初的arr2 = arr時，
arr2指向與arr同個記憶體位置(存放陣列[‘a’, ‘b’])，
但在arr2[1] = 'c'時，arr2仍指著與arr同個位置，
所以當改變了索引[1]的值時，arr及arr2的索引[1]都被變更了。

Step5. 陣列的複製

為了避免Call by refrence時會去異動到原本的陣列，
就要先把原本的陣列做一次複製，用剛才的範例來做，
有以下幾種方法：
Array.prototype.Slice()
如果直接使用slice()不指定起始與結束位置的話，
就等於直接複製整個整列：

var arr = ['a', 'b'];
var arr2 = arr.slice();
console.log(arr, arr2);// ['a', 'b'] ['a', 'b']
arr2[1] = 'c';
console.log(arr, arr2);// ['a', 'b'] ['a', 'c']

參閱：MDN-Array.prototype.slice()

Array.prototype.concat()
使用concat()可以合併陣列，所以如果使用空陣列來合併原陣列，
也會達到複製整個陣列的效果：

var arr = ['a', 'b'];
var arr2 = [].concat(arr);
console.log(arr, arr2);// ['a', 'b'] ['a', 'b']
arr2[1] = 'c';
console.log(arr, arr2);// ['a', 'b'] ['a', 'c']

參閱：MDN-Array.prototype.concat()

Spread syntax
ES6的Spread語法，直接使用於複製方法如下：

var arr = ['a', 'b'];
var arr2 = [...arr];
console.log(arr, arr2);// ['a', 'b'] ['a', 'b']
arr2[1] = 'c';
console.log(arr, arr2);// ['a', 'b'] ['a', 'c']

參閱：MDN-Spread syntax

Array.from()
同為ES6的Array.from()也可以快速達到複製的效果：

var arr = ['a', 'b'];
var arr2 = Array.from(arr);
console.log(arr, arr2);// ['a', 'b'] ['a', 'b']
arr2[1] = 'c';
console.log(arr, arr2);// ['a', 'b'] ['a', 'c']

參閱：MDN-Array.from()

Step6. 物件的複製

同樣的，物件也會有call by refrence的特性，
所以與陣列相同，使用之前的範例來做物件的複製：

Object.assign()
使用Object.assign()來做，指定一個空的物件並把目標對象塞進去就好了：

var obj = { a: 1, b: 2 };
var obj2 = Object.assign({}, obj);
console.log(obj, obj2);// { a: 1, b: 2 } { a: 1, b: 2 }
obj2.b = 3;
console.log(obj, obj2);// { a: 1, b: 3 } { a: 1, b: 3 }

參閱：MDN-Object.assign()

Step7. JSON.parse * JSON.stringify

利用JSON.parse * JSON.stringify來把目標對象作轉換賦值的動作，
不論目標對象是什麼型別，都可以用這招來做複製：

//Array
var arr = ['a', 'b'];
var arr2 = JSON.parse(JSON.stringify(arr));
console.log(arr, arr2);// ['a', 'b'] ['a', 'b']
arr2[1] = 'c';
console.log(arr, arr2);// ['a', 'b'] ['a', 'c']

//Object
var obj = { a: 1, b: 2 };
var obj2 = JSON.parse(JSON.stringify(obj));
console.log(obj, obj2);// { a: 1, b: 2 } { a: 1, b: 2 }
obj2.b = 3;
console.log(obj, obj2);// { a: 1, b: 3 } { a: 1, b: 3 }

[DEMO]

BobChochola's Note

JavaScript30-References-VS-Copying-14