數組常見的遍歷循環方法、數組的循環遍歷的效率對比

xfee 發布于2019-08-23 15:14 / 2279人閱讀

摘要：場景檢查數組中是否含有某個東西和是對立的案例案例是否包含為對象循環遍歷效率對比參考參考原生實現等方法其他參考

1 遍歷數組的方法

1-1、for / while

最普通的循環效率最高兼容ie6
tips:for循環更適用于循環的開始和結束已知，循環次數固定的場合；while循環更適合于條件不確定的場合

1-2、for in

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

var arr = ["red", "green", "blue"];
var obj = {
    name:"張三",
    age:20
}
 

for(k in obj){
    console.log(k); //name  ， age 
    console.log(obj[k]);  // 張三 ， 20
}
 

for(k in arr){
    console.log(k);   // 0   , 1   ,2  
    console.log(arr[k]); // red, green ,blue
}

1-3、for of ?es6語法

ie不兼容 ?【for-of 語句只遍歷可迭代對象的數據。】原生具備 Iterator 接口的數據結構如下。ArrayMapSetStringTypedArray函數的 arguments 對象NodeList 對象更多迭代器閱讀：http://es6.ruanyifeng.com/#do...

var arr = ["red", "green", "blue"];
 
for(var v of arr) {
    console.log(v); // red green blue
}

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

2、數組自帶的循環方法：

every 、 filter、forEach、map、reduce、some 都是兼容ie9
map，filter 是返回新的數組（形象區分幾個循環方法的區別參考：https://www.zhihu.com/questio...）

2-1、Array.prototype.every()

方法說明：測試數組的所有元素是否都通過了指定函數的測試。遇到有不滿足的會提前終止整個循環
場景：檢測每一項的selected字段都是被選中為true
案例：

var arr = [
    {id:1,name:"zhangsan1",selected:false},
    {id:2,name:"zhangsan2",selected:false},
    {id:3,name:"zhangsan3",selected:true},
];
 
 
var reslut = arr.every(function(el,index,arr){
    console.log(el);
    return el.selected==true;
});
 
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){
    return el > 10;
});
 
console.log(arr1);  // 20 30

2-3、Array.prototype.forEach()
?
方法說明：方法對數組的每個元素執行一次提供的函數 ? ?沒有辦法中止或者跳出 forEach 循環，除了拋出一個異常。如果您正在測試一個數組里的元素是否符合某條件，且需要返回一個布爾值，那么可使用 Array.every 或 Array.some。如果可用，新方法 find() 或者findIndex() 也可被用于真值測試的提早終止。
場景：普通遍歷
案例：

var arr = [
    {id:1,name:"zhangsan1",selected:false},
    {id:2,name:"zhangsan2",selected:false},
    {id:3,name:"zhangsan3",selected:true},
];
 
 
arr.forEach(function(el,index,arr){
    console.log(el)
});

2-4、Array.prototype.map()
方法說明：方法創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。
場景：異步得到數據后,需要新建一個數據根據id標識記錄是否被選中的selected屬性
案例：

var arr = [
    {id:1,name:"zhangsan1"},
];
 
var arr1 = arr.map(function(el,index,arr){
    var newObj = {};
    newObj.id = el.id;
    newObj.selected = false;
    return newObj;
});
 
console.log(arr);  // [{id:1,name:"zhangsan1"}]
console.log(arr1);  // [{id:1,selected:false}]

案例2: es6寫法

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

案例3：重格式化數組 //不改變原數組

var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];
 
var reformattedArray = kvArray.map(function(obj) { 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
 
// reformattedArray 數組為： [{1: 10}, {2: 20}, {3: 30}],

2-5、Array.prototype.reduce()

方法說明：方法對累加器和數組中的每個元素（從左到右）應用一個函數，將其減少為單個值。
場景：累加、合并多個數組
案例：

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

2-6、Array.prototype.some()

方法說明：方法測試數組中的某些元素是否通過由提供的函數實現的測試。
場景：檢查數組中是否含有某個東西（和every 是對立的）
案例：

const isBiggerThan10 = (element, index, array) => {
  return element > 10;
}
 
[2, 5, 8, 1, 4].some(isBiggerThan10);  
// false
 
[12, 5, 8, 1, 4].some(isBiggerThan10); 
// true

案例2：是否包含id為1 對象

var arr = [
    {id:1,name:"zhangsan1"},
    {id:2,name:"zhangsan2"},
];
 
 
var flag = arr.some(function(element, index, array){
    console.log(element.id)
    return element.id == 1;
});  
 
console.log(flag)

3、循環/遍歷效率對比

for ~= do while < forEach ~= map ~= every < $.each < $(e).each < for in ?
參考：http://www.jb51.net/article/1...

for > for-of > forEach > filter > map > for-in
參考：https://dailc.github.io/2016/...

4、原生實現every 、 filter、forEach、map、reduce、some 等方法

?http://www.jb51.net/article/6...

5、其他參考

https://juejin.im/post/5a3a59...

GPU云服務器云服務器 python循環遍歷二維數組循環遍歷字典 python遍歷循環 php表單循環遍歷

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101739.html

JS 數組循環遍歷方法的對比

摘要：循環方法方法不改變原數組方法會給原數組中的每個元素都按順序調用一次函數。篩選出過濾出數組中符合條件的項組成新數組代碼方法方法為數組中的每個元素執行一次函數，直到它找到一個使返回表示可轉換為布爾值的值的元素。 showImg(https://segmentfault.com/img/bV2QTD?w=1600&h=500); 前言 JavaScript 發展至今已經發展出多種數組的循環遍...

BlackFlagBin 2019-08-26 11:31 評論0 收藏0
JavaScript 循環

摘要：所以結果的不同就是后者能將循環內容至少執行一次。當此語句省略時，表示不進行條件判斷，循環將一直執行，只有在循環中使用來跳出循環。支持對數組和類數組對象進行循環，不支持普通對象的循環。支持對字符串進行循環遍歷。 JavaScript中直接提供的循環，主要有以下幾種 while 循環和其他語言一樣，JavaScript中的while循環有兩種形式: while (condition) {...

gitmilk 2019-08-20 15:20 評論0 收藏0
JS中可能用得到的全部的排序算法

本篇有7k+字, 系統梳理了js中常見的12種排序算法。除了基本排序算法，文章還包含了希爾排序、堆排序、桶排序等較為復雜的排序實現，如果喜歡請點贊支持~謝謝. 原文: http://louiszhai.github.io/20... 導讀排序算法可以稱得上是我的盲點, 曾幾何時當我知道Chrome的Array.prototype.sort使用了快速排序時, 我的內心是奔潰的(啥是快排, 我只知道...

verano 2019-08-20 15:08 評論0 收藏0
java知識體系梳理-->數組

摘要：知識體系梳理流程圖一維數組數組概述數組是指一組數據的集合，數組中的每個數據被稱作元素。定義打印數組元素方法按照給定的格式打印題目分析通過觀察發現，要實現按照指定格式，打印數組元素操作。按照這種方式，數組循環多圈以后，就完成了數組元素的排序。知識體系梳理流程圖 showImg(https://segmentfault.com/img/bVXwAi?w=902&h=652); 一維數組 ...

james 2019-08-15 12:23 評論0 收藏0
Week 2 - Java 容器 - 詳細剖析 List 之 ArrayList, Vector,

摘要：底層使用的是雙向鏈表數據結構之前為循環鏈表，取消了循環。快速隨機訪問就是通過元素的序號快速獲取元素對象對應于方法。而接口就是用來標識該類支持快速隨機訪問。僅僅是起標識作用。，中文名為雙端隊列。不同的是，是線程安全的，內部使用了進行同步。前言學習情況記錄時間：week 2 SMART子目標：Java 容器記錄在學習Java容器知識點中，關于List的需要重點記錄的知識點。...

MartinDai 2019-08-16 18:35 評論0 收藏0