forEach for...in for...of

forEach

orEach 方法为数组中含有有效值的每一项执行一次 callback 函数，那些已删除（使用 delete 方法等情况）或者从未赋值的项将被跳过（不包括那些值为 undefined 或 null 的项）

callback函数会被依次传入三个函数：

• 数组的当前项的值

• 数组当前项的索引

• 数组对象本身

let arr = ['a','b','c'];
arr[3] = 'd';
arr.name = 'Tom';
arr.forEach((value,index,data)=>{
console.log(value,index,data)
})
//a 0 ["a", "b", "c", "d", name: "Tom"]
//b 1 ["a", "b", "c", "d", name: "Tom"]
//c 2 ["a", "b", "c", "d", name: "Tom"]
//d 3 ["a", "b", "c", "d", name: "Tom"]

let arr = [{name:'Jack',age:12},{name:'Lucy',age:9},{name:'Tom',age:15}];
arr[3] = 'd';
arr.name = 'Tom';
arr.forEach((value,index,data)=>{
console.log(value,index,data)
})
//{name:'Jack',age:12} 0 [{name:'jack',age:12},{name:'lucy',age:9},{name:'Tom',age:15},'d',name:'Tom']
//{name:'Lucy',age:9} 1 [{name:'jack',age:12},{name:'lucy',age:9},{name:'Tom',age:15},'d',name:'Tom']
//{name:'Tom',age:15} 2 [{name:'jack',age:12},{name:'lucy',age:9},{name:'Tom',age:15},'d',name:'Tom']
//d 3 [{name:'jack',age:12},{name:'lucy',age:9},{name:'Tom',age:15},'d',name:'Tom']

缺点：不能跳出forEach循环，break命令与return命令都不能奏效

for...in...

Array.prototype.age = 18;
let arr = [1,2,3];
arr[3] = 4;
arr.name = 'Jack';
for(let index in arr){
console.log('arr['+index+'] = '+arr[index])
}
//arr[0] = 1
//arr[1] = 2
//arr[2] = 3
//arr[3] = 4
//arr[name] = Jack
//arr[age] = 18

缺点：

• 数组的键名是数字，但是for...in循环是以字符串作为键名“0”，“1”，“2”等等

• for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键

• 某些情况下，for...in循环会以任意顺序遍历键名

for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

补充：

• for-in 循环遍历的是对象的属性，而不是数组的索引
• Array 在 Javascript 中是一个对象， Array 的索引是属性名
• for-in 遍历属性的顺序并不确定，即输出的结果顺序与属性在对象中的顺序无关，也与属性的字母顺序无关，与其他任何顺序也无关

for...of...

Array.prototype.age = 18;
let arr = [1,2,3];
arr[3] = 4;
arr.name = 'Jack';
for(let index of arr){
console.log(index)
}
//1
//2
//3
//4

优点：

• 有着同for...in一样的简介语法，但是没有for...in那些缺点

• 不同于forEach方法，他可以与break、continue、return配合使用

• 提供了遍历所有数据结构的统一操作接口

补充：

for...in循环的是key for...of循环的是value