詳解JavaScript中數組和字串的lastIndexOf()方法使用

詳解JavaScript中數組和字串的lastIndexOf()方法使用_基礎知識

WBOY

發布： 2016-05-16 15:10:55

原創

2269 人瀏覽過

Array.prototype.lastIndexOf 和 String.prototype.lastIndexOf 是非常的實用的方法，不過很多人不知道它其實可以傳遞兩個參數，第二個參數決定了搜尋的起始位置：

文法

str.lastIndexOf(searchValue[, fromIndex])

登入後複製

lastIndexOf() 方法傳回指定值在呼叫方法的字串中最後出現的位置，如果沒找到則傳回 -1。從該字串的後面向前查找，從 fromIndex 開始。

參數

1.searchValue
一個字串，表示被尋找的值。
2.fromIndex
從呼叫該方法字串的此位置開始尋找。可以是任意整數。預設值為 str.length。如果為負值，則被視為 0。如果 fromIndex > str.length，則 fromIndex 被看作 str.length。

區分大小寫

lastIndexOf 方法區分大小寫。例如，下面的表達式回傳 -1：

"Blue Whale, Killer Whale".lastIndexOf("blue"); // returns -1

登入後複製

lastIndexOf的用法

// Create an array.
var ar = ["ab", "cd", "ef", "ab", "cd"];

// 找到最后一个CD的位置
document.write(ar.lastIndexOf("cd") + "<br/>");
// 输出: 4

// 从正数第二个位置，搜索倒数第一个CD的位置
document.write(ar.lastIndexOf("cd", 2) + "<br/>");
// 输出: 1

// 从倒数第三个搜索最后一个ab的位置
document.write(ar.lastIndexOf("ab", -3) + "<br/>");
// 输出: 0

登入後複製

同樣 String.lastIndexOf的用法類似

"canal".lastIndexOf("a") // returns 3
"canal".lastIndexOf("a",2) // returns 1
"canal".lastIndexOf("a",0) // returns -1 从第0个往前搜，不存在'a'，返回-1
"canal".lastIndexOf("x") // returns -1

登入後複製

lastIndexOf的IE8實作

不過微軟的IE8及其以下並不支援Array.lastIndexOf，需要相容實作。可以參考：

if (!Array.prototype.lastIndexOf) {
 Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
 'use strict';

 if (this === void 0 || this === null) {
  throw new TypeError();
 }

 var n, k,
  t = Object(this),
  len = t.length >>> 0;
 if (len === 0) {
  return -1;
 }

 n = len - 1;
 if (arguments.length > 1) {
  n = Number(arguments[1]);
  if (n != n) {
  n = 0;
  }
  else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
  n = (n > 0 || -1) * Math.floor(Math.abs(n));
  }
 }

 for (k = n >= 0
   &#63; Math.min(n, len - 1)
   : len - Math.abs(n); k >= 0; k--) {
  if (k in t && t[k] === searchElement) {
  return k;
  }
 }
 return -1;
 };
}

登入後複製

可以使用 ES5-Slim 讓舊版瀏覽器完全相容於ES5語法。

為什麼要避免使用for in

不過要注意的是，在Array.prototype上面附加方法後，for in語法也會把lastIndexOf方法也列舉出來：

for (var idx in [1,3,5,7,9]) {
 console.log(idx)
}

>> 0 1 2 3 4 lastIndexOf

登入後複製

而應該使用 for loop實作

for (var idx = 0; idx < [1,3,5,7,9].length; idx++) {
 console.log(idx)
}

登入後複製

這個問題可以使用 Object.defineProperty 來實現，來避免for in的枚舉出lastIndexOf方法：

Object.defineProperty(Array, "lastIndexOf", { enumerable: false })

登入後複製

不過一般需要相容實作的瀏覽器根本不支援defineProperty 方法。而且在多數瀏覽器上for in都比for loop慢很多，因此應該盡量避免使用for in。但是要如何列舉Object屬性的key呢？使用Object.keys({ a:1 })即可傳回關於keys的陣列。