Question

我有一段代码：

const {address, cityDistrict, city, country} = data;

const obj = {
  location: {address, cityDistrict, city, country}
};

但我可以写这个短吗？我试过这个，但这是错的：

const obj = {
  location: {address, cityDistrict, city, country} = data
};

有可能吗？

Answer 1

这实际上有效（至少在Chrome中，如果你在括号中包含赋值，也在Babel中），但是两段代码不等同。

第二段代码只是将data分配给location属性，并在名为address，cityDistrict等的范围内创建4个新变量。

例如：

const data = {
  address: "Address",
  cityDistrict: "District",
  city: "City",
  country: "Country"
}

const obj = {
  location: ({address, cityDistrict, city, country} = data)
};
console.log(obj);

看起来它会记录正确的数据，但实际打印的内容是data，不是新对象。所以如果我们做这样的事情：

const obj = {
  location: ({address, cityDistrict, city, country} = data)
};

data.address = "Test"

console.log(obj); // location.Address = Test

您会收到意外数据。作为其副作用，您还可以在范围内获得4个新变量：

const obj = {
  location: ({address, cityDistrict, city, country} = data)
};

console.log(address, cityDistrict, city, country); // All defined

您真正想要做的是使用Object.assign来创建对象的新实例：

const obj = {
    location: Object.assign({}, data);
}

Answer 2

~~这不能使用es2015预设，但可以使用es2016。~~

~~在https://babeljs.io/repl中尝试这一点说明了这一点。~~

<强>更新

answer from CodingIntrigue显示了为什么这个不起作用。

我还认为你想要的是当前 解构一线无法实现。你最好坚持你的第一个意图，除非你真的不希望有一些变量分配，在这种情况下你可能会使用 IIFE 过滤键

如zeroflagl所述，如果您使用ES提案第3阶段，则可以使用spread properties执行此操作。

const data = {
  address: 'address',
  cityDistrict: 'district',
  city: 'city',
  country: 'country'
}
const { address, cityDistrict, city, country } = data;

const obj = {
  location: {...data}
};

console.log(obj)

/* logs Object {
  "location": Object {
    "address": "address",
    "city": "city",
    "cityDistrict": "district",
    "country": "country"
  }
}
*/

Answer 3

如果您想复制数据，可以使用它：

const obj = {location: Object.assign({}, data)}

或者您也可以使用下一个代码，但更改obj.location可以更改数据：

const obj = {location: data}

我可以使用ES6 / ES7编写更短的代码块吗？

3 个答案: