[JS]關於解構賦值(Destructuring Assignment)

前言

剛開始接觸JS的時候，常常會很困惑解構賦值的寫法，這篇會來整理關於解構賦值的用法來幫助釐清觀念。

解構賦值 (Destructuring assignment)

解構賦值 (Destructuring assignment) 語法是一種 JavaScript ES6的 運算式，可以把陣列或物件中的資料提取出來成為獨立變數。新語法讓程式變得簡短提高閱讀性。

在英文官方文件中提到使用方式如同鏡子般，對映出陣列或物件字面的結構。但沒有像鏡子左右相反。

• The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects using a syntax that mirrors the construction of array and object literals.

陣列解構賦值

let a, b, rest;
[a, b, ...rest] = [10, 20, 30, 40, 50]; 
//a = 10 , b = 20, rest = [30, 40, 50]

const [a, , b,c] = [10, 20, 30] 
// 略過某些值 a = 10, b = 30 
// 超過值得數量 c = undefined

const a = 1, b = 2;
[b, a] = [a, b]
//互換變數值 a = 2, b = 1

const [a, [b, [c, d]]] = [1, [2, [[[3, 4], 5], 6]]]
// 多維複雜陣列 a = 1, b = 2, c = [3, 4], d = 5

const str = "hello";
const [a, b, c, d, e] = str
// 字串則會拆解為字元帶入變數中 a = 'h', b = 'e'

物件解構賦值

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
//a = 10 , b = 20, rest = {c: 30, d: 40}
const {a, c} = {a: 10, b: 20, c: 30, d: 40};
//a = 10 , c = 30
//物件快速提取特定值，在JSON data上使用方便

一般常見的物件寫法

const name = {first: 'Fred', last: 'Waterford'};
const first = name.first;
const last = name.last;
//一般寫法

const {first, last} = name;
// 解構寫法 first = 'Fred', last = 'Waterford'

• 物件的解構賦值屬性名稱必須相互對應才能夠取得到值。
  上述用法算是簡寫，實際上寫法為 {屬性名稱:變數}

const name = {
  first: 'Fred', 
  last: 'Waterford'
}

const {first:first, last:last} = name;
// first = 'Fred', last = 'Waterford'

const {first:a, last:b} = name;
// a,b才是變數 a = 'Fred', b = 'Waterford'

const {first1:a, last:b} = name;
//若沒有對應值 a = undefined

混用物件或陣列解構賦值

const {a: x, b: [, y]} = {a: 5, b: [10, 100]}
console.log(x, y) // 5, 100

解構賦值時給定預設值

let [a, b, c = 4, d = 'Hello'] = [1, 2, 3];
console.log(a, b, c, d); 
//c,d都給預設值，但c有賦值所以c=3，d則帶入預設值 
// 1, 2, 3, "Hello"

搭配函式的傳入參數使用

函式的參數使用解構賦值的方式，則能夠自訂變數名稱、順序、預設值

const user = {
  id: 10,
  displayName: 'F. Waterford',
  fullName: {
    firstName: 'Fred',
    lastName: 'Waterford'
  }
};

function who({displayName: shortName, fullName: {firstName: name}, id}) {
  return `#${id} ${shortName}'s first name is ${name}`;
}

console.log(who(user));
//#10 F. Waterford's first name is Fred

帶入預設值

function func({a = 'Peter', b}) {
  return `${a} & ${b}`
}

func({a: 'Ana', b: 'John'}); // Ana & John
func({b: 'John'}); // Peter & John
func({a: 'Ana'}); // Ana & undefined
func({}); // Peter & undefined
func('Ana', 'John'); //Peter & undefined
func(); // Cannot read property 'a' of undefined


//若整個參數有預設值則func()回傳結果與func({})相同
function func({a = 'Peter', b}={}) {
  return `${a} & ${b}`
}
func(); //Peter & undefined

//若整個參數有預設值為其他值，func()則回傳其值
function func({a = 'Peter', b}={a: 'Ana', b: 'John'}) {
  return `${a} & ${b}`
}
func(); //Ana & John

框架的解構賦值

React和Vue3都有類似的用法

const { ref, reactive } = Vue;

var React = require('react-native')

var {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicatorIOS,
  Image,
  Component
} = React;

參考資料

• MDN-解構賦值
• 從ES6開始的JavaScript學習生活
• 鐵人賽：ES6 解構賦值
• [筆記] JavaScript ES6 中的物件解構賦值（object destructuring）
• [筆記] JavaScript ES6 中的陣列解構賦值（object destructuring）