[程式碼&DEMO] [HackMD完整筆記]

目標

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

步驟流程

1.原始型別
JavaScript中的原始型別(Primitive Type)：
(1)String (2)Number (3)Boolean (4)Null (5)Undefine

let age = 100;
let age2 = age;
console.log(age, age2); // 100 100
age = 200;
console.log(age, age2); // 200 100

先宣告一個 Number 型的變數 age，並將此變數賦值給另一個變數 age2，這時兩個變數的值都是100。然後賦給age新的值，但age的改變並不影響age2。

2.陣列

const rappers = ['Brown', 'kidmilli', 'Nafla', 'YoungB'];
const team = rappers;
console.log(rappers, team);

如果需要修改team中的值用：

team[3] = 'Bewhy';

會變成：

console.log(rappers, team); 
// ['Brown', 'kidmilli', 'Nafla', 'Bewhy'] 
['Brown', 'kidmilli', 'Nafla', 'Bewhy']

原陣列 rappers 也被修改了。因為 team 只是這個陣列的引用，並不是它的複製。
team 和 rappers 都指向的是同一個陣列。

解決：

• 方法一： Array.prototype.slice()

slice（ ）方法得到的結果是對原陣列進行淺拷貝，故原陣列不會被修改。因此如果修改兩個陣列中其中之一，另一個都不受到影響。

const team2 = rappers.slice();
team2[3] = 'Bewhy2';
console.log(rappers, team2); 

• 方法二： Array.prototype.concat()

concat( )方法是用來合併陣列的，它不會更改原有的陣列，而是返回一個新陣列，所以可以將 rappers 陣列與一個空陣列合併，即可得到此結果。

const team3 = [].concat(rappers);
team3[3] = 'Bewhy3';
console.log(rappers, team3); 

• 方法三： ES6 擴展语法

const team4 = [...rappers];
team4[3] = 'Bewhy4';
console.log(rappers, team4);

• 方法四： Array.from()

const team5 = Array.from(rappers);
team5[3] = 'Bewhy5';
console.log(rappers, team5);

3.Object物件

const person = {
   name: 'Brown',
   age: 23
 };

• 方法一： Object.assign()
  使用 Object.assign(target, ...sources) 時，後來的源對象的屬性值，將會覆蓋它之前的對象的屬性。所以可以先複製 person 之後，再賦給屬性新的值。

const cap2 = Object.assign({}, person, { number: 88, age: 12 });
console.log(cap2); // Object {name: "Brown", age: 12, number: 88}

• 方法二 ：JSON 轉換
  利用 JSON 可以先將對象轉成字串的格式，然後再把它轉成 JSON，從而實現複製。

const Brown = {
  name: 'Brown',
  age: 100,
  social: {
    twitter: '@Brown',
    facebook: 'Brown.developer'
  }
};

const dev = Object.assign({}, Brown);
const dev2 = JSON.parse(JSON.stringify(Brown));
console.log(Brown);
console.log(dev);
console.log(dev2);