当然可以!以下是一篇内容丰富、实用性强、适合发布在技术博客或知识星球的 JavaScript 数组方法大全文章,标题为:


📘 JavaScript篇:【前端必备】数组方法大全:从“会写”到“玩出花”,你掌握几个?

JavaScript 数组是前端开发的灵魂结构之一。你可能会用 push()pop(),但你真的会用 reduce()flatMap()copyWithin() 吗?本文从“基础 → 进阶 → 魔法操作”,逐一带你掌握数组方法,写出更优雅的代码!


📌 目录

  1. 基础操作:增删查改
  2. 遍历与变换类方法
  3. 查找与判断类方法
  4. 排序与重组类方法
  5. 函数式编程神器:reduce / map
  6. 稀有但强大的方法
  7. 多维数组操作技巧
  8. 超实用数组操作技巧
  9. 最容易混淆的几个方法对比

1️⃣ 基础操作:增删查改

push() / pop() / unshift() / shift()

const arr = [1, 2, 3];
arr.push(4);    // [1, 2, 3, 4]
arr.pop();      // [1, 2, 3]
arr.unshift(0); // [0, 1, 2, 3]
arr.shift();    // [1, 2, 3]
  • push/pop 操作末尾
  • unshift/shift 操作头部

splice() —— 万能增删改!

arr.splice(1, 1); // 删除第2个
arr.splice(1, 0, 'A'); // 在索引1插入'A'

2️⃣ 遍历与变换类方法

forEach()

arr.forEach((v, i) => console.log(i, v));
  • 不可中断、不返回新数组

map() ✅ 返回新数组(推荐)

const doubled = arr.map(v => v * 2);
  • 返回与原数组等长的新数组

filter()

const even = arr.filter(v => v % 2 === 0);
  • 返回符合条件的元素组成的新数组

3️⃣ 查找与判断类方法

find() / findIndex()

arr.find(v => v > 2);        // 找值
arr.findIndex(v => v > 2);   // 找索引

includes() / indexOf() / lastIndexOf()

arr.includes(3); // true
arr.indexOf(3);  // 第一个匹配索引

4️⃣ 排序与重组类方法

sort() + reverse()

arr.sort((a, b) => a - b); // 升序
arr.reverse(); // 倒序
  • 原地修改数组,请注意副作用!

concat()(拼接) / slice()(裁剪)

const newArr = arr.concat([4, 5]);
const part = arr.slice(1, 3);
  • slice() 不改原数组
  • splice() 会改原数组,别混淆!

5️⃣ 函数式编程神器:reduce()

const sum = arr.reduce((acc, val) => acc + val, 0);
  • 万能的聚合器,可以实现 mapfiltergroupByflat 等一切

示例:统计数组中每个元素出现次数

const stats = ['a', 'b', 'a', 'c'].reduce((acc, cur) => {
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});

6️⃣ 稀有但强大的方法(95% 的人不会用)

flat() / flatMap()

[1, [2, [3]]].flat(2); // [1, 2, 3]

[1, 2, 3].flatMap(x => [x, x * 2]);
// [1, 2, 2, 4, 3, 6]

fill() —— 批量填充!

new Array(5).fill(0); // [0, 0, 0, 0, 0]
arr.fill('A', 1, 3);

copyWithin() —— 复制部分到其他索引位置

[1, 2, 3, 4, 5].copyWithin(0, 3, 5); // [4, 5, 3, 4, 5]

7️⃣ 多维数组操作技巧

二维数组扁平化:

const flat = arr.flat(Infinity);

构造矩阵:

const matrix = Array.from({ length: 3 }, () => Array(3).fill(0));

8️⃣ 超实用数组操作技巧

数组去重:

[...new Set([1, 2, 2, 3])];

洗牌算法(Fisher–Yates):

arr.sort(() => Math.random() - 0.5); // 简版

数组对象按属性排序:

users.sort((a, b) => a.age - b.age);

9️⃣ 最容易混淆的几个方法对比

方法是否改原数组返回值是否可链式
map()新数组
forEach()undefined
filter()新数组
splice()被删除元素数组
slice()新数组
reduce()聚合值

🧠 总结:写数组方法的“三件套”思维

目标方法组合(推荐)
遍历 + 改造map() + filter()
聚合统计reduce()
去重 + 排序Set + sort()
扁平 + 映射flatMap() 或 flat() + map()
不改原数组操作避免用 splice(),用 slice() 替代

📚 延伸阅读


✍️ 彩蛋挑战:你能用一行代码做到这些吗?

  1. 去重 + 升序排序?
  2. 统计字符频率?
  3. 二维数组求和?
  4. 找出出现次数最多的元素?

欢迎评论区挑战并分享你最爱的数组骚操作!