iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

新手初探 Vue系列 第 21

鐵人賽Day22 - ES6 之展開與其餘

在陣列的操作上,ES6 多了許多方便的方法,首先先介紹展開,展開的部分可以讓我們合併陣列更直覺:

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = ['老媽', '老爸'];
let groupAll = groupA.concat(groupB);

在以往我們要合併陣列只能使用 .concat() 方法,但是在 ES6 我們可以寫成如下:

let groupAll = [...groupA,...groupB];

這時候陣列就會合併
我們用 console 來看 ... 到底在做什麼

console.log(...groupA)

會發現,它是把陣列的值一個一個取出來再 return 回去

使用這樣的展開語法,相對的有一種淺複製的觀念:

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = groupA
groupB.push('阿明');
console.log(groupA);

這時候 console 會輸出什麼呢?
答案是 ['小明', '杰倫', '阿姨', '阿明']groupA 陣列也被改寫了
這是因為陣列跟物件一樣,都是傳參考的特性,但是我們想 push 值到陣列 groupB 內又不想動到陣列 groupA 可以這樣寫:

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = [...groupA];
groupB.push('阿明');
console.log(groupA); 

這時候在 console 看,就會發現陣列 groupA 是不會 push 任何值進去的,這就是淺複製的觀念

再來是類陣列的部分,我們也可以透過展開語法使其變成陣列:

let doms = document.querySelectorAll('li');
console.log(doms);

console 看的時候,資料型態會很像陣列,但是看 proto 的部分,會發現可以用的方法很少,這是類陣列
但是又想把它當作陣列來操作的時候,就可以使用展開:

let doms = document.querySelectorAll('li');
let newDoms = [...doms];
console.log(newDoms);

這時候去 consoleproto 的部分就會是 array 的型態,陣列的方法也都可以使用了

再來是其餘的部分:

function moreMoney(money) {
  console.log(money);
}
moreMoney(100, 100, 100)

照上面的程式碼,function 會自動省略多餘的參數,但有時候就是不確定我們帶進去的參數會有幾個,這時候我們就可以在 function 的參數部分使用展開語法:

function moreMoney(...money) {
  console.log(money);
}
moreMoney(100, 100, 100)

這時候在 console 看,就會是陣列型態的參數


上一篇
鐵人賽Day21 - ES6 之 let 和 const
下一篇
鐵人賽Day23 - ES6 之解構賦值
系列文
新手初探 Vue30

尚未有邦友留言

立即登入留言