1.map() - 数组变形的利器
map()方法创建一个新数组，其结果是对原数组中的每个元素调用提供的函数。
// 基础用法
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
// 实际应用：处理API返回数据
const users = [
{ id: 1, name: 'John', age: 30 },
{ id: 2, name: 'Jane', age: 25 }
];
const userNames = users.map(user => user.name);
console.log(userNames); // ['John', 'Jane']
// 链式调用
const prices = [99.99, 199.99, 299.99];
const formattedPrices = prices
.map(price => price * 0.8) // 打八折
.map(price => price.toFixed(2)); // 格式化
console.log(formattedPrices); // ['79.99', '159.99', '239.99']
2. filter() - 数据筛选神器
filter()方法创建一个新数组，其中包含通过所提供函数测试的所有元素。
// 基础用法
const scores = [65, 90, 75, 85, 55];
const passingScores = scores.filter(score => score >= 60);
console.log(passingScores); // [65, 90, 75, 85]
// 实际应用：复杂条件过滤
const products = [
{ name: 'Phone', price: 999, inStock: true },
{ name: 'Laptop', price: 1999, inStock: false },
{ name: 'Tablet', price: 499, inStock: true }
];
const availableProducts = products.filter(
product => product.inStock && product.price < 1000
);
console.log(availableProducts); // [{ name: 'Phone'... }, { name: 'Tablet'... }]
3. reduce() - 数据归并专家
reduce()方法将数组缩减为单个值，是最强大但也最容易被误解的方法。
// 基础用法：求和
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15
// 高级应用：数据分组
const orders = [
{ product: 'A', category: 'Electronics', price: 100 },
{ product: 'B', category: 'Books', price: 50 },
{ product: 'C', category: 'Electronics', price: 200 }
];
const groupedByCategory = orders.reduce((acc, cur) => {
acc[cur.category] = acc[cur.category] || [];
acc[cur.category].push(cur);
return acc;
}, {});
console.log(groupedByCategory);
// {
// Electronics: [{ product: 'A'... }, { product: 'C'... }],
// Books: [{ product: 'B'... }]
// }
4. forEach() - 最常用的遍历方法
forEach()方法对数组的每个元素执行一次给定的函数，是最直观的遍历方法。
// 基础用法
const items = ['apple', 'banana', 'orange'];
items.forEach((item, index) => {
console.log(`${index + 1}: ${item}`);
});
// 1: apple
// 2: banana
// 3: orange
// 实际应用：DOM操作
const buttons = document.querySelectorAll('button');
buttons.forEach(button => {
button.addEventListener('click', () => {
console.log('Button clicked');
});
});
// 累加计算
let total = 0;
const prices = [29.99, 39.99, 49.99];
prices.forEach(price => {
total += price;
});
console.log(total.toFixed(2)); // '119.97'
5. find() - 精确查找好帮手
find()方法返回数组中满足提供的测试函数的第一个元素的值。
// 基础用法
const users = [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' },
{ id: 3, name: 'Bob' }
];
const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: 'Jane' }
// 实际应用：状态查找
const tasks = [
{ id: 1, status: 'pending' },
{ id: 2, status: 'completed' },
{ id: 3, status: 'pending' }
];
const completedTask = tasks.find(task => task.status === 'completed');
console.log(completedTask); // { id: 2, status: 'completed' }
6. some() - 条件判断利器
some()方法测试数组中是否至少有一个元素通过了提供的函数测试。
// 基础用法
const numbers = [1, 2, 3, 4, 5];
const hasEven = numbers.some(num => num % 2 === 0);
console.log(hasEven); // true
// 实际应用：权限检查
const userRoles = ['user', 'editor', 'viewer'];
const canEdit = userRoles.some(role => role === 'editor');
console.log(canEdit); // true
// 复杂条件检查
const products = [
{ name: 'Phone', price: 999 },
{ name: 'Laptop', price: 1999 },
{ name: 'Tablet', price: 499 }
];
const hasAffordableProduct = products.some(
product => product.price < 500
);
console.log(hasAffordableProduct); // true
7. every() - 全员检查神器
every()方法测试数组的所有元素是否都通过了提供的函数测试。
// 基础用法
const scores = [90, 85, 95, 100];
const allPassed = scores.every(score => score >= 60);
console.log(allPassed); // true
// 实际应用：表单验证
const formFields = [
{ value: 'John', required: true },
{ value: 'john@example.com', required: true },
{ value: '123456', required: true }
];
const isFormValid = formFields.every(
field => field.required ? field.value.length > 0 : true
);
console.log(isFormValid); // true
方法组合使用
这些方法可以链式调用，解决复杂问题：
const data = [
{ id: 1, name: 'John', score: 85, active: true },
{ id: 2, name: 'Jane', score: 92, active: false },
{ id: 3, name: 'Bob', score: 78, active: true },
];
// 获取活跃用户的平均分
const averageScore = data
.filter(user => user.active) // 筛选活跃用户
.map(user => user.score) // 提取分数
.reduce((acc, curr, _, arr) => acc + curr / arr.length, 0); // 计算平均值
console.log(averageScore); // 81.5
性能优化方面
- 避免在forEach中使用async/await
// 不推荐
array.forEach(async item => {
await process(item);
});
// 推荐
for (const item of array) {
await process(item);
}
- 大数据量处理时考虑使用for…of
// 处理大数组时更高效
for (const item of largeArray) {
// 处理逻辑
}
- 合理使用break和continue
// 使用some代替forEach提前退出
const found = array.some(item => {
if (condition) {
// 找到后立即退出
return true;
}
return false;
});
原数组是否受影响
会改变原数组的方法：
-
push()
-
pop()
-
shift()
-
unshift()
-
sort()
-
reverse()
-
splice()
不会改变原数组的方法：
-
concat()
-
map()
-
filter()
-
slice()
-
join()
-
reduce()
-
indexOf()
-
includes()
