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’,而不是循环变量。