tslint：在使用 reduce 构建对象时无对象变异答案

【问题标题】：tslint: no-object-mutation while building Object with reducetslint：在使用 reduce 构建对象时无对象变异
【发布时间】：2020-01-31 20:43:15
【问题描述】：

我想以这种方式使用reduce 构建一个对象：

const result = [1, 2].reduce((partialResult, actualValue) => {
    // define someKey and someValue
    partialResult[someKey] = someValue;
    return partialResult
}, {});

但是，我收到以下 tslint 错误：

Modifying properties of existing object not allowed. (no-object-mutation)

我该如何解决这个问题？

【问题讨论】：

只是 FWIW，reduce 在那里没有用处。使用简单的循环会更容易阅读和维护。
您每次都使用相同的键，因此该对象将永远只有一个属性（使用键和最后一个值）。上面的最终结果实际上是const result = {[someKey]: 2}; 我假设密钥确实从一个循环迭代到下一个循环迭代......？
sameKey 和 someValue 根据actualValue + 其他与问题无关的因素而变化。
好好。 :-) 在问题中显示该变体的minimal reproducible example 版本会很有用，因此问题和 - 关键 - 它的答案都是明确的。

标签： javascript typescript-typings tslint

【解决方案1】：

要么修改代码，以免改变对象，这意味着您每次都必须复制它：

const result = [1, 2].reduce((partialResult, actualValue) => {
    return {
      ...partialResult,
      [someKey]: someValue,
    }
}, {});

或禁用 lint 规则（如果您一般喜欢 lint 规则，则禁用此特定行，如果您认为这是不必要的限制，则全局禁用）

【讨论】：

我认为这是一个性能非常低的解决方案，或者没有真正解决问题。
我同意这不是针对性能进行优化的。反复复制对象既浪费又低效。至于它解决问题，你想解决什么问题？你提到了一个 lint 错误，我提到了修复它的两种方法：不要在 reduce 中变异，或者没有 lint 规则。如果您有其他要求，请包括在内。
@justHelloWorld - 这究竟是如何解决问题的？另外：这是代码中对性能至关重要的部分吗？也就是说，您是否有一个与此循环有关的已知性能问题？因为虽然它和下一个创建和丢弃对象的人一样困扰我，但 JavaScript 引擎在这方面的速度令人难以置信，尤其是像这样的短命引擎。它导致您的页面/应用出现问题的几率几乎为零。

【解决方案2】：

例如：

const result = [1, 2].reduce(
    (partialResult, actualValue) => Object.assign({}, partialResult, {[someKey]: someValue]}), {});

【讨论】：

【解决方案3】：

您可以使用map 和Object.fromEntries 一次性创建对象（就您的代码而言），而不是改变或复制对象：

const someKey = "foo";
const result = Object.fromEntries(
  [1, 2].map(value => [someKey + value, value])
//                     ^^^^^^^^^^^^^^^---- see my comment on the question and
//                                         note below
);
console.log(result);

fromEntries 从一个条目数组创建一个对象，其中每个条目都是一个[key, value] 数组。

请注意，我使用 someKey + value 作为密钥，因为您没有说明如何获取密钥，并且我假设您不只是每次都使用 same 密钥，因为正如我在here 评论的那样，如果您这样做了，那么您每次都会替换属性值，并最终得到一个具有单个属性的对象，从而使整个循环变得毫无意义。

【讨论】：