2021 前端面试代码题：必练精讲

作为一个前端开发人员，了解算法和数据结构的基本概念至关重要，因为它们可以帮助你解决复杂的问题，并设计出高效且可扩展的代码。在当今竞争激烈的就业市场中，手写代码能力更是成为许多高薪前端职位招聘过程中的必备技能。

本文汇集了2021年高频前端面试中出现的手写代码题目，涵盖了基础知识、算法和数据结构等方面。这些题目经过精心挑选和讲解，旨在帮助你全面提升手写代码能力，为面试成功做好准备。

## 基础知识

### 1. 编写一个函数，反转一个字符串。

function reverseString(str) {
if (!str || str.length === 0) {
return str;
}

let reversed = "";
for (let i = str.length - 1; i >= 0; i--) {
reversed += str[i];
}

return reversed;
}

### 2. 编写一个函数，判断一个数字是否是质数。

function isPrime(num) {
if (num <= 1) {
return false;
}

for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) {
return false;
}
}

return true;
}

## 算法

### 3. 实现快速排序算法。

function quickSort(arr) {
if (arr.length <= 1) {
return arr;
}

const pivot = arr[0];
const left = [];
const right = [];

for (let i = 1; i < arr.length; i++) {
if (arr[i] < pivot) {
left.push(arr[i]);
} else {
right.push(arr[i]);
}
}

return quickSort(left).concat(pivot, quickSort(right));
}

### 4. 实现二叉搜索算法。

function binarySearch(arr, target) {
let left = 0;
let right = arr.length - 1;

while (left <= right) {
const mid = Math.floor((left + right) / 2);
const guess = arr[mid];

if (guess === target) {
  return mid;
} else if (guess < target) {
  left = mid + 1;
} else {
  right = mid - 1;
}

}

return -1;
}

## 数据结构

### 5. 实现栈数据结构。

class Stack {
constructor() {
this.items = [];
}

push(item) {
this.items.push(item);
}

pop() {
if (this.items.length === 0) {
return null;
}

return this.items.pop();

}

peek() {
if (this.items.length === 0) {
return null;
}

return this.items[this.items.length - 1];

}

isEmpty() {
return this.items.length === 0;
}
}

### 6. 实现队列数据结构。

class Queue {
constructor() {
this.items = [];
}

enqueue(item) {
this.items.push(item);
}

dequeue() {
if (this.items.length === 0) {
return null;
}

return this.items.shift();

}

peek() {
if (this.items.length === 0) {
return null;
}

return this.items[0];

}

isEmpty() {
return this.items.length === 0;
}
}

通过掌握这些手写代码题目，你可以提升自己的算法和数据结构基础，为前端开发中的各种挑战做好准备。持续练习这些题目，并与其他开发者交流，将帮助你提升手写代码能力，从而在面试和职业发展中获得成功。