14 - JavaScript References VS Copying

tags: JavaScript30

專案簡介

第十四天要實作的目標是理解 JS 中 Reference VS Copy 的問題

課程影片：JS30 14
導讀影片：Alex

初始文件

Github 檔案位置：14 - JavaScript References VS Copying

網頁一開始的樣子如下，有一些英文題目，我們直接利用作者的 code 做分段的概念解釋

正式製作

strings, numbers and booleans

題目內容

在這個實測中可以知道，當 B 變數等於 A 變數，接著 A 變數改變後 B 並不會跟著改變，因為在 JS 中這些是 簡單型別 因此在 B 變數被賦值時是在新的記憶體空間存放 A 的值，它們的記憶體空間沒有共用

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

let name = 'Wes';
let name2 = name;
console.log(name, name2);
name = 'wesley';
console.log(name, name2);

array

題目內容

而這個實例中就可以發現，當我更改了等於原陣列的 team 後，原陣列的值也一起被改動了

const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
const team = players;
console.log(players, team);
team[3] = 'Lux';
console.log(players, team)

如果我們要讓他們各自獨立開來的話，有下列幾種方法

players.slice()

const team2 = players.slice();
team2[3] = 'owo';
console.log(players, team2);

[].concat(players)

concat() 通常用來做兩個陣列的合併，並會回傳一個合併後的陣列，我們在這裡以空陣列合併 players 即可達成目的

const team3 = [].concat(players);
team3[3] = 'AwA';
console.log(players, team3);

[...players]，解構賦值

之前學到的 ES6 語法也會傳回一個新的陣列

const team4 = [...players];
team4[3] = 'heeee hawww';
console.log(players, team4);

Array.from(players)

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

object

一樣，先做最基本的嘗試，得知了 object 跟陣列的情況一致

const person = {
  name: 'Wes Bos',
  age: 80
};
const captain = person;
console.log(person, captain);
captain.number = 99;
console.log(person, captain);

繼續讓我們來了解一下 object 正確的傳值方法

Object.assign()

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

{...person}，一樣是解構賦值

const cap3 = {...person};
cap3.number = 9999;
console.log(person, cap3);

最後程式碼

// start with strings, numbers and booleans
let age = 100;
let age2 = age;
console.log(age, age2);
age = 200;
console.log(age, age2);

let name = 'Wes';
let name2 = name;
console.log(name, name2);
name = 'wesley';
console.log(name, name2);

// Let's say we have an array
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];

// and we want to make a copy of it.
const team = players;
console.log(players, team);
// You might think we can just do something like this:
team[3] = 'Lux';
// however what happens when we update that array?
console.log(players, team);
// now here is the problem!
// oh no - we have edited the original array too!
// Why? It's because that is an array reference, not an array copy. They both point to the same array!
// So, how do we fix this? We take a copy instead!

const team2 = players.slice();
team2[3] = 'owo';
console.log(players, team2);
// one way

// or create a new array and concat the old one in
const team3 = [].concat(players);
team3[3] = 'AwA';
console.log(players, team3);

// or use the new ES6 Spread
const team4 = [...players];
team4[3] = 'heeee hawww';
console.log(players, team4);

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

// now when we update it, the original one isn't changed

// The same thing goes for objects, let's say we have a person object

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

// and think we make a copy:
const captain = person;
console.log(person, captain);
captain.number = 99;
console.log(person, captain);
// how do we take a copy instead?
const cap2 = Object.assign({}, person, { number: 99, age: 12 });
console.log(person, cap2);

// We will hopefully soon see the object ...spread
const cap3 = {...person};
cap3.number = 9999;
console.log(person, cap3);

結語

以上是第十四天的製作紀錄，如有錯誤或不足的地方還請多多指教 >.<

JavaScript Fundamentals: Reference VS Copy #JavaScript30 14/30
[ Alex 宅幹嘛 ] 深入淺出 Javascript30 快速導覽：Day 14：JavaScript References VS Copying
MDN Web Docs