数组的解构赋值的使用方法注意事项

首先我们来了解一下什么叫解构赋值

ES6允许使用按照一定的模式 从数组或者对象中进行取值 对变量进行赋值 这个过程叫做解构赋值

        //var变量的赋值
        //var a = 1; 
       // var b = 2; 
        //var c = 3;

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

输出结果为: 1 2 3
也可以这么写

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

   实例1：

  let [x, y] = [3, 4, 5];
   console.log(x, y);//1 ， 4 
   let [x, [y, z]] = [12, [31, [16]]];
    console.log(x); //12
    console.log(y); //31
    console.log(z); //16

解析:. 如果我们需要解构赋值成功 我们就必须保证两边的模式完全一致
实例2

  let [x, [y, z]] = [12, [31]];
    console.log(x); //12
    console.log(y); //31
    console.log(z);//undefined
    let [y] = []; 
    console.log(y); //undefined
   //解构不成功 指的是变量有多余的 但是值不够

解析:如果解构赋值不成功 那么就相当于定了 没有赋值 返回undefined.
实例：3.

 let [y] = [10, 20];
    console.log(y); //10

解析: 不完全解构的情况下 也可以解构成功 只是值有多余的不完全解构 是值有多余的 但是变量不够

实例：4.

   // let [f] = "xdgfjn"; // x
  console.log(f)

解析:如果等号左右模式不匹配 等号右边的元素不能被遍历 那么就会报错

实例：5. 不能使用圆括号的情况

以下三种解构赋值不得使用圆括号。

（1）变量声明语句中，不能带有圆括号。

// 全部报错let [(a)] = [1];

let {x: (c)} = {};

let ({x: c}) = {};

let {(x: c)} = {};

let {(x): c} = {};

let { o: ({ p: p }) } = { o: { p: 2 } };

解析:上面三个语句都会报错，因为它们都是变量声明语句，模式不能使用圆括号。

（2）函数参数中，模式不能带有圆括号。

函数参数也属于变量声明，因此不能带有圆括号。

// 报错function f([(z)]) { return z; }

（3）赋值语句中，不能将整个模式，或嵌套模式中的一层，放在圆括号之中。

// 全部报错({ p: a }) = { p: 42}([a]) = [5];

上面代码将整个模式放在圆括号之中，导致报错。

// 报错[({ p: a }), { x: c }] = [{}, {}];

上面代码将嵌套模式的一层，放在圆括号之中，导致报错。

下面 我们看一下案例:

（1）交换变量的值

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

解析:上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
（2）从函数返回多个值

// 返回一个数组function example() {
  return [1, 2, 3];}let [a, b, c] = example();// 返回一个对象function example() {
  return {
    foo: 1,
    bar: 2
  };}let { foo, bar } = example();

解析:函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。