iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 28
1
自我挑戰組

JavaScript Array x 學習筆記系列 第 28

[Day 28 | Spread syntax - {...} (展開運算子)]

{...} (Spread syntax)

JavaScript ES6 新增了 「...」 這個...符號?關鍵字!?運算字元?!

{...} 的中文名稱是「展開運算子」

記得第一次遇它時,

還以為別人的文章寫錯了...(超俗

想要 google 查資料卻不知道該打什麼,「...」!? (俗到爆...

{...} 展開運算子的功能是將陣列展開成各別元素


Syntax(from: MDN)

  • 在函式裡它會這樣用
myFunction(...iterableObj);
  • 在陣列或字串時它會這樣用
[...iterableObj, '4', 'five', 6];
  • 在物件時它會這樣用
let objClone = { ...obj };

看起來好像很不錯,使用上不會太難,接著看範例吧


Example

// 平常要合併兩個陣列資料大多會使用 concat()  
let arr = [1, 2, 3];
let arr2 = [4, 5];
arr = arr.concat(arr2);
console.log(arr); //[1,2,3,4,5]

// 使用 {...} 後可以更簡潔
let arr = [1, 2, 3];
let arr2 = [4, 5];
console.log([...arr,...arr2]) //[1,2,3,4,5]

Example2

// 合併陣列 part2

let arr = ['a', 'b'];
let arr2 = [arr, 'c', 'd'];
console.log(arr2); // [ [ 'a', 'b' ], 'c', 'd' ] 

//使用 {...} 後
let arr = ['a', 'b'];
let arr2 = [...arr, 'c', 'd'];
console.log(arr2) //['a','b','c','d']

上一篇
[Day 27 | Array.isArray () ]
下一篇
[Day 29 | statement - for...of ]
系列文
JavaScript Array x 學習筆記30

尚未有邦友留言

立即登入留言