我要投稿

JavaScript数组高级操作指南：从基础到实战案例 | 前端开发

文章小助手 javascript

2025-07-09 0 650

JavaScript数组高级操作完全指南

数组是JavaScript中最常用的数据结构之一，掌握其高级操作方法能极大提升开发效率。本文将深入解析8个核心API，并通过5个实战案例演示如何灵活运用。

一、数组基础回顾

JavaScript数组是有序的数据集合，可以存储任意类型的数据：

// 数组声明示例
const numbers = [1, 2, 3, 4, 5];
const mixed = [1, 'text', true, {name: 'John'}];

二、核心操作方法解析

1. 数据转换三剑客

map() – 数据映射

const prices = [10, 20, 30];
const discounted = prices.map(price => price * 0.9);
// 输出: [9, 18, 27]

filter() – 数据筛选

const scores = [85, 92, 45, 68, 91];
const passing = scores.filter(score => score >= 70);
// 输出: [85, 92, 91]

reduce() – 数据聚合

const cart = [
    {name: 'Book', price: 15},
    {name: 'Mouse', price: 25}
];
const total = cart.reduce((sum, item) => sum + item.price, 0);
// 输出: 40

2. 现代ES6+新特性

展开运算符：const combined = [...arr1, ...arr2]
解构赋值：const [first, ...rest] = array
Array.from()：将类数组转为真实数组

三、实战案例演示

案例1：电商商品筛选系统

const products = [
    {id: 1, name: 'Laptop', price: 999, category: 'electronics'},
    {id: 2, name: 'T-shirt', price: 25, category: 'clothing'},
    {id: 3, name: 'Headphones', price: 199, category: 'electronics'}
];

// 筛选电子类商品并按价格排序
const filtered = products
    .filter(p => p.category === 'electronics')
    .sort((a, b) => a.price - b.price);

案例2：数据统计分析

const surveyData = [
    {age: 25, income: 35000},
    {age: 32, income: 42000},
    {age: 28, income: 38000}
];

// 计算平均年龄和总收入
const stats = surveyData.reduce((acc, curr) => {
    acc.totalAge += curr.age;
    acc.totalIncome += curr.income;
    return acc;
}, {totalAge: 0, totalIncome: 0});

const avgAge = stats.totalAge / surveyData.length;