手写代码实战演练，助你轻松搞定前端面试！

前端面试中，手写代码是必不可少的环节。虽然手写代码在实际工作中并不常见，但它能够考察面试者的基本功和代码编写能力。本文将以数组去重为例，详细讲解手写代码的常见场景和技巧，帮助你轻松搞定前端面试！

一、数组去重

数组去重是前端面试中常见的题目，其基本思路是遍历数组，将重复元素剔除。以下是几种常见的手写代码实现方式：

1. 双层循环

这是最原始的方法，通过双层循环分别遍历原始数组和新建数组，将不重复的元素添加到新建数组中。

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

for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < newArr.length; j++) {
    if (arr[i] === newArr[j]) {
      break;
    }
  }
  if (j === newArr.length) {
    newArr.push(arr[i]);
  }
}

console.log(newArr); // [1, 2, 3, 4, 5]

2. indexOf

使用 indexOf 可以简化内层的循环，通过判断元素在新建数组中的位置是否存在来确定是否重复。

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

for (let i = 0; i < arr.length; i++) {
  if (newArr.indexOf(arr[i]) === -1) {
    newArr.push(arr[i]);
  }
}

console.log(newArr); // [1, 2, 3, 4, 5]

3. 排序

将原始数组排序后，相邻元素必然相等，只需要比较前后两个数即可。

const arr = [1, 2, 3, 4, 5, 1, 2, 3];
arr.sort();

const newArr = [];
for (let i = 1; i < arr.length; i++) {
  if (arr[i] !== arr[i - 1]) {
    newArr.push(arr[i]);
  }
}

console.log(newArr); // [1, 2, 3, 4, 5]

4. ES5

ES5 中提供了 filter 方法，可以简化数组去重的写法。

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

const newArr = arr.filter((item, index) => arr.indexOf(item) === index);

console.log(newArr); // [1, 2, 3, 4, 5]

5. ES6

ES6 中提供了 Set 数据结构，它本身就具有去重功能。

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

const newArr = [...new Set(arr)];

console.log(newArr); // [1, 2, 3, 4, 5]

二、总结

通过以上实例，相信你已经掌握了手写代码的基本思路和技巧。在实际面试中，面试官可能还会考察其他场景，比如实现深拷贝、扁平化数组、判断环形链表等。只要熟练掌握基本功，灵活运用各种数据结构和算法，相信你一定能够轻松搞定前端面试！