引言

数组和对象就像一个 “压缩包”。

在需要单独引用数组中的某一个元素时，解构赋值可以很方便的完成这个任务，它可以将数组和对象整体 “解压缩” 到一堆变量上，不同的元素 (属性) 对应不同的变量。

数组的解构赋值

基本用法

使用数组中的元素，最直接的办法是通过数组的索引。

const user = ['kylin', 18, '女'];const name = user[0];const age = user[1];const gender = user[2];console.log(name, age, gender); // kylin 18 女

数组的解构赋值会简化这个过程。

const user = ['kylin', 18, '女'];const [name,  age,  gender] = user; // 就好像将数组元素分别解压到 3 个常量上console.log(name, age, gender); // kylin 18 女

模式匹配

数组的解构赋值有两种模式匹配情况，一种是 “等号” 两侧的模式一致。

const user = ['kylin', [[18], ['女']]];// const [name, age, gender] = user; // 这种模式是解构不出来的const [name, [[age], [gender]]] = user;console.log(name, age, gender); // 成功输出：kylin 18 女

另一种是 “等号” 两侧模式一致，但忽略了某些元素值，相当于不完全解构 。

const [js, php] = ['JavaScript', 'php', 'Java'];console.log(js, php); // const [js, php] = ['JavaScript', 'php', 'Java'];console.log(js, php);

默认值

有时候，数组的元素比定义的变量 (常量) 要少，但赋值并不会报错，多出来的变量会默认为 undefined 。

const [name, age, gender] = ['kylin', 18];console.log(name, age, gender); // kylin 18 undefined

也可以给多出来的变量默认值，当数组元素少于变量个数时，变量将采用默认值。

const [name, age, gender = '女'] = ['kylin', 18];console.log(name, age, gender); // kylin 18 女

数组元素值是显式的 undefined 时，变量也采用默认值。

const [name, age, gender = '女'] = ['kylin', 18, undefined];console.log(name, age, gender); // kylin 18 女

...rest 模式

数组的解构赋值可以配合 ...rest 模式使用。

const [name, age, ...rest] = ['kylin', 18, '女', '2020', 'JS'];console.log(name, age); // kylin 18console.log(rest); // rest是个数组  ["女", "2020", "JS"]

...rest 模式这里是一个数组，它由什么组成？代码中，先将 'kylin' ，'18' 两个数组元素 “解压到” 常量 'name' 和 'age' 上，然后将剩余的数组元素 '女' ，'2020' ，'JS' 打包到 rest 中，形成一个数组。

需要注意的问题

等号右侧任何可遍历的结构都可以用数组解构 (具备 Iterator 接口) 。

例如，字符串，Set 和 Map 结构。

const [k, y, l, i, n] = 'kylin';console.log(k, y, l, i, n);  // k y l i nconst [name, age, gender] = new Set(['kylin', 18, '女']);console.log(name, age, gender); // kylin 18 女const [[name, age], [gender, year]] = new Map([['kylin', 18], ['女', '2020']]);console.log(name, age, gender, year); // kylin 18 女 2020

等号右侧不是数组，不可以用数组解构赋值 。

// 报错，x is not iterable，x = {} ，null ，100 ....const [name] = {}; const [name] = null;const [name] = undefined;const [name] = true;const [name] = 100;

还有一个比较隐秘的小问题容易忽视。

有时候可能需要一个定义好的变量，随后对它进行解构赋值。

let name;let age;const user = ['kylin', 18] //  没有分号，与下一行的'[ ，(' 等字符连接，导致 arr 初始化失败[name, age] = user; // 报错了console.log(name, age);

如果加上分号就没问题了。

let name;let age;const user = ['kylin', 18];[name, age] = user;console.log(name, age); // kylin 18

一些使用方式

用逗号过滤不想要的元素。

const [name, age, , year] = ['kylin', 18, '女', '2020'];console.log(name, age, year); // 过滤了 女 ，kylin 18 2020

字符串有一个 split() 方法，将字符串用指定的分隔符分割成数组。

const word = 'hello kylin';const say = word.split(' ');console.log(say); // ['hello', 'kylin']

配合数组的解构赋值，是个不错的主意。

const word = 'hello kylin';const [say, name] = word.split(' ');console.log(say, name); // hello kylin

数组的解构赋值可以交换变量。

let firstName = 'kylin';let lastName = 'kun';[firstName, lastName] = [lastName, firstName];console.log(firstName, lastName); // kun kylin

数组的解构赋值还可以给对象增加属性。

const user = {};const person = ['Kylin', 18];[user.name, user.age] = person;console.log(user.name, user.age); // Kylin 18

可以配合 for...of 和 Map 使用。

const user = new Map();user.set("name", "Kylin");user.set("age", "18");for([key, val] of user) {  console.log(`${key}: ${val}`);}/* * name: kylin * age: 18*/

适用于函数返回数组的情况，也适用于函数参数是数组的情况。

function getUser(){  const user = ['kylin', 18, '女'];  return user;}const [name, age, gender] = getUser();console.log(name, age, gender); // kylin 18 女// -------------------------function getUser([name, age]) {  console.log(`姓名：${name}，年龄：${age}`);}getUser(['kylin', 18]); // 姓名：kylin，年龄：18

配合 Object.entries() 方法。

Object.entries() 会把对象的键值转换用数组的形式表现出来。

const user = {  name: 'kylin',  age: 18};const info = Object.entries(user);console.log(info); // [['name', 'kylin'], ['age', 18]]

Object.entries() 方法可以和数组的解构赋值一起使用。

const user = {  name: 'kylin',  age: 18};const info = Object.entries(user);const [[keyName, name], [keyAge, age]] = info;// name:kylin, age:18console.log(`${keyName}:${name}, ${keyAge}:${age}`);

或者直接用 for...of 遍历。

const user = {  name: 'kylin',  age: 18};const info = Object.entries(user);for(const [key, val] of info) {  console.log(`${key}: ${val}`);}/* * name: kylin * age: 18*/

解构一个日期。

const [full, year, month, day] = /^(dddd)-(dd)-(dd)$/.exec('2020-03-28');console.log(full); // 2020-03-28console.log(year); // 2020

对象的解构赋值

基本用法

对象也可以进行解构赋值。

const user = {  name: 'kylin',  age: 18};const {name, age} = user;console.log(name, age); // kylin 18

注意等号左边是 {} ，而不是 [] 。

模式匹配

对象的属性顺序无关紧要。

const user = {  name: 'kylin',  age: 18};const {age, name} = user;console.log(name, age) // kylin 18

定义的变量名必须和对象的属性名一致，否则，变量名会是 undefined ，取不到任何值。

const user = {  name: 'kylin',  age: 18};const {n, age} = user;console.log(n, age); // undefined 18

不过，可以自定义一个变量简写，来简化后期用的变量名。

const user = {  myEnglishName: 'kylin',  age: 18};const {myEnglishName: name, age} = user;console.log(name, age); // kylin 18if (name === 'kylin') {  // ...} else {  // ...}

此时的 name 是变量，而 myEnglishName 不是变量。

默认值

对象的解构赋值同样支持默认值。

const user = {  name: 'kylin',  age: 18,  hobby: 'football'};const {name, age, work = 'student', hobby = 'food', gender, year = '2020'} = user;console.log(name, age, work, hobby, gender, year); // kylin 18 student football undefined 2020

对象中存在的属性，定义的变量就不会使用默认值，而不存在的属性，定义的变量依然是 undefined ，如果有默认值，就使用默认值 。

简写变量同样可以取得默认值。

const user = {  name: 'kylin',  age: 18,  hobby: 'football'};const {name: n, age: a, work: w = 'student', hobby: h = 'food', gender: g} = user;console.log(n, a, w, h, g); // kylin 18 student football undefined

...rest 模式

与数组的解构不同，对象的解构遇到 ...rest 模式时，会将剩余的属性收集为一个对象集合。

const user = {  name: 'kylin',  age: 18,  hobby: 'football'};const {name, ...rest} = user;console.log(name, rest); // kylin {age: 18, hobby: "football"}

需要注意的问题

在 JavaScript 中 {} 是个代码块，把它放在等号左侧，会导致报错。

let name;let age;const user = {  name: 'kylin',  age: 18}; {name,age} = user;console.log(name, age);

这种情况需要加上 () 告诉 JavaScript 不是代码块。

let name;let age;const user = {  name: 'kylin',  age: 18}; // 注意分号，参考上面的数组({name, age} = user);console.log(name, age); // kylin 18

一些使用方式

设置一个配置文件，然后传入函数。

const opts = {  width: 200,  height: 100,  speed: 1};function render({name = '盒子', width: w = 50, height: h = 20, speed}) {  console.log(`移动宽度为 ${w} ，高度为 ${h} 的 ${name} , 速度：${speed}`);}render(opts); 

嵌套的解构也可以。

const user = {  basic: {    id: '001',    username: 'kylin',    password: '123456'  },  work: ['JavaScript', 'Node'],  score: 88,  public: true};const my = {  basic: {    id,    username: u,    password: p  },  work: [js, node],  score,  public,  gender = '女'} = user;console.log(id, u, p, js, node, score, public, gender );// 001 kylin 123456 JavaScript Node 88 true 女

总结

解构赋值，我认为是一个非常好的功能，如果能熟练运用它，可以提高工作效率。

相关阅读：《了解 JavaScript 的 rest参数与扩展运算符 (ES6)》

文章中的图片来源于网络，若有侵权行为，请在后台与我联系。