javascript数组的几种遍历方式

数组遍历

1. for循环
2. for...of
3. forEach
4. 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，那么在遍历的时候也会将它展示出来，而一般情况下是不需要显示的。

当然如果你需要展示出当前对象所有的内置属性，就可以用这个方法。