JS 数组系列专题文章目录
入门篇
第 1 篇：认识 JavaScript 数组——从入门到操作基础
👉 介绍数组的概念、创建方式、索引与长度的使用，以及最基础的遍历方法。适合刚接触数组的新手。第 2 篇：数组的增删改全解析（push、pop、splice）
👉 系统讲解数组的增删改方法，包括push、pop、shift、unshift、splice、fill，并结合小案例说明。常用方法篇
第 3 篇：数组的查找与判断方法大全
👉 详细介绍如何在数组中查找元素，包括indexOf、lastIndexOf、includes、find、findIndex、some、every等。第 4 篇：数组的排序与合并技巧（sort、concat、slice）
👉 讲解数组排序与反转的方法，以及合并、切片、字符串化的常见操作，重点讲解sort排序中的注意点。进阶篇
第 5 篇：数组的迭代与转换（map、filter、reduce 全解）
👉 深入剖析高阶方法map、filter、reduce，包括实际应用场景：数组求和、数据统计、扁平化处理等。第 6 篇：数组的实用技巧与案例集锦
👉 介绍常见的数组处理技巧：去重（多种写法对比）、扁平化（flat与递归实现）、字符串与数组互转、对象数组排序。高阶篇
第 7 篇：类数组与稀疏数组——容易忽略的细节
👉 解释什么是类数组（arguments、NodeList），如何转换为真数组，稀疏数组的特性和坑点。第 8 篇：不可变数组操作与函数式编程思路
👉 如何在不修改原数组的前提下进行操作（扩展运算符、concat、map等），结合函数式编程的思想讲解。实战 & 面试篇
第 9 篇：手写数组常用方法（map、filter、reduce）
👉 从源码角度模拟实现常见数组方法，帮助加深理解，提升面试竞争力。第 10 篇：数组实战应用与高频面试题精选
👉 总结数组在实战中的应用：两数之和、数组旋转、最大最小值查找、groupBy、分页实现，涵盖面试常考题。
在日常开发中，我们经常要对数组进行排序，或者把多个数组合并成一个。比如：
- 排序：商品列表按价格从低到高、学生成绩从高到低。
- 合并：将两个不同来源的用户数据拼在一起，再去重。
一、数组排序的基本方法
JavaScript 提供了一个现成的 sort() 方法，用起来很方便。
1. 默认排序（字符串排序）
const arr = [10, 2, 5, 1];
console.log(arr.sort()); // [1, 10, 2, 5]
咦，怎么怪怪的？
👉 因为默认的 sort() 会把元素转成 字符串 来比较，所以 '10' 会排在 '2' 前面。
2. 数字排序
要正确排序数字，我们需要给 sort() 传一个 比较函数：
const arr = [10, 2, 5, 1];
// 升序
console.log(arr.sort((a, b) => a - b)); // [1, 2, 5, 10]
// 降序
console.log(arr.sort((a, b) => b - a)); // [10, 5, 2, 1]
口诀：
a - b👉 升序b - a👉 降序
3. 按对象属性排序
开发中更多的是排序对象，比如按学生分数、商品价格。
const students = [
{ name: "小明", score: 85 },
{ name: "小红", score: 92 },
{ name: "小刚", score: 76 }
];
// 按分数升序
students.sort((a, b) => a.score - b.score);
console.log(students);
// 按分数降序
students.sort((a, b) => b.score - a.score);
console.log(students);
4. 稳定排序
在 ES2019 之后，sort() 已经是 稳定排序 了。
意思是：如果两个元素相等，它们在排序后的顺序和原来保持一致。
这点在处理数据时很重要，比如按照“先按性别、再按年龄”排序时，结果会更符合预期。
二、数组的合并方法
除了排序，数组合并也是高频操作。
1. 使用 concat
const arr1 = [1, 2];
const arr2 = [3, 4];
console.log(arr1.concat(arr2)); // [1, 2, 3, 4]
注意：concat 不会修改原数组，而是返回一个新数组。
2. 使用扩展运算符 ...
这是更现代、更常用的方式。
const arr1 = [1, 2];
const arr2 = [3, 4];
console.log([...arr1, ...arr2]); // [1, 2, 3, 4]
看起来更简洁。
3. 合并多个数组
const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = [...arr1, ...arr2, ...arr3];
console.log(merged); // [1, 2, 3, 4, 5, 6]
三、排序 + 合并的进阶用法
实际项目里，排序和合并经常要搭配使用。比如：
1. 合并两个用户列表并按年龄排序
const users1 = [
{ name: "小明", age: 25 },
{ name: "小红", age: 20 }
];
const users2 = [
{ name: "小刚", age: 30 },
{ name: "小丽", age: 22 }
];
// 合并
const allUsers = [...users1, ...users2];
// 按年龄升序排序
allUsers.sort((a, b) => a.age - b.age);
console.log(allUsers);
/*
[
{ name: "小红", age: 20 },
{ name: "小丽", age: 22 },
{ name: "小明", age: 25 },
{ name: "小刚", age: 30 }
]
*/
2. 合并数组并去重再排序
有时候数据来源不止一个，还可能有重复。
const arr1 = [3, 1, 4];
const arr2 = [2, 4, 5];
// 合并 + 去重 + 排序
const merged = [...new Set([...arr1, ...arr2])].sort((a, b) => a - b);
console.log(merged); // [1, 2, 3, 4, 5]
Set 在这里帮大忙了！
评论区