陣列常見的遍歷迴圈方法陣列的迴圈遍歷的效率對比

1-1、for / while

最普通的迴圈效率最高相容ie6

tips:for迴圈更適用於迴圈的開始和結束已知，迴圈次數固定的場合；while迴圈更適合於條件不確定的場合

1-2、for in

相容ie6，效率最差（效率可看最下面的對比） for in 會把繼承鏈的物件屬性都會遍歷一遍,所以會更花時間.

var arr = ['red', 'green', 'blue'];
var obj = 
for(k in obj)
for(k in arr)

1-3、for of es6語法

ie不相容【for-of 語句只遍歷可迭代物件的資料。】原生具備 iterator 介面的資料結構如下。arraymapsetstringtypedarray函式的 arguments 物件nodelist 物件更多迭代器閱讀：

var arr = ['red', 'green', 'blue'];
for(var v of arr)

區別：for of 和 for in的區別for-in 語句以原始插入順序迭代物件的可列舉屬性。for-in會把繼承鏈的物件屬性都會遍歷一遍,所以會更花時間.

every 、 filter、foreach、map、reduce、some 都是相容ie9

map，filter 是返回新的陣列（形象區分幾個迴圈方法的區別參考：

2-1、array.prototype.every()

方法說明：測試陣列的所有元素是否都通過了指定函式的測試。遇到有不滿足的會提前終止整個迴圈

場景：檢測每一項的selected欄位都是被選中為true

案例：

var arr = [,,
,]; 
var reslut = arr.every(function(el,index,arr));
console.log(reslut);  //false

2-2、array.prototype.filter()

方法說明: 將所有在過濾函式中返回 true 的陣列元素放進乙個新陣列中並返回。true表示保留該元素（通過測試），false則不保留

場景：在乙個陣列中篩選數字大於10的元素，組成乙個新陣列

案例：

var arr = [
10,20,30]; 
var arr1 = arr.filter(function(el,index,arr));
console.log(arr1);  // 20 30

2-3、array.prototype.foreach()

方法說明：方法對陣列的每個元素執行一次提供的函式沒有辦法中止或者跳出 foreach 迴圈，除了丟擲乙個異常。如果您正在測試乙個陣列裡的元素是否符合某條件，且需要返回乙個布林值，那麼可使用 array.every 或 array.some。如果可用，新方法 find() 或者findindex() 也可被用於真值測試的提早終止。

場景：普通遍歷

案例：

var arr = [,,
,]; 
arr.foreach(function(el,index,arr));

2-4、array.prototype.map()

方法說明：方法建立乙個新陣列，其結果是該陣列中的每個元素都呼叫乙個提供的函式後返回的結果。

場景：非同步得到資料後,需要新建乙個資料根據id標識記錄是否被選中的selected屬性

案例：

var arr = [
,]; 
var arr1 = arr.map(function(el,index,arr);
newobj.id = el.id;
newobj.selected = false;
return newobj;
}); 
console.log(arr);  // 
console.log(arr1);  //

案例2: es6寫法

var numbers = [1, 5, 10, 15];
var doubles = numbers.map( x => x ** 2); //[2,10,20,30]

案例3：重格式化陣列 //不改變原陣列

var kvarray = [, 
, ];
var reformattedarray = kvarray.map(function(obj) ;
robj[obj.key] = obj.value;
return robj;
}); 
// reformattedarray 陣列為： [, , ],

2-5、array.prototype.reduce()

方法說明：方法對累加器和陣列中的每個元素（從左到右）應用乙個函式，將其減少為單個值。

場景：累加、合併多個陣列

案例：

var total = [0, 1, 2, 3].reduce(function(sum, value) , 0);
// total is 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) , ); 
// flattened is [0, 1, 2, 3, 4, 5]

2-6、array.prototype.some()

方法說明：方法測試陣列中的某些元素是否通過由提供的函式實現的測試。

場景：檢查陣列中是否含有某個東西（和every 是對立的）

案例：

const isbiggerthan10 = (element, index, array) => 
[2, 5, 8, 1, 4].some(isbiggerthan10);  
// false
[12, 5, 8, 1, 4].some(isbiggerthan10); 
// true

案例2：是否包含id為1 物件

var arr = [
,,]; 
var flag = arr.some(function(element, index, array));  
console.log(flag)

for ~= do while < foreach ~= map ~= every < $.each < $(e).each < for in

參考：for > for-of > foreach > filter > map > for-in

參考：

陣列常見的遍歷迴圈方法 陣列的迴圈遍歷的效率對比

陣列常見的遍歷迴圈方法 陣列的迴圈遍歷的效率對比

陣列常見的遍歷迴圈方法 陣列的迴圈遍歷的效率對比

JS 陣列迴圈遍歷方法的對比

相關推薦

陣列常見的遍歷迴圈方法陣列的迴圈遍歷的效率對比

陣列常見的遍歷迴圈方法陣列的迴圈遍歷的效率對比

陣列常見的遍歷迴圈方法陣列的迴圈遍歷的效率對比