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...