算法解密：从零速读前端常见算法

2024-01-24 23:20:53

前端需要了解的一些算法总结（持续更新）

在前端开发中，算法可谓无处不在，无论是页面渲染、数据操作还是用户交互，都离不开算法的身影。掌握算法基础知识，有利于提升开发效率和性能优化。

本文总结了前端开发中最常见的一些算法，并提供了简洁明了的解释和实例代码，帮助您轻松掌握这些算法的精髓。

数组遍历算法

数组遍历算法是用于遍历数组元素的算法，主要有以下几种：

循环算法： 循环算法是最简单的一种数组遍历算法，通过使用 for 循环或 while 循环逐个遍历数组元素。

const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

递归算法： 递归算法通过调用自身来遍历数组元素。

const numbers = [1, 2, 3, 4, 5];
function printNumbers(index) {
  if (index >= numbers.length) {
    return;
  }
  console.log(numbers[index]);
  printNumbers(index + 1);
}
printNumbers(0);

字符串处理算法

字符串处理算法是用于处理字符串的算法，主要有以下几种：

字符串反转算法： 字符串反转算法通过将字符串中的字符从后往前排列来实现字符串的反转。

const str = "Hello World";
function reverseString(str) {
  let reversedStr = "";
  for (let i = str.length - 1; i >= 0; i--) {
    reversedStr += str[i];
  }
  return reversedStr;
}
console.log(reverseString(str)); // "dlroW olleH"

字符串查找算法： 字符串查找算法通过在字符串中查找指定子字符串来实现字符串的查找。

const str = "Hello World";
const substring = "World";
function findSubstring(str, substring) {
  let index = str.indexOf(substring);
  if (index !== -1) {
    console.log("Substring found at index:", index);
  } else {
    console.log("Substring not found.");
  }
}
findSubstring(str, substring); // "Substring found at index: 6"

排序算法

排序算法是用于对数组元素进行排序的算法，主要有以下几种：

冒泡排序算法： 冒泡排序算法通过不断比较相邻元素并进行交换，将数组元素从小到大排列。

const numbers = [5, 2, 8, 3, 1, 9, 4, 7, 6];
function bubbleSort(numbers) {
  for (let i = 0; i < numbers.length - 1; i++) {
    for (let j = 0; j < numbers.length - i - 1; j++) {
      if (numbers[j] > numbers[j + 1]) {
        [numbers[j], numbers[j + 1]] = [numbers[j + 1], numbers[j]];
      }
    }
  }
  return numbers;
}
console.log(bubbleSort(numbers)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

选择排序算法： 选择排序算法通过不断选择最小（或最大）元素并将其与当前元素交换，将数组元素从小到大排列。

const numbers = [5, 2, 8, 3, 1, 9, 4, 7, 6];
function selectionSort(numbers) {
  for (let i = 0; i < numbers.length - 1; i++) {
    let minIndex = i;
    for (let j = i + 1; j < numbers.length; j++) {
      if (numbers[j] < numbers[minIndex]) {
        minIndex = j;
      }
    }
    [numbers[i], numbers[minIndex]] = [numbers[minIndex], numbers[i]];
  }
  return numbers;
}
console.log(selectionSort(numbers)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

搜索算法

搜索算法是用于在数组或列表中查找特定元素的算法，主要有以下几种：

线性搜索算法： 线性搜索算法通过逐个比较数组元素与目标元素来查找目标元素。

const numbers = [5, 2, 8, 3, 1, 9, 4, 7, 6];
function linearSearch(numbers, target) {
  for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] === target) {
      return i;
    }
  }
  return -1;
}
console.log(linearSearch(numbers, 8)); // 2
console.log(linearSearch(numbers, 10)); // -1

二分查找算法： 二分查找算法通过将数组划分为两半，并不断比较目标元素与数组中间元素来查找目标元素。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
function binarySearch(numbers, target) {
  let low = 0;
  let high = numbers.length - 1;
  while (low <= high) {
    let mid = Math.floor((low + high) / 2);
    if (numbers[mid] === target) {
      return mid;
    } else if (numbers[mid] < target) {
      low = mid + 1;
    } else {
      high = mid - 1;
    }
  }
  return -1;
}
console.log(binarySearch(numbers, 5)); // 4
console.log(binarySearch(numbers, 10)); // -1