JavaScript数组方法push()、forEach()、filter()、sort()实战教程

前言

处理Ja vaScript数组时，是不是经常在几个方法之间犹豫不决——到底该用哪个来添加元素、遍历数据、筛选内容或排序？这篇教程直接切入四个最常用的核心方法：push()、forEach()、filter()、sort()。通过实际场景、可运行代码，以及常见错误和解决方案，把每个方法的功能、用法和坑点都讲透。看完就能直接上手，不绕弯子。

一、push()：给数组“尾部追加”元素

核心功能

push() 的作用很简单：往数组末尾追加一个或多个元素，然后返回新数组的长度——注意，返回的是长度，不是数组本身，这一点经常被忽略。另外，它会直接修改原始数组，属于“原地操作”。

适用场景

• 向列表中追加新数据，比如用户提交表单后，把新用户信息加入用户列表
• 批量补充数据到数组尾部
• 动态构建数组，逐步添加元素

可运行代码案例

直接看代码，比什么都直观。下面几个例子涵盖了基础用法、批量添加和实战场景。

// 1. 基础用法：添加单个元素
const fruitList = ['苹果', '香蕉', '橙子'];
// 调用push()，添加单个元素
const newLength1 = fruitList.push('葡萄');
console.log('添加单个元素后的数据：', fruitList); // 输出：['苹果', '香蕉', '橙子', '葡萄']
console.log('更新后数组长度：', newLength1); // 输出：4

// 2. 进阶用法：添加多个元素
const numberArr = [1, 2, 3];
// 调用push()，批量添加多个元素（用逗号分隔）
const newLength2 = numberArr.push(4, 5, 6);
console.log('添加多个元素后的数据：', numberArr); // 输出：[1, 2, 3, 4, 5, 6]
console.log('更新后数组长度：', newLength2); // 输出：6

// 3. 实战场景：用户列表追加新用户
const userList = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 28 }
];
// 新用户数据
const newUser = { id: 3, name: '王五', age: 30 };
// 追加新用户
userList.push(newUser);
console.log('追加新用户后的列表：', userList);
// 输出：[{ id:1, ... }, { id:2, ... }, { id:3, ... }]

常见错误与解决方案

下面是一些容易踩的坑，看看你遇到过没有？

二、forEach()：遍历数组的“万能工具”

核心功能

forEach() 用于遍历数组的每一个元素，并对每个元素执行你指定的回调函数。它没有返回值（返回 undefined），仅用于执行遍历操作——当然，回调函数里也可以修改原始数组，但这取决于你写的代码。

适用场景

• 遍历数组并打印或展示所有元素
• 对每个元素执行统一操作，比如格式化数据、累加计算
• 不需要返回新数组，只需要遍历处理的情况

可运行代码案例

这几个例子展示了遍历、累加和格式化，非常实用。

// 1. 基础用法：遍历数组并打印每个元素
const animalArr = ['老虎', '大象', '熊猫', '猴子'];
console.log('动物列表遍历结果：');
animalArr.forEach((animal, index) => {
  // 回调函数参数：item（当前元素）、index（当前索引，可选）、array（原数组，可选）
  console.log(`索引${index}：${animal}`);
});
// 输出：
// 索引0：老虎
// 索引1：大象
// 索引2：熊猫
// 索引3：猴子

// 2. 进阶用法：遍历数组并累加计算
const scoreArr = [85, 92, 78, 90, 88];
let totalScore = 0;
// 遍历分数数组，累加总分
scoreArr.forEach(score => {
  totalScore += score;
});
const a verageScore = totalScore / scoreArr.length;
console.log('总分：', totalScore); // 输出：431
console.log('平均分：', a verageScore); // 输出：86.2

// 3. 实战场景：格式化数组元素（给商品名称添加前缀）
const productList = ['手机', '电脑', '平板', '耳机'];
const formatProductList = [];
// 遍历商品列表，格式化后存入新数组
productList.forEach(product => {
  formatProductList.push(`热销-${product}`);
});
console.log('格式化后的商品列表：', formatProductList);
// 输出：['热销-手机', '热销-电脑', '热销-平板', '热销-耳机']

常见错误与解决方案

以下错误在初学阶段几乎都会遇到，提前了解能省不少调试时间。

三、filter()：筛选数组的“精准过滤器”

核心功能

filter() 根据指定条件筛选数组元素，返回一个全新的数组，包含所有满足条件的元素。它不会修改原始数组。如果没有符合条件的元素，就返回一个空数组。

适用场景

• 按条件筛选数据，比如筛选大于10的数字、筛选成年用户
• 排除数组中的无效数据，比如筛选非空字符串、排除值为null的元素
• 多条件组合筛选，比如筛选年龄在20-30岁之间的女性用户

可运行代码案例

从简单条件到多条件组合，再到排除无效数据，这三个例子覆盖了常见需求。

// 1. 基础用法：筛选满足单一条件的元素
const numArr = [12, 5, 28, 7, 35, 1, 40];
// 筛选大于20的数字
const bigNumArr = numArr.filter(num => {
  return num > 20;
});
console.log('原始数组：', numArr); // 输出：[12,5,28,7,35,1,40]
console.log('大于20的数字数组：', bigNumArr); // 输出：[28,35,40]

// 2. 进阶用法：多条件组合筛选
const studentList = [
  { name: '小明', gender: '男', age: 18, score: 90 },
  { name: '小红', gender: '女', age: 17, score: 95 },
  { name: '小刚', gender: '男', age: 19, score: 85 },
  { name: '小丽', gender: '女', age: 18, score: 92 },
  { name: '小亮', gender: '男', age: 17, score: 88 }
];
// 筛选：女性 && 年龄18岁 && 分数大于90
const targetStudents = studentList.filter(student => {
  return student.gender === '女' && student.age === 18 && student.score > 90;
});
console.log('满足条件的学生：', targetStudents); // 输出：[{ name: '小丽', ... }]

// 3. 实战场景：排除无效数据（筛选非空、非undefined的用户名）
const userNameList = ['张三', '', '李四', undefined, '王五', null, '赵六'];
// 筛选有效用户名（排除空字符串、undefined、null）
const validUserNameList = userNameList.filter(name => {
  return name !== '' && name !== undefined && name !== null;
});
console.log('原始用户名列表：', userNameList);
console.log('有效用户名列表：', validUserNameList); // 输出：['张三', '李四', '王五', '赵六']

常见错误与解决方案

filter()的坑主要出在返回值、逻辑运算符以及引用类型判断上，表格里都列出来了。

四、sort()：排序数组的“灵活排序器”

核心功能

sort() 用于对数组元素进行排序，默认按字符串Unicode编码升序排列——这是最容易踩坑的地方。它会直接修改原始数组。不过，传入自定义比较函数后，就能实现数字升序/降序、对象属性排序等灵活需求。

适用场景

• 数字数组升序/降序排序，比如分数从高到低排序
• 字符串数组排序，比如按姓名拼音首字母排序
• 对象数组按指定属性排序，比如按用户年龄、商品价格排序

可运行代码案例

下面代码先展示了默认排序的“坑”，然后给出正确的数字排序、对象排序和字符串排序方式。

// 1. 注意点：默认排序（字符串Unicode编码，不适合数字排序）
const defaultNumArr = [10, 2, 35, 7, 100];
defaultNumArr.sort();
console.log('数字默认排序结果：', defaultNumArr); // 输出：[10, 100, 2, 35, 7]（不符合预期）

// 2. 基础用法：数字数组升序/降序排序（传入自定义比较函数）
const sortNumArr = [10, 2, 35, 7, 100];
// 数字升序排序：a - b
sortNumArr.sort((a, b) => a - b);
console.log('数字升序排序：', sortNumArr); // 输出：[2, 7, 10, 35, 100]
// 数字降序排序：b - a
sortNumArr.sort((a, b) => b - a);
console.log('数字降序排序：', sortNumArr); // 输出：[100, 35, 10, 7, 2]

// 3. 进阶用法：对象数组按指定属性排序
const goodsList = [
  { name: '手机', price: 4999 },
  { name: '电脑', price: 7999 },
  { name: '平板', price: 2999 },
  { name: '耳机', price: 999 }
];
// 按商品价格升序排序（从便宜到贵）
goodsList.sort((a, b) => a.price - b.price);
console.log('按价格升序排序的商品：', goodsList);
// 输出：[{ name: '耳机', price:999 }, { name: '平板', price:2999 }, ...]
// 按商品价格降序排序（从贵到便宜）
goodsList.sort((a, b) => b.price - a.price);
console.log('按价格降序排序的商品：', goodsList);
// 输出：[{ name: '电脑', price:7999 }, { name: '手机', price:4999 }, ...]

// 4. 实战场景：字符串数组排序（按姓名排序）
const nameList = ['Zhang San', 'Li Si', 'Wang Wu', 'Zhao Liu'];
// 按字符串Unicode编码升序排序（英文姓名适用）
nameList.sort();
console.log('姓名升序排序：', nameList); // 输出：['Li Si', 'Wang Wu', 'Zhang San', 'Zhao Liu']

常见错误与解决方案

sort()的坑主要集中在默认排序、对象比较、原数组修改以及中文排序上，下面逐一说明。

五、总结

最后快速回顾一下四个方法的核心要点和避坑指南：

1. push()：尾部追加元素，修改原始数组，返回新长度；避坑重点：不接收返回值作为数组，批量添加用扩展运算符。
2. forEach()：遍历所有元素，无返回值；避坑重点：无法用return终止遍历，不用于生成新数组。
3. filter()：条件筛选元素，返回新数组，不修改原数组；避坑重点：必须返回判断条件，区分逻辑运算符&&与||。
4. sort()：数组排序，修改原始数组，默认按字符串编码排序；避坑重点：数字排序传自定义比较函数，对象排序比较具体属性，需保留原数组先复制。

这四个方法是 Ja vaScript 数组操作的基础，掌握它们的功能、场景及避坑技巧后，能高效处理大部分数组数据处理需求。所有代码均可直接复制到浏览器控制台或 Node.js 环境中运行验证。