【系统学习ES6】第二节：解构赋值

【系统学习ES6】

本专题旨在对ES6的常用技术点进行系统性梳理，帮助大家对其有更好的掌握，希望大家有所收获。

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构是一种打破数据结构，将其拆分为更小部分的过程。

为何使用解构

传统写法中，从数组或对象中提取特定数据赋值给变量，编写了很多结构相同，变量不同的代码，例如：

let option = {
   name:'foo',
   type:'string'
};
let name = option.name;
let type = option.type;

以上代码的作用是，从option对象中提取name和type两个属性，赋值给变量name和type。此时只有两个变量，想象一下，如果有更多变量，那就要依次追加多句赋值。如果其中包含嵌套结构，那就要深入读取层级，才能找到目标变量。

也许是为了解决这种困扰，所以ES6为对象和数组添加了解构功能，在合适的场景下运用，大大减少代码量，提高工作效率。

解构成功的前提，是左右两侧类型一致，即：如果是对象解构，左侧被赋值变量必须包装在{ }内，同理，数组解构，左侧必须是[ ]。

对象解构

上文强调过：对象的解构，左侧必须是{ }。只要左侧的变量在右侧对象中有，即使位置不同，也可被成功赋值，但如果变量在右侧没有与之对应的属性，则会被赋值为undefined。

let option = { name:'foo', type:'string' };
let { name, type } = option;
// let { type, name } = option; // 此句与上句效果相同
console.log(name);  // 'foo'
console.log(type);  // 'string'
 
let { age } = option;
console.log(age);  // undefined
 
let { name } = option;
console.log(name); // 'foo'

注意：对象解构前，必须提供初始值（即右侧的对象）。如果右侧没有值，程序会抛异常。

let { name };  // Uncaught SyntaxError:

为非同名变量赋值

如果变量名与对象属性名不一致，可以通过解构对变量赋值么？ES6的另一个拓展语法可以帮助我们。

let option = { name:'foo', type:'string' };
let { name: attrName, type: attrType} = option;
console.log(attrName); // 'foo'
console.log(attrType);  // 'string'

这实际上说明，对象的解构赋值是下面形式的简写：

let { name: attrName, type: attrType} = { name:'foo', type:'string' };

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

嵌套赋值

可以单层解构赋值，就支持嵌套赋值。前提是左右两边形式一致。

let option = {
  name: 'foo',
  type: 'string',
  start: { row: 1, col: 0 }
};
let { start: { row } } = option;
console.log(row); // 1

数组解构

数组的解构与对象有一个重要的不同。对象的解构按属性名决定的，左右两侧变量位置可以不一致，但变量必须与属性同名，才能取到正确的值。

数组的元素是按顺序排列的，变量的取值由它的位置决定。只要等号两边类型相同（都是数组格式），左侧变量会按照位置关系，被赋予右侧数组的同的值。在这个过程中，右侧数组本身不会发生变化。

let [name, type] = ['foo','string'];
console.log(name);  // 'foo'
console.log(type); // 'string'

嵌套赋值

let [a, [b, c] = [1, [2, 3]];
console.log(name); // 1
console.log(type); // 2
console.log(height); // 3

如果左右形式不一致，可能会直接报错：

let [a] = 1; // Uncaught TypeError: 1 is not iterable

如果右侧数组元素数量比左侧变量多，可以解构成功。属于不完全匹配。

let [a, b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // 2

如果右侧数组元素数量比左侧变量少，这种情况属于解构失败，解构失败的变量会被赋值为undefined。

let [a, b] = [1];
console.log(a); // 1
console.log(b); // undefined
 
let [a, b, ...c] = [1];
console.log(a); // 1
console.log(b); // undefined
console.log(b); // []

此时，b是undefined理解，那c为什么是数组？这不是解构的锅，相关知识点，后面会讨论到。

默认值设置

不管是数组还是对象，解构赋值都允许指定默认值。只有当右侧相应属性或位置的值全等（===）undefined，默认值才会生效。

数组：

let [a = 1] = [];  // a=1
let [a, b = 2] = [1]; // a=1, b=2
let [a, b = 2] = [1, undefined]; // a=1, b=2
let [a, b = 2] = [1, null]; // a=1, b=null
let [a, b = 2] = [1, ""]; // a=1, b=""

对象：

let { name, type = 'string' } = { name: 'foo'}; 
// name:'foo' type:'string'
let { name, type = 'string' } = { name: 'foo', type: undefined}; 
// name:'foo' type:'string'
let { name, type = 'string' } = { name: 'foo', type: null}; 
// name:'foo' type:'null'
let { name, type = 'string' } = { name: 'foo', type: ''};
// name:'foo' type:''

圆括号的妙用

（1）如果要将一个已经声明的变量用于解构赋值，要注意一下写法。

let name = 'bar';
{ name } = { name: 'foo' };
console.log(name); // SyntaxError: syntax error

上面代码会报错，因为 JavaScript 引擎会将{name}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，才能解决这个问题。于是圆括号来了。数组同理。

let name = 'bar';
({ name } = { name: 'foo' });
console.log(name); // 'foo'

字符串解构

字符串也可以解构，这是因为，此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,e]="lemoncool";
console.log(a); // l
console.log(b); // e
console.log(c); // m
console.log(d); // 0
console.log(e); // n
.....

混合解构

讨论完对象和数组的解构，其实可以基于二者来创造更复杂的表达式解构。比如json中，数组和对象混杂，此时想解析到某个信息。是否可以实现呢？答案是肯定的，前提是格式要对应正确，篇幅有限，此处不再举例。

解构实用场景

解构，除了基础的变量赋值外，用途还有很多。

1、交换变量的值

let x = 1;
let y = 2;
[x, y] = [y, x];

上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

2、返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

3.引入脚手架中的指定方法

脚手架不想整体引入，可以指定引入某些方法。

import { cloneDeep, random } from 'lodash';　

到此，变量解构的使用方法及注意事项已梳理完毕。

下一节我们会一起讨论【拓展运算符和res运算符】，感谢大家支持，希望大家在每一节中都有所得。

 公棕号【前端便利贴】记录着一个程序媛的所见所得所想，分享日常技术笔记，内容覆盖了阅读、技术和个人思考~，关注公棕号更早获取更多文章。

觉得有用的话，小手点点【推荐】再走吖~~