时间:2021-07-01 10:21:17 帮助过:12人阅读
filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"]
语法
var array = arr.filter(function(item,index,array){}) // 一般都传一个参数
返回值
一个新的通过测试的元素的集合的数组,如果没有通过测试则返回空数组
描述
filter 为数组中的每个元素调用一次回调函数,并利用所有使得回调返回 true 或 等价于 true 的值 的元素创建一个新数组。回调函数只会在已经赋值的索引上被调用,对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过回调函数测试的元素会被跳过,不会被包含在新数组中。
filter 遍历的元素范围在第一次调用回调函数之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了,则他们传入回调函数的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。(如有不懂请看之前写的 forEach 方法)
示例
筛选排除掉所有的小值
//下例使用 filter 创建了一个新数组,该数组的元素由原数组中值大于 10 的元素组成。 function isBigEnough(element) { return element >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44]
过滤JSON中的无效条目
// 以下示例使用filter()创建具有非零id的json。 var arr = [ { id: 15 }, { id: -1 }, { id: 0 }, { id: 3 }, { id: 12.2 }, { }, { id: null }, { id: NaN }, { id: 'undefined' } ]; var invalidEntries = 0; function isNumber(obj) { return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj); } function filterByID(item) { if (isNumber(item.id) && item.id !== 0) { return true; } invalidEntries++; return false; } var arrByID = arr.filter(filterByID); console.log('Filtered Array\n', arrByID); // Filtered Array // [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }] console.log('Number of Invalid Entries = ', invalidEntries); // Number of Invalid Entries = 5
在数组中搜索
// 下面的示例使用filter()根据搜索条件过滤数组内容 var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange']; /** * Array filters items based on search criteria (query) */ function filterItems(query) { return fruits.filter(function(el) { return el.toLowerCase().indexOf(query.toLowerCase()) > -1; }) } console.log(filterItems('ap')); // ['apple', 'grapes'] console.log(filterItems('an')); // ['banana', 'mango', 'orange'] //如果输入的字母是不相连的,那么久得不到你想要的结果 console.log(filterItems('al'));// [] //输出结果为空
filter方法一般都是用来过滤和筛选的。
如果在某些环境下filter方法不被支持,那么请访问mdn网站来解决问题MDN Array.prototype.filter()方法。
以上就是深入理解JavaScript中filter()方法(附代码)的详细内容,更多请关注Gxl网其它相关文章!