JavaScript數組方法的兼容性寫法 匯總:indexOf()、forEach()、map()、filter()、some()、every()

吳青強 8年前發布 | 9K 次閱讀 JavaScript開發 JavaScript

ECMA Script5中數組方法如indexOf()、forEach()、map()、filter()、some()并不支持IE6~8,但是國內依然有一 大部分用戶使用IE6~8,而以上數組方法又確實非常好用。在過去,我會為了兼容性盡量不用這些方法。但是,總不能為了舊的丟了新的吧?!雖然說 jQuery已經集成好了不少語法糖,但jQuery體積太龐大,作為一名志于體面的前端兒得知道原生的兼容性寫法要怎么寫。于是這幾天,我開始在琢磨這 些方法的兼容性寫法。其實并不難,就是以前不夠自信不敢寫。寫完以后,對數組認識更深一些了。總結見下文。

備注:以下兼容性寫法均可兼容至IE6;

indexOf()

indexOf()方法 返回根據給定元素找到的第一個索引值,否則返回-1。

語法:

array.indexOf(searchElement[, fromIndex = 0])

參數:

searchElement // 位于數組中的元素;

fromIndex // 開始查找指定元素的索引值,默認值為 0 (即在整個數組中查找指定元素);

fromIndex大于或等于數組長度,則停止查找并返回-1。如果參數中提供的索引值是一個負值,則將其作為數組末尾的一個抵消,即-1表示從最后一個元素開始查找,-2表示從倒數第二個元素開始查找 ,以此類推。

兼容性:不兼容IE6~8。

根據indexOf()的語法寫出兼容IE6~8的寫法如下:

兼容性寫法:

if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(ele) {
        // 獲取數組長度
        var len = this.length;
        // 檢查值為數字的第二個參數是否存在,默認值為0
        var fromIndex = Number(arguments[1]) || 0;
        // 當第二個參數小于0時,為倒序查找,相當于查找索引值為該索引加上數組長度后的值
        if(fromIndex < 0) {
            fromIndex += len;
        }
        // 從fromIndex起循環數組
        while(fromIndex < len) {
            // 檢查fromIndex是否存在且對應的數組元素是否等于ele
            if(fromIndex in this && this[fromIndex] === ele) {
                return fromIndex;
            }
            fromIndex++;
        }
        // 當數組長度為0時返回不存在的信號:-1
        if (len === 0) {
            return -1;
        }
    }
}

調用示例:

var arr = ["a", "b", "c"];
alert(arr.indexOf("b")); // 1

forEach()

forEach() 方法讓數組的每一項都執行一次給定的函數。forEach()方法會修改原數組。

語法:

array.forEach(callback[, thisArg])

參數:

1 . callback :在數組每一項上執行的函數,接收三個參數:
currentValue(當前項的值)、index(當前項的索引)和array(數組本身)。

2 . thisArg :可選參數。用來當作callback 函數內this的值的對象,即callback 函數的執行上下文;

forEach 方法按升序為數組中含有效值的每一項執行一次callback 函數,那些已刪除(使用delete方法等情況)或者從未賦值的項將被跳過(但不包括哪些值為 undefined 的項)。

兼容性:不兼容IE6~8。

根據forEach()的語法寫出兼容IE6~8的寫法如下:

兼容性寫法:

if ( !Array.prototype.forEach) {
  Array.prototype.forEach = function forEach(callback) {
      // 獲取數組長度
    var len = this.length;
    if(typeof callback != "function") {
        throw new TypeError();
    }
    // thisArg為callback 函數的執行上下文環境
    var thisArg = arguments[1];
    for(var i = 0; i < len; i++) {
        if(i in this) {
            // callback函數接收三個參數:當前項的值、當前項的索引和數組本身
            callback.call(thisArg, this[i], i, this);
        }
    }
  }
}

調用示例:

var arr = ["a", "b", "c", "a", "d", "a"];
arr.forEach(function(ele, index, array){
    if(ele == "a") {
        array[index] = "**";
    }
});
alert(newArr); // ["**", "b", "c", "**", "d", "**"]

map()

map() 方法返回一個由原數組中的每個元素調用一個指定方法后的返回值組成的新數組。

語法:

array.map(callback[, thisArg])

參數:

1 . callback : 在數組每一項上執行的函數,接收三個參數:
currentValue(當前項的值)、index(當前項的索引)和array(數組本身);

2 . thisArg :可選參數。用來當作callback 函數內this的值的對象,即callback 函數的執行上下文;

兼容性:不兼容IE6~8。

根據map()的語法寫出兼容IE6~8的寫法如下:

兼容性寫法:

if (!Array.prototype.map) {
  Array.prototype.map = function(callback) {
      // 獲取數組長度
      var len = this.length;
      if(typeof callback != "function") {
          throw new TypeError();
      }
      // 創建跟原數組相同長度的新數組,用于承載經回調函數修改后的數組元素
      var newArr = new Array(len);
      // thisArg為callback 函數的執行上下文環境
      var thisArg = arguments[1];
      for(var i = 0; i < len; i++) {
          if(i in this) {
              newArr[i] = callback.call(thisArg, this[i], i, this);
          }
      }
      return newArr;
  }    
}

調用示例:

var arr = ["a", "b", "c"];
var newArr = arr.map(function(ele, index, array){
    ele += "12";
    return ele;
});
alert(newArr); // ["a12", "b12", "c12"]

filter()

filter() 方法利用所有通過指定函數測試的元素創建一個新的數組,并返回。

語法:

arr.filter(callback[, thisArg])

參數:

1 . callback : 在數組每一項上執行的函數,接收三個參數:
currentValue(當前項的值)、index(當前項的索引)和array(數組本身);

2 . thisArg :可選參數。用來當作callback 函數內this的值的對象,即callback 函數的執行上下文;

filter 為數組中的每個元素調用一次 callback 函數,并利用所有使得 callback 返回 "true" 的元素創建一個新數組。callback 只會在已經賦值的索引上被調用,對于那些已經被刪除或者從未被賦值的索引不會被調用。那些沒有通過 callback 測試的元素只會被跳過,不會被包含在新數組中。filter 不會改變原數組。

兼容性:不兼容IE6~8。

根據filter()的語法寫出兼容IE6~8的寫法如下:

兼容性寫法:

if (!Array.prototype.filter) {
    Array.prototype.filter = function(callback) {
      // 獲取數組長度
      var len = this.length;
      if(typeof callback != "function") {
          throw new TypeError();
      }
      // 創建新數組,用于承載經回調函數修改后的數組元素
      var newArr = new Array();
      // thisArg為callback 函數的執行上下文環境
      var thisArg = arguments[1];
      for(var i = 0; i < len; i++) {
          if(i in this) {
              if(callback.call(thisArg, this[i], i, this)) {
                  newArr.push(val);
              }
          }
      }
      return newArr;
  }
}

調用示例:

var arr = [1, 2, 3, 4, 3, 2, 5];
var newArr = arr.filter(function(ele, index, array){
    if(ele < 3) {
        return true;
    }else {
        return false;
    }
});
alert(newArr); // [1, 2, 2]

some()

some() 方法測試數組中的某些元素是否通過了指定函數的測試。返回布爾值。some() 被調用時不會改變數組。

語法:

arr.some(callback[, thisArg])

參數:

1 . callback : 在數組每一項上執行的函數,接收三個參數:
currentValue(當前項的值)、index(當前項的索引)和array(數組本身);

2 . thisArg :可選參數。用來當作callback 函數內this的值的對象,即callback 函數的執行上下文;

some() 為數組中的每一個元素執行一次 callback 函數,直到找到一個使得 callback 返回一個true 的值。如果找到了這樣一個值,some() 將返回 true。否則返回 false。

兼容性:不兼容IE6~8。

根據some()的語法寫出兼容IE6~8的寫法如下:

兼容性寫法:

if (!Array.prototype.some) {
  Array.prototype.some = function(callback) {
      // 獲取數組長度
      var len = this.length;
      if(typeof callback != "function") {
          throw new TypeError();
      }
      // thisArg為callback 函數的執行上下文環境
      var thisArg = arguments[1];
      for(var i = 0; i < len; i++) {
          if(i in this && callback.call(thisArg, this[i], i, this)) {
              return true;
          }
      }
      return false;
  }
}

調用示例:

var arr = [1, 2, 3, 4, 3, 2, 5];
var newArr = arr.some(function(ele, index, array){
    if(ele < 2) {
        return true;
    }else {
        return false;
    }
});
alert(newArr); // true

every()

every() 方法測試數組的所有元素是否都通過了指定函數的測試。every() 不會改變原數組。

語法:

arr.every(callback[, thisArg])

參數:

1 . callback : 在數組每一項上執行的函數,接收三個參數:
currentValue(當前項的值)、index(當前項的索引)和array(數組本身);

2 . thisArg :可選參數。用來當作callback 函數內this的值的對象,即callback 函數的執行上下文;

every() 方法為數組中的每個元素執行一次 callback 函數。只有所有元素都在callback函數中返回true才返回true,否則返回false。

兼容性:不兼容IE6~8。

根據some()的語法寫出兼容IE6~8的寫法如下:

兼容性寫法:

if (!Array.prototype.every) {
  Array.prototype.every = function(callback) {
      // 獲取數組長度
      var len = this.length;
      if(typeof callback != "function") {
          throw new TypeError();
      }
      // thisArg為callback 函數的執行上下文環境
      var thisArg = arguments[1];
      for(var i = 0; i < len; i++) {
          if(i in this && !callback.call(thisArg, this[i], i, this)) {
              return false;
          }
      }
      return true;
  }
}

調用示例:

var arr = [1, 2, 3, 4, 3, 2, 5];
var newArr = arr.every(function(ele, index, array){
    if(ele < 3) {
        return true;
    }else {
        return false;
    }
});
alert(newArr); // false

來自:http://www.dengzhr.com/js/362

 本文由用戶 吳青強 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!