iT邦幫忙

1

JavaScript ⑅ES6:展開運算子 & 其餘運算子

RIN 2020-11-16 02:46:011270 瀏覽

展開運算子及 其餘運算子( 又稱 其餘參數 )
他們有共通特點,那就是「 都跟陣列有關 」
 
寫法就是 ...
沒錯,就是 「 ... 」( 寫在文字編輯器中應該是會變色 )
 
 

⑅ 展開運算子 (spread operator)

啊到底是要展開什麼,這個東西很妙,他可以各種展開。
直接看例子:

let a = ['阿喵', 'kent', 'Ben'];
let b = ['水母', '蛋花', '湯'];

let c = [...a , ...b];
console.log(c) //['阿喵', 'kent', 'Ben', '水母', '蛋花', '湯']

WTF
居然 ... 就讓他們合體了 什麼巫術?

仔細的看一下

console.log(...a) // '阿喵', 'kent', 'Ben'
console.log(...b) // '水母', '蛋花', '湯'

原來就是 concat 啊
關於 concat 的用法這邊 ( 推銷自己文章 )
 


⑅ 淺拷貝

沒有在罵髒話

大家都知道 JS 有深拷貝 跟 淺拷貝
如果陣列or 物件 他們有一樣的參考位置的話,修改其中一樣、另外一樣也會跟著被更動到。

let a = ['阿喵', 'kent', 'Ben'];
let b = a ;
b[0] = '秀柱';

console.log(a) // ['秀柱', 'kent', 'Ben']

夭壽,我不是改b 嗎? 為什麼 a 會被改到啊?
這就是因為他們有一樣的參考位置 的關係。

在講這個 ... 會提到淺拷貝,
其實是因為 ... 可以解決這樣的問題 。

如下:

let a = ['阿喵', 'kent', 'Ben'];
let b = [...a] ;
b[0] = '秀柱';

console.log(a) // ['阿喵', 'kent', 'Ben']

... 好像真的很方便!!
 


⑅ 類陣列 卻不是陣列?

JS 有很多 看起來跟陣列就是99.9987% 像但卻不能用陣列操作法的東東
稱他們為 類陣列

像是這種:

<!-- HTML -->
<li class='item'> 123 </li>
<li class='item cat'> 123 </li>
<li class='item'> 123 </li>
const item = document.querySelectorAll('.item')
console.log(item)
	// NodeList(3) [li.item, li.item.cat, li.item]

const item1 = item.filter( i => 
  i.classList.contains('cat'))
	// Uncaught TypeError: list_a.filter is not a function 

這種NodeList 就是類陣列。

使用展開運算子 居然能讓他變成 陣列

const item = [...document.querySelectorAll('.item')]
console.log (item) 
	// [li.item, li.item.cat, li.item]

const item1 = item.filter( i =>
  i.classList.contains('cat'))
console.log(item1)
	// [li.item.cat]

 


⑅ 其餘運算子(rest operator)

就很字面上的意思,其餘參數。

他會放在函式的參數括號內,然後記得他必須放最後一個,否則會跳錯。

這個參數也可以用陣列操作法去操作( forEach 、map 之類的 )

function fn(...a){
  console.log(a)
  
  let num = a.filter(i=>i>3)
  console.log(num)
		// [4, 5, 6]
}
fn(1,2,3,4,5,6)

再來「如果有多個參數,他要放最後面」的範例:

function fn(x,y,...a){
  console.log(`參數 x 是 ${x}`)
		// 參數 x 是 1
  console.log(`參數 y 是 ${y}`)
		// 參數 y 是 2
  console.log(`參數 ...a 是 ${a}`)
		// 參數 ...a 是 3, 4, 5, 6
}
fn(1,2,3,4,5,6) 

 


⑅ 物件 + 展開 = 這太懶了吧

如 title (
這邊直接看 code 會比較好懂:

const cat_mother = {
    mother_name: '喵仔',
    mother_age: 2,
    mother_color: 'yellow'
}
const cat_father = {
    father_name: '喵吉',
    father_age: 55,
    father_color: 'Rainbow'
}
const cat = {
    name: '阿貓',
    age: 10,
    color: 'pink',
		...cat_mother, //展開貓媽媽
		...cat_father //展開貓爸爸
}

console.log(cat)
 /* Object {
      age: 10,
      color: "pink",
      father_age: 55,
      father_color: "Rainbow",
      father_name: "喵吉",
      mother_age: 2,
      mother_color: "yellow",
      mother_name: "喵仔",
      name: "阿貓" 
}*/

 
 
ES6 真的懶 ww
以後看到 ... 就不會錯愕哩 ꉂꉂ(ᵔᗜᵔ*)

じゃあねー ♫


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言