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

2021-09-12 16:18:24 字數 3494 閱讀 1431

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

參考:

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

1 1 for while最普通的迴圈 效率最高 相容ie6 tips for迴圈更適用於迴圈的開始和結束已知,迴圈次數固定的場合 while迴圈更適合於條件不確定的場合 1 2 for in 相容ie6,效率最差 效率可看最下面的對比 for in 會把繼承鏈的物件屬性都會遍歷一遍,所以會更花時間...

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

1 1 for while最普通的迴圈 效率最高 相容ie6 tips for迴圈更適用於迴圈的開始和結束已知,迴圈次數固定的場合 while迴圈更適合於條件不確定的場合 1 2 for in 相容ie6,效率最差 效率可看最下面的對比 for in 會把繼承鏈的物件屬性都會遍歷一遍,所以會更花時間...

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

以下介紹比較簡單,最好把 複製到控制台敲一遍 var arr 1,2,4,6 for var i 0,len arr.length i len i var arr 1,5,8,9 arr.foreach function item 一般會使用for in來遍歷物件的屬性的,不過屬性需要 enumer...