解构赋值

解构赋值：解构赋值语法是一个JavaScript表达式，这使得可以将数组或属性从对象提取到不同的变量中。就是按照一定的规则，从数组或者对象中取值，然后赋值给变量。

数组的结构赋值

1.简单示例

const arr = [1, 2, 3, 4];
let [a, b, c, d] = arr;

结果：

image.png

说明：a,b,c,d分别取到了arr里的值。
2.更复杂的匹配规则

const arr = ['a', 'b', ['c', 'd', ['e', 'f', 'g']]];

const [ , b] = arr;
const [ , , g] = ['e', 'f', 'g']
const [ , , [ , , g]] = ['c', 'd', ['e', 'f', 'g']];
const [ , , [ , , [ , , g]]] = arr;

结果：

image.png

image.png

说明：','忽略当前的值，要取数组里的数组的值，要先匹配到这个数组，同样用','忽略不需要的值。

3.扩展运算符...

const arr1 = [1, 2, 3];
const arr2 = ['a', 'b'];
const arr3 = ['zz', 1];
const arr4 = [...arr1, ...arr2, ...arr3];

const arr = [1, 2, 3, 4, 5, 6];
const [a, b, ...c] = arr;

结果：

image.png

说明：扩展运算符会从当前位置开始，往后匹配数组的所有值。

4.默认值

const arr = [1, null, undefined,undefined];
const [a, b = 2, c, d = 'aaa',e] = arr;

结果：

image.png

说明：当匹配的数组的值是未定义时，会取自己的默认值，当匹配的数组的值是null时，会取null。

5.应用场景：交换变量

let a = 20;
let b = 10;

// let temp;

// temp = a;
// a = b;
// b = temp;

[a, b] = [b, a];

结果：

image.png

说明：不需要中间变量，直接匹配数组。

6.应用场景：接收多个函数返回值

function getUserInfo(id) {
  // .. ajax

  return [
    true,
    {
      name: '小明',
      gender: '女',
      id: id
    },
    '请求成功'
  ];
};

const [status, data, msg] = getUserInfo(123);

结果：[图片上传中...(image.png-370132-1563432630880-0)]

说明：和函数的返回值一一匹配。

对象的解构赋值

1.简单示例

const obj = {
    saber: '阿尔托利亚',
    archer: '卫宫'
};
const { saber, archer1 } = obj;

结果：

image.png

说明：对象中的属性是无序的，需要名字对应才能取出来。

2.稍微复杂的解构条件

const player = {
    nickname: '感情的戏∫我没演技∆',
    master: '东海龙王',
    skill: [{
        skillName: '龙吟',
        mp: '100',
        time: 6000
    },{
        skillName: '龙卷雨击',
        mp: '400',
        time: 3000
    },{
        skillName: '龙腾',
        mp: '900',
        time: 60000
    }]
};

const { nickname } = player;
const { master } = player;
const { skill: [ skill1, { skillName }, { skillName: sklName } ] } = player;

结果：

image.png

说明：对象的解构赋值中，取某一属性的值只要名字相同即可，若要取得对象中的对象或者是数组里的属性值，需要相同的结构套下去最后根据数组或对象的解构赋值规则取值。如果有同名的属性，就在取值时起一个别名，实际上每个取出来的属性都有别名，只不过属性和别名相同省略了。

3.结合扩展运算符

const obj = {
    saber: '阿尔托利亚',
    archer: '卫宫',
    lancer: '瑟坦达'
};
const { saber, ...oth } = obj;


const obj2 = {
    archer: '卫宫',
    lancer: '瑟坦达'
}
const obj1 = {
    saber: '阿尔托利亚',
    ...obj2,
};

结果：

image.png

说明：通过扩展运算符可以取到后面的所有属性的值，也可以把对象连在一起。

4.对已经申明了的变量进行对象的解构赋值

let age;
const obj = {
    name: '小明',
    age: 22
};

({ age } = obj);

5.默认值

let girlfriend = {
    name: '小红',
    age: undefined,
};

let { name, age = 24, hobby = ['学习'] } = girlfriend;

结果：

image.png

说明：如果取得的值是undefind，会用自身的默认值。

6.应用场景：使用对象传入乱序的函数参数

function AJAX({
    url,
    data,
    type = 'get'
}) {
    // var type = option.type || 'get';

    // console.log(option);
    console.log(type);
};

AJAX({
    data: {
        a: 1
    },
    url: '/getinfo',
});

说明：传递的参数是对象，进行了解构赋值。

7.应用场景：获取多个函数返回值

function getUserInfo(uid) {
    // ...ajax

    return {
        status: true,
        data: {
            name: '小红'
        },
        msg: '请求成功'
    };
};

const { status, data, msg: message } = getUserInfo(123);

字符串的结构赋值

const str = 'I am the bone of my sword'; // 我是剑骨头

const [ a, b ,c, ...oth ] = str;

结果：

image.png

const [ ...spStr1 ] = str;
const spStr2 = str.split('');
const spStr3 = [ ...str ];

结果：

image.png

数值与布尔值的结构赋值

函数参数的结构赋值

function test ({
        name,
        age = 22,
        hobby
    }){
        console.log(name,age,hobby);
    }
    test({name:'lafe',hobby:'做饭'});