iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 19
2
Modern Web

實作經典 JavaScript 30系列 第 19

Day19: JS中引用與複製的差異(一)

WES BOS系列影片
Alex快速導讀系列影片

最一開始可以先試試看這兩段程式碼

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);

可以先不console,猜猜它們的值分別是多少?
知道答案後,發現重新賦值並不會影響第二個變數
我們可以用記憶體的方式來思考整個資料流程

現在我們知道在JavaScript中,值是可以分享的。
如果還是不理解,請看Alex老師的直播講解。

再來我們來試試Array(陣列)的引用與複製
首先,我們有一段名為players的Array,
然後我們讓team = players
現在改動team[3]的資料
會發生甚麼事?

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

這次是直接更動陣列中的值,結果發現
team的更動直接就影響players,
這就只是引用而不是複製
如果想要複製一個新的陣列,不互相影響,該怎麼作?
總共有4個方法

1.splice()

const team2 = players.slice()

2.concat()

const team3 = [].concat(players)

3.ES6語法

const team4 = [...players]

4.Array.from()

const team5 = Array.from(players)

這四種方法皆能生成新的陣列,改動新陣列時就不再影響
原始的陣列了。

今天的分享到這
明天繼續來看物件如何複製。


上一篇
Day 18 : 為網頁增加圖片動畫效果
下一篇
Day20: JS中引用與複製的差異(二)
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言