2021-08-02

Dev

ES20XX Modern JS 新語言特性筆記 | Spread, Rest & Destructuring

說明
ECMA JavaScript ES20XX 系列筆記
參考資料
1. ES20XX
2. Node.js Dancing with ES20XX

筆記從 ES2015 / ES2016 / ES2017 / ES2018 / ES2019 / ES2020 以來，JS 所加入的新語言特性。使用的情境新語言特性不僅是為了減少對第三方套件的依賴 (Lodash)，也是基於 ESLint 上 Clean Code、Best Practices 規範要求。熟悉新語言特性不僅能夠使 JS 開發更加快速也能夠提升閱讀性。

說明

本篇筆記為 Modern JS 所相關的 Spread、Rest、Destructuring 語法，同樣都是使用了 … 的符號，但卻有不同的情境語意。

Rest Parameters

在參數中使用 Three Dots 修飾參數，可以將複數個引數(Arguments)轉換為 Array，稱為 Rest Parameters。Rest Parameters 必須在複數參數最後順序使用，且僅允許一個 Rest Parameters。

Rest Parameters 的使用位置在 fucntion 的參數宣告區塊，使用的情境如 function 可以將引入包裝成一個 Array，以方便使用 Array 相關的 Method 進行處理。

const countIf = function (minimum, ...args){
  return args.filter(e => e > minimum).length;
}

countIf(3, 2, 3, 4, 5, 6)
// 3

Spread Operator

不同於 Rest 是將數個引數集合成 Array，Spread 則是將陣列中的各元素拆解為引數。Spread Operator 使用的位置在 Array 當中，用於展開其他 Array 的 elements。

Spread Operator unpacks elements, while Rest Parameter packs elements into an array.

例如在 Literal Array 可以將其他的 Array Element 加入其中：

const even = [2, 4, 6]
const combined = [1, 3, 5, ...even]
// [1, 3, 5, 2, 4, 6]

或者可以為作為合併 Array 的使用目的：

const even = [2, 4, 6]
const odd = [1, 3, 5]
const numbers = [...even, ...odd]
// 2, 4, 6, 1, 3, 5

也可以用於複製 Array，但是 Shadow Copy 而非 Deep Copy，如果 Array 中的 element 為 Object 只會複製參照，而不會重新產生新的 Object。

let games = [
  {name: 'DQB2', qty: 1}, 
  {name: 'DQ5', qty: 2}
]
let copyGames = [...games]

copyGames[0].qty = 2;
// games' object is affteced
console.log(games[0].qty)
// 2

Destructuring Array

Destructuring 可以用於為變數賦值。

[a, b, c] = [1, 2, 3]
//a = 1, b = 2, c = 3
[e, f] = [4, 5, 6]
//e = 4, f = 5
[g, h] = [7]
//g = 7, h = undefined

Rest

也可以用 Rest 的方式，將部分的值另外集合起來作為新的 Array。

[x, y, ...arr] = [1, 2, 3, 4, 5]
// x = 1, y = 2, arr = [3, 4, 5]

default value

[x = 10, y = 15] = [20]
//x = 20, y = 15

Nested Array Mapping

巢狀的 Array 在解構賦值上也有對應的方式。

[
  name, 
  job, 
  [item1, item2, item3]
] = 
[
  'Loto', 
  'Warrior', 
  ['Flame Sword', 'Full Plate', 'Herb']
]
// name = 'Loto'
// job = 'Warrior'
// item1 = 'Flame Sword'
// item2 = 'Full Plate'
// item3 = 'Herb'

交換數值的應用

在 python 可以輕鬆交換變數數值的功能，藉由 Destructuring 也可以輕鬆處理囉 😋

let x = 2, y = 7;
[x, y] = [y, x]
// x = 7, y = 2

擴充函式回傳的彈性

讓函式可以回傳多個數值，並且用 Array 包裝，接收端則使用 Destructuring 的方式分別賦值給予變數。

const stringFactory = (str) => [str.toUpperCase(), str.toLowerCase()]

[upper, lower] = stringFactory('Hello World');
// upper = 'HELLO WORLD'
// loewr = 'hello world'

Spread & Destructuring Objects

ES2018 開始，不僅能夠針對 Array 進行 Spread 及 Destructuring，JS 對於 Object 也支援 Spread 及 Destructuring。

Spread

可以用於合併物件的屬性，例如想要把各學習階段物件的知識技能傳承下去：

const elementrySchool = {read: 6, calculate: 3}
const juniorHighSchool = {readEng: 3, calculate: 5}
const seniorHighSchool = {readEng: 7, calculate: 9, coding: 2}

let now = {...elementrySchool, ...juniorHighSchool, ...seniorHighSchool}
// { read: 6, calculate: 9, readEng: 7, coding: 2 }

如果有相同名稱的 properties 則順序很重要，後進行 destructuring 的值會覆寫先前的值。

let now = {...juniorHighSchool, ...seniorHighSchool, ...elementrySchool}
// { readEng: 7, calculate: 3, coding: 2, read: 6 }

Spread 也可以用於 shallow copy 的方式產生新的 Object：

const slime = {color: 'blue', hp: 3, mp: 1}
const redSlime = {...slime, color: 'red'}
// { color: 'red', hp: 3, mp: 1}

Destructuring

這是使用 Destructuring 在語法上比較特別的地方，當 slime Object 有提供 hp property 時，會使用該 property 作為 healthPoint variable 的數值，否則就會以預設值 5 作為 healthPoint 的數值。

來自解構對象的名稱要在冒號之前，賦值的變數值名稱則是在冒號之後：

const slime = {color: 'blue', hp: 3, mp: 1}
let {hp: healthPoint = 5, fast = 3} = slime
// healthPoint = 3
// fast = 3

此外如果 Destructuring 右側的物件有同名的 Property 與左側解構的名稱相同，則會自動以右側解構的值進行覆寫：

const slime = {color: 'blue', hp: 3, mp: 1, fast: 5}
let {hp: healthPoint = 5, fast = 3} = slime
// healthPoint = 3
// fast = 5

對於 null destructuring 以及 nested 的處理都如同 Array 的支援 🙄

Real Example Code

用途是從 localStorage 將資料讀回，並寫回 Vue 的 Data 之中，其中因為 wrongs 儲存的是 Set，所以另以賦值的方式處理。

/*
appSavings in localStorage
appSavings | {"corrects":[119,309],"wrongs":[800,1069,489],"completed":5}
*/

if (localStorage.appSavings !== undefined) {
  const appSavings = JSON.parse(localStorage.appSavings);

  ({ corrects: this.corrects, completed: this.completed } = appSavings);
  this.wrongs = new Set(appSavings.wrongs);
}