ES6变量的解构赋值及应用

数组的解构赋值

数组的解构赋值

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

更复杂的匹配规则

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

同理每一项用逗号隔开即可。

扩展运算符

 

使用扩展运算符合并数组

 

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

结果如下：

  

 

把剩下的所有参数作为数组赋值给c

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

带有扩展运算符的变量必须放在最后面，因此以下写法是错误的。

 

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

默认值         

当变量d没匹配到会是undefined

const arr = [1,undefined,undefined];
const [a,b,c,d] = arr;

 

设置默认值后，当数组值为undefined时就会使用默认值，注意只有在undefined的时候取默认值，为null的时候依然为null

 

const arr [1,undefined,undefined];
const [a, b =2, c, d = 'aaaa'] = arr;

数组解构赋值的应用

交换变量：使用解构赋值交换变量更简单只需一行代码

 

let a = 20;
let b = 10;

//let temp;
//temp = 0;
//temp = a;
//a = b;
//b = temp;

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

接收函数的多个返回值

 

function getUserInfo(id){
    // . .ajax
    
    return [
        true,
        {
            name:'小明',
            gender:'女',
            id: id
        },
        '请求成功'
    ];
};

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

 

对象的解构赋值

• 对象的解构赋值与数组的解构赋值相似
• 等号左右两边都为对象结构 ，const { a, b} = {a:1,b:2}
• 左边的{}中为需要赋值的变量
• 右边为需要解构的对象

 对象解构赋值的用法

const obj = {
    a:'对象',
    b:'解构'
}

const {a, b} = obj;

 稍微复杂的解构条件

const player = {
    nickname:'喵喵喵',
    master:'东海龙王',
    skill:[{
        skillName:'龙吟',
        mp:'100',
        time:6000
    },{
        skillName:'龙卷雨击',
        mp:'400',
        time:3000
    },{
        skillName:'龙腾',
        mp:'900',
        time:6000
    }]
};

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

 此时的skill1是skill数组的第一项，skillName是skill数组的第二项的skillName

不能以下方法获取skill数组第三项的skillName，因为const是不能被重复声明的

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

 改成如下即可使用sklName表示

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

结合扩展运算符

使用扩展运算符把一个对象的部分属性合并

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

const { saber, ...oth } = obj;

结果：

 使用扩展运算符合并两个对象

const obj1 = {
    a：'合并',
    b: '对象'
}

const obj = {
    c:'我是',
    ...obj1,
};

 如何对已经声明了的变量进行对象的解构赋值

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

{ age } = obj; //这样写不行

 这样写会把{age}当成一个块级作用域

解决方案：加个括号

({ age } = obj); 

 但依然建议以下写法

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

let { age } = obj; 

默认值

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

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

跟数组一样，当匹配到undefined时候就会使用默认值

对象的解构赋值的主要用途

提取对象属性

const { name, hobby:[ hobby1], hobby } = {
    name:'小坨坨',
    hobby:['学习']
};

能拿到name属性、hobby数组的第一项命名为hobby1、还能拿到hobby属性

使用对象传入乱序的函数参数

 

function AJAX({
    url,
    data,
    type = 'get'
}){
    console.log(type);
};

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

获取多个函数的返回值

function getUserInfo(uid){
    // ...ajax
    
    return {
        status: true,
        data: {
            name: '小红'
        },
        mag: '请求成功'
    };
};

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

 如果想给变量名换名的话，在后面加:newName即可

 

 

 

 

 

 

 

 

 

字符串的解构赋值

字符串的解构赋值

const str = 'I am the bone of my sword'; //我是剑骨头
const [ a, b, c ] = str;

 结果：

也可使用扩展运算符

 

const str = 'I am the bone of my sword'; //我是剑骨头
const [ a, b, c, ...oth ] = str;

结果：

以下三种写法的结果都一样

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

结果：

提取属性

 

const { length, split } = str;

数值和布尔值的解构赋值

const { valueOf } = 1;
const { toString } = false;

 

函数参数的解构赋值

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

let arr = [1, 2];
arr = swap(arr);

对象的解构赋值

 

function Computer({
    cpu,
    memory,
    software = ['ie6'],
    OS = 'windows 3.5'
}){
    console.log(cpu);
    console.log(memory);
    console.log(software);
    console.log(OS);
};

new Computer({
    memory: '128G';
    cpu:'80286';
    OS:'windows 10'
});

结果：