变量的解构赋值 - 数组篇

es6作为新一代js的标准，已经被广泛应用于各个场景，所以，熟悉并熟练使用它变得非常有必要。

本篇介绍变量的解构赋值中的数组部分，后续会介绍其他部分

我们先来了解一下解构赋值：es6允许按照一定的模式从对象或数组中提取值，然后对变量进行赋值，这被称为解构赋值。

来看个实际项目中的案例：

const server = {
    ip:127.0.0.1,
    port:3000
}

// 常规写法：
const ip = server.ip;
const port = server.port;

// 解构赋值写法：
const { ip, port } = server;

这样无疑会大大优化我们复杂的代码结构，并清晰明了的得到所需要的值。

以下将通过大量的demo，介绍数组的解构赋值（注：案例来源于 " es6标准入门 " 这本书，每个都是博主自己手敲学习过的）

  // 以前为变量赋值只能直接指定值
  let a = 1;
  let b = 2;
  let c = 3;
  // es6允许写成下面这样:从数组中提取值，然后对应位置对变量赋值
  let [d, e, f] = [4, 5, 6];

  console.log(a,b,c,d,e,f);   // 1, 2, 3, 4, 5, 6

  // 实质上，这种写法属于‘模式匹配’，只要等号两边的模式相同，左边的变量就会被赋予对应的值

  // 下面是一些使用嵌套数组进行解构的例子:

  let [foo, [[bar], baz]] = [1, [[2], 3]];
  console.log(foo, bar, baz);   // 1, 2, 3

  let [ , , three] = ['foo', 'bar', 'baz'];
  console.log(three);   // baz

  let [x, , y] = [1, 2, 3];
  console.log(x, y);    // 1, 3

  let [head, ...tail] = [1, 2, 3, 4];
  console.log(head, tail);    // 1, [2, 3, 4]

  // 如果解构不成功，变量的值等于undefined
  let [g, h, ...i] = ['a'];
  console.log(g, h, i);   // a, undefined, []

  let [name] = [];
  console.log(name);      // undefined
  let [sex, age] = [1];
  console.log(sex, age);     // 1, undefined

  // 不完全解构，即等号左边的模式只匹配一部分的等号右边的数组，但是依然可以解构成功
  let [m, n] = [1, 2, 3];
  console.log(m, n);      // 1, 2

  let [Q, [W], E] = [1, [2, 3], 4];
  console.log(Q, W, E);   // 1, 2, 4

  // 如果等号右边不是数组（或者严格来说不是可遍历的结构），那么将会报错
  // 以下代码都会报错，因为等号右边的值或是转为对象后不具备Iterator接口（前5个表达式），或是本身就不具备Iterator接口（最后一个表达式）
  let [t] = 1;
  let [t] = false;
  let [t] = NaN;
  let [t] = undefined;
  let [t] = null;
  let [t] = {};

  // 对于Set结构，也可以使用数组的解构赋值
  let [A, B, C] = new Set(['a', 'b', 'c']);
  console.log(A, B, C);     // a, b, c

  // 事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值
  function* fibs() {
    let w = 0;
    let j = 1;
    while (true) {
      yield w;
      [w, j] = [j, w + j];
    }
  }

  let [first, second, third, fourth, fifth, sixth] = fibs();
  console.log(first, second, third, fourth, fifth, sixth);    // 0, 1, 1, 2, 3, 5

  // 解构赋值允许指定默认值

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

  let [boo = true] = [];
  console.log(boo);   // true

  let [X, Y = 'b'] = ['a'];
  console.log(X, Y);    // a, b

  let [M, N = 'b'] = ['a', undefined];
  console.log(M, N);    // a, b

  let [s = 1] = [undefined];
  console.log(s);   // 1

  let [k = 1] = [null];
  console.log(k);   // null:因为null不严格等于undefined，所以默认值不会生效，null会替换默认值

  // 如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到时才会求值
  function u() {
    console.log('aaa');
  }
  let [l = u()] = [1];
  console.log(l);   // 1:因为l能取到值，所以函数u根本不会执行
  /* 等价于：
    let l;
    if ([1][0] === undefined) {
      l = u();
    } else {
      l = [1][0]
    }
  */

  // 默认值可以引用解构赋值的其他变量，但该变量必须已经声明
  let [AA = 1, BB = AA] = [];
  console.log(AA, BB);    // 1, 1

  let [CC = 1, DD = CC] = [2];
  console.log(CC, DD);    // 2, 2
  
  let [EE = 1, FF = EE] = [1, 2];
  console.log(EE, FF);    // 1, 2

  let [GG = HH, HH = 1] = [];
  console.log(GG, HH);    // 报错：因为GG用到默认值HH时，HH还没有声明

以上，就是数组解构赋值常用的一些场景，能便捷的解决我们很多的问题。

对象的解构赋值：对象的解构赋值

变量的解构赋值 - 字符串、数值、布尔值、函数参数：变量的解构赋值 - 字符串、数值、布尔值、函数参数

如有问题，请指出，接受批评。

个人微信公众号：