JavaScript – 解构赋值 Destructuring Assignment

参考

阮一峰 – 变量的解构赋值

Array Destructuring Assignment

old school

const items = [1, 2, 3];
const item1 = items[0];
const item2 = items[1];
const item3 = items[2];

一个一个从 array 拿出来, 再一个一个 assign 给每一个变量.

modern

const [item1, item2, item3] = [1, 2, 3];

一行里面做了 declare, assign, read from array. 3 个动作一气呵成.

get someone

const [, , value3] = [1, 2, 3];

with default value

const [v1] = []; // v1 = undefined
const [v1 = 'default value'] = []; // v1 = 'default value'
const [v1 = 'default value'] = ['value']; // v1 = 'value'

Object Destructuring Assignment

它和 Array 的用法差不多

const person = { name: 'Derrick', age: 11 };
const { name, age } = person;

with alias 别名

const person = { name: 'Derrick', age: 11 };
const { name: newName, age: newAge } = person;
console.log(newName);
console.log(newAge);

name: newName 中间使用了分号

with default value

const { name = 'Derrick', age } = {};
// name = 'Derrick'
// age = undefined

nested

解构支持嵌套哦,

document.dispatchEvent(
  new CustomEvent('myevent', {
    detail: {
      tabName: 'tab name',
    },
  })
);

监听时解构获取 tabName

document.addEventListener('myevent', ({ detail: { tabName } }) => {
  // do something...
});

Common Use Case

上面的例子解构以后都被赋值到变量, 这个是最 common 的用法.

但其实你要 assign 到哪里都是可以的哦.

assign to parameters

function method1([v1, v2]) {
  console.log(v1);
  console.log(v2);
}
method1(['value1', 'value2']);

function method2({ name, age }) {
  console.log(name);
  console.log(age);
}
method2({ name: 'Derrick', age: 11 });

assign to existing variables (swap value)

let v1 = 1;
let v2 = 2;
[v1, v2] = [v2, v1];
console.log(v1); // 2
console.log(v2); // 1

 

Mix cost and let when using destructuring assignment

参考: stackoverflow – How to mix const and let when using object or array destructuring assignment in ES6?

在 C# 可以这样 mix 着写

在 JS 则不行, 如果是要 declare const 或 let 那么就必须全部都是一样的, 同理如果是要 assign to exsiting variables 必须全部都是 existing.

解决方案就是多写几个 destructuring assignment 咯.

const array = [1, 2, 3];
let existingValue = 1;
[existingValue] = array;
const [, value2] = array;
let [, , value3] = array;

是不是有一种, 一个一个写更好的感觉...哈哈