for...in...循环搭配对象解构赋值的易错点

当我们使用for…in…循环一个对象,并在循环体中执行对象的解构赋值,有一点很容易出错。直接看下面例子:

let formInit = {
    one: {
        value: 2
    },
    two: {
        value: 2
    }
};
let data = {
    one: 1,
    two: 3
};
for(var key in formInit){
    ({key: formInit[key].value} = data);
}
console.log(formInit);

此时输出的是:

{
    one:{value:undefined},
    two:{value:undefined}
}

明显没有解构成功,那么是什么原因呢?

我们看下循环体中的解构赋值表达式:
等号右边的data是个定义好的非常清楚的对象解构,不会出错。那么问题应该出现在等号左边的对象上;

下面我们打印出等号左边的对象查看:

for(var key in formInit){
    console.log({key:formInit[key].value});
    //({key: formInit[key].value} = data);
}

其打印的结果是:

{key:2}
{key:2}

从打印结果看,这明显是不对的,我们期望等号左边的对象的键是one和two,那么真实情况左边对象的键则是key,这就是造成不能解构赋值成功的原因。

在左边兑现中的key并不是个循环变量,并不是one和two,而就是左边这个对象的键,名字是key;

那么我们怎么解决这个错误呢?我们只需要把左边对象中的键,变成one,two就好了。

for(var key in formInit){
    console.log({key:formInit[key].value});
    console.log({[key]:formInit[key].value})
    ({[key]: formInit[key].value} = data);
}
console.log(formInit)

打印出的结果是:

{key:2}
{one:2}
{key:2}
{two:2}
{
    one:{value:1},
    two:{value:3}
}

解构赋值成功!
所以我们一定要注意,这里的key需要用中括号包裹,不然,放在对象中,会被认为是对象的键的名称是’key’,而不是循环变量。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值