勇闯API迷宫：揭秘JS数组中的四大法宝

2023-09-21 08:19:05

map()：华丽变身，元素随心所欲

想象一下，你有一堆数据，需要对它们进行一些处理，比如把数字乘以2，或者把字符串转换成大写。使用map()函数，你就可以轻松实现这些操作。

map()函数会遍历数组中的每一个元素，并根据你提供的函数对每个元素进行处理，最后返回一个包含处理后元素的新数组。

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

// 将数组中的每个元素乘以 2
const doubledNumbers = numbers.map((number) => number * 2);

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

// 将数组中的每个字符串转换成大写
const uppercasedStrings = ["hello", "world", "javascript"].map((string) => string.toUpperCase());

console.log(uppercasedStrings); // ["HELLO", "WORLD", "JAVASCRIPT"]

forEach()：逐一拜访，关怀备至

有时候，你可能并不需要对数组中的每个元素进行处理，而只是想遍历它们，对每个元素执行一些操作。这时，forEach()函数就是你的好帮手。

forEach()函数会遍历数组中的每一个元素，并对每个元素执行你提供的函数。与map()不同的是，forEach()不会返回任何值。

const names = ["John", "Mary", "Bob", "Alice"];

// 遍历数组中的每个名字，并打印出来
names.forEach((name) => console.log(name));

// 输出：
// John
// Mary
// Bob
// Alice

filter()：慧眼识珠，精准筛选

在处理数组时，你可能经常需要筛选出符合特定条件的元素。filter()函数可以帮助你轻松实现这一点。

filter()函数会遍历数组中的每一个元素，并根据你提供的函数对每个元素进行判断。如果某个元素满足条件，则将其放入一个新数组中，最后返回这个新数组。

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

// 筛选出数组中大于 5 的元素
const filteredNumbers = numbers.filter((number) => number > 5);

console.log(filteredNumbers); // [6, 7, 8, 9, 10]

// 筛选出数组中以 "a" 开头的字符串
const filteredStrings = ["apple", "banana", "cherry", "dog", "elephant"].filter((string) => string.startsWith("a"));

console.log(filteredStrings); // ["apple"]

some()：一探究竟，知否知否

有时，你可能只需要知道数组中是否存在某个元素。some()函数可以帮助你快速找到答案。

some()函数会遍历数组中的每一个元素，并根据你提供的函数对每个元素进行判断。如果某个元素满足条件，则立即返回true，否则继续遍历数组。

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

// 检查数组中是否存在大于 10 的元素
const hasNumberGreaterThan10 = numbers.some((number) => number > 10);

console.log(hasNumberGreaterThan10); // false

// 检查数组中是否存在以 "a" 开头的字符串
const hasStringStartingWithA = ["apple", "banana", "cherry", "dog", "elephant"].some((string) => string.startsWith("a"));

console.log(hasStringStartingWithA); // true