揭秘前端实习生面试中的陷阱：一个看似简单的数组删除 Bug 背后的故事

2023-11-05 16:32:02

引言

面试是程序员职业生涯中不可或缺的一部分，而一道看似简单的面试题却有可能暴露初学者容易忽视的陷阱。本文将以一个前端实习生面试中的数组删除 Bug 为例，深入剖析其成因，揭示背后的编程原理，并提供实用技巧，帮助程序员避免类似错误，在面试中脱颖而出。

面试题：数组删除中的陷阱

在面试中，求职者被要求编写一个函数，该函数接受一个数组和一个索引数组作为参数，并从数组中删除指定索引处的元素。看似简单的一道题，却隐藏着不少陷阱。

Bug 分析：索引与引用

问题在于，当索引数组中包含重复的索引时，实际删除的效果与预期不符。这是因为 JavaScript 中的数组是一种引用类型，这意味着对数组元素的修改会影响原数组。当使用索引数组删除元素时，实际上是在修改原数组中的引用，而不是删除元素本身。

代码示例

const arr = [1, 2, 3, 4, 5];
const indexes = [1, 2];

function deleteElements(arr, indexes) {
  for (let i = indexes.length - 1; i >= 0; i--) {
    arr.splice(indexes[i], 1);
  }
}

deleteElements(arr, indexes);
console.log(arr); // [1, 4, 5]

在这个示例中，我们希望删除索引 1 和 2 处的元素，但实际结果却变成了 [1, 4, 5]。这是因为当删除索引 2 处的元素时，索引 1 处的元素被移动到了索引 2 的位置，导致原索引 1 处的元素被跳过。

解决方案：使用新数组

为了解决这个问题，我们可以使用一个新数组来存储删除后的元素，而不是直接修改原数组。

const arr = [1, 2, 3, 4, 5];
const indexes = [1, 2];

function deleteElements(arr, indexes) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    if (!indexes.includes(i)) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

const result = deleteElements(arr, indexes);
console.log(result); // [1, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]