ES6学习笔记（解构赋值）

解构赋值语法是一个JavaSript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

1.数组的解构赋值

数组的解构赋值

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

更复杂的匹配规则

const arr = ['a','b',['c','d',['e','f','g']]];
const [,b] = arr;     // 取b的值
const [,,g] = ['e','f','g'];  //取g的值
const [,,[,,[,,g]]] = arr;   //取g的值

扩展运算符

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

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

默认值

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

交换变量

let a = 1;
let b = 2;
[a,b] = [b,a];  //a=2,b=1

接受多个 函数返回值

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

const [status,data,msg] = getUserInfo(123);  //status=小明,data=女,msg=id

2.对象的解构赋值

对象的解构赋值

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

const {saber,archer1}=obj;  //saber = 阿尔托利亚 ,archer1 = undefined

稍微复杂的解构赋值

const player = {
    nickname: 'Lyn',
    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:sName}]} = player;  // skill没有值,skill1={skillName:'龙吟',mp: '100',time: 6000},skillName=龙卷雨击,sName=龙腾

结合扩展运算符

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

const {saber, ...oth} = obj; // oth = {archer:'卫宫',lancer:'瑟坦达'}

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

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

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

默认值

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

let {name,age=24,hobby=['学习']} = girlfriend; //name=小红，age=22，hobby=['学习']

提取对象属性

const {name,hobby:[hobby1]} = {
    name: '小红',
    hobby=['学习']
};  //name = 小红,hobby1 = 学习,hobby没有值

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

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

function AJAX(url,data,type='get'){

};  //url = '/getinfo',data={a:1},type='get'

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

获取多个 函数返回值

function getUserInfo(){
    return{
    stauts:true,
    data:{
        name:'小红'
    },
    msg: '请求成功'
    };
};

const {status,data,msg} = getUserInfo(123)  //status = true,data={name:'小红'},msg=请求成功

3.字符串的解构赋值

字符串的解构赋值

const str = 'I am abc';
const [a,b,c,...oth] = str;  //a="I",b="",c="a",oth=["m","","a","b","c"]

提取属性

const str = 'I am abc';
const {length,split} = str;  //length=8,split取用成功，但是无实际意义