将键值对添加到数组中存在的 JS object 的最佳方法是什么

Question

将新的键值对添加到数组中存在的 JS object 的最佳方法是什么：

documents = [{ doc1: 'abc', doc2: 'def' }]

来自另一个 JS object

documen = {opq: 'rst', uvw: 'xyz' }

选项 1 ：使用点符号：

documents[0].doc3 = documen.opq
documents[0].doc4 = documen.uvw

选项 2 ：使用扩展语法 ( ... )：

documents[0] = {...documents[0], doc3: documen.opq, doc4: documen.uvw}

我尝试了这两种选择并且两者都有效。 我想知道的是是否有任何其他更好的方法可以获得与上述 2 个选项相同的结果，如果没有上述 2 种方法中的哪一种在性能方面更好。

Answer 1

这两个选项都很好。 任何性能差异都将完全可以忽略不计，因此不值得考虑。 散布方法可能有点贵，因为它必须遍历 object 中的所有属性以创建新的 object，但这并不重要。 更重要的是

• 您和代码的其他维护者认为可读的内容，以及
• 代码库的代码风格是否接受突变（有些接受，有些不接受）

例如，当 object 直接突变时，某些类型的库和框架（如 React）表现不佳。 如果您碰巧使用其中之一，则需要牢记这两个选项都会改变数组这一事实。 如果您没有使用任何对突变很重要的东西，那也没关系。

您的第一种方法会改变数组中的一个项目。 您的第二种方法通过用一个新项目替换一个项目来改变数组本身。 如果您处于必须在不改变任何内容的情况下执行此操作的情况下，则需要

const newDocuments = documents.map((doc, i) =>
  i === 0
    ? ({ ...doc, doc3: documen.opq, doc4: documen.uvw })
    : doc
);

但是，除非您实际上处于突变是一个值得担心的问题的情况下，否则您可能会认为您的第一个选项是最易读的（因为性能方面不是问题，并且因为点符号方法非常简单）。