Object and Arrays--Reference VS copy

今天是基礎的ＪＳ概念，主要介紹傳值和傳參考上的狀況，並且用淺拷貝和深拷貝去複製物件資料。

個人codepen

技巧點

1. 傳值pass by value

基本型別以傳值的方式，像是Boolean布林、string字串、numner數字都是。
會將原始對象的值複製一份出來，修改原始值或複製品，都不會互相影響！

let order = "cola";
let order2 = order;

console.log(order);
console.log(order2);
// 預期兩者打印的結果都是cola

order = "tea";
// 把原始值order改變了，那複製品order2會變如何呢？

console.log(order);
console.log(order2);

// order2一樣維持cola

2. 傳參考pass by reference（淺拷貝，深拷貝）

剛傳值的情況，套用在陣列身上，就會發現不太一樣，如下：

const menu = ["hamburger", "sandwich", "rice", "beef"];
const menu2 = menu;

console.log(menu);
console.log(menu2);
// 兩者的資料目前是一樣的

menu2.push("hot dog");
// 將menu2新增一個資料

console.log(menu);
console.log(menu2);
// 發現兩個資料都改變了 ['hamburger', 'sandwich', 'rice', 'beef', 'hot dog']

• 複製出來的資料，跟原始資料是一樣的，所以改動複製品或原始值，都會連動一起改變．這是傳參考的特性。
• 所以，我們會用shallow copy淺拷貝的方式將資料處理。

const menu = ["hamburger", "sandwich", "rice", "beef"];

const menu3 = menu.slice();
// 將資料slice切一份，會回傳一個新陣列

const menu4 = [].concat(menu);
// concat將兩個陣列連接在一起

const menu5 = [...menu];
// 展開運算子的方式將原始資料攤開在陣列中

const menu6 = Array.from(menu);
// 從類陣列或可以迭代物件回傳一個新陣列實體

menu3.push("tea");
console.log(menu);
console.log(menu3);
// 經過淺拷貝處理後，兩者資料不會互相影響，只有menu3的資料有增加

• 同樣的淺拷貝處理，也適用在物件身上，只是方法不一樣

const weather = {
  temperature: 20,
  humidity: 80,
  precipitation: {
    rain: 20,
    snow: 0,
  },
}

const weather2 = weather;
// 直接賦予值的話，會發生複製品如果修改的話，原始值也會變動

const weather3 = Object.assign({}, weather);
// assing(目標物件, 複製來源的物件)，將一個物件或多個物件的值，複製到目標物件中，回傳回來

const weather4 = {...weather};
// 展開運算子

weather3.temperature = 30;
// 因為有淺拷貝，不影響原始資料的值

weather3.precipitation.snow = 20;
console.log(weather3);
console.log(weather);
// 變動裡面的另一個物件，會發現原始資料的precipitation.snow也會跟著改變

• 這樣的情形下就需要用到深拷貝，如下：

const weather5 = JSON.parse(JSON.stringify(weather));
// 將資料轉成字串，再根據其原本型別轉換回去

weather5.precipitation.snow = 100;
console.log(weather5);
console.log(weather);

心得

在學習傳參考的這部分，剛開始也是很難理解，為什麼同樣的操作方式，在基本型別和物件型別上，會發生不一樣的情況．怎麼辦呢？就逝去找別人的文章分享或是看影片教學，一定會有一個你聽得懂的說明，多看範例並動手試試看不同的狀況，就會慢慢理解。