js對象和數組一些常用的遍歷方法

1、數組遍歷:
1)最普通的for遍歷

var  arr = ['a','b','c'];
for(let i = 0;i<arr.length;i++){
   console.log(i,arr[i])
} 

這種直接使用for循環的方法是最普遍的遍歷數組和對象的方法;

2) 使用for…in 來遍歷數組元素;

for(let key in arr){
   console.log(key,arr[key])
}

打印輸出結果如下:
在這裏插入圖片描述值得注意的是for in 循環可以直接獲得數組的索引,如若需要獲取屬性的值,則需要使用數組加索引下標的形式來獲取,arr[key]

  1. es6新出的方法,for…of ,值得注意的是,for…of 和 for…in不一樣,for…in是直接獲取數組的索引,而for…of是直接獲取的數組的值
for(let value of arr){
   console.log(value)
}
//還可以遍歷字符串 let a = 'fauo';
for(let s of in a){
   console.log(s)
}

打印輸出結果如下:
在這裏插入圖片描述
4) forEach()方法遍歷數組:沒有返回值
值得注意的是:數組中有幾項,那麼傳遞進去的匿名回調函數就需要執行幾次;
每一次執行匿名函數的時候,還給其傳遞了三個參數值:數組中的當前項value,當前項的索引index,原始數組arr

arr.forEach((value,index,arr)=>{
    console.log(value,index,arr)
})

打印輸出結果如下:
在這裏插入圖片描述
2、遍歷對象
1)、for…in循環遍歷對象

  var obj = {
    name:'米斯特付',
    age:20,
    job:'前端工程師'
}
  for(let key in obj){
   console.log(key,obj[key])   //只能直接輸出鍵名,鍵值要以obj[key]的形式輸出
}

輸出結果如下:
在這裏插入圖片描述2)使用for…of的方式來遍歷對象
注意:for…of不能單獨來遍歷對象,要結合Object.keys一起使用纔行

for(let key of Object.keys(obj)){
   console.log(`${key}:${obj[key]}`) //for...of遍歷能直接輸出的也是鍵名,
                                //這裏使用的是es6的模板字符串,沒有以前的字符串拼接那麼麻煩
}

打印輸出結果如下:
在這裏插入圖片描述3)使用forEach()來遍歷對象
注意:本質上forEach()是用來遍歷數組的,不能遍歷對象的,但是可以使用Object.getOnwPropertyNames()來使對象能被forEach()遍歷

Object.getOwnPropertyNames(obj).forEach((value,index,obj)=>{
   console.log(`${value}--${index}--${obj[value]}`)
   console.log(obj)
})

打印結果如圖所示:
在這裏插入圖片描述可以看到鍵名可以正常輸出,而鍵值卻是undefined,這是因爲通過Object.getOwnPropertyNames轉換後的obj變成了一個數組,在控制檯也可以清除的看到obj打印的是一個數組,而value在這裏有代表鍵名,所以當然不能以obj[value]的形式來輸出鍵值,換而言之因爲數組根本就沒有這一種寫法;

正確方法:去掉obj這個參數:

Object.getOwngetPropertyNames(obj).forEach(value,index){
   console.log(`${value}---${index}---${obj[value]}`)
   console.log(obj)
}

打印輸出如圖所以:
在這裏插入圖片描述可以很清楚的看到,這裏的obj是我們最初定義的那個對象,而不是通過轉換後的那個obj數組
這樣就可以看到我們想要的結果了;

最後來說一說Object.getOwnPropertyNames()
對於對象來說,先使用getOwnPropertyNames方法返回一個數組,再使用forEach遍歷
Object.getOwnProperty 返回對象自有的屬性,包括可枚舉的和不可枚舉的屬性;
ObjectgetOwnPropertyNames(obj) 返回一個數組,該數組元素是obj自身擁有的枚舉或不可枚舉的
屬性名稱字符串。數組中枚舉屬性的順序與通過for…in循環 或 Object.keys 迭代該對象屬性時一致。數組中不可枚舉屬性的順序未定義

再就是我今天無意中看到了一句很好的話,給大家分享一下:
作爲一個人,不論從事什麼工作,盡心盡力,需要的就是一種成就感,但各有各的煩惱。人生就是享受這種歡樂與煩惱的。
------賈平凹《願人生從容》

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章