數(shù)組常見的遍歷循環(huán)方法、數(shù)組的循環(huán)遍歷的效率對(duì)比

xfee 發(fā)布于2019-08-23 15:14 / 2295人閱讀

摘要：場(chǎng)景檢查數(shù)組中是否含有某個(gè)東西和是對(duì)立的案例案例是否包含為對(duì)象循環(huán)遍歷效率對(duì)比參考參考原生實(shí)現(xiàn)等方法其他參考

1 遍歷數(shù)組的方法

1-1、for / while

最普通的循環(huán) 效率最高兼容ie6
tips:for循環(huán)更適用于循環(huán)的開始和結(jié)束已知，循環(huán)次數(shù)固定的場(chǎng)合；while循環(huán)更適合于條件不確定的場(chǎng)合

1-2、for in

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

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語(yǔ)法

ie不兼容 ?【for-of 語(yǔ)句只遍歷可迭代對(duì)象的數(shù)據(jù)?！吭邆?Iterator 接口的數(shù)據(jù)結(jié)構(gòu)如下。ArrayMapSetStringTypedArray函數(shù)的 arguments 對(duì)象NodeList 對(duì)象更多迭代器閱讀：http://es6.ruanyifeng.com/#do...

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

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

2、數(shù)組自帶的循環(huán)方法：

every 、 filter、forEach、map、reduce、some 都是兼容ie9
map，filter 是返回新的數(shù)組（形象區(qū)分幾個(gè)循環(huán)方法的區(qū)別參考：https://www.zhihu.com/questio...）

2-1、Array.prototype.every()

方法說明：測(cè)試數(shù)組的所有元素是否都通過了指定函數(shù)的測(cè)試。遇到有不滿足的會(huì)提前終止整個(gè)循環(huán)
場(chǎng)景：檢測(cè)每一項(xiàng)的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() ?

方法說明: 將所有在過濾函數(shù)中返回 true 的數(shù)組元素放進(jìn)一個(gè)新數(shù)組中并返回。true表示保留該元素（通過測(cè)試），false則不保留
場(chǎng)景：在一個(gè)數(shù)組中篩選數(shù)字大于10的元素，組成一個(gè)新數(shù)組
案例：

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()
?
方法說明：方法對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù) ? ?沒有辦法中止或者跳出 forEach 循環(huán)，除了拋出一個(gè)異常。如果您正在測(cè)試一個(gè)數(shù)組里的元素是否符合某條件，且需要返回一個(gè)布爾值，那么可使用 Array.every 或 Array.some。如果可用，新方法 find() 或者findIndex() 也可被用于真值測(cè)試的提早終止。
場(chǎng)景：普通遍歷
案例：

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()
方法說明：方法創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。
場(chǎng)景：異步得到數(shù)據(jù)后,需要新建一個(gè)數(shù)據(jù)根據(jù)id標(biāo)識(shí)記錄是否被選中的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：重格式化數(shù)組 //不改變?cè)瓟?shù)組

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 數(shù)組為： [{1: 10}, {2: 20}, {3: 30}],

2-5、Array.prototype.reduce()

方法說明：方法對(duì)累加器和數(shù)組中的每個(gè)元素（從左到右）應(yīng)用一個(gè)函數(shù)，將其減少為單個(gè)值。
場(chǎng)景：累加、合并多個(gè)數(shù)組
案例：

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()

方法說明：方法測(cè)試數(shù)組中的某些元素是否通過由提供的函數(shù)實(shí)現(xiàn)的測(cè)試。
場(chǎng)景：檢查數(shù)組中是否含有某個(gè)東西（和every 是對(duì)立的）
案例：

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 對(duì)象

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、循環(huán)/遍歷效率對(duì)比

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、原生實(shí)現(xiàn)every 、 filter、forEach、map、reduce、some 等方法

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

5、其他參考

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

云服務(wù)器 GPU云服務(wù)器 python循環(huán)遍歷二維數(shù)組循環(huán)遍歷字典 python遍歷循環(huán) php表單循環(huán)遍歷

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101739.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xfee

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

STM32F103基于spi實(shí)現(xiàn)OLED顯示

閱讀 3939·2021-11-22 09:34
Raksmart美國(guó)服務(wù)器靠譜嗎（RAKsmart服務(wù)器省錢策略）

閱讀 1507·2021-11-04 16:10
Python中的運(yùn)算符介紹（下）

閱讀 1741·2021-10-11 10:59
前端面試每日 3+1 —— 第124天

閱讀 3287·2019-08-30 15:44
淺談Canvas

閱讀 2052·2019-08-30 13:17
解決koala報(bào)錯(cuò)invalid byte sequence in UTF-8

閱讀 3461·2019-08-30 11:05
CSS選擇器、層疊、繼承的那些事

閱讀 757·2019-08-29 14:02
JavaScript-作用域是什么

閱讀 2633·2019-08-26 13:34

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

數(shù)組常見的遍歷循環(huán)方法、數(shù)組的循環(huán)遍歷的效率對(duì)比

相關(guān)文章

JS 數(shù)組循環(huán)遍歷方法的對(duì)比

JavaScript 循環(huán)

JS中可能用得到的全部的排序算法

java知識(shí)體系梳理-->數(shù)組

Week 2 - Java 容器 - 詳細(xì)剖析 List 之 ArrayList, Vector,

發(fā)表評(píng)論

0條評(píng)論

xfee

男|高級(jí)講師

TA的文章

STM32F103基于spi實(shí)現(xiàn)OLED顯示

Raksmart美國(guó)服務(wù)器靠譜嗎（RAKsmart服務(wù)器省錢策略）

Python中的運(yùn)算符介紹（下）

前端面試每日 3+1 —— 第124天

淺談Canvas

解決koala報(bào)錯(cuò)invalid byte sequence in UTF-8

CSS選擇器、層疊、繼承的那些事

JavaScript-作用域是什么

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

數(shù)組常見的遍歷循環(huán)方法、數(shù)組的循環(huán)遍歷的效率對(duì)比

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

數(shù)組常見的遍歷循環(huán)方法、數(shù)組的循環(huán)遍歷的效率對(duì)比