ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(三)

前面分2篇博文介绍了 Ecmascript 5.1 数组扩展方法中的迭代方法:

ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(一)

ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(二)

今天和大家分享数组中关于索引的2个扩展方法

indexOf

lastIndexOf

依次看下:

1. indexOf

indexOf(searchItem, [fromIndex])

第一参数 searchItem 是查询的目标元素

第二参数 fromIndex  是查询的起始位置 (可选参数,为空表示从索引0处开始查找)

数组查询按照从左到右的顺序,从 fromIndex 索引位置开始查找,返回第一个元素所在的位置索引. 如果找不到返回 -1

var a=[10,9,23,5,40,77,2,7,1,25,5];

console.log(a.indexOf(5));

3

在数组的第四个位置,返回3

如果我们指定了第二个可选参数,让他从索引第五的位置开始查找

var a=[10,9,23,5,40,77,2,7,1,25,5];

console.log(a.indexOf(5,5));

10

这时输出索引位置为 10 ,因为我们从索引位置5开始查找的( 对应元素 77 开始查找)

如果我们查找一个数组中不包含的元素,会怎么样

var a=[10,9,23,5,40,77,2,7,1,25,5];

console.log(a.indexOf(78));

-1

查找不到 78 这个元素,所以返回 -1 .

下面我们还是要讨论下对于不支持此方法的浏览器该如何实现一个兼容性的方法:

if (typeof Array.prototype.indexOf != "function") {
  Array.prototype.indexOf = function (searchItem, fromIndex) {
    var index = -1;
    fromIndex = fromIndex * 1 || 0;

    for (var k = 0, length = this.length; k < length; k++) {
      if (k >= fromIndex && this[k] === searchItem) {
          index = k;
          break;
      }
    }
    return index;
  };
}

我们上面定义了一个 indexOf 方法,并且赋值给了Array 原型 indexOf 属性上.

此方法依然有2个参数, searchItem 要查找的目标元素, 第二个参数 fromIndex 查找起始位置

fromIndex = fromIndex * 1 || 0; 

这句代码的作用就是告诉我们 fromIndex 是一个选填参数,如果你赋值了, *1后值不变,

如果没有赋值 fromIndex = undefined * 1 || 0;  fromindex=0; 那么查找的时候从数组的0所引出开始查找 (从左边第一个元素开始查找)

for 循环遍历迭代了数组中的所有元素,当索引量大于 fromIndex 并且此索引处值等于 目标查找元素 searchItem 时,返回此处索引即可,然后跳出循环,如果找不到,返回 -1  (循环迭代开始处, index 赋默认值 -1 )

下面我们来验证一下:

因为我当前环境很难找到不支持 Ecmascript 5.1的宿主环境,所以我把上面自定义的 indexOf 方法改名为 indexOfnew ,然后调用查看执行结果.

我们在 a 数组上调用 indexOfnew 函数,查找 77 元素所在的位置,最后返回索引位置 5 .

2. lastIndexOf

此方法和 indexOf 查找方向正好相反.它是从后向前查找.

lastIndexOf(searchItem, [fromIndex])

第一元素是要查找的目标元素, 第二个元素是可选参数,表示从数组是哪个索引位置开始查找.

var a=[10,9,23,5,40,77,2,7,1,25,5];
console.log(a.lastIndexOf(5));

10

从后向前查找元素 5 所在的位置. 结果输出10 .

如果我们指定从第七个元素开始 从后向前查找 5 所在的位置:

var a=[10,9,23,5,40,77,2,7,1,25,5];
console.log(a.lastIndexOf(5,7));

3

当所在环境不兼容 EcmaScript 5.1 的时候,我们依然要在 Array 的原型上定义一个 lastIndexOf 方法赋给 lastIndexOf 属性.

其实实现方法基本和上面的 indexOf 一样,不同的是便利迭代元素的顺序. 这次我们是从后往前迭代.

if (typeof Array.prototype.lastIndexOf != "function") {
  Array.prototype.lastIndexOf = function (searchItem, fromIndex) {
    var index = -1, length = this.length;
    fromIndex = fromIndex * 1 || length - 1;

    for (var k = length - 1; k > -1; k-=1) {
        if (k <= fromIndex && this[k] === searchItem) {
            index = k;
            break;
        }
    }
    return index;
  };
}

看上面的代码,for 循环迭代索引初始值是 this.length-1  (数组的元素个数-1 ,从最后一个开始遍历迭代)

其他部分和 indexOf 都一致,这里就不去验证此方法了.

端午节愉快!