JavaScript中数组中查找指定元素的方法
这篇文章主要介绍JavaScript中数组中查找指定元素的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
一、findIndex 和 findLastIndex
1.1 findIndex
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
constarray1=[5,12,8,130,44];constisLargeNumber=(element)=>element>13;console.log(array1.findIndex(isLargeNumber));//expectedoutput:3
实现
Array.prototype.newFindIndex=function(callback){
const_arr=this;
constlen=_arr.length;
for(leti=0;i<len;i++){
if(callback(_arr[i],i,_arr)){
returni;
}
}
return-1;};constarray1=[5,12,8,130,44];constisLargeNumber=(element)=>element>13;console.log(array1.newFindIndex(isLargeNumber));//31.2 findLastIndex
同样当我们倒叙查找首个满足条件的方法时,可以这样写:
Array.prototype.newFindlastIndex=function(callback){
const_arr=this;
constlen=_arr.length;
for(leti=len-1;i>=0;i--){
if(callback(_arr[i],i,_arr)){
returni;
}
}
return-1;};constarray1=[5,12,8,130,44];constisLargeNumber=(element)=>element>13;console.log(array1.newFindlastIndex(isLargeNumber));//4上面的代码,和正序查找很相似,仅仅改变遍历的条件。
1.3 合并 findIndex 和 findLastIndex
大家可以看到,除了循环的条件不同,两个方法几乎一模一样,参考 lodash,我们将两个方法精简一下
/**
*@private
*@param{Array}arrayThearraytoinspect.
*@param{Function}predicateThefunctioninvokedperiteration.
*@param{boolean}[fromRight]从右向左查找
*@returns{number}返回第一个符合条件元素的下标或-1
*/functionbaseFindIndex(array,predicate,fromRight){
const{length}=array;
letindex=fromRight?length:-1;//确定下标的边界
while(fromRight?index--:++index<length){
//index--用于倒序边界
//++index用于正序的边界
if(predicate(array[index],index,array)){
returnindex;
}
}
return-1;}再来看看它的兄弟——underscore 的思路就是利用传参的不同,返回不同的函数。
functioncreateIndexFinder(dir){
returnfunction(array,predicate,context){
const{length}=array;
varindex=dir>0?0:length-1;
for(;index>=0&&index<length;index+=dir){
if(predicate.call(context,array[index],index,array))returnindex;
}
return-1;
};}varfindIndex=createIndexFinder(1);varfindLastIndex=createIndexFinder(-1);关于 findIndex 我们就告一段落了~,再来看看新的场景和实现吧!
二、sortIndex
在一个排好序的数组中找到 value 对应的位置,即保证插入数组后,依然保持有序的状态。
constarr=[1,3,5];sortedIndex(arr,0);//0//不需要插入arr
那么这个又该如何实现呢?
2.1 遍历
遍历大家都能想到,虽然它不一定最优解:
functionsortIndex(array,value){
for(leti=0;i<array.length;i++){
if(array[i]>value){
returni;
}
}
returnarray.length;}2.2 二分法
functionsortIndex(array,value){
letlow=0,
high=array.length;
while(low<high){
letmid=Math.floor((low+high)/2);
if(array[mid]<value){
low=mid+1;
}else{
high=mid;
}
}
returnhigh;}三、indexOf 和 lastIndexOf
indexOf():返回在数组中可以找到一个给定元素的第一个索引,如果不存在则返回-1。从数组的前面向后查找,从 fromIndex 处开始。lastIndexOf():返回指定元素在数组中的最后一个的索引,如果不存在则返回-1。从数组的后面向前查找,从 fromIndex 处开始。
3.1 indexOf 的第一版实现
functionindexOf(array,value){
for(leti=0;i<array.length;i++){
if(array[i]===value){
returni;
}
}
return-1;}emmmm…在看过 findIndex 和 lastFindIndex 的实现后,indexOf 也要整整齐齐的啊~
3.2 indexOf 和 lastIndexOf 通用第一版
通过参数来创建不同的查找方法
functioncreateIndexOf(dir){
returnfunction(array,value){
letindex=dir>0?0:arr.length-1;
for(;index>=0&&index<arr.length;index+=dir){
if(array[i]===value){
returni;
}
}
return-1;
};}3.3 indexOf 和 lastIndexOf 通用第二版
这一次,我们允许指定查找位置,我们来看看 fromIndex 的作用:
设定开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回 -1。 如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即 -1 表示从最后一个元素开始查找,-2 表示从倒数第二个元素开始查找 ,以此类推。 注意:如果参数中提供的索引值是一个负值,仍然从前向后查询数组。如果抵消后的索引值仍小于 0,则整个数组都将会被查询。其默认值为 0。
functioncreateIndexOf(dir){
returnfunction(array,value,fromIndex){
//设定开始查找的位置。如果该索引值大于或等于数组长度,意味着不会在数组里查找,返回-1。
letlength=array==null?0:array.length;
leti=0;
if(!length)return-1;
if(fromIndex>=length)return-1;
if(typeoffromIndex==="number"){
if(dir>0){
//正序
//起始点>=0,沿用起始点,否则起始点为从后向前数fromIndex
i=fromIndex>=0?fromIndex:Math.max(length+fromIndex,0);
}else{
//倒序
//起始点>=0,沿用起始点,否则起始点为从后向前数fromIndex
length=
fromIndex>=0
?Math.min(fromIndex+1,length)
:fromIndex+length+1;
}
}
//起始下标
for(
fromIndex=dir>0?i:length-1;
fromIndex>=0&&fromIndex<length;
fromIndex+=dir){
if(array[fromIndex]===item)returnfromIndex;
}
return-1;
};}写到这里我们在数组中查找元素就结束了,自己实现的和loadsh或underscore还是有很大区别的。
以上是“JavaScript中数组中查找指定元素的方法”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注恰卡编程网行业资讯频道!
推荐阅读
-
Node.js N-API 开发:C++ 扩展与 JavaScript 高性能交互
-
WebStorm 与 VS Code 对比:JavaScript 开发该如何选择 IDE?
-
WebStorm 与 VS Code 对比:JavaScript 开发工具选型分析
-
JavaScript闭包用多会造成内存泄露吗
JavaScript闭包用多会造成内存泄露吗今天小编给大家分享一下...
-
javascript中文乱码如何解决
javascript中文乱码如何解决本篇内容介绍了“javascr...
-
PHP学习第十五天——JavaScript入门DOM对象:二
-
Node.js基本内容和知识点
简单的说node.js就是运行在服务端的JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目...
-
PHP与Node.js:一个史诗般开发者的分享
-
JavaScript 中 find() 和 filter() 方法的区别
JavaScript在ES6上有很多数组方法,每种方法都有独特的用途和好处。在开发应用程序时,大多使用数组方法来获...
-
js怎么跟php结合使用
