1. 程式人生 > >JS中的forEach,for in,for of和for的遍歷優缺點及區別

JS中的forEach,for in,for of和for的遍歷優缺點及區別

let 循環 返回 函數 容易 字符 下標 oob 使用

forEach:(可以三個參數,第一個是value,第二個是index,第三個是數組體)

缺點:不能同時遍歷多個集合,在遍歷的時候無法修改和刪除集合數據,

方法不能使用break,continue語句跳出循環,或者使用return從函數體返回,對於空數組不會執行回調函數

優點:便利的時候更加簡潔,效率和for循環相同,不用關心集合下標的問題,減少了出錯的效率

定義:用於調用數組的每個元素,並將元素傳遞給回調函數

實例:

//我們先用它來遍歷數組
let arry=[9,8,7,6,5,4] array.forEach(function(value,index,arr){ console.log(value) }) //輸出結果為9 8 7 6 5 4
//首先有人疑問它能不能用來遍歷對象(一開始我也不知道)? //我們用它來遍歷對象試試可不可以 let obj={a:1,b:2,c:3,d:4} obj.forEach(function(value,index,oObj){ console.log(value) } //輸出結果會是obj.forEach is not a function,
//所以forEach不可以遍歷對象,這也是它和for in的一個區別

for in:(它大部分用於遍歷對象)

定義:用於循環遍歷數組或對象屬性,fot in循環裏面的index是string類型的,

代碼每執行一次,就會對數組的元素或者對象的屬性進行一次操作

缺點:某些情況下,會出現隨機順序的遍歷,因為裏面的值是string類型,所以
增加了轉換過程,因此開銷較大

優點:可以遍歷數組的鍵名,遍歷對象簡潔方便

實例:

//首先遍歷對象
   let person={name:"老王",age:23,city:"大唐"}
   let text
="" for (let i in person){ text+=person[i] } 輸出結果為:老王23大唐 //其次在嘗試一些數組 let arry=[1,2,3,4,5] for (let i in arry){ console.log(arry[i]) } //能輸出出來,證明也是可以的

for of:(可遍歷map,object,array,set string等)用來遍歷數據,比如組中的值,

map,set會在下篇文章詳解,這節只查看遍歷對象和數組

優點:避免了for in的所有缺點,可以使用break,continue和return,不僅支持

數組的遍歷,還可以遍歷類似數組的對象,支持字符串的遍歷
最簡潔,最直接的遍歷數組的語法
支持map和Set對象遍歷

缺點:不適用於處理原有的原生對象(原生對象是一個子集,包含一些在運動過程中動態創建的對象)

實例:

//遍歷數組
   let arr=["nick","freddy","mike","james"];
    for (let item of arr){
        console.log(item)
    }
//暑促結果為nice freddy mike james


//遍歷對象
   let person={name:"老王",age:23,city:"唐山"}
   for (let item of person){
        console.log(item)
    }
//我們發現它是不可以的
//但是它和forEach有個解決方法,結尾介紹

for:

優點:程序簡潔,結構清晰,循環初始化,循環變量化,循環體和循環條件位置突出

缺點:結構比while循環復雜,容易出編碼錯誤

實例:

//首先它和forEach,forof一樣不可以遍歷對象
//解決辦法:就是把對象先轉化為數組類型- -
//有一個對象:
     let obj={a:1,b:2,c:3}
//用Object.keys屬性轉化
     let obj2=Object.keys(obj)
//最後就可以用來遍歷了
   for (let i=0;i<obj2.length;i++){
     console.log(obj2[i])
   }
//輸出結果就能出來了,forEach,for of同理

JS中的forEach,for in,for of和for的遍歷優缺點及區別