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 迭代该对象属性时一致。数组中不可枚举属性的顺序未定义

再就是我今天无意中看到了一句很好的话,给大家分享一下:
作为一个人,不论从事什么工作,尽心尽力,需要的就是一种成就感,但各有各的烦恼。人生就是享受这种欢乐与烦恼的。
------贾平凹《愿人生从容》

发布了28 篇原创文章 · 获赞 11 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_43353619/article/details/103092606