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