JavaScript服务器端高级编程(Array.indexOf()和lastIndexOf()方法)

简介:

语法格式:

array.indexOf(searchElement[, fromIndex]);

array.lastIndexOf(searchElement[, fromIndex]);

功能:返回某个指定的元素值在数组中首次出现的位置。该方法将从头到尾地检索数组,看它是否含有元素searchElement。开始检索的位置在数组的fromIndex处或数组的开头(没有指定fromIndex时)。如果找到一个相匹配的元素,则返回此元素的第一次出现的位置。如果没有找到,则返回-1

注意:lastIndexOf方法从数组结束处由后往前搜索。

对于indexOf方法fromIndex的值应当为大于或者等于0的整数;如果为负整数,则返回-1

对于lastIndexOf方法fromIndex的值也可能为负整数。当为负整数时,表达从结尾的第|fromIndex|个元素开始往前搜索。

 

举例:
1
2
3
4
5
6
var  index = [12, 5, 8, 130, 44].indexOf(8);   //默认从索引0开始搜索,结果index=>2
[12, 5, 8, 130, 44].indexOf(130,1);   //从索引值1处搜索,输出3
[12, 5, 8, 130, 44].indexOf(130,-1);   //输出-1
[ "Hello" , " Hello" , "Hello " , " Hello " , "hello" ].lastIndexOf( 'hello' ,-1);  //输出4
[ "Hello" , " Hello" , "Hello " , " Hello " , "hello" ].lastIndexOf( 'hello' ,0);  //输出-1
[ "Hello" , " Hello" , "Hello " , " Hello " , "hello" ].lastIndexOf( ' Hello ' ,-2);  //输出3

 

 


indexOflastIndexOf方法使用全等(===)来判断一个元素是否存在于数组中。搜索字符串及数字可能没有问题,但是搜索对象和数组可能会有问题。如下的代码片断便给出有力证明:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var  arr = [
     { "name" "Zhang" , "blog" "http://www.zhang.com" },
     { "name" "John" , "blog" "http://www.john.com" },
     { "name" : "李四" , "blog" : "http://www.lisi.com" }
];
var  index=arr.indexOf({ "name" "Zhang" , "blog" "http://www.zhang.com" });
console.log( "index: " ,index);   //输出:index:  -1
var  o1={ "name" "Zhang" , "blog" "http://www.zhang.com" },
    o2={ "name" : "李四" , "blog" : "http://www.lisi.com" };
var  arr_2=[o1,o2];
var  index_2= arr_2.indexOf(o2);
console.log( "index_2: " ,index_2);   //输出:index:  1
  
//Ex3
var  arr_3=[[1,2,3],[ 'one' , 'two' , 'three' ]];
var  a1=[1,2,3];
var  a2=[ 'one' , 'two' , 'three' ];
var  index_3=arr_3.indexOf(a1);
console.log( "index_3: " ,index_3);   //输出:index:  -1
  
var  arr_4=[a1,a2];
var  index_4=arr_4.indexOf(a1);
console.log( "index_4: " ,index_4);   //输出:index_4:  0

上面的第1个例子输出结果为-1,为什么?其实问题在于判断两个对象是否相等的问题。JS开发中,判断两个对象是否相等时,只有两个对象指向相同的地址,这两个对象才是相等的;有时,可能存在两个对象的属性和值都相等,但是这两个对象仍然不相等。对于两个数组(也是对象)判断相等,原理同样。

 

实用工具函数findAll

下面给出一个简单的实用工具函数findAll,基于indexOf,用于找出数组中匹配的所有元素所在下标。此函数返回所有下标组成的数组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function  findAll(arr,value){
     var  results=[],len=arr.length,pos=0;
  
     while (pos<len){
         pos=arr.indexOf(value,pos);
         if (pos===-1)  break ;
         results.push(pos);
         pos++;
     }
     return  results;
}
var  indice=findAll([,1,2,3,4,5,6,3,,5,7,89,3,2,3],3);
console.log( 'indice: ' ,indice);
//结果:indice:  [ 3, 7, 12, 14 ]
 
通用解决方案(适合ECMAScript3和ECMAScript5)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  Array.prototype.indexOf = Array.prototype.indexOf ||  function  (value, start) {
         if  (start &&  typeof  start !==  'number' ) {
             throw  TypeError(start +  ' is not a number' );
         }
         var  start = start || 0,
             len =  this .length;
         if  (start > 0) {
             start = Math.floor(start);
         else  if  (start < 0) {
             start = Math.ceil(start) + len;
         }
         for  ( var  i = start; i < len; i++) {
             if  ( this [i] === value) {
                 return  i;
             }
         }
         return  -1;
     };
  
     Array.prototype.lastIndexOf = Array.prototype.lastIndexOf ||  function  (value, start) {
         if  (start &&  typeof  start !==  'number' ) {
             throw  TypeError(start +  ' is not a number' );
         }
         var  len =  this .length,
             start = start || len - 1;
         if  (start > 0) {
             start = Math.floor(start);
         else  if  (start < 0) {
             start = Math.ceil(start) + len;
         }
         for  ( var  i = start; i >= 0; i--) {
             if  ( this [i] === value) {
                 return  i;
             }
         }
         return  -1;
     };

 














本文转自朱先忠老师51CTO博客,原文链接: http://blog.51cto.com/zhuxianzhong/1651751,如需转载请自行联系原作者




相关文章
|
13天前
|
存储 JavaScript 索引
JS中数组的相关方法介绍
JS中数组的相关方法介绍
|
13天前
|
安全 Java 数据处理
Python网络编程基础(Socket编程)多线程/多进程服务器编程
【4月更文挑战第11天】在网络编程中,随着客户端数量的增加,服务器的处理能力成为了一个重要的考量因素。为了处理多个客户端的并发请求,我们通常需要采用多线程或多进程的方式。在本章中,我们将探讨多线程/多进程服务器编程的概念,并通过一个多线程服务器的示例来演示其实现。
|
15天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
17 0
|
16天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
18天前
|
网络协议 Python
pythonTCP客户端编程连接服务器
【4月更文挑战第6天】本教程介绍了TCP客户端如何连接服务器,包括指定服务器IP和端口、发送连接请求、处理异常、进行数据传输及关闭连接。在Python中,使用`socket`模块创建Socket对象,然后通过`connect()`方法尝试连接服务器 `(server_ip, server_port)`。成功连接后,利用`send()`和`recv()`进行数据交互,记得在通信完成后调用`close()`关闭连接,确保资源释放和程序稳定性。
|
13天前
|
JavaScript 前端开发 索引
JavaScript中与字符串相关的方法
JavaScript中与字符串相关的方法
|
6天前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
js 垃圾回收机制的方法
|
6天前
|
JavaScript 前端开发
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
js数据类型有几类?一共有几种?判断数据类型的方法是什么?
|
6天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
7 0
|
7天前
|
JavaScript 前端开发
js绑定事件的方法
js绑定事件的方法
21 11