3.ES6解构赋值-数组的解构

ES6的解构赋值是一种表达式,利用这种新语法,可以直接从数组或者对象中快速提取值 赋值给不同的变量,利用这种写法的好处是减少了代码量,一定程度优化了代码, 也有一点缺点就是阅读代码不再那么直观了。

解构赋值注意:

1、左右结构必须一样 (let [a, b] = [1, 2]、let {a, b} = {a: 1, b: 2})
2、右边必须是正确的值 ([]、{})
3、声明和赋值必须在一行定义 (let [a, b] = [1, 2]、let {a, b} = {a: 1, b: 2})

案例:

  // 数组的解构赋值
  let [a, b, c] = [1, 2, 3];
  console.log('a == %s, b == %s, c == %s', a, b, c); // 1, 2, 3

  let [d, [e], f] = [4, [5], 6];
  console.log('d == %s, e == %s, f == %s', d, e, f); // 4, 5, 6

  let [g, ...h] = [7, 8, 9, 10]
  console.log('g == %s, h == %a', g, h); // 结果:7, Array[8, 9, 10]

  let [i] = [];
  console.log(i); //undefined 解构不成功

  let [k, l] = [1]
  console.log('k == %s, hl == %s', k, l); // 结果:1, undefined

  // 不完全解构情况(左边定义比右边赋值少,可正常解构,否则undefined)
  let [m, n] = [11, 12, 13];
  console.log('m == %s, n == %s', m, n); // 结果:11, 12
  let [o, [p], q] = [14, [15, 16], 17];
  console.log('o == %s, p == %s, q == %s', o, p, q); // 结果:14, 15, 17

  // 如果等号的右边不是可遍历的结构
  let [r] = 1
  console.log('r == %s', r); // undefined

  // 默认值
  let [s = 18] = [];
  console.log('s == %s', s); // 18
  let [t, u=19] = [20, undefined]; // 不赋值或者赋undefined都会默认值替代
  console.log('t == %s, u == %s', t, u); // 20, 19
  let [v = 1] = [null];
  console.log('v == %s', v); //null,es6使用===进行判断赋值是否为undefined

  console.log(null === undefined); // false
  console.log(undefined ===  undefined); // true
    原文作者:圆梦人生
    原文地址: https://www.jianshu.com/p/60521b742ea1
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞