您现在的位置是：网站首页> 编程资料编程资料
JavaScript中Array的filter函数详解_javascript技巧_
2023-05-24
297人已围观
简介 JavaScript中Array的filter函数详解_javascript技巧_
描述
filter为数组中的每个元素调用一次callback函数，并利用所有使得callback返回 true 或等价于 true 的值的元素创建一个新数组。callback只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过callback 测试的元素会被跳过，不会被包含在新数组中。
理解
filter不会改变原数组，它返回过滤后的新数组。
filter遍历的元素范围在第一次调用callback之前就已经确定了。在调用filter之后被添加到数组中的元素不会被filter遍历到。如果已经存在的元素被改变了，则他们传入callback的值是filter遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。
示例
过滤长度大于6的
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"]
使用
filter创建了一个新数组，该数组的元素由原数组中值大于 10 的元素组成。
function isBigEnough(element) { return element >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44]使用
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']据搜索条件来过滤数组内容
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']原生实现
filter 被添加到 ECMA-262 标准第 5 版中，因此在某些实现环境中不被支持。可以把下面的代码插入到脚本的开头来解决此问题，该代码允许在那些没有原生支持 filter 的实现环境中使用它。该算法是 ECMA-262 第 5 版中指定的算法，假定 fn.call 等价于 Function.prototype.call 的初始值，且 Array.prototype.push 拥有它的初始值。
if (!Array.prototype.filter){ Array.prototype.filter = function(func, thisArg) { 'use strict'; if ( ! ((typeof func === 'Function' || typeof func === 'function') && this) ) throw new TypeError(); var len = this.length >>> 0, res = new Array(len), // preallocate array t = this, c = 0, i = -1; if (thisArg === undefined){ while (++i !== len){ // checks to see if the key was set if (i in this){ if (func(t[i], i, t)){ res[c++] = t[i]; } } } } else{ while (++i !== len){ // checks to see if the key was set if (i in this){ if (func.call(thisArg, t[i], i, t)){ res[c++] = t[i]; } } } } res.length = c; // shrink down array to proper size return res; }; }到此这篇关于JavaScript中Array的filter函数详解的文章就介绍到这了,更多相关JS filter 内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
相关内容
- npm run dev失败的简单解决办法_vue.js_
- 教你应用 SOLID 原则整理 React 代码之单一原则_React_
- 跨端开发框架avm组件封装经验分享_JavaScript_
- 如何应用 SOLID 原则在 React 中整理代码之开闭原则_React_
- vue实现多级菜单效果_vue.js_
- JavaScript 内置对象 BigInt详细解析_javascript技巧_
- 一步步带你用vite简单搭建ts+vue3全家桶_vue.js_
- 在React中应用SOLID原则的方法_React_
- JavaScript宏任务和微任务区别介绍_javascript技巧_
- 利用Vite搭建Vue3+ElementUI-Plus项目的全过程_vue.js_
