1.解构数组
数组的解构赋值属于“模式匹配”,两边的模式相同,左边的变量就会被赋予对应的值。
//基本用法
let [a, b, c] = [1, 2, 3]; //a => 1, b => 2, c => 3
//嵌套解构
let [a, [b], c] = [1, [2], 3]; //a => 1, b => 2, c => 3
//不完全解构
let [a, b] = [1, 2, 3]; //a => 1, b => 2
//忽略
let [a, , c] = [1, 2, 3]; //a => 1, c => 3
//扩展运算符
let [a, ...array] = [1, 2, 3]; //a => 1, array => [2, 3]
//Set解构
let [a, b, c] = new Set([1, 2, 3]); //a => 1, b => 2, c => 3
//允许指定默认值
let [a = 1] = [undefined]; // a => 1
let [a = 1] = [null]; //a => null
let [a = 1, b = a] = []; //a => 1, b => 1
//默认值生效的条件是严格等于 undefined
2.解构对象
对象的解构和数组类似,但是对象必须保证key一致,才能取到值。
//基本用法
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo => 'aaa', b => 'bbb'
这种取值实际上是下面这种形式的简写,因为变量和模式字段相同,可以省略。
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
- 下面一个例子,定义了arr, a, b 三个变量 (p以及y都是匹配模式)
let {p: arr, p: [a, {y: b}]} = {p: ['hello', {y: 'world'}] };
// arr => [ 'hello', { y: 'world' } ], a => 'hello', b => 'world'
- 指定默认值
var {x, y = 5} = {x: 1}; // x => 1, y => 5
- 可以取到继承的属性
const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);
const { foo } = obj1;
// foo => "bar"
3.函数的默认值问题
//第一种
function move({x = 0, y = 0} = {}) {
console.log([x, y]);
}
//第二种
function move({x, y} = { x: 0, y: 0 }) {
console.log([x, y]);
}
这两种指定默认值的方式是不一样的,第一种给x,y变量单独指定了默认值;第二种是给move函数指定了一个默认值。
- 当函数的参数 (params) 严格等于undefined时,两种函数解构形式都为
{x = 0, y = 0} = {}
; 否则第一种解构形式为{x = 0, y = 0} = params
,第二种解构形式为{x, y} = params
。
//解构形式相同
move(); // [0, 0]
move(undefined); // [0, 0]
//解构形式不同
move({x: 3, y: 8}); // 第一种[3, 8] , 第二种[3, 8]
move({x: 3}); // 第一种[3, 0] , 第二种[3, undefined]
move({}); // 第一种[0, 0] , 第二种[undefined, undefined]
move({x: null, y: undefined}); // 第一种[null, 0] , 第二种[null, undefined]