ES6 数组的结构赋值

ES6数组的结构赋值

读于阮一峰老师的ES6入门书籍

1.基本用法

ES6允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称为结构;

//  以前为变量赋值只能直接指定值
let a = 1;
let b = 2;
let c = 3;

// ES6 可以写成
let [a, b, c] = [1, 2, 3];

1.1 数组结构案例

let [, , third] = ['a', 'b', 'c'];
// third = 'c'

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

let [head, ...tail] = [1, 2, 3, 4, 5];
// head = 1
// tail = [2, 3, 4, 5]

let [x, y, ...z] = ['a'];
// x = "a"
// y = undefined
// z = []

注意: 如果结构不成功,变量的值为undefined

1.2 嵌套数组结构

let [a, [[b], c]] = [1, [2], 3];
// a = 1
// b = 2
// c = 3

1.3 数组结构错误案例

如果等号右边不是数组(严格来说不是可遍历结构),将会报错

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

注意: 只要某种数据结构具有iterator接口,都可以采用数组形式的解构赋值

// fibs函数是一个Generator函数,原生具有Iterator接口,解构赋值会依次从这个几口中获取值
function* fibs() {
  let a = 0;
  let b = 1;
  while(true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
// sixth = 5

2.默认值

解构赋值允许指定默认值

let [foo = true] = [];
// foo = true

let [x, y = 'b'] = ['a']; 
// x = 'a'
// y = 'b'

let [x, y = 'b'] = ['a', undefined]; 
// x = 'a'
// y = 'b'

es6 内部使用严格的相等运算符(===)判断一个位置是否有值, 所以,如果一个数组成员不严格等于undefined,默认值是不会生效的;

// 情况1
let [x = 1] = [undefined];
console.log('x:', x);   // 1

// 情况2
let [x = 1] = [null];
console.log('xx', x);   // null

// 情况3
// 如果默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候才会求值
function fn() {
  console.log('saaa');
}

let [ x = fn() ] = [1];
// 上面的代码中,因为x能求到值,所以函数f根本不会执行,等价于
let x;
if([1][0] === undefined) {
  x = fn();
}else  {
  x = [1][0];
}

注意: 默认值是可以引用结构赋值的其他变量,但该变量必须已经声明

let [x = 1, y = x] = [];      // x = 1; y = 1
let [x = 1, y = x] = [2];     // x = 2; y = 2
let [x = 1, y = x] = [1, 2];  // x = 1; y = 2
let [x = y, y = 1] = [];      // ReferenceError
// 最后一个报错,由于x用到的默认值y时,y还没声明