【JS30】Day14: JavaScript References VS Copying

javascript 30day

目標:理解 javascript reference 與 copy

原始型別

let age = 100;
let age2 = age;

console.log(age, age2);
//100,100

age = 200;

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

原始型別都是 Call by value,所以複製時不影響,當age = 200
因為age2已經被定義過,則age的改變不會影響age2

陣列

const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
const team = players;

team[3] = 'Lux';

console.log(team, players);

//['Wes', 'Sarah', 'Ryan', 'Lux']
//['Wes', 'Sarah', 'Ryan', 'Lux']

陣列為 Call by reference ,因為我們更新team
team本身沒有陣列可以更改,team本身參照player的原始陣列,
所以如果你修改原始陣列,或當你更新任何陣列,他就會被修改,陣列參照不同於數字、布林及字串。

假設你是想複製且更新一份陣列。

const team2 = players.slice();
const team3 = [].concat(players);
const team4 = [...players];
const team5 = Array.from(players);

物件

const person = {
name: 'Wes Bos',
age: 80,
};

const captain = person;
captain.number = 99;

物件和陣列相同,屬於 call by reference ,因此為了不要污染到person

const cap3 = { ...person };

const cap2 = Object.assign({}, person, {
number: 99,
age: 12,
});
console.log(cap2);

如此,可覆寫原本屬性與值的配對,且person則不會被污染到,但有例外的是。

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

const dev = Object.assign({}, wes);

dev.social.twitter = '@coolman';

console.log(dev.social);
// Object { twitter: '@coolman' , facebook: 'wesbos.developer'}
console.log(wes.social);
// Object { twitter: '@coolman' , facebook: 'wesbos.developer'}

Object.assign僅能做一層複製。

const dev2 = JSON.parse(JSON.stringify(wes));

可使用以上做破解。
因為使用JSON.stringify,將原本物件的內容,全部轉換成字串,
回到原始型別,在用JSON.parse轉成物件,則全部內容都能被複製成功。

使用技巧

  • slice()
  • concat()
  • es6 Spread
  • Array.from()
  • Object.assign()
【JS30】Day15:LocalStorage 【JS30】Day13:Slide In on Scroll

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×