JS中filter()方法的使用

在JavaScript中，filter() 方法是一个数组方法，它创建一个新数组，其包含通过所提供函数实现的测试的所有元素。换句话说，filter() 方法遍历数组，对数组中的每个元素执行一个测试（由提供的函数实现），并返回一个新数组，该数组包含所有通过测试的元素。

filter() 方法不会改变原数组，而是返回一个新数组。

语法

javascript复制代码

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

• callback：用来测试每个元素的函数。它接收三个参数：
  • element：当前遍历到的元素。
  • index（可选）：当前遍历到的索引（如果提供了）。
  • array（可选）：正在操作的数组（如果提供了）。
• thisArg（可选）：执行 callback 时用作 this 的值。

示例

过滤出数组中的所有偶数

javascript复制代码

	const numbers = [1, 2, 3, 4, 5, 6];
	const evenNumbers = numbers.filter(function(number) {
	return number % 2 === 0;
	});
	console.log(evenNumbers); // 输出: [2, 4, 6]

使用箭头函数简化

javascript复制代码

	const numbers = [1, 2, 3, 4, 5, 6];
	const evenNumbers = numbers.filter(number => number % 2 === 0);
	console.log(evenNumbers); // 输出: [2, 4, 6]

过滤出对象数组中满足条件的对象

javascript复制代码

	const products = [
	{ name: 'Apple', category: 'fruit' },
	{ name: 'Carrot', category: 'vegetable' },
	{ name: 'Banana', category: 'fruit' }
	];
	const fruits = products.filter(product => product.category === 'fruit');
	console.log(fruits);
	// 输出: [{ name: 'Apple', category: 'fruit' }, { name: 'Banana', category: 'fruit' }]

注意事项

• filter() 方法不会改变原数组。
• 如果没有元素通过测试，则返回一个空数组。
• 回调函数 callback 只会被那些已经被赋值的索引调用；对于那些已经被删除或者从未被赋值的索引，不会调用 callback。
• 回调函数 callback 可以被设置为 null，此时，将返回一个新数组，包含所有原数组中的元素（等同于不调用 filter() 方法）。然而，通常不会这样使用。