变量的解构赋值

1.什么是解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。包括：数组、对象、函数参数、字符串、数值和布尔值。null和undefined不行。在实际开发时，真正使用比较多的是数组、对象和函数参数的解构。

解构赋值，可以理解为变量的取出，并赋值给新变量。为这样的操作提供了一种简便语法。

2. 数组的解构赋值

let arr = [1, 2, 3];
// 有这样的需求
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

// 使用解构赋值可以快速实现
let [a, b, c] = arr;
console.log(a, b, c); // 1,2,3

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

如果解构失败，变量的值等于undefined。

let [foo, bar, baz] = [1, 2, 3];
// foo  1
// bar  2
// baz  3

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

let [x, y, z] = ['a'];
// x  'a'
// y  undefined
// z  undefined

2.1 交换变量的值

let a = 1;
let b = 2;
// 交换值
// let c = a;
// a = b;
// b = c;

// 解构赋值实现
[a, b] = [b, a];

3. 对象的解构赋值

解构不仅可以用于数组，还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

如果解构失败，变量的值等于undefined。

let breakfast = {
    bread: "早餐面包",
    fruit: "apple",
    egg: "鸡蛋"
}
// 想要将 对象中的 属性值取出，并赋值给某些变量
// let a = breakfast.bread;
// let b = breakfast.fruit;

// 使用解构赋值
let {
    bread: a,
    fruit: b,
    egg: c
} = breakfast;
console.log(a, b, c); // '早餐面包','apple','鸡蛋'

let {
    // 属性名: 属性值变量
    bread:bread,
    fruit:fruit,
    egg:egg
} = breakfast;
// 相当于 let bread = breakfast.bread; 取出 breakfast的bread属性,并赋值给变量 bread

console.log(bread, fruit, egg); // '早餐面包','apple','鸡蛋'

// 属性名 和 保存属性值的变量名 一样时, 对象可以简写
//let {
//    bread,
//    fruit,
//    egg
//} = breakfast;

比如,我们常用到的后台数据请求

function getmovie(){
    $.ajax({
        url:'http://bufantec.com/api/douban/movie/top250',
        success(res){
            console.log(res);
            const {data:result}=res;
            console.log(result); // 将 res.data 取出 赋值给了 result
        }
    })
}
getmovie();

3. 函数参数的解构赋值

函数的参数也可以使用解构赋值

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3
// 相当于 形参[x, y] = [1, 2], 数组的解构赋值语法

function move({x, y}) {
  return [x, y];
}
move({x: 3, y: 8});
// 相当于 形参{x, y} = {x: 3, y: 8} , 对象的解构赋值语法
// 取出实参当中的x属性值,  赋值给 形参变量 x