解构赋值

这两天有点事，所以没有继续写es6的东西，今天就说一下解构赋值

首先什么是解构赋值？个人理解就是从数组和对象中提取值，对变量进行赋值。

举个例子：这样就很快的完成a,b值的交换，如果等号两边模式相同，左边变量就会被赋予相应值。

为了验证一下：

既然是从数组和对象中取值，那么我们先说一下

数组中的解构赋值

1. 解构赋值的嵌套，结构一致

   let [a, b, [ c, d ]] = [1, 2, [3, 4]];
   console.log(a, b, c, d) // 1 2 3 4

    

2. 解构失败，值为undefined(就是说 = 右边缺少值)
    

   let [a, b, [ c, d ]] = [1, 2, [3]];
   console.log(a, b, c, d) // 1 2 3 undefined

    

3. 不完全解构（就是说 = 左边缺少变量）
    

   let [a, b, c] = [1, 2, 3, 4];
   console.log(a, b, c) // 1 2 3

    

4. 默认赋值
    

   let [a = 1] = [];
   let [b = 1] = [null];
   console.log(a, b);// 1 null

   从上面的例子可以看出只有当右侧的值等于undefined才会使用默认赋值

5. 错误解构
   错误解构就是 = 左右两边结构不一致会报错

对象中的解构赋值

对象的解构赋值是按照属性名（键）决定的，如果没有找到对应的属性，那就赋予undefined

例如：

let { a,b,c } = {"a":1,"c":3,"b":2};
console.log(a, b, c) // 1 2 3

如果我们想要声明的变量与属性名不同,可以这么做：

let {one: a, two: b, three: c = 3} = { one: 1, two: 2}
console.log(a, b, c);// 1 2 3

1. 解构赋值的嵌套，结构一致

   let {one: a, two: b, three: c = 3} = { one: 1, two: 2}
   console.log(a, b, c);// 1 2 3

    

2. 字符串的解构赋值

   let [a, b, c, d, e, f, g, h, i, j, k] = 'hello world';
   console.log(a, b, c, d, e, f, g, h, i, j, k);//h e l l o   w o r l d

    

解构赋值的用途：

1. 交换变量
2. 函数多值返回

   function s(){
       return [1, 2, 3];
   }
   let [a, b, c] = s();

    

3. 函数定义参数

   function s({a, b, c}){
       console.log(a, b, c);
   }
   s({a: 1, b: 2, c: 3});

    

4. 提取数据

   let data= {
      a: 1,
      b: '哈哈',
      c: [2, 3]
   }
   let {a, b, c: d} = data;
   console.log(a, b, d);//1 "哈哈" (2) [2, 3]