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

【问题标题】：Can I write block of code shorter using ES6/ES7 [duplicate]我可以使用 ES6/ES7 编写更短的代码块吗？
【发布时间】：2016-10-17 09:36:06
【问题描述】：

我有一段代码：

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

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

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

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

有可能吗？

【问题讨论】：

你必须做这样的事情location: {address: data.address, cityDistrict: data.cityDistrict, city: data.city, country: data.country}...
它似乎在 chrome 中为我工作？你的错误具体是什么？它是特定于浏览器的吗？
对我有用，你在测试什么？
数据是否包含更多属性？
这个问题几乎每天都会出现。为什么人们如此关心使他们的代码变得聪明？您提供的工作代码是可读的，并且非常清楚地表达了意图。

标签： javascript ecmascript-6 ecmascript-2016

【解决方案1】：

这确实有效（至少在 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);
}

【讨论】：

嗨！谢谢你的回答，但我不能做Object.assign({}, data)，因为我在data里面有很多未使用的数据
@rel1x 我明白了。我通常使用lodash.pick 或this native implementation

【解决方案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"
  }
}
*/

【讨论】：

我不确定这是预期的行为 - 可能只是两个预设插件之间的不同解析技术的副作用？
你是对的@CodingIntrigue，你的You'd get unexpected data. As a side effect of that, you'd also get 4 new variables in scope 说明了一切。我认为我们能做的最好的单线是使用data 作为参数来过滤键的立即调用函数表达式。但是结果比原始代码更难理解。
“使用解构单线无法实现您想要的。” 如果数据不包含其他属性：location: {...data}。第 3 阶段提案。
很好的补充@zeroflagL，我不知道这一点。值得一提的是 [Stage 3 proposal] 实施仍然无法在 Babel REPL 上运行。
它有效。我测试成功了。

【解决方案3】：

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

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

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

const obj = {location: data}

【讨论】：