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

最新推荐文章于 2024-12-09 20:08:41 发布

转载最新推荐文章于 2024-12-09 20:08:41 发布 · 258 阅读

本文深入解析JavaScript中数组方法indexOf和lastIndexOf的功能、用法和注意事项，包括参数解释、返回值说明以及常见错误场景分析。通过具体实例演示如何在数组中查找特定元素的首次或最后一次出现位置，并探讨了对象和数组作为搜索目标时的特殊处理方式。最后，提供了一个实用工具函数findAll，用于找出数组中匹配的所有元素所在下标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

语法格式：

array.indexOf(searchElement[, fromIndex]);

array.lastIndexOf(searchElement[, fromIndex]);

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

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

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

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

举例：

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

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

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，用于找出数组中匹配的所有元素所在下标。此函数返回所有下标组成的数组。

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）

 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;
    };