[程式碼&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 都指向的是同一個陣列。
解決:
slice( )方法
得到的結果是對原陣列進行淺拷貝,故原陣列不會被修改。因此如果修改兩個陣列中其中之一,另一個都不受到影響。
const team2 = rappers.slice();
team2[3] = 'Bewhy2';
console.log(rappers, team2);
concat( )方法
是用來合併陣列的,它不會更改原有的陣列,而是返回一個新陣列,所以可以將 rappers 陣列與一個空陣列合併,即可得到此結果。
const team3 = [].concat(rappers);
team3[3] = 'Bewhy3';
console.log(rappers, team3);
const team4 = [...rappers];
team4[3] = 'Bewhy4';
console.log(rappers, team4);
const team5 = Array.from(rappers);
team5[3] = 'Bewhy5';
console.log(rappers, team5);
3.Object物件
const person = {
name: 'Brown',
age: 23
};
const cap2 = Object.assign({}, person, { number: 88, age: 12 });
console.log(cap2); // Object {name: "Brown", age: 12, number: 88}
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);