javascript - 传播运算符会影响性能吗？

Question

我正在考虑以下两种构建对象数组的方法:

方法 1(列出所有属性，即使在对象之间重复):

const employees = [
  {
    company: 'ABC',
    country: 'IN',
    zip: 123,
    employeeId: 123,
    employeeName: 'p'
  },
  {
    company: 'ABC',
    country: 'IN',
    zip: 123,
    employeeId: 456,
    employeeName: 'q'
  },
  {
    company: 'ABC',
    country: 'IN',
    zip: 123,
    employeeId: 789,
    employeeName: 'r'
  }
];

方法 2(避免与 展开运算符 重复):

const commonParams = {
  company: 'ABC',
  country: 'IN',
  zip: 123
};

const employees = [
  {
    ...commonParams,
    employeeId: 123,
    employeeName: 'p'
  },
  {
    ...commonParams,
    employeeId: 456,
    employeeName: 'q'
  },
  {
    ...commonParams,
    employeeId: 789,
    employeeName: 'r'
  }
]

方法 2 更简洁，添加一个所有数组元素共有的新属性会容易得多(并且不太容易出错)。

但是，在大型 commonParams 对象的情况下，与方法 1 相比，方法 2(使用展开运算符)是否会影响性能？

扩展运算符是否会针对 employees 数组中的每个对象遍历 commonParams 对象的每个属性？

Answer 1

是的，将引用一个对象的变量传播到另一个对象中需要解释器查找该变量所指的内容，然后查找被传播的对象的所有可枚举自身属性(以及相关值)至于插入到新对象中。这确实需要一点的处理能力。

但是，在现代计算机和现代 JS 引擎上，所需的处理能力几乎为零；当每秒可以处理数百万条指令时，这有什么关系？少量键值对无需担心。

除非您确定您正在传播一个包含 吨 键值对的对象，并且它实际上导致了性能瓶颈，否则它会更好避免过早优化的想法，而是旨在编写干净、可读的代码(这很可能经常使用扩展语法调用)。对于大型 employees 数组，第二种方法比第一种方法更具可读性。

(不过，您也可以考虑使用 .map，以保持代码更干:)

const employeesInitial = [
  {
    employeeId: 123,
    employeeName: 'p'
  },
  {
    employeeId: 456,
    employeeName: 'q'
  },
  {
    employeeId: 789,
    employeeName: 'r'
  }
];
const employees = employeesInitial.map((obj) => ({ ...obj, ...commonParams }));