ES6 之 变量的解构赋值

147 阅读2分钟

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]

参考 es6.ruanyifeng.com/#docs/destr…