js陣列遍歷和物件遍歷
針對js各種遍歷作一個總結分析,從型別用處:分陣列遍歷和物件遍歷;還有效能,優缺點等。
JS陣列遍歷:
1,普通for迴圈,經常用的陣列遍歷
var arr = [1,2,0,3,9]; for ( var i = 0; i <arr.length; i++){ console.log(arr[i]); }
2,優化版for迴圈:
使用變數,將長度快取起來,避免重複獲取長度,陣列很大時優化效果明顯
for(var j = 0,len = arr.length; j < len; j++){ console.log(arr[j]); }
3,forEach,陣列自帶的迴圈,主要功能是遍歷陣列
arr.forEach(function(value,i){
console.log('forEach遍歷:'+i+'--'+value);
})
forEach這種方法也有一個小缺陷:你不能使用break語句中斷迴圈,也不能使用return語句返回到外層函式。
4,map遍歷,map即是 “對映”的意思 用法與 forEach 相似
arr.map(function(value,index){ console.log('map遍歷:'+index+'--'+value); });
map遍歷支援使用return語句,支援return返回值
var temp=arr.map(function(val,index){ console.log(val); return val*val }) console.log(temp);
forEach、map都是ECMA5新增陣列的方法,所以ie9以下的瀏覽器還不支援
5,for-of遍歷
for..of為ES6新增的方法,主要來遍歷可迭代的物件(包括Array, Map, Set, arguments等),它主要用來獲取物件的屬性值,而for..in主要獲取物件的屬性名。
var arr1 = [1, 2, 3] for (let i of arr1){ console.log(i) } // 遍歷普通物件報錯 var obj2 = {fname:1, name2:22} for(let val of obj2){ console.log(val) }
- for-of這個方法避開了for-in迴圈的所有缺陷
- 它可以正確響應break、continue和return語句
for-of迴圈支援陣列,還支援類物件(例如DOMNodeList物件),字串,map物件,set物件
for -of遍歷陣列,遍歷的結果是陣列的值
for-of不適合遍歷普通物件,但可以通過Array.from()方法轉換為類陣列或可迭代物件
JS物件遍歷:
1,Object.keys()遍歷物件
1.1,在實際開發中,我們有時需要知道物件的所有屬性,Object.keys(),傳入物件,返回屬性名並放在數組裡var obj = {'a':'123','b':'345'} console.log(Object.keys(obj)) // ["a", "b"]1.2,Object.keys().forEach() 遍歷物件,把物件的屬性名轉成陣列,可與陣列遍歷結合使用
var person = { name: 'hhh', age:'20', sex:'男', home:'china' } var keys = Object.keys(person).forEach((e) =>{ console.log('person', e, ':', person[e]) }) // Object.keys 遍歷物件,把物件的屬性名轉成陣列,可與陣列遍歷結合使用 var keys2 = Object.keys(person) console.log(keys2) // ["name", "age", "sex", "home"]
2,for-in遍歷物件
for...in遍歷物件,它遍歷的是屬性名 會遍歷例項的屬性,還會遍歷整個原型鏈,這可能不是你所期望的結果,然後從效能角度上看Object.keys會更優。var obj = {'a':'123','b':'345'} for (let key in obj){ console.log(key ,obj[key]) } // a 123 // b 345
for-in是為遍歷物件而設計的,不適用於遍歷陣列。
遍歷陣列的缺點:for-in遍歷的index值"0","1","2"等是字串
for (var index in arr){ console.log(arr[index]); console.log(index); }
for-in遍歷,會把屬性名排序
let obj2 = {b:2, a:'11', 1:'ok'} for (let key in obj2) { console.log(key) } // 1 // b // a
for...in總結:
1、for in遍歷物件時,會遍歷例項的屬性+還遍歷原型中可列舉的屬性
2、for in不適合遍歷陣列,遍歷陣列遍歷的是下標,下標型別是 字串
3,for in遍歷會以任意順序遍歷物件的屬性名