JS filter与map方法详解|极客笔记

JS filter与map方法详解

在JavaScript中，filter和map是常用的数组方法，它们可以通过对数组元素进行处理，提供一种简洁、高效的方式来操作和转换数组。本篇文章将详细介绍filter和map的用法、特性以及示例代码，并给出运行结果。

1. filter方法

1.1 介绍

filter方法是数组的高阶函数之一，它会根据给定的条件对数组进行筛选，并返回通过筛选条件的元素，同时不改变原始数组。该方法的语法为：

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

其中，array表示要进行筛选的数组，callback是一个用来测试每个元素的函数，它可以接受三个参数：element表示当前处理的数组元素，index表示当前元素的索引，array表示正在操作的原始数组。

1.2 示例

下面是一个简单的示例，利用filter方法从一个数组中筛选出所有大于5的元素：

const numbers = [1, 3, 5, 7, 9, 2, 4, 6, 8];
const filteredNumbers = numbers.filter(element => element > 5);

console.log(filteredNumbers); // 输出: [7, 9, 6, 8]

运行结果如下：

[7, 9, 6, 8]

在上述示例中，我们使用箭头函数作为callback，通过element > 5的条件来筛选出大于5的元素并存储在filteredNumbers数组中。

1.3 注意事项

filter方法不会改变原始数组，而是返回通过筛选条件的新数组。
如果没有通过筛选条件的元素，filter方法会返回一个空数组。
callback函数中应返回一个布尔值来决定元素是否通过筛选条件，如果返回true，则保留该元素；如果返回false，则排除该元素。

2. map方法

2.1 介绍

map方法是数组的另一个高阶函数，它通过对数组的每个元素应用指定的转换函数来创建一个新数组，该方法不会改变原始数组。map方法的语法如下：

array.map(callback(element[, index[, array]])[, thisArg])

array表示要进行转换的数组，callback是一个用来转换每个元素的函数，它可以接受三个参数：element表示当前处理的数组元素，index表示当前元素的索引，array表示正在操作的原始数组。

2.2 示例

下面是一个简单的示例，利用map方法将一个字符串数组中的每个元素转换为大写：

const strings = ['hello', 'world', 'javascript'];
const uppercasedStrings = strings.map(element => element.toUpperCase());

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

运行结果如下：

["HELLO", "WORLD", "JAVASCRIPT"]

在上述示例中，我们使用箭头函数作为callback，通过element.toUpperCase()将每个元素转换为大写并存储在uppercasedStrings数组中。

2.3 注意事项

map方法不会改变原始数组，而是返回一个新数组。
如果原始数组为空，map方法会返回一个空数组。
callback函数中应返回每个元素的转换结果。

3. filter与map的结合应用

filter方法和map方法可以互相结合使用，以实现更强大的功能。

下面是一个示例，我们从一个对象数组中筛选出所有满足条件的元素，并返回满足条件的元素的某个属性组成的新数组：

const students = [
  { id: 1, name: 'Alice', age: 18 },
  { id: 2, name: 'Bob', age: 20 },
  { id: 3, name: 'Charlie', age: 22 },
];

const filteredNames = students
  .filter(student => student.age > 18) // 筛选出年龄大于18的学生
  .map(student => student.name); // 提取筛选结果中的学生姓名

console.log(filteredNames); // 输出: ["Bob", "Charlie"]

运行结果如下：