【问题标题】：'inStock' is assigned a value but never used no-unused-vars'inStock' 被分配了一个值，但从未使用过 no-unused-vars
【发布时间】：2021-12-04 21:41:35
【问题描述】：

我正在尝试重构一些代码，并希望使用解构来使代码更易于阅读。我将一个对象传递给 remove() 函数，但是其中一个变量正在返回：

'inStock' 被赋值但从未使用过 no-unused-vars

根据 eslint 文档：

'对自身修改的读取不被视为已使用。' https://eslint.org/docs/rules/no-unused-vars

我想知道是否有没有办法解决这个问题：

修改 eslint (no-unused-vars) ?
添加 /* eslint-disable no-unused-vars */ cmets inline ?

提前致谢

重构前：

remove(product) {
  if (product.quantity > 0) {
    product.quantity --;
    product.inStock ++;
  }
}

重构后：

remove({ quantity, inStock }) {
  if (quantity > 0) {
    quantity --;
    inStock ++;
  }
}

【问题讨论】：

标签： javascript

【解决方案1】：

问题

您的重构是基于对quantity-- 和inStock++ 与product.quantity-- 和product.inStock++ 具有相同行为的误解。这种误解的核心是认为解构后的字段仍然是指对象上的字段。让我们来看看真正的解构是什么。

举个例子，解构：

const obj = { foo: 0 };
const { foo } = obj;

没有解构，它看起来像这样：

const obj = { foo: 0 };
const foo = obj.foo;

解构语法只是第二个例子的一个捷径。

这说明解构定义了一个新变量并将您要解构的字段的值（不是引用）分配给该变量。当您对该变量进行突变时，您只会改变变量的值，而不是对象字段的值。这是一个可运行的示例，您会看到obj.foo 没有从0 更改，即使我们增加了从obj 解构的foo：

const obj = { foo: 0 };

var { foo } = obj;

foo++;

console.log(obj); // { "foo": 0 }

回到您的 linting 错误：linter 是正确的，不仅提出了变量未使用的事实，而且揭示了我已经解释过的这个问题。

解决方案

我能想到两个直接的解决方案：

不要解构。在您的示例中，虽然解构确实减少了代码量，但它可能会导致混淆什么是变异并使代码更难理解——您自己已经经历过。
将递增/递减的值重新分配给您的对象。您需要将运算符添加到操作数的前缀，因为这会返回在操作之后的值。后缀返回操作之前的值（也就是原始值）。

remove({ quantity, inStock }) {
  if (quantity > 0) {
    product.quantity = --quantity;
    product.inStock = ++inStock;
  }
}

如果您了解functional programming，特别是pure functional programming，则可能有其他模式可以应用于您的场景，但这超出了本答案的范围。这些模式不会产生突变，从而更容易理解数据如何流经和被系统更改。

【讨论】：