前言
ES6提供了很多新的API,数组对象的尤为实用,但是如果我们没有在相对应的开发环境下,很难对这些API有深入的了解,毕竟实践出真知。
find、filter、findIndex这三个方法都是对于数组的查找,其中返回的值略微相关,所以在这里做一个介绍。
1.Array.prototype.find()
这是一个数组原型上的方法,调用格式应该是使用数组对象来调用,该方法接收一个回调函数callback
,如:array.find(callback)
。find
方法用途是 查找符合条件的第一个数组元素
例子:
var array = [1,4,6,7,9,11,13]; //需求: 查找大于10的第一个数 function callback(elem){ return elem > 10; } var dayu10 = array.find(callback); console.log(dayu10); // 11
如果找不到,返回undefined
例子:
var array = [1,4,6,7,9,11,13]; //需求: 查找大于100的第一个数 function callback(elem){ return elem > 100; } var dayu100 = array.find(callback); console.log(dayu100); // undefined
很显然,这个方法比较适合用来 判断数组内是否包含某种条件的值的元素。
或者进一步扩展,查找json数组内包含某个值的对象。如下:
var array = [ {name:'xxa',age: 15}, {name:'xxb',age:18} ]; var xx = array.find(elem => elem.name === 'xxa'); console.log(xx); // {name:'xxa',age: 15}
2.Array.prototype.findIndex()
作为原型上的方法,调用和参数与find
相同。
顾名思义,这个对比find
方法,这个方法返回的是符合条件的元素的下标index
。
例子:
var array = [1,4,6,7,9,11,13]; //需求: 查找大于10的第一个数 function callback(elem){ return elem > 10; } var dayu10index = array.find(callback); console.log(dayu10index); // 5
如果找不到,返回-1
,这点类似字符串查找的indexOf
或者正则表达式的search
,总而言之,无论什么查找方法,找不到就是-1
.
例子:
var array = [1,4,6,7,9,11,13]; //需求: 查找大于100的第一个数 function callback(elem){ return elem > 100; } var dayu100index = array.find(callback); console.log(dayu100index); // -1
很显然,这个方法更适合用来 判断数组内是否包含某种条件的值的元素。
3.Array.prototype.filter()
作为原型上的方法,调用和参数如上。filter
方法,意思为过滤
,同样接收一个回调函数callback
,该方法的使用场景是 查找数组内符合指定条件的所有元素
。
例子:
var array = [1,6,5,9,7,16,18]; //查找偶数 function callback(elem){ return elem % 2 === 0; } var oushu = array.filter(callback); console.log(oushu);// [6,16,18];
该方法返回的是一个集合,即数组
如果找不到,返回空数组[]。
例子:
var array = [1,6,5,9,7,16,18]; //查找大于20的数 function callback(elem){ return elem > 20; } var dayu20 = array.filter(callback); console.log(dayu20);// [];
结语
这三个方法,都是对数组元素的查找,find
返回第一个符合的元素的值,findIndex
返回第一个符合的元素的下标,filter
返回符合的元素的集合。
这三个方法都不会改变原数组的值,具有很大的相同点,所以在这里统一介绍。
相关链接 MDN web docs -- Array
文章转载自:https://segmentfault.com/a/1190000018788191
相关推荐
本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下: ①JavaScript 内置对象之-Array ②ES5新增数组方法(例:map()、indexOf()、filter()等) ③ES6新增字符串扩张方法includes()、...
本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下: ①JavaScript 内置对象之-Array ②ES5新增数组方法(例:map()、indexOf()、filter()等) ③ES6新增字符串扩张方法includes()、...
js代码-数组的迭代方法测试 every() filter() forEach() map() find() findIndex() some()
又因为列表与数据表两种方案又有多种查询方法,此程序又加上了列表的find与findindex方法的比较和数据表的rows.find方法与其对应的dataview的findrows方法、filter方法的执行速度比较 程序用vb2010编写,需要.net ...
在开发过程中,我们常常使用数组的一些 api 相关操作,其中包含 forEach 、 filter 、 find 、 findIndex 、 map 、 some 、 every 、 reduce 、 reduceRight 等函数方法。 今天,我们试试手写这些函数,实现数组...
Array.find(findIndex),返回符合条件的第一个值。 Array.filter(过滤成新的数组) 数组的方法分为两类 1)改变原数组 push,pop,shift,unshift,sort,reverse,splice 2)不改变原数组concat,join–> split,...
js数组方法-find / findIndex js数组方法-一些/每个 js数组方法-forEach / map / filter js数组方法-减少 第十单元的项目 ES2015-let / const ES2015-箭头功能 ES2015-剩余/价差运算符 ES2015-对象增强 ES2015-...
Array.findIndex() Array.map() Array.reduce() Array.filter()。map() Array.sort() Array.reverse() Array.push() Array.shift() Array.pop() Array.splice() Array.join() ...
find,findIndex,indexOf,lastIndexOf,forEach 接头,slicepop,推动,移位,不移位 箭头功能的优缺点 filter()和map()函数的原理和重要性 学习如何调试及其重要性 21天 使用filter(),map()函数 1020...
求和,求最大(小)值,排序,多个数组合并(concat),去重,分割,find,indexOf,filter,join, toString等等 数组的concat,join,slice,toString方法不会改变原数组 数组的splice,push,pop,unshift,shift...
1.4.24 IndexOf方法——确定指定字符在字符串中的索引 65 1.4.25 IsLeapYear方法——判断年份是否为闰年 67 1.4.26 IsMatch方法——搜索正则表达式匹配项 67 1.4.27 IsUpper方法——判断是否大写 68 1.4.28 Join方法...
所有JavaScript polyfill的集合 Polyfill包括: 数组,日期,元素,函数,数学,数字,字符串,Uint8Array和窗口 NPM :warning: NPM中没有任何包装! 数组Polyfill: ... findIndex ; Array . prototy
Array.findIndex() String.fromCodePoint() String.codePointAt() String.contains() String.endsWith() String.startsWith() String.trim() 对象.is() Object.setPrototypeOf() Number.parseFloat() ...
本书从函数功能、函数格式、参数说明、注意事项、Excel 版本提醒、案例应用、交叉参考7 个方面,全面、细致地介绍了Excel 2016/2013/2010/2007/2003 中公式和函数的使用方法、实际应用和操作技巧。最后3 章还将公式...
find(expr) next([expr]) nextAll([expr]) offsetParent() parent([expr]) parents([expr]) prev([expr]) prevAll([expr]) siblings([expr]) 串联 andSelf() end() 事件 页面载入 ready(fn) 事件处理 ...
find(expr) next([expr]) nextAll([expr]) offsetParent() parent([expr]) parents([expr]) prev([expr]) prevAll([expr]) siblings([expr]) 串联 andSelf() end() 事件 页面载入 ready(fn) 事件处理 ...
jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用...
11.2 数组和对象操作 183 11.2.1 jQuery.each(object, [callback]) 183 11.2.2 jQuery.extend([deep], target, object1, [objectN]) 183 11.2.3 jQuery.grep(array, callback, [invert]) 185 11.2.4 jQuery.make...