JS常用陣列遍歷

2021-09-27 21:39:30 字數 1991 閱讀 2594

最近前端**在codereview的時候,發現同事的陣列遍歷用的是map方法,這個我沒看懂,原因是我之前沒了解過這種寫法.我之前寫j2ee最常用的應該就是普通的for迴圈了吧,短短幾年前端js又多了許多遍歷陣列迭代的方法了.既然已經有for迴圈了,那麼為啥還要出現其他的陣列遍歷方法了?我想原因就3點: 1.效能相比普通for迴圈效率更高;2.寫起來更加的優雅、簡便;3:作用場景不一樣.既然這樣,那我們是要好好的了解下,才能寫出更加高效、更加優雅的**了.

1.普通for迴圈

var txt = ""


var array = [1,2,3,4,5]


for(var j=0;j簡要說明:最簡單的一種,也是使用頻率最高的一種,雖然效能不弱,但是仍然有優化的空間.


2.優化版for迴圈


var txt = ""


var array = [1,2,3,4,5]


for(var j=0,len=array.length;j簡要說明:使用臨時變數將長度快取起來,避免重複獲取陣列長度,當陣列較大時優化效果才會比較明顯.這種方法基本上是所有迴圈遍歷方法中效能最高的一種.


3.foreach迴圈


var txt = ""


var array = [1,2,3,4,5]


array.foreach(function(element,index));
簡要說明:陣列自帶的迴圈,主要功能就是遍歷陣列,實際效能比for迴圈還弱;foreach這種方法也有乙個小缺陷:你不能使用

break

語句中斷迴圈,也不能使用

return

語句返回到外層函式。

4.map迴圈

4.1 無返回值

var txt = ""


var array = [1,2,3,4,5]


array.map(function(element,index));
4.2 有返回值

var txt = ""


var array = [1,2,3,4,5]


var temp = array.map(function(element,index));


var content = ""


temp.map(function(element,index))
簡要說明:map即是 「對映」的意思 用法與 foreach 相似,map遍歷支援使用return語句，支援return返回值; map方法通過對每個陣列元素執行函式來建立新陣列;map方法不會對沒有值的陣列元素執行函式;map方法不會更改原始陣列.

5.filter迴圈

var txt = ""


var array = [1,2,3,4,5]


var temp = array.filter(function(element,index)


});var content = ""


temp.map(function(element,index))
簡要說明:過濾通過條件的元素組成乙個新陣列，原陣列不變.

6.for-of迴圈

var txt = ""


var array = [1,2,3,4,5]


for(element of array)
簡要說明:for-of這個方法避開了for-in迴圈的所有缺陷;與foreach不同的是,它可以正確響應break、continue和return語句;for-of迴圈不僅支援陣列,也支援字串遍歷;

1.for-in迴圈

var txt = ""


var obj = 


for(attribute in obj)
簡要說明:for-in是為遍歷物件而設計的,不適用於遍歷陣列;遍歷陣列的缺點：陣列的下標index值是數字，for-in遍歷的index值"0","1","2"等是字串;

js陣列遍歷

一 for迴圈類 基礎for迴圈 for let arr for let i 0,len arr.length i len i for in迴圈 for in param key 索引 下標 for var key in arr for in迴圈 for of param item 物件 for l...

js陣列遍歷

1 如何建立陣列。2 陣列的長度，陣列元素的新增和刪除 如何使用下標對陣列的操作 3 遍歷陣列的方式 for迴圈，for in遍歷 4 二維陣列 舉例並遍歷二維陣列 5 運算元組的方法。push pop unshift shift splice reverse sort join slice con...

js 陣列遍歷 物件遍歷

一 陣列遍歷 1，普通for迴圈，經常用的陣列遍歷 var arr 1,2,0,3,9 for var i 0 i 2，優化版for迴圈 使用變數，將長度快取起來，避免重複獲取長度，陣列很大時優化效果明顯 for var j 0,len arr.length j len j 3，foreach，es...