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

本教程将通过实际示例讲解JavaScript中四个常用的数组方法：push()、forEach()、filter()和sort()。

1. push() - 向数组末尾添加元素

基本用法

// 创建一个空数组
let fruits = [];

// 使用push()添加元素
fruits.push('apple');
fruits.push('banana');
fruits.push('orange');

console.log(fruits); // 输出: ['apple', 'banana', 'orange']

// push()返回新数组的长度
let length = fruits.push('grape', 'mango');
console.log(length); // 输出: 5
console.log(fruits); // 输出: ['apple', 'banana', 'orange', 'grape', 'mango']

实战示例：购物车添加商品

let shoppingCart = [];

function addToCart(product, price) {
    shoppingCart.push({product, price});
    console.log(`${product} 已添加到购物车`);
}

addToCart('笔记本电脑', 999.99);
addToCart('鼠标', 29.99);
addToCart('键盘', 89.99);

console.log(shoppingCart);
// 输出: [{product: '笔记本电脑', price: 999.99}, 
//        {product: '鼠标', price: 29.99}, 
//        {product: '键盘', price: 89.99}]

2. forEach() - 遍历数组元素

基本用法

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

// 使用forEach遍历数组
numbers.forEach(function(number, index) {
    console.log(`索引 ${index}: 值 ${number}`);
});

// 使用箭头函数简化
numbers.forEach((number, index) => {
    console.log(`元素 ${number} 在位置 ${index}`);
});

实战示例：处理学生成绩

let students = [
    {name: '张三', score: 85},
    {name: '李四', score: 92},
    {name: '王五', score: 78}
];

// 打印所有学生信息
students.forEach(student => {
    console.log(`${student.name}: ${student.score}分`);
});

// 计算平均分
let totalScore = 0;
students.forEach(student => {
    totalScore += student.score;
});
let averageScore = totalScore / students.length;
console.log(`平均分: ${averageScore.toFixed(2)}`);

3. filter() - 过滤数组元素

基本用法

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 过滤出偶数
let evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4, 6, 8, 10]

// 过滤出大于5的数
let largeNumbers = numbers.filter(number => number > 5);
console.log(largeNumbers); // 输出: [6, 7, 8, 9, 10]

实战示例：筛选产品

let products = [
    {name: 'iPhone', price: 999, category: 'electronics', inStock: true},
    {name: 'T-shirt', price: 25, category: 'clothing', inStock: true},
    {name: 'Laptop', price: 1200, category: 'electronics', inStock: false},
    {name: 'Jeans', price: 60, category: 'clothing', inStock: true},
    {name: 'Headphones', price: 150, category: 'electronics', inStock: true}
];

// 筛选电子产品
let electronics = products.filter(product => product.category === 'electronics');
console.log('电子产品:', electronics);

// 筛选有库存的产品
let availableProducts = products.filter(product => product.inStock);
console.log('有库存的产品:', availableProducts);

// 筛选价格低于100的产品
let affordableProducts = products.filter(product => product.price < 100);
console.log('价格低于100的产品:', affordableProducts);

// 组合条件筛选
let availableElectronics = products.filter(product => 
    product.category === 'electronics' && product.inStock
);
console.log('有库存的电子产品:', availableElectronics);

4. sort() - 数组排序

基本用法

let fruits = ['banana', 'apple', 'orange', 'grape'];

// 默认排序（按字母顺序）
fruits.sort();
console.log(fruits); // 输出: ['apple', 'banana', 'grape', 'orange']

// 数字排序需要注意
let numbers = [10, 5, 100, 2, 50];
numbers.sort(); // 默认按字符串排序，结果可能不是预期的
console.log(numbers); // 输出: [10, 100, 2, 5, 50]

// 正确的数字排序
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出: [2, 5, 10, 50, 100]

// 降序排序
numbers.sort((a, b) => b - a);
console.log(numbers); // 输出: [100, 50, 10, 5, 2]

实战示例：学生成绩排序

let students = [
    {name: '张三', score: 85, age: 20},
    {name: '李四', score: 92, age: 22},
    {name: '王五', score: 78, age: 19},
    {name: '赵六', score: 92, age: 21},
    {name: '孙七', score: 88, age: 20}
];

// 按成绩降序排序
students.sort((a, b) => b.score - a.score);
console.log('按成绩降序排序:');
students.forEach(student => {
    console.log(`${student.name}: ${student.score}分`);
});

// 如果成绩相同，按年龄升序排序
students.sort((a, b) => {
    // 先按成绩降序
    if (b.score !== a.score) {
        return b.score - a.score;
    }
    // 如果成绩相同，按年龄升序
    return a.age - b.age;
});

console.log('\n按成绩降序，成绩相同按年龄升序:');
students.forEach(student => {
    console.log(`${student.name}: ${student.score}分, ${student.age}岁`);
});

综合实战：员工管理系统

// 员工数组
let employees = [];

// 添加员工
function addEmployee(name, position, salary, department) {
    employees.push({name, position, salary, department});
}

// 添加一些员工
addEmployee('张三', '开发工程师', 15000, '技术部');
addEmployee('李四', '设计师', 12000, '设计部');
addEmployee('王五', '开发工程师', 16000, '技术部');
addEmployee('赵六', '销售经理', 18000, '销售部');
addEmployee('孙七', '设计师', 13000, '设计部');

// 显示所有员工
console.log('所有员工:');
employees.forEach((emp, index) => {
    console.log(`${index + 1}. ${emp.name} - ${emp.position} - ${emp.salary}元`);
});

// 筛选技术部员工
let techEmployees = employees.filter(emp => emp.department === '技术部');
console.log('\n技术部员工:');
techEmployees.forEach(emp => console.log(emp.name));

// 筛选高薪员工（工资>14000）
let highSalaryEmployees = employees.filter(emp => emp.salary > 14000);
console.log('\n高薪员工(>14000):');
highSalaryEmployees.forEach(emp => 
    console.log(`${emp.name}: ${emp.salary}元`)
);

// 按工资降序排序
employees.sort((a, b) => b.salary - a.salary);
console.log('\n按工资降序排序:');
employees.forEach(emp => 
    console.log(`${emp.name}: ${emp.salary}元`)
);

// 按部门分组显示
let departments = [...new Set(employees.map(emp => emp.department))];
console.log('\n按部门分组:');
departments.forEach(dept => {
    console.log(`\n${dept}:`);
    let deptEmployees = employees.filter(emp => emp.department === dept);
    deptEmployees.forEach(emp => console.log(`  ${emp.name} - ${emp.position}`));
});

总结

这些方法通常可以链式调用，创建更强大的数据处理逻辑：

let result = [10, 5, 8, 3, 7, 1, 9, 4, 6, 2]
    .filter(num => num > 3)     // 过滤出大于3的数
    .sort((a, b) => a - b)      // 升序排序
    .map(num => num * 2)        // 每个数乘以2
    .forEach(num => console.log(num)); // 输出结果

掌握这些数组方法将大大提高你处理数据集合的能力，并使代码更简洁、易读。