filter()
方法创建一个新数组,返回的是所有匹配元素组成
let results = arr.filter(function(item, index, array) {
// 如果 true item 被 push 到 results,迭代继续
// 如果什么都没找到,则返回空数组
});
语法:
const newArray = arr.filter(callback(item, index, array))
参数:
callback--
用来测试数组的每个元素的函数。返回 true
表示该元素通过测试,保留该元素,false
则不保留。它接受以下三个参数:
item--
数组中当前正在处理的元素。
index
可选--
正在处理的元素在数组中的索引。
array
可选--
调用了 filter
的数组本身。
返回值:
一个新的、由通过测试的元素组成的数组,如果没有任何数组元素通过测试,则返回空数组。
理解 :
filter
为数组中的每个元素调用一次 callback
函数,并利用所有使得 callback
返回 true 或 等价与true的元素创建一个新数组。callback
只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback
测试的元素会被跳过,不会被包含在新数组中。
callback
被调用时传入三个参数:
- 元素的值
- 元素的索引
- 被遍历的数组本身
示例:
1.筛选对象中ID小于3的值
let users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];
// 返回前两个用户的数组
let someUsers = users.filter(item => item.id < 3);
console.log(someUsers);
2.在数组中根据搜素条件来过滤内容
const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
/**
* Array filters items based on search criteria (query)
*/
const filterItems = (query) => {
return fruits.filter((el) =>
el.toLowerCase().indexOf(query.toLowerCase()) > -1
);
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']