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

標籤：rip   query   str   整合   檢查   否則   長度   argument   lte   

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



                       本文子匠_Zijor，轉載請註明出處：http://www.dengzhr.com/js/362

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