数组遍历
- for循环
- for...of
- forEach
- for...in
我自己在处理数组数据时有时候会出现“for...in for...of,查查分不清楚”的情况,趁着看js MDN文档的功夫,就来记录一下数组遍历的几种方式。
参考文档
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/A_re-introduction_to_JavaScript
var array = [
{name:"赵云",age:18},
{name:"张飞",age:19},
{name:"孙悟空",age:500},
{name:"曹操",age:100}
];
Array.prototype.sex={
name:"猪八戒",
age:108
}
console.log(array);
//第一 for循环
console.log("-------------for循环------------");
for(var i = 0;i<array.length;i++){
console.log(`第${i+1}个是${array[i].name},今天${array[i].age}岁了`);
}
//for...of 遍历的是每一项元素
console.log("---------for...of---------------");
for(var item of array){
console.log(`第${array.indexOf(item)+1}个是${item.name},今天${item.age}岁了`);
}
//forEach
console.log("--------------forEach----------------------");
array.forEach(function(cur){//function 可以有三个参数,顺序function(cur,index,array)。cur当前元素,index索引,array遍历的数组
console.log(`第${array.indexOf(cur)+1}个是${cur.name},今天${cur.age}岁了`);
})
//for... in 遍历的是索引
console.log("--------------for... in----------------------");
for(var item in array){
console.log(`第${(item)}个是${array[item].name},今天${array[item].age}岁了`);
}
运行结果贴图:
总结:
当输出array的时候,并不会把挂在prototype上的sex属性输出,所以前三种遍历方式是符合的。
一般并不推荐使用for...in遍历数组,因为如果在开发过程中其他小伙伴直接在Array.prototype
上添加了新的属性,例如例子中的sex,那么在遍历的时候也会将它展示出来,而一般情况下是不需要显示的。
当然如果你需要展示出当前对象所有的内置属性,就可以用这个方法。