Javascript 初學筆記31 利用Destructuring Assignment做出slice的效果

在之前有學到所謂的陣列扁平化,也就是擴展運算子"…"的使用,當時就有個名詞吸引了我的注意-destructured,意即某元素的拆解,這幾天我花了一些時間在作基本的複習,終於再次見到了這方面的使用。首先看一下擴展運算子的基本使用,接著再看一些陣列或是物件的拆解會更有感覺。

let arr1 = [1,2,3,4,5,6]
console.log(Math.max(arr)) //NaN
console.log(…arr) //1 2 3 4 5 6
console.log(Math.max(…arr)) //6

上方例子中,由於先利用擴展運算子將arr1作扁平化(其實就是拆解),於是可以使用Math.max找出最大值,除此之外還有其他的拆解方式,可以用來作出與slice相同的效果,也就是今天的主題Destructuring Assignment。
一樣利用上方的例子,假設你今天要將陣列一分為二,僅取出前兩者可以怎麼做?
最直觀的方法當然就是slice了。

arr.slice(0,2) // [1,2]

但其實還存在著其他的方法,先看一下所謂destructuring assignment的基本用法

let arr = [1,2,3,4,5,6]
let [a,b,...list] = arr
console.log(a) //1
console.log(b) //2
console.log(list)  // [3,4,5,6]

------------------------------------
const AVG_TEMPERATURES = {
  today: 77.5,
  tomorrow: 79
}; 
const { today,tomorrow } = AVG_TEMPERATURES // today = 77.5 tomorrow = 79
const {x:today,y:tomorrow} = AVG_TEMPERATURES  // x = 77.5 y = 79

了解基本語法後相信要做出slice的效果就非常簡單了,不過目前用這種方式我只能取出後半段,而無法將前兩個元素取出作為一個陣列存放,這倒是有些傷腦筋了。

發表留言