如何修复 Eslint 错误“prefer-destructuring”？答案

【问题标题】：How to fix Eslint error "prefer-destructuring"?如何修复 Eslint 错误“prefer-destructuring”？
【发布时间】：2018-05-03 20:27:45
【问题描述】：

我想像这样在 ES6 中缩短对象字面量：

const loc = this.props.local;

原因是loc.foo(); 比this.props.local.foo(); 更容易输入

但现在 ESLint 抱怨：

使用对象解构：prefer-destructuring

我读过error description on eslint.org 但我不明白。他们有一个示例，看起来与我的代码非常相似，但他们的似乎没问题？

var foo = object.bar;

如何在不将 .eslintrc 文件中的错误设置为忽略的情况下修复错误？

【问题讨论】：

【解决方案1】：

更改您的代码：

const local = this.props.local;

到：

const { local } = this.props;

它们是等价的，你可以用同样的方式调用local.foo()。除了第二个使用对象解构。

【讨论】：

谢谢，成功了。我想知道为什么 Airbnb styleguide 认为这很重要。恕我直言，这让事情变得更加复杂。
这是一个 ES6 特性，用于从数组或对象中解压缩变量。此语法从变量创建一个数组：var x = [y, z]。解构赋值使用类似的语法，但在赋值的左侧定义要从源变量中解压缩的值。变量 [y, z] = x。对象也是如此。 developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…。就是这样！
是的，这对于提取多个值是有意义的，但对于单个值则不然。在这一点上，Airbnb 风格指南有点严格。
这里有一个错字“lacal”应该是“local”
@BadisMerabet Awsome :)

【解决方案2】：

这是 ES 6 中的一个新结构，允许您在赋值中匹配对象的属性。您需要的语法是：

const { local: loc } = this.props

翻译为：“声明一个常量 loc 并将 this.props 中的属性 local 的值分配给它”。

【讨论】：

【解决方案3】：

它告诉你使用

const {props: {local: loc}} = this;

【讨论】：

这比正常访问属性要丑陋得多，而且令人困惑。
@MartinDawson 我同意，但你需要告诉启用他们 linter 的 prefer-destructuring 规则的人 :-)
@Bergi 我更愿意告诉那个甚至将该规则添加到 linter 的人。解构仅在一次分配给多个变量时才对我有意义，因为它减少了重复。有没有办法让规则在检测到来自同一对象的多个连续声明/分配时才发出错误？
@PatrickRoberts 当变量名和属性键相同时，也可以避免重复。为了避免这种情况下的规则（如在这个问题中），您似乎可以关闭enforceForRenamedProperties。我不知道只有在有多个目标时才强制解构的设置，您可能需要为此提出问题。