JavaScript 数组处理技巧

JavaScript数组是日常编程中最常用的数据结构之一，掌握高效的数组处理技巧可以让你的代码更简洁、更高效。本文将介绍一系列实用的JavaScript数组处理方法，从基础到进阶，帮助你更好地操作数组数据。

数组基础回顾

在深入学习数组处理技巧前，让我们先回顾一下数组的基本概念：

js

// 创建数组的几种方式
const array1 = [1, 2, 3, 4, 5];             // 字面量方式
const array2 = new Array(1, 2, 3, 4, 5);    // 构造函数方式
const array3 = Array.of(1, 2, 3, 4, 5);     // Array.of()方法
const array4 = Array.from("12345");         // Array.from()方法

console.log(array1); // [1, 2, 3, 4, 5]
console.log(array4); // ['1', '2', '3', '4', '5'] - 注意这里是字符串

小贴士

Array.from()方法可以将类数组对象或可迭代对象转换为真正的数组，这在处理DOM元素集合或字符串时非常有用。

数组的基本操作技巧

1. 添加和删除元素

js

const fruits = ['苹果', '香蕉'];

// 在末尾添加元素
fruits.push('橙子');
console.log(fruits); // ['苹果', '香蕉', '橙子']

// 在开头添加元素
fruits.unshift('草莓');
console.log(fruits); // ['草莓', '苹果', '香蕉', '橙子']

// 删除末尾元素
const lastFruit = fruits.pop();
console.log(lastFruit); // '橙子'
console.log(fruits); // ['草莓', '苹果', '香蕉']

// 删除开头元素
const firstFruit = fruits.shift();
console.log(firstFruit); // '草莓'
console.log(fruits); // ['苹果', '香蕉']

2. 合并数组

js

const veggies = ['胡萝卜', '西红柿'];
const fruits = ['苹果', '香蕉'];

// 使用concat方法合并数组
const food = fruits.concat(veggies);
console.log(food); // ['苹果', '香蕉', '胡萝卜', '西红柿']

// 使用扩展运算符合并数组（ES6语法）
const food2 = [...fruits, ...veggies];
console.log(food2); // ['苹果', '香蕉', '胡萝卜', '西红柿']

数组迭代与转换技巧

1. forEach - 遍历数组

forEach方法对数组中的每个元素执行一次提供的函数。

js

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

numbers.forEach((number, index) => {
  console.log(`第${index}个元素是: ${number}`);
});

// 输出:
// 第0个元素是: 1
// 第1个元素是: 2
// 第2个元素是: 3
// 第3个元素是: 4
// 第4个元素是: 5

2. map - 映射数组

map方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

js

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

// 创建一个新数组，每个元素都是原数组元素的平方
const squares = numbers.map(number => number * number);
console.log(squares); // [1, 4, 9, 16, 25]

3. filter - 过滤数组

filter方法创建一个新数组，其包含通过所提供函数测试的所有元素。

js

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

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

4. reduce - 归约数组

reduce方法对数组中的每个元素执行一个reducer函数(升序执行)，将其结果汇总为单个返回值。

js

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

// 计算数组元素的总和
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

// 初始值为0的计算过程:
// 第一次迭代: accumulator = 0, currentValue = 1 => 返回 1
// 第二次迭代: accumulator = 1, currentValue = 2 => 返回 3
// 第三次迭代: accumulator = 3, currentValue = 3 => 返回 6
// 第四次迭代: accumulator = 6, currentValue = 4 => 返回 10
// 第五次迭代: accumulator = 10, currentValue = 5 => 返回 15

备注

reduce方法的第二个参数是初始值，如果不提供，则使用数组的第一个元素作为初始值，从第二个元素开始迭代。

高级数组处理技巧

1. 数组去重

js

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

// 使用Set去重
const uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

// 使用filter去重
const uniqueNumbers2 = numbers.filter((value, index, array) => {
  return array.indexOf(value) === index;
});
console.log(uniqueNumbers2); // [1, 2, 3, 4, 5]

2. 数组扁平化

js

const nestedArray = [1, [2, 3], [4, [5, 6]]];

// 使用flat方法（ES2019）
const flatArray = nestedArray.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

// 自定义递归扁平化函数（兼容旧浏览器）
function flattenArray(arr) {
  return arr.reduce((acc, val) => {
    return acc.concat(Array.isArray(val) ? flattenArray(val) : val);
  }, []);
}

console.log(flattenArray(nestedArray)); // [1, 2, 3, 4, 5, 6]

3. 数组查找

js

const users = [
  { id: 1, name: '张三', age: 25 },
  { id: 2, name: '李四', age: 30 },
  { id: 3, name: '王五', age: 22 }
];

// 查找第一个符合条件的元素
const user = users.find(user => user.age > 25);
console.log(user); // { id: 2, name: '李四', age: 30 }

// 查找符合条件的元素索引
const userIndex = users.findIndex(user => user.name === '王五');
console.log(userIndex); // 2

4. 数组排序

js

const numbers = [5, 2, 9, 1, 5, 6];

// 默认排序（按字符串顺序）
numbers.sort();
console.log(numbers); // [1, 2, 5, 5, 6, 9]

// 自定义排序（降序）
numbers.sort((a, b) => b - a);
console.log(numbers); // [9, 6, 5, 5, 2, 1]

// 对象数组排序
const users = [
  { name: '张三', age: 25 },
  { name: '李四', age: 30 },
  { name: '王五', age: 22 }
];

// 按年龄升序排序
users.sort((a, b) => a.age - b.age);
console.log(users); 
// [
//   { name: '王五', age: 22 },
//   { name: '张三', age: 25 },
//   { name: '李四', age: 30 }
// ]

注意

sort方法会直接修改原数组。如果不想修改原数组，可以先使用slice()方法创建一个副本再排序。

实际应用案例

案例1: 购物车功能

js

// 购物车商品数据
let cart = [
  { id: 1, name: '苹果', price: 5, quantity: 2 },
  { id: 2, name: '香蕉', price: 3, quantity: 3 },
  { id: 3, name: '橙子', price: 4, quantity: 1 }
];

// 1. 计算购物车总价
const totalPrice = cart.reduce((total, item) => {
  return total + (item.price * item.quantity);
}, 0);
console.log(`购物车总价: ¥${totalPrice}`); // 购物车总价: ¥20

// 2. 添加商品到购物车
function addToCart(product) {
  // 检查商品是否已在购物车中
  const existingItemIndex = cart.findIndex(item => item.id === product.id);
  
  if (existingItemIndex !== -1) {
    // 如果已存在，增加数量
    cart[existingItemIndex].quantity += product.quantity;
  } else {
    // 如果不存在，添加新商品
    cart.push(product);
  }
}

addToCart({ id: 4, name: '梨子', price: 6, quantity: 2 });
addToCart({ id: 1, name: '苹果', price: 5, quantity: 1 }); // 已存在，只增加数量

console.log(cart); 
// [
//   { id: 1, name: '苹果', price: 5, quantity: 3 },
//   { id: 2, name: '香蕉', price: 3, quantity: 3 },
//   { id: 3, name: '橙子', price: 4, quantity: 1 },
//   { id: 4, name: '梨子', price: 6, quantity: 2 }
// ]

// 3. 从购物车移除商品
function removeFromCart(productId) {
  cart = cart.filter(item => item.id !== productId);
}

removeFromCart(3); // 移除橙子
console.log(cart);
// [
//   { id: 1, name: '苹果', price: 5, quantity: 3 },
//   { id: 2, name: '香蕉', price: 3, quantity: 3 },
//   { id: 4, name: '梨子', price: 6, quantity: 2 }
// ]

案例2: 数据分析和统计

js

// 学生成绩数据
const studentScores = [
  { name: '张三', score: 85, subject: '数学' },
  { name: '李四', score: 92, subject: '语文' },
  { name: '王五', score: 78, subject: '英语' },
  { name: '赵六', score: 90, subject: '数学' },
  { name: '钱七', score: 88, subject: '语文' },
  { name: '孙八', score: 95, subject: '英语' }
];

// 1. 计算每个科目的平均分
const subjectGroups = studentScores.reduce((groups, student) => {
  const { subject, score } = student;
  if (!groups[subject]) {
    groups[subject] = [];
  }
  groups[subject].push(score);
  return groups;
}, {});

const subjectAverages = Object.keys(subjectGroups).map(subject => {
  const scores = subjectGroups[subject];
  const average = scores.reduce((sum, score) => sum + score, 0) / scores.length;
  return { subject, average: Math.round(average * 10) / 10 }; // 保留一位小数
});

console.log(subjectAverages);
// [
//   { subject: '数学', average: 87.5 },
//   { subject: '语文', average: 90 },
//   { subject: '英语', average: 86.5 }
// ]

// 2. 找出每个科目的最高分
const subjectTopScores = Object.keys(subjectGroups).map(subject => {
  const scores = subjectGroups[subject];
  const topScore = Math.max(...scores);
  const topStudent = studentScores.find(student => 
    student.subject === subject && student.score === topScore
  );
  
  return {
    subject,
    topScore,
    topStudent: topStudent.name
  };
});

console.log(subjectTopScores);
// [
//   { subject: '数学', topScore: 90, topStudent: '赵六' },
//   { subject: '语文', topScore: 92, topStudent: '李四' },
//   { subject: '英语', topScore: 95, topStudent: '孙八' }
// ]

性能优化技巧

1. 避免在循环中添加或删除数组元素

在循环中修改数组可能导致意外的结果，因为循环条件可能会被改变：

js

// 不好的做法
const numbers = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    numbers.splice(i, 1); // 这会改变数组长度和索引
    // 现在i指向的是下一个元素，但我们会跳过它
    i--; // 尝试修复，但代码变得复杂且容易出错
  }
}

// 好的做法
const numbers = [1, 2, 3, 4, 5];
const oddNumbers = numbers.filter(num => num % 2 !== 0);
console.log(oddNumbers); // [1, 3, 5]

2. 使用适当的数组方法

选择合适的数组方法可以提高代码的可读性和性能：

js

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

// 不好的做法：使用循环构建新数组
const squares1 = [];
for (let i = 0; i < numbers.length; i++) {
  squares1.push(numbers[i] * numbers[i]);
}

// 好的做法：使用map
const squares2 = numbers.map(num => num * num);

// 不好的做法：查找元素使用循环
let foundNumber = null;
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 3) {
    foundNumber = numbers[i];
    break;
  }
}

// 好的做法：使用find
const foundNumber2 = numbers.find(num => num > 3);

总结

JavaScript数组提供了丰富的方法和技巧，可以帮助我们更高效地处理数据。本文介绍了从基础到高级的数组处理技巧，包括：

1. 基本操作（添加、删除元素）
2. 数组迭代与转换（forEach、map、filter、reduce）
3. 高级处理技巧（去重、扁平化、查找、排序）
4. 实际应用案例
5. 性能优化技巧

掌握这些技巧可以让你的代码更简洁、更高效，同时也能解决更复杂的问题。随着你的编程经验增长，你会发现这些数组方法是日常编程中不可或缺的工具。

练习题

1. 编写一个函数，接收一个数字数组，返回数组中所有偶数的平方之和。
2. 编写一个函数，接收一个对象数组，根据指定的对象属性对数组进行排序。
3. 编写一个函数，将两个数组合并并去重，返回一个新数组。
4. 使用reduce方法计算一个购物车数组中所有商品的总价。
5. 编写一个函数，查找数组中出现次数最多的元素。

推荐资源

• MDN Web Docs: Array - Mozilla的JavaScript数组参考文档
• JavaScript.info: Arrays - 详细的数组教程
• You Don't Know JS - 深入理解JavaScript的系列书籍