「JS30紀錄＆心得」14 - JavaScript References VS Copying

發表於 | 分類於 |

主題

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

[DEMO]｜ [GitHub] ｜[JavaScript30全列表]

步驟

Step1. 原始型別

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

  1. String
  2. Number
  3. Boolean
  4. Null
  5. Undefine

Step2. 物件型別

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

  1. 使用者自訂的物件 - var obj = {}
  2. 內建的物件型別 - Array, Date, Math, RegExp ..
    對，Array也是個物件。
1
2
3
4
5
6
7
8
9
10
// 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，當複製時不影響彼此，
如以下範例（上述個原始型別皆是）：

1
2
3
4
5
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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// 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()不指定起始與結束位置的話，
就等於直接複製整個整列：

1
2
3
4
5
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()可以合併陣列，所以如果使用空陣列來合併原陣列，
也會達到複製整個陣列的效果：

1
2
3
4
5
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語法，直接使用於複製方法如下：

1
2
3
4
5
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()也可以快速達到複製的效果：

1
2
3
4
5
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()來做，指定一個空的物件並把目標對象塞進去就好了：

1
2
3
4
5
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來把目標對象作轉換賦值的動作，
不論目標對象是什麼型別，都可以用這招來做複製：

1
2
3
4
5
6
7
8
9
10
11
12
13
//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 }