八、数组新方法

ES6 引入了许多新的数组方法，这些方法使数组操作更加简洁和强大。本章节将介绍最常用的数组新方法。

map() 映射

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

基本用法

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

// 传统方式
const doubled1 = [];
for (let i = 0; i < numbers.length; i++) {
  doubled1.push(numbers[i] * 2);
}

// 使用 map()
const doubled2 = numbers.map(num => num * 2);

console.log(doubled1); // [2, 4, 6, 8, 10]
console.log(doubled2); // [2, 4, 6, 8, 10]

实战：对象数组转换

const users = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 35 }
];

// 提取用户名数组
const userNames = users.map(user => user.name);
console.log(userNames); // ['John', 'Jane', 'Bob']

// 转换为新的对象格式
const userInfo = users.map(user => ({
  userId: user.id,
  fullName: user.name,
  userAge: user.age
}));
console.log(userInfo);
// [
//   { userId: 1, fullName: 'John', userAge: 30 },
//   { userId: 2, fullName: 'Jane', userAge: 25 },
//   { userId: 3, fullName: 'Bob', userAge: 35 }
// ]

filter() 过滤

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

基本用法

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

// 传统方式
const evenNumbers1 = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evenNumbers1.push(numbers[i]);
  }
}

// 使用 filter()
const evenNumbers2 = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers1); // [2, 4, 6, 8, 10]
console.log(evenNumbers2); // [2, 4, 6, 8, 10]

实战：筛选用户

const users = [
  { id: 1, name: 'John', age: 30, active: true },
  { id: 2, name: 'Jane', age: 25, active: false },
  { id: 3, name: 'Bob', age: 35, active: true },
  { id: 4, name: 'Alice', age: 28, active: true }
];

// 筛选活跃用户
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);

// 筛选年龄大于 28 的用户
const olderUsers = users.filter(user => user.age > 28);
console.log(olderUsers);

forEach() 遍历

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

基本用法

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

// 传统方式
for (let i = 0; i < numbers.length; i++) {
  console.log(numbers[i]);
}

// 使用 forEach()
numbers.forEach(num => console.log(num));

实战：批量操作

const users = [
  { id: 1, name: 'John', age: 30, active: true },
  { id: 2, name: 'Jane', age: 25, active: false }
];

// 批量更新用户状态
users.forEach(user => {
  user.lastLogin = new Date();
  user.active = true;
});

console.log(users);

find() / findIndex() 查找

find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。

const users = [
  { id: 1, name: 'John', age: 30 },
  { id: 2, name: 'Jane', age: 25 },
  { id: 3, name: 'Bob', age: 35 }
];

// 查找 id 为 2 的用户
const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: 'Jane', age: 25 }

// 查找年龄大于 30 的第一个用户
const olderUser = users.find(user => user.age > 30);
console.log(olderUser); // { id: 3, name: 'Bob', age: 35 }

findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。

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

// 查找第一个大于 3 的元素的索引
const index = numbers.findIndex(num => num > 3);
console.log(index); // 3

// 查找不存在的元素
const notFoundIndex = numbers.findIndex(num => num > 10);
console.log(notFoundIndex); // -1

some() / every() 判断

some()

some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。

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

// 检查是否有大于 3 的元素
const hasGreaterThanThree = numbers.some(num => num > 3);
console.log(hasGreaterThanThree); // true

// 检查是否有大于 10 的元素
const hasGreaterThanTen = numbers.some(num => num > 10);
console.log(hasGreaterThanTen); // false

every()

every() 方法测试数组中是否所有元素都通过了由提供的函数实现的测试。

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

// 检查是否所有元素都小于 10
const allLessThanTen = numbers.every(num => num < 10);
console.log(allLessThanTen); // true

// 检查是否所有元素都大于 0
const allGreaterThanZero = numbers.every(num => num > 0);
console.log(allGreaterThanZero); // true

// 检查是否所有元素都大于 2
const allGreaterThanTwo = numbers.every(num => num > 2);
console.log(allGreaterThanTwo); // false

reduce() 累计计算

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

基本用法

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

// 计算总和
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

// 计算乘积
const product = numbers.reduce((acc, curr) => acc * curr, 1);
console.log(product); // 120

// 找出最大值
const max = numbers.reduce((acc, curr) => Math.max(acc, curr), -Infinity);
console.log(max); // 5

实战：复杂计算

const users = [
  { id: 1, name: 'John', age: 30, score: 85 },
  { id: 2, name: 'Jane', age: 25, score: 92 },
  { id: 3, name: 'Bob', age: 35, score: 78 }
];

// 计算平均分数
const averageScore = users.reduce((acc, user, index, array) => {
  acc += user.score;
  if (index === array.length - 1) {
    return acc / array.length;
  }
  return acc;
}, 0);

console.log(averageScore); // 85

// 按年龄分组
const usersByAge = users.reduce((acc, user) => {
  const ageGroup = Math.floor(user.age / 10) * 10;
  if (!acc[ageGroup]) {
    acc[ageGroup] = [];
  }
  acc[ageGroup].push(user);
  return acc;
}, {});

console.log(usersByAge);
// {
//   '20': [{ id: 2, name: 'Jane', age: 25, score: 92 }],
//   '30': [{ id: 1, name: 'John', age: 30, score: 85 }, { id: 3, name: 'Bob', age: 35, score: 78 }]
// }

数组去重：new Set()

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

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

// 去重对象数组
const users = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 1, name: 'John' } // 重复
];

const uniqueUsers = [...new Map(users.map(user => [user.id, user])).values()];
console.log(uniqueUsers);
// [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]

实战：列表处理、数据筛选、统计计算

列表处理

const products = [
  { id: 1, name: 'Product 1', price: 100, category: 'Electronics' },
  { id: 2, name: 'Product 2', price: 200, category: 'Clothing' },
  { id: 3, name: 'Product 3', price: 150, category: 'Electronics' },
  { id: 4, name: 'Product 4', price: 50, category: 'Clothing' }
];

// 按类别分组
const productsByCategory = products.reduce((acc, product) => {
  if (!acc[product.category]) {
    acc[product.category] = [];
  }
  acc[product.category].push(product);
  return acc;
}, {});

console.log(productsByCategory);

// 计算每个类别的平均价格
const averagePriceByCategory = Object.entries(productsByCategory).reduce((acc, [category, items]) => {
  const totalPrice = items.reduce((sum, item) => sum + item.price, 0);
  acc[category] = totalPrice / items.length;
  return acc;
}, {});

console.log(averagePriceByCategory);

数组新方法的优势

1. 代码简洁：减少了繁琐的循环代码
2. 可读性高：方法名清晰表达了操作意图
3. 功能强大：提供了丰富的数组操作能力
4. 链式调用：可以链式使用多个方法

链式调用示例

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

const result = numbers
  .filter(num => num % 2 === 0) // 筛选偶数
  .map(num => num * 2) // 翻倍
  .reduce((acc, curr) => acc + curr, 0); // 求和

console.log(result); // 60

通过本章节的学习，你已经掌握了 ES6 中常用的数组新方法。这些方法可以大大简化数组操作，提高开发效率。