「JavaScript 30」學習筆記（十四）

「JavaScript 30」Study Notes
,

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

了解 JavaScript 的「By Value」和「By Reference」觀念。

筆記

在 JavaScript 中，Boolean、String、Number、null 和 undefined 都屬於「By Value」。

1
2
3
let age = 100;
let age2 = age;
age = 200;
  • age 和 age2 是存在於不同的兩個記憶體位置，因此彼此並不會乎相干擾影響。

在 JavaScript 中 Array 屬於「By Reference」。

1
2
3
const players = ['Wes', 'Sarah', 'Ryan', 'Poppy'];
const team = players;
team[3] = 'Lux';
  • players 和 team 其實是被指稱到相同的位置，當其中一個陣列的値改變，另一個陣列的値也會跟著改變。

要複製一個陣列，可以使用以下方法：

1
2
3
4
const team2 = players.slice();
const team3 = [].concat(players);
const team4 = [...players];
const team5 = Array.from(players);
  • slice() 方法會回傳一個新陣列物件，為原陣列選擇之 begin 至 end（不含 end）部分的淺拷貝。
  • concat() 方法被用來合併兩個或多個陣列。
  • ... 展開運算子允許一個表達式在某處展開。
  • Array.from() 方法會從類陣列（array-like）或是可疊代（iterable）物件建立一個新的陣列實體。

在 JavaScript 中 Object 也屬於「By Reference」。

1
2
3
4
5
6
const person = {
    name: 'Wes Bos',
    age: 80
};
const captain = person;
captain.number = 99;
  • person 和 captain 被指稱到相同的位置，當其中一個的値改變，另一個的値也會跟著改變。

要複製一個物件，可以使用以下方法：

1
2
3
const cap2 = Object.assign({}, person, {number: 99});
const cap3 = {...person};
const cap4 = JSON.parse(JSON.stringify(person));
  • Object.assign() 用來複製一個或多個物件自身所有可數的屬性到另一個目標物件。
  • ... 展開運算子允許一個表達式在某處展開。用在拷貝物件時，只有第一層能被拷貝。
  • JSON.stringify() 函式將値轉換為以 JSON 表示的字串。
  • JSON.parse() 函式將 JSON 表示的字串轉換為數値或是物件。