Question

我正在尝试让es6语法适用于此代码片段。

let checkList = [1, 2].map(i => "Check " + i)

let checks = checkList
  // .reduce((acc, check) => Object.assign(acc, {[check]: {valid: false}}), {})
  .reduce((acc, check) => {...acc, {[check]: {valid: false}}}, {})
console.log(checks)

如果我使用https://babeljs.io中的注释行，则输出如下所示，这是我想要使用新语法获得的。

Object {
  "Check 1": Object {
    "valid": false
  },
  "Check 2": Object {
    "valid": false
  }
}

我不确定此代码中是否存在语法错误。我尝试选择babeljs中的所有预设，但它无法正确编译。

Answer 1

对象传播是stage 4 proposal，并且不是现有规范的一部分。应在Babel中启用Stage 3 preset，即transform-object-rest-spread。

上面的代码中存在语法错误，即使使用了必需的预设，也会阻止它正确编译。

should be

let checks = checkList
  .reduce((acc, check) => ({...acc, [check]: {valid: false}}), {});

Answer 2

首先，你没有将属性包装在一个额外的对象中（除非你也想在其上使用扩展运算符）。

因此{...acc, {[check]: {valid: false}}}可以成为{...acc, [check]: {valid: false}}

这意味着您要将对象添加到累加器。此对象的键是您为其指定的名称（Check[n]），值是您设置的值（{valid ...}）。

其次，据我所知，如果没有明确的新值，就不能使用spread运算符。所以你应该在一个新的行上写下你的状态，如：

let checks = checkList.reduce((acc, check) => {
  return {...acc, [check]: {valid: false}}
}, {})

或者将它包装在额外的括号中：

let checks = checkList.reduce((acc, check) => ({...acc, [check]: {valid: false}}) , {})

在Array.reduce中使用扩展表示法

2 个答案: