javascript - JavaScript 上的 ESLint 错误 (Unexpected token ...) 简化为字典

Question

我确实有一个 JavaScript 代码片段，它遍历一组字段以查找特定属性并将其添加到字典中。另见 this site再举一个例子。

return this.getFields()
    .reduce((mappings, field) => ({...mappings, [field.id]: field.name}), {});

这工作得很好。但是我收到了三个点的 Eslint 代码样式解析错误。

Unexpected token ...

关于这个的三个问题。

如何更改我的代码以避免解析错误，同时保持代码简短？

我应该禁用 ESLint 检查这个错误吗？

... 的名称是什么？符号？

我的解决方法如下。但我宁愿保留原始版本。

  return this.getFields()
    .reduce(function(mappings, field) {
      mappings[field.id] = field.name;
    }, {});

Answer 1

...符号用于 Spread syntax它返回新数组或对象的副本。例如

 var arr1 =[1, 2, 3],

如果要创建一个包含项目 4 的新数组，可以这样做:

var arr2 = [...arr1, 4] //[1, 2, 3, 4]

或者，如果你这样做:

var obj = {a: 1, b: 2},
var obj2 = {...obj, b:3} //you create a copy of obj and then modify a property. So obj2 = {a:1, b:3}

您的原创 obj的属性(property) b保持不受影响。

The --fix option on the command line can automatically fix some of theproblems reported by this rule.

您可以在 ES Lint 的配置中添加它以了解扩展运算符:

 {
    "parserOptions": {
        "ecmaVersion": 2018
    }
}

引用: https://eslint.org/docs/rules/rest-spread-spacing
由于您使用的是 reduce，因此以下内容同样有效并避免突变:

 return this.getFields()
    .reduce(function(mappings, field) {
      mappings[field.id] = field.name;
      return mappings // <--- I think you may want to return this
    }, {});

您也可以考虑使用 Object.assign代替价差运算符 ...如果你喜欢。

return this.getFields()
    .reduce((mappings, field) => (Object.assign(mappings, {[field.id]: field.name})), {});