用 vs 替換特定索引處的項目而不進行突變

Question

最近我遇到了這兩種解決方案來替換數組中特定索引處的項目，但我想知道哪個更好，為什么？

function replace(array, index, item) {
  const newArray = [...array];
  newArray[index] = item;
  return newArray;
}

function replace(array, index, item) {
  return [
    ...array.slice(0, index),
    item,
    ...array.slice(index + 1)
  ];
}

Answer 1

這兩個函數的作用完全相同。 它們都不會修改原始數組（沒有突變），唯一的區別是第一個在修改指定索引之前簡單地淺克隆數組，第二個淺克隆指定索引之前的所有項目，在指定索引處插入新值和淺克隆rest 的項目。

第一個 function 更好，因為它的速度提高了 33%，因為它在第二個 function 中進行了 2 步修改，而 3 步進行了修改。

如果突變不是問題，可以使用更快的 function：

function replace(array, index, item) {
  return array[index] = item;
}

Answer 2

“更好”可以是主觀的。 您可以考慮幾個因素。 其中一些：

• 速度：很容易自己用真實數據進行基准測試。
• 可讀性：見仁見智。
• 函數式編程模式：第二種不執行賦值，因此有些人可以考慮更好地遵循函數式編程風格
• 對“無效”輸入的響應：例如，當給定索引大於數組長度時，第一個解決方案將生成一個稀疏數組，而第二個解決方案將就好像索引等於數組長度一樣。 如果索引為-1，第一種解決方案將創建負數組屬性，這是反直覺的，在大多數數組方法中不起作用。 第二種解決方案將復制大部分數組，這很奇怪。 對於其他負 integer 值，第二個版本比第一個版本產生更多有用的結果（從數組后面開始計數）。

您還可以將此版本添加到可能的實現列表中，這更像是第一個版本：

function replace(array, index, item) {
  return Object.assign([], array, { [index]: item });
}