forEach、map、reduce和promise那点事

2024-01-12 09:38:02

作为一名技术博客创作专家，我常常需要撰写关于编程语言和技术的文章。在这些文章中，我经常会涉及到JavaScript中的forEach、map、reduce和promise这些概念。为了帮助读者更好地理解这些概念，我决定写一篇博文来详细介绍它们。

forEach、map和reduce都是数组操作工具。forEach用于遍历数组中的每个元素，并对每个元素执行指定的回调函数。map用于将数组中的每个元素都映射成一个新值，并返回一个新数组。reduce用于将数组中的所有元素都归并成一个单一的值。

promise是一个异步编程工具。它代表了一个异步操作的最终完成或失败。promise可以被用来处理异步操作的结果，并避免回调函数地狱。

这四个工具都是JavaScript中非常重要的工具。掌握它们的使用方法可以帮助我们写出更加优雅和高效的代码。

forEach

forEach方法用于遍历数组中的每个元素，并对每个元素执行指定的回调函数。回调函数是一个普通的JavaScript函数，它接收两个参数：当前元素和当前元素的索引。

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

numbers.forEach((number, index) => {
  console.log(`Number ${index + 1}: ${number}`);
});

这段代码会遍历numbers数组中的每个元素，并对每个元素执行回调函数。回调函数会输出当前元素和当前元素的索引。

map

map方法用于将数组中的每个元素都映射成一个新值，并返回一个新数组。映射函数是一个普通的JavaScript函数，它接收一个参数：当前元素。

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

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

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

这段代码会遍历numbers数组中的每个元素，并对每个元素执行映射函数。映射函数会将当前元素乘以2，并返回一个新值。最终，map方法会返回一个包含所有新值的新数组。

reduce

reduce方法用于将数组中的所有元素都归并成一个单一的值。归并函数是一个普通的JavaScript函数，它接收两个参数：累加器和当前元素。累加器是reduce方法每次迭代时传递给归并函数的值。

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

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

这段代码会遍历numbers数组中的每个元素，并对每个元素执行归并函数。归并函数会将累加器和当前元素相加，并返回一个新值。最终，reduce方法会返回累加器的最终值。

promise

promise是一个异步编程工具。它代表了一个异步操作的最终完成或失败。promise可以被用来处理异步操作的结果，并避免回调函数地狱。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 2000);
});

promise.then((result) => {
  console.log(result); // Hello, world!
});