es6对象解构

1. 解构用于变量声明

let node = {
    name: 'mike',
    age: 25
};
let {name, age} = node;
console.log(name); // mike
console.log(age); // 25

2. 解构用于变量声明

let node = {
    name: 'mike',
    age: 25
};
name = 'lily';
age = 20;
console.log(name); // lily
console.log(age);//20
({name, age} = node);
console.log(name);//mike
console.log(age);//25

以上代码的逻辑为:预先定义的变量name和age分别被初始化为’lily’和20之后,又用node对象的属性,重新赋值给name和age变量。解构赋值的语法要求,一定要用一对小括号()包裹整个解构赋值表达式

3. 给解构的变量设置默认值

let node = {
    name: 'mike',
    age: 25
};
let {name, age, country = 'China'} = node;
console.log(name); // mike
console.log(age); // 25
console.log(country); // China

如果我们在解构声明变量时,定义了对象中不存在的属性,那么这个变量的值为undefined。我们可以给变量设置默认值,当对象中没有对应的属性时,这个变量的值就是设置的默认值

4. 解构对象属性赋值给不同名变量

let node = {
    name: 'mike',
    age: 25
};
let {name: localName, age, country: localCountry = 'China'} = node;
console.log(localName); //mike
console.log(age); // 25
console.log(localCountry); //China

这里需要注意的是,冒号左边的是对象的属性名,右边的是我们新定义的变量名,这一点与我们的认知和习惯恰好反过来了。
我们在这种场景下也可以给变量设置默认值,就像上面的localCountry变量那样做::左边是对象的属性名,右边是一个赋值表达式; 这个表达式=左边是变量名,右边是默认值

5. 嵌套对象的解构

let node = {
    personalInfo: {
        basicInfo: {
            name: {
                firstName: 'mike',
                lastName: 'deep'
            },
            age: 25
        }
    },
    level: 3
};
let { personalInfo: {basicInfo: {name}} } = node;
console.log(name.firstName);// mike

嵌套对象的解构的语法就是:从原对象的最外层变量定位,一直到需要取值的那一层,每层之间用冒号:隔开,变量在冒号的右边。我们在上面的例子机场上,再增加一层:
转载

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值