巧用变量的解构赋值

一、数组的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

以前，对于变量的声明和赋值，我们只能这么做

    let a = 1,
      b = 2,
      c = 3,
      d=4,
      e=5;

但在ES6中，我们可以利用解构赋值，这样做，极大的简化了代码量，简洁易懂

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

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

案例：

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

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

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

解构赋值可以设置默认值，当左边设置默认值的值===undefined，那么默认值就会生效

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

二、对象的解构赋值

由于数组里的元素是有序的，对象里的元素的无序的，所以在进行对象的解构赋值时，变量必须与属性同名，即在写值的时候前面加上变量名

    let {name,age}={name:'NuLi',age:18}
    console.log(name);//NuLi
    console.log(age);//18

如果不想让变量与属性同名，可以这样写

    let obj = { name: 'NuLi', age: 18 }
    let { name:n, age:a } = obj
    console.log(n);//NuLi
    console.log(a);//18

三、字符串的解构赋值

字符串也可以解构赋值，因为此时，字符串被转换成了一个类似数组的对象。

    let [a,b,c,d,e] = 'hello'
    console.log(a);//h
    console.log(e);//o

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值 

    let {length} = 'hello'
    console.log(length);//5

四、解构赋值的用途

1、交换变量的值

在我们想交换两个变量的值的时候，我们通常会声明第三个变量temp，如下所示

    let a = 111, b = 222;
    console.log(`a=${a},b=${b}`);//a=111,b=222
    let temp;
    temp = a;
    a = b;
    b = temp
    console.log(`a=${a},b=${b}`);//a=222,b=111

如果使用解构赋值的话，就不用这么麻烦，代码显得通俗易懂，一行代码解决

    let a = 111, b = 222;
    console.log(`a=${a},b=${b}`);//a=111,b=222
    [a,b]=[b,a]
    console.log(`a=${a},b=${b}`);//a=222,b=111

下面是利用解构赋值写的一个冒泡排序案例

let arr = [1, 3, 4, 12, 4, 68, 22, 12, 34, 54, 22, 1, 3, 2, 100, 80, 900, 6]
console.log(arr);  // [1, 3, 4, 12, 4, 68, 22, 12, 34, 54, 22, 1, 3, 2, 100, 80, 900, 6]
for (let i = 0; i < arr.length - 1; i++) {
  for (let j = 0; j < arr.length - i - 1; j++) {//利用变量的解构赋值 交换变量的值，简洁易懂
    [arr[j], arr[j + 1]] = arr[j] > arr[j + 1] ? [arr[j + 1], arr[j]] : [arr[j], arr[j + 1]]
  }
}
console.log(arr);  // [1, 1, 2, 3, 3, 4, 4, 6, 12, 12, 22, 22, 34, 54, 68, 80, 100, 900]

2、从函数返回多个值

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

    // 返回数组
    function fn1() {
      return [1, 2, 3];
    }
    let [a, b, c] = fn1();
    console.log(`a=${a},b=${b},c=${c}`);//a=1,b=2,c=3
    // 返回对象
    function fn2() {
      return {
        one: 1,
        two: 2
      };
    }
    let { one, two } = fn2();
    console.log(`one=${one},two=${two}`);//one=1,two=2

以上就是我对于解构赋值的一些用途，如果想要了解更多用途，请参考：

3. 变量的解构赋值 - 用途 - 《阮一峰 ECMAScript 6 (ES6) 标准入门教程 第三版》 - 书栈网 · BookStack