JS數(shù)組循環(huán)的方式以及效率分析對比
數(shù)組的方法
JavaScript發(fā)展到現(xiàn)在已經(jīng)提供了許多數(shù)組的方法，下面這張圖涵蓋了數(shù)組大部分的方法，這篇文章主要說一說數(shù)組的遍歷方法，以及各自的性能，方法這么多，如何挑選性能最佳的方法對我們的開發(fā)有非常大的幫助。
數(shù)組遍歷的方法
for
- 標(biāo)準(zhǔn)的for循環(huán)語句，也是最傳統(tǒng)的循環(huán)語句
var arr = [1,2,3,4,5]
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
最簡單的一種遍歷方式，也是使用頻率最高的，性能較好，但還能優(yōu)化
- 優(yōu)化版for循環(huán)語句
var arr = [1,2,3,4,5]
for(var i=0,len=arr.length;i<len;i++){
console.log(arr[i])
}
使用臨時變量，將長度緩存起來，避免重復(fù)獲取數(shù)組長度，尤其是當(dāng)數(shù)組長度較大時優(yōu)化效果才會更加明顯。
這種方法基本上是所有循環(huán)遍歷方法中性能最高的一種
forEach
- 普通forEach
對數(shù)組中的每一元素運行給定的函數(shù),沒有返回值，常用來遍歷元素
var arr5 = [10,20,30]
var result5 = arr5.forEach((item,index,arr)=>{
console.log(item)
})
console.log(result5)
/*
10
20
30
undefined 該方法沒有返回值
*/
數(shù)組自帶的foreach循環(huán)，使用頻率較高，實際上性能比普通for循環(huán)弱
- 原型forEach
由于foreach是Array型自帶的，對于一些非這種類型的，無法直接使用(如NodeList)，所以才有了這個變種，使用這個變種可以讓類似的數(shù)組擁有foreach功能。
const nodes = document.querySelectorAll('div')
Array.prototype.forEach.call(nodes,(item,index,arr)=>{
console.log(item)
})
實際性能要比普通foreach弱
for...in
任意順序遍歷一個對象的除Symbol以外的可枚舉屬性，包括繼承的可枚舉屬性。
一般常用來遍歷對象，包括非整數(shù)類型的名稱和繼承的那些原型鏈上面的屬性也能被遍歷。像 Array和 Object使用內(nèi)置構(gòu)造函數(shù)所創(chuàng)建的對象都會繼承自O(shè)bject.prototype和String.prototype的不可枚舉屬性就不能遍歷了.
var arr = [1,2,3,4,5]
for(var i in arr){
console.log(i,arr[i])
} //這里的i是對象屬性，也就是數(shù)組的下標(biāo)
/**
0 1
1 2
2 3
3 4
4 5 **/
大部分人都喜歡用這個方法，但它的性能卻不怎么好
for...of（不能遍歷對象）
在可迭代對象（具有 iterator 接口）（Array，Map，Set，String，arguments）上創(chuàng)建一個迭代循環(huán)，調(diào)用自定義迭代鉤子，并為每個不同屬性的值執(zhí)行語句，不能遍歷對象
let arr=["前端","南玖","ssss"];
for (let item of arr){
console.log(item)
}
//前端 南玖 ssss
//遍歷對象
let person={name:"南玖",age:18,city:"上海"}
for (let item of person){
console.log(item)
}
// 我們發(fā)現(xiàn)它是不可以的 我們可以搭配Object.keys使用
for(let item of Object.keys(person)){
console.log(person[item])
}
// 南玖 18 上海
這種方式是es6里面用到的，性能要好于forin，但仍然比不上普通for循環(huán)
map
map: 只能遍歷數(shù)組，不能中斷，返回值是修改后的數(shù)組。
let arr=[1,2,3];
const res = arr.map(item=>{
return item+1
})
console.log(res) //[2,3,4]
console.log(arr) // [1,2,3]
every
對數(shù)組中的每一運行給定的函數(shù)，如果該函數(shù)對每一項都返回true,則該函數(shù)返回true
var arr = [10,30,25,64,18,3,9]
var result = arr.every((item,index,arr)=>{
return item>3
})
console.log(result) //false
some
對數(shù)組中的每一運行給定的函數(shù)，如果該函數(shù)有一項返回true,就返回true，所有項返回false才返回false
var arr2 = [10,20,32,45,36,94,75]
var result2 = arr2.some((item,index,arr)=>{
return item<10
})
console.log(result2) //false
reduce
reduce()方法對數(shù)組中的每個元素執(zhí)行一個由你提供的reducer函數(shù)（升序執(zhí)行），將其結(jié)果匯總為單個返回值
const array = [1,2,3,4] const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer));
filter
對數(shù)組中的每一運行給定的函數(shù)，會返回滿足該函數(shù)的項組成的數(shù)組
// filter 返回滿足要求的數(shù)組項組成的新數(shù)組
var arr3 = [3,6,7,12,20,64,35]
var result3 = arr3.filter((item,index,arr)=>{
return item > 3
})
console.log(result3) //[6,7,12,20,64,35]
性能測試工具測試
使用工具測試性能分析結(jié)果如下圖所示
手動測試
我們也可以自己用代碼測試：
//測試函數(shù)
function clecTime(fn,fnName){
const start = new Date().getTime()
if(fn) fn()
const end = new Date().getTime()
console.log(`${fnName}執(zhí)行耗時:${end-start}ms`)
}
function forfn(){
let a = []
for(var i=0;i<arr.length;i++){
// console.log(i)
a.push(arr[i])
}
}
clecTime(forfn, 'for') //for執(zhí)行耗時:106ms
function forlenfn(){
let a = []
for(var i=0,len=arr.length;i<len;i++){
a.push(arr[i])
}
}
clecTime(forlenfn, 'for len') //for len執(zhí)行耗時:95ms
function forEachfn(){
let a = []
arr.forEach(item=>{
a.push[item]
})
}
clecTime(forEachfn, 'forEach') //forEach執(zhí)行耗時:201ms
function forinfn(){
let a = []
for(var i in arr){
a.push(arr[i])
}
}
clecTime(forinfn, 'forin') //forin執(zhí)行耗時:2584ms (離譜)
function foroffn(){
let a = []
for(var i of arr){
a.push(i)
}
}
clecTime(foroffn, 'forof') //forof執(zhí)行耗時:221ms
// ...其余可自行測試
結(jié)果分析
經(jīng)過工具與手動測試發(fā)現(xiàn)，結(jié)果基本一致，數(shù)組遍歷各個方法的速度：傳統(tǒng)的for循環(huán)最快，for-in最慢
for-len > for > for-of > forEach > map > for-in
javascript原生遍歷方法的建議用法：
- 用for循環(huán)遍歷數(shù)組
- 用for...in遍歷對象
- 用for...of遍歷類數(shù)組對象（ES6）
- 用Object.keys()獲取對象屬性名的集合
為何for… in會慢？
因為for … in語法是第一個能夠迭代對象鍵的JavaScript語句，循環(huán)對象鍵（{}）與在數(shù)組（[]）上進行循環(huán)不同，引擎會執(zhí)行一些額外的工作來跟蹤已經(jīng)迭代的屬性。因此不建議使用for...in來遍歷數(shù)組
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用Canvas實現(xiàn)文字水印和圖片水印合成的效果，文中的示例代碼講解詳細(xì)，需要的小伙伴可以參考一下2022-11-11
這篇文章主要介紹了JavaScript微信定位功能實現(xiàn)方法,將定位到的經(jīng)緯度轉(zhuǎn)換為百度地圖對應(yīng)的經(jīng)緯度，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
JavaScript獲取網(wǎng)頁中第一個鏈接ID的方法
這篇文章主要介紹了JavaScript獲取網(wǎng)頁中第一個鏈接ID的方法,涉及javascript中document.links方法的使用,需要的朋友可以參考下2015-04-04
firefox火狐瀏覽器與與ie兼容的2個問題總結(jié)
這幾天遇到幾個頭疼的火狐與ie兼容問題整理下來，希望對需要的朋友有所幫助。2010-07-07
一個可以得到元素真實的背景顏色的javascript腳本...2007-07-07
JS實現(xiàn)密碼框根據(jù)焦點的獲取與失去控制文字的消失與顯示效果
這篇文章主要介紹了JS實現(xiàn)密碼框根據(jù)焦點的獲取與失去控制文字的消失與顯示效果,可實現(xiàn)使用JavaScript判斷密碼框是否獲得焦點來隱藏與顯示提示文字,非常簡單實用,需要的朋友可以參考下2015-11-11
JS基于遞歸實現(xiàn)網(wǎng)頁版計算器的方法分析
這篇文章主要介紹了JS基于遞歸實現(xiàn)網(wǎng)頁版計算器的方法,結(jié)合實例形式分析了javascript采用遞歸算法實現(xiàn)網(wǎng)頁版計算器的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
javascript中經(jīng)常用到IE版本的判定，實現(xiàn)特定需求的代碼。檢測瀏覽器雖然不是一個什么好的做法，但是有時候還是很必要的2012-01-01
本文主要分享了原生js實現(xiàn)返回頂部緩沖效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了使用Vue3實現(xiàn)一個Upload組件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05