前端开发必学的JavaScript排序算法

更新日期: 2025-06-18阅读: 25标签: 算法

在网页和APP开发中,经常要处理列表数据排序。掌握基础的JavaScript排序算法是前端工程师的核心能力。这篇文章介绍五种最常用的排序方法,用简单语言和实际代码帮你彻底理解它们。

为什么排序算法对前端很重要?

  1. 处理用户数据:用户列表、商品价格、日期排序都需要用到

  2. 优化性能:了解算法效率能提升大型数据集处理速度

  3. 面试必考:前端技术面试几乎都会考察排序算法基础


1. 冒泡排序:最基础的交换排序

想象水中的气泡向上冒。它反复比较相邻元素,顺序错误就交换:

function bubbleSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      if (arr[j] > arr[j + 1]) {
        // 交换位置
        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
      }
    }
  }
  return arr;
}

特点:代码简单但速度慢,小数据集可用


2. 选择排序:每次找到最小值

像打扑克时按顺序理牌:

function selectionSort(arr) {
  for (let i = 0; i < arr.length; i++) {
    let minIndex = i;
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[j] < arr[minIndex]) minIndex = j;
    }
    [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]]; // 交换
  }
  return arr;
}

适用场景:数据量中等且要求简单实现时


3. 插入排序:像理扑克牌

逐个将元素插入已排序序列的正确位置:

function insertionSort(arr) {
  for (let i = 1; i < arr.length; i++) {
    let current = arr[i];
    let j = i - 1;
    while (j >= 0 && arr[j] > current) {
      arr[j + 1] = arr[j]; // 后移元素
      j--;
    }
    arr[j + 1] = current; // 插入
  }
  return arr;
}

优势:对基本有序的数据排序非常快


4. 快速排序:最高效的通用排序

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++) {
    arr[i] < pivot ? left.push(arr[i]) : right.push(arr[i]);
  }

  return [...quickSort(left), pivot, ...quickSort(right)];
}

为什么前端要掌握它:处理大量数据时速度优势明显


5. 归并排序:稳定高效的排序

先分割再合并的典型算法:

function mergeSort(arr) {
  if (arr.length < 2) return arr;
  
  const mid = Math.floor(arr.length / 2);
  const left = arr.slice(0, mid);
  const right = arr.slice(mid);
  
  return merge(mergeSort(left), mergeSort(right));
}

function merge(left, right) {
  const result = [];
  while (left.length && right.length) {
    left[0] <= right[0] 
      ? result.push(left.shift()) 
      : result.push(right.shift());
  }
  return [...result, ...left, ...right];
}

核心优势:稳定排序且速度有保障


算法速度比较(时间复杂度)

算法平均速度最快情况最慢情况
冒泡排序O(n²)O(n)O(n²)
插入排序O(n²)O(n)O(n²)
选择排序O(n²)O(n²)O(n²)
快速排序O(n log n)O(n log n)O(n²)
归并排序O(n log n)O(n log n)O(n log n)

前端开发怎么选择排序方法?

  • 小数组(<100项):插入排序简单高效

  • 通用需求:优先用内置的array.sort()

  • 大数据集:快速排序或归并排序

  • 需要稳定排序:选择归并排序

理解这些JavaScript排序算法原理能让你:

  • 更高效处理前端数据展示

  • 在技术面试中脱颖而出

  • 根据场景选择最优排序方案

实际开发中,JavaScript自带的array.sort()方法通常足够使用(它使用优化后的Timsort算法)。但手动实现这些算法能显著提升你的编程思维。尝试在CodePen或LeetCode上练习这些代码,亲手调试能加深理解。掌握排序算法,你的前端开发基础会更扎实可靠。

链接: https://fly63.com/article/detial/12827

js洗牌算法:javascript数组随机打乱顺序的实现方法

有一个数组,我们需要通过js对数组的元素进行随机排序,然后输出,这其实就是洗牌算法,首页需要从元素中随机取一个和第一元进行交换,然后依次类推,直到最后一个元素。

程序员必须知道的10大基础实用算法及其讲解

程序员必须知道的10大算法:快速排序算法、堆排序算法、归并排序、二分查找算法、BFPRT(线性查找算法)、DFS(深度优先搜索)、BFS(广度优先搜索)、Dijkstra算法、动态规划算法、朴素贝叶斯分类算法

js从数组取出 连续的 数字_实现一维数组中连续数字分成几个连续的数字数组

使用原生js将一维数组中,包含连续的数字分成一个二维数组,这篇文章分2种情况介绍如何实现?1、过滤单个数字;2、包含单个数字。

原生Js获取数组中最长的连续数字序列的方法

给定一个无序的整数序列, 找最长的连续数字序列。例如:给定[100, 4, 200, 1, 3, 2],最长的连续数字序列是[1, 2, 3, 4]。此方法不会改变传入的数组,会返回一个包含最大序列的新数组。

Tracking.js_ js人脸识别前端代码/算法框架

racking.js 是一个独立的JavaScript库,实现多人同时检测人脸并将区域限定范围内的人脸标识出来,并保存为图片格式,跟踪的数据既可以是颜色,也可以是人,也就是说我们可以通过检测到某特定颜色,或者检测一个人体/脸的出现与移动,来触发JavaScript 事件。

JS常见算法题目

JS常见算法题目:xiaoshuo-ss-sfff-fe 变为驼峰xiaoshuoSsSfffFe、数组去重、统计字符串中出现最多的字母、字符串反序、深拷贝、合并多个有序数组、约瑟夫环问题

RSA算法详解

这篇文章主要是针对一种最常见的非对称加密算法——RSA算法进行讲解。其实也就是对私钥和公钥产生的一种方式进行描述,RSA算法的核心就是欧拉定理,根据它我们才能得到私钥,从而保证整个通信的安全。

PageRank算法的定义与来源、以及PageRank算法原理

PageRank,网页排名,又称网页级别、Google左侧排名或佩奇排名,是一种由 根据网页之间相互的超链接计算的技术,而作为网页排名的要素之一,以Google公司创办人拉里·佩奇(Larry Page)之姓来命名。

js算法_js判断一个字符串是否是回文字符串

什么是回文字符串?即字符串从前往后读和从后往前读字符顺序是一致的。例如:字符串aba,从前往后读是a-b-a;从后往前读也是a-b-a

js之反转整数算法

将一个整数中的数字进行颠倒,当颠倒后的整数溢出时,返回 0 ;当尾数为0时候需要进行舍去。解法:转字符串 再转数组进行操作,看到有人用四则运算+遍历反转整数。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!