ES6/ES2015 中的获取你想要的 Map 和 Filter-JavaScript中文网-JavaScript教程资源分享门户

在 ES6/ES2015 中，我们可以使用 Map 和 Filter 函数来操作数组。这两个函数提供了在数组中获取你想要的元素，而无需手动遍历数组来进行查找。本文将详细介绍如何使用 Map 和 Filter 函数，并提供一些示例代码来帮助你更好地理解和运用这些功能。

Map 函数

Map 函数用于在数组中处理每个元素，并将其转换为新的值。它的语法如下：

arr.map(callback(currentValue[, index[, array]])[, thisArg])

其中，arr 表示要处理的数组，callback 表示一个函数，它会被调用一次用于每个数组元素。currentValue 表示当前正在处理的数组元素，index 表示元素的下标，array 表示数组本身。

下面是一个简单的示例，使用 Map 函数将一个数组中的元素都乘以 2：

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2);

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

上面的代码中，我们首先定义了一个数组 numbers，然后使用 Map 函数将数组中的每个元素都乘以 2，得到一个新的数组 doubledNumbers。最后，我们使用 console.log 将 doubledNumbers 打印到控制台上。

Filter 函数

Filter 函数用于在数组中过滤出符合条件的元素，并将它们返回为一个新数组。它的语法如下：

arr.filter(callback(element[, index[, array]])[, thisArg])

其中，arr 表示要处理的数组，callback 表示一个函数，它会被调用一次用于每个数组元素。element 表示当前正在处理的数组元素，index 表示元素的下标，array 表示数组本身。

下面是一个简单的示例，使用 Filter 函数过滤出一个数组中所有的偶数：

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // [2, 4]

上面的代码中，我们首先定义了一个数组 numbers，然后使用 Filter 函数过滤出数组中所有的偶数，得到一个新的数组 evenNumbers。最后，我们使用 console.log 将 evenNumbers 打印到控制台上。

如何同时使用 Map 和 Filter 函数

有时候，我们需要同时使用 Map 和 Filter 函数来处理数组。在这种情况下，我们可以首先使用 Filter 函数过滤出符合条件的元素，然后使用 Map 函数对它们进行处理。下面是一个示例代码，它在一个数组中过滤出所有大于 2 的元素，并将它们翻倍：

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(number => number > 2);
const doubledNumbers = filteredNumbers.map(number => number * 2);

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

上面的代码中，我们首先定义了一个数组 numbers，然后使用 Filter 函数过滤出所有大于 2 的元素，得到一个新的数组 filteredNumbers。接着，我们使用 Map 函数将 filteredNumbers 数组中的每个元素都翻倍，得到一个新的数组 doubledNumbers。最后，我们使用 console.log 将 doubledNumbers 打印到控制台上。

总结

Map 和 Filter 函数是在 ES6/ES2015 中新增的两个数组函数，它们可以帮助我们更方便地获取我们想要的数组元素。Map 函数用于处理数组中的每个元素，并将其转换为新的值，而 Filter 函数用于过滤出符合条件的元素。同时使用这两个函数的时候，我们可以先使用 Filter 函数过滤出符合条件的元素，然后再使用 Map 函数对它们进行处理。掌握这些函数的原理和用法，将有助于我们更快速、高效地开发前端应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65497fee7d4982a6eb3acadd