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]
- 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 迭代该对象属性时一致。数组中不可枚举属性的顺序未定义
再就是我今天无意中看到了一句很好的话,给大家分享一下:
作为一个人,不论从事什么工作,尽心尽力,需要的就是一种成就感,但各有各的烦恼。人生就是享受这种欢乐与烦恼的。
------贾平凹《愿人生从容》