JS数组操作方法全景图，全网最全构建完整知识网络！js数组操作方法全集（实现筛选转换、随机排序洗牌算法、复杂数据处理统计等情景详解，附大量源码和易错点解析）

    为什么说史上最全？因为真的是史上最全！本文有如下几点优势：

    综上所述，本文不只是查漏补缺的分享，更是一个详细周密的JS数组方法字典，您要是有长期的前端开发需求或是未来打算深耕前端技术，欢迎您收藏以备不时之需。要是能点个赞就更好了。

    反转数组中的元素，没什么好说的，一看就懂。

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]

    对数组元素进行排序，默认情况下**sort**() **会将数组元素转换为字符串并按字典序排序。**

let arr = [3, 1, 2];
arr.sort(); // 默认按字典序排序
console.log(arr); // [1, 2, 3]

arr.sort((a, b) => b - a); // 降序排序
console.log(arr); // [3, 2, 1]

     Array.sort()方法最关键的是比较函数的书写，我专门写了一篇详细介绍的博文，您可以点击以下链接查阅：

    Array.find()返回数组中满足条件的第一个元素。Array.findIndex()返回数组中满足条件的第一个元素的索引。

    既然是返回元素，为什么会放到“修改原数组”这个分类中呢？因为Array.find()这个方法普遍用来修改元素为对象的数组中特定的元素。如果只是需要确定数组中有没有某个值，用Array.includes()更方便，需要获取数组中有哪些满足条件的元素，也是用Array.filter()更适合。

    **Array.find()也是数组操作方法中，唯一一个返回原数组元素引用的方法。这个特点也就证明了它就是干这个的。**

const users = [
  { id: 1, name: 'Alice', role: 'user' },
  { id: 2, name: 'Bob', role: 'user' },
];


const bobUpdate = users.find(user => user.name === "Bob");

bobUpdate.role = 'admin'

console.log(users);
// 输出：[{ id: 1, name: 'Alice', role: 'user' }, { id: 2, name: 'Bob', role: 'admin' }]

     详细介绍请移步：

    用一个固定值填充数组的部分或全部元素，用的也不多，一般用于固定长度数组初始化，比如全部填充数组或字符串，以免遍历的时候因为元素类型不统一报错。

let arr = [1, 2, 3];
arr.fill(0); // 全部填充0
console.log(arr); // [0, 0, 0]


let arr = [1, 2, 3];
arr.fill(0, 1); // 从索引1开始填充
console.log(arr); // [1, 0, 0]

    添加或删除数组中的元素，常用来删除，如果第二个参数为0，那就可以仅添加。

let arr = [1, 2, 3];
arr.splice(1, 1, 4, 5); // 从索引1开始删除1个元素，插入4和5
console.log(arr); // [1, 4, 5, 3]

    移除数组的最后一个元素，并返回该元素，常用于栈操作（后进先出）。

let arr = [1, 2, 3];
let last = arr.pop();
console.log(last); // 3
console.log(arr);  // [1, 2]

    添加一个或多个元素到数组的末尾，并返回新的长度。这个非常常用，用来添加元素到数组中。

let arr = [1, 2];
let len = arr.push(3, 4);
console.log(len); // 4
console.log(arr); // [1, 2, 3, 4]

    移除数组的第一个元素，并返回该元素。适用于队列操作（先进先出）。

let arr = [1, 2, 3];
let first = arr.shift();
console.log(first); // 1
console.log(arr);   // [2, 3]

    在数组的开头添加一个或多个元素，并返回新的长度。用于动态更新队列前部数据。

let arr = [2, 3];
let len = arr.unshift(1);
console.log(len); // 3
console.log(arr); // [1, 2, 3]

    合并两个或多个数组，并返回新数组。常用于数组拼接，确保原数组不受影响。

let arr1 = [1, 2];
let arr2 = [3, 4];
let newArr = arr1.concat(arr2);
console.log(newArr); // [1, 2, 3, 4]

    提取原数组的子数组，并返回新数组，提取指定范围的元素，而不影响原数组。

    请注意，接受两个参数分别为起始下标与终止下标，起始下标包括在新数组中，但是终止下标对应的元素不在新数组中。（即集合中的左闭右开）

let arr = [1, 2, 3, 4];
let subArr = arr.slice(1, 3);
console.log(subArr); // [2, 3]

    创建一个新数组，包含通过测试的所有元素，常用于筛选数据

let arr = [1, 2, 3, 4];
let evens = arr.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

     详情请移步：

    创建一个新数组，其结果是原数组每个元素调用提供的函数后的值，用于数据的逐项转换

let arr = [1, 2, 3];
let squared = arr.map(x => x ** 2);
console.log(squared); // [1, 4, 9]
console.log(arr);     // [1, 2, 3]（原数组不变）

     详情请移步：

    将多维数组展平成一维数组，flat()：将嵌套数组展平成一维数组，支持指定展开的深度，flatMap()：先对数组进行映射操作，再展平结果，等效于 map() 加 flat() 的组合，用于处理嵌套数组或复杂结构。

let arr = [1, [2, [3, [4]]]];
console.log(arr.flat(2)); // [1, 2, 3, [4]]

let words = ["hello world", "foo bar"];
let flattened = words.flatMap(str => str.split(" "));
console.log(flattened); // ["hello", "world", "foo", "bar"]

     详情请移步：[多维数组操作，不要再用遍历循环foreach了！来试试数组展平的小妙招！array.flat（）用法与array.flatMap() 用法及二者差异详解\_array flatmap-CSDN博客文章浏览阅读2.5k次，点赞21次，收藏35次。理论上array.flat()能做的事情，array.flatMap()都可以做，但是array.flat()更简单，占用内存更少，执行更快。\_array flatmap](https://opengms-watermelo.blog.csdn.net/article/details/139361815)

    还有一些其他方法，它们不直接修改数组，也不返回新数组，但提供了额外的功能：

    判断数组是否包含某个元素，根据情况返回 true 或 false，可用于快速验证数组中的某个值是否存在。

let arr = [1, 2, 3];
console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

     详情请移步：[别再用双层遍历循环来做新旧数组对比，寻找新增元素了！使用array.includes和Set来提升代码可读性\_js 双数组循环-CSDN博客文章浏览阅读1.9k次，点赞47次，收藏13次。这类问题的重点在于能不能突破基础思路，突破基础思路是从程序员入门变成中级甚至高级的第一步，如果所有需求都通过最基础的业务逻辑来做，是得不到成长的。\_js 双数组循环](https://opengms-watermelo.blog.csdn.net/article/details/139374250)

    对数组中的每个元素执行一次提供的函数，没有返回值，常用于遍历数组进行操作，但不适合需要返回值的场景。

let arr = [1, 2, 3];
arr.forEach(x => console.log(x * 2)); // 输出：2 4 6

     详情请移步：

    测试数组中的元素是否至少有一个满足条件，返回布尔值。

    高阶：本质是只要返回true就会立马结束遍历，如果修改回调函数，在某个元素不满足条件时返回true，也会直接结束遍历，并不一定非要“某个元素满足条件”。

let arr = [1, 2, 3];

console.log(arr.some(x => x > 2)); // true


console.log(arr.some(x => x > 3)); // false

let i = 0

let result = arr.some((num) => {
    i++;
    if(num!=1) return true
})

console.log(i , result ); // 2 true

     详情请移步：

    测试数组中的所有元素是否都满足条件。

    高阶：本质是只要返回false就会立马结束遍历，如果修改回调函数，使其在某种情况下直接返回false，就会直接终止遍历。该方法与Array.some()是互斥的，可以参考Array.some()的例子。

let arr = [1, 2, 3];

console.log(arr.every(x => x > 0)); // true

      详情请移步：[通过array.every(）实现数据验证、权限检查和一致性检查；js数组元素检查的方法，every（）的使用详解，array.some与array.every的区别（附实际应用代码）-CSDN博客文章浏览阅读2.1k次，点赞28次，收藏34次。array.every（）可以用来数据验证、权限检查、一致性检查等数据校验工作，核心在于利用其短路机制，速度更快，节约性能。\_array.every](https://opengms-watermelo.blog.csdn.net/article/details/138393045)

    对数组中的值进行汇总、合并操作，最终计算为单个返回值，reduce()：从左到右执行归约操作，reduceRight()：从右到左执行归约操作，常用于求和、统计等聚合计算。

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

let reversedSum = arr.reduceRight((acc, curr) => acc + curr, 0);
console.log(reversedSum); // 10

     这个相对复杂，如果您对这个方法比较陌生，请直接移步到具体的博客内容：

    返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回 -1，用来查找某个元素在数组中的位置。

let arr = [1, 2, 3, 2];

console.log(arr.indexOf(2)); // 1

    返回在数组中可以找到一个给定元素的最后一个索引，如果不存在，则返回 -1，用来查找某个元素在数组中的位置。

let arr = [1, 2, 3, 2];

console.log(arr.lastIndexOf(2)); // 3

    返回一个包含数组中每个索引的键的迭代器。

let arr = ["a", "b", "c"];

for (let key of arr.keys()) {
    console.log(key); // 输出：0 1 2
}

    返回一个迭代器，它允许迭代数组的值。

let arr = ["a", "b", "c"];

for (let value of arr.values()) {
    console.log(value); // 输出：a b c
}

    返回一个迭代器，它允许迭代数组的索引和值。

let arr = ["a", "b", "c"];

for (let [key, value] of arr.entries()) {
    console.log(key, value); // 输出：0 a, 1 b, 2 c
}

    这种组合非常常见，首先通过 filter() 筛选出符合条件的元素，然后通过 map() 对筛选后的数据进行转换。

    案例：筛选出分数大于 60 的学生，并将其分数转换为百分制。

let students = [
    { name: "Alice", score: 45 },
    { name: "Bob", score: 85 },
    { name: "Charlie", score: 62 },
    { name: "David", score: 30 },
];

// 筛选分数大于 60 的学生，并将分数转换为百分制
let passedStudents = students
    .filter(student => student.score > 60)
    .map(student => ({ name: student.name, percentage: student.score + "%" }));

console.log(passedStudents);
// 输出：
// [
//   { name: 'Bob', percentage: '85%' },
//   { name: 'Charlie', percentage: '62%' }
// ]

    reduce() 是数据统计和聚合的强大工具，可以根据自定义逻辑进行复杂计算。

    案例：统计订单总金额和每种商品的数量。

let orders = [
    { product: "Apple", quantity: 2, price: 3 },
    { product: "Banana", quantity: 3, price: 2 },
    { product: "Apple", quantity: 1, price: 3 },
    { product: "Orange", quantity: 5, price: 4 },
];

// 使用 reduce 汇总
let summary = orders.reduce((acc, order) => {
    acc.totalAmount += order.quantity * order.price; // 累加总金额
    acc.productCount[order.product] = 
        (acc.productCount[order.product] || 0) + order.quantity; // 统计每种商品的数量
    return acc;
}, { totalAmount: 0, productCount: {} });

console.log(summary);
// 输出：
// {
//   totalAmount: 35,
//   productCount: { Apple: 3, Banana: 3, Orange: 5 }
// }

    当数据存在嵌套结构时，可以用 flat() 将其展平，再用 map() 进行转换或处理。

let courses = [
    [
        { student: "Alice", score: 45 },
        { student: "Bob", score: 85 }
    ],
    [
        { student: "Charlie", score: 62 },
        { student: "David", score: 30 }
    ]
];

// 展平嵌套数组并标记成绩是否及格
let processedCourses = courses
    .flat() // 展平成一维数组
    .map(course => ({
        student: course.student,
        score: course.score,
        passed: course.score >= 60
    }));

console.log(processedCourses);
// 输出：
// [
//   { student: 'Alice', score: 45, passed: false },
//   { student: 'Bob', score: 85, passed: true },
//   { student: 'Charlie', score: 62, passed: true },
//   { student: 'David', score: 30, passed: false }
// ]

    Set 是一种数据结构，可以快速实现去重。将数组转换为 Set，然后再转换回数组即可完成去重操作。

let numbers = [1, 2, 2, 3, 4, 4, 5];

// 使用 Set 去重
let uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); 
// 输出：[1, 2, 3, 4, 5]

// 示例：对对象数组按某个字段去重
let items = [
    { id: 1, name: "Apple" },
    { id: 2, name: "Banana" },
    { id: 1, name: "Apple" },
    { id: 3, name: "Orange" }
];

// 按 id 去重
let uniqueItems = Array.from(new Map(items.map(item => [item.id, item])).values());

console.log(uniqueItems);
// 输出：
// [
//   { id: 1, name: "Apple" },
//   { id: 2, name: "Banana" },
//   { id: 3, name: "Orange" }
// ]

    这只是一个简单的案例，实际上本人将数组去重分为：数值类去重、引用类去重和混合数组去重，引用类去重又包括去除完全重复元素、去除完全重复元素的特殊情况、去除部分重复的对象元素三种情况，一共是五种情形，涉及到14种不同的去重方法，让您一次性看个够，享受算法的魅力：

    这些方法提供了对数组的全面操作，包括搜索、遍历、转换和聚合等。通过分为原地操作方法、非原地操作方法和其他方法便于您理解和记忆，并熟悉他们各自的使用方法与使用范围。详细的案例与进阶使用，方便您理解数组操作的底层原理。链式调用的几个案例，让您玩转数组操作。

     只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~