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

Question

我有一段代码：

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

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

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

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

可能吗？

Answer 1

~~这将无法使用 es2015 预设，但可以使用 es2016。~~

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

已更新

说明了为什么这个不起作用。

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

如 zeroflagl said, you can do it using spread properties 如果您使用 ES 提案阶段 3。

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 2

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

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

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

const obj = {location: data}

Answer 3

这确实有效（至少在 Chrome 中，如果您将赋值放在括号中，在 Babel 中也是如此），但是这两段代码 并不等价 .

第二段代码简单地将data分配给location属性并在作用域中创建4个新变量address、cityDistrict等.

例如：

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);
}

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

Can I write block of code shorter using ES6/ES7

javascript

ecmascript-6

ecmascript-2016