JS中for,for...in,for...of和forEach的用法和区别

文章的开头先提个问题：JS中你能想到的遍历数组和对象的方法有哪些？

for,for...in,for...of,forEach，在有些情况下我们还可以使用map()方法遍历数组

平时我们可能只是知道怎么用，但是对于它们之间的区别可能一知半解，接下来我们花点时间来总结一下：

1、for循环

 for(初始化变量;条件表达式;操作表达式){   
        循环体语句;
    }

普通for循环在Array和Object中都可以使用。for循环中可以使用return、break等来中断循环。

//遍历数组
var arr = [1,2,3,4,5];
for(var i=0;i<arr.length;i++){
    console.log(arr[i]);
}

//遍历对象
var obj={
   x0:10,
   x1:20,
   x2:30
}
for(var k=0;k<3;k++){
    console.log(obj['x'+k]);
}

在遍历对象时，显然存在着很大的限制，对属性的命名和k的值都存在限制。

2、forEach

[ ].forEach(function(value,index,array){
　　　　//code here
});

依次从数组中取出元素放在k中,然后将k作为参数传递给函数
.forEach()是Array原型的一种方法，它允许您遍历数组的元素， .forEach()不能遍历对象。forEach 方法没办法使用 break 语句跳出循环，或者使用return从函数体内返回。

var c = ['G','H','I']
c.forEach(function(value,index,array){
    console.log(value);
    console.log(index);
    console.log(array);
})

3、for...in

for(var 变量  in  数组名或集合名)
   {
      数组名[变量]
   }

变量中存放的数组或集合的索引而不是值！

//遍历数组
var arr = ['A','B','C'];
arr.name = "Hello"
//js里万物皆对象，arr数组虽然增加了一个name属性，但是打印输出的时候数组的长度仍然为3
console.log(arr);
for(let i in arr){
	console.log(arr[i]);
}

输出结果：

//遍历对象
var obj={
    x0:10,
    x1:20,
    x2:30
}
for(var k in obj){
    console.log(obj[k]);
}

1.下标的值可能会是字符串（String）类型
2.循环不仅会遍历数组元素，还会遍历任意其他自定义添加的属性，如，obj上面包含自定义属性obj.name，那这次循环中也会出现此name属性
3.某些情况下，上述代码会以随机顺序循环数组，for-in循环设计之初，是给普通以字符串的值为key的对象使用的。而非数组。

4、for...of

for(var 变量 of 数组名或集合名)
{
    console.log(变量);
}

变量中存放的是数组或集合中的元素。

//遍历数组
var arr = [3,2,3,9,5];
for(var value of arr){
   console.log(value);
}

//遍历对象
var obj={
     x:10,
     y:20,
     z:30
 }
 for(var k of Object.entries(obj)){
     console.log(k);
 }

obj对象经过entries方法后变成了：大数组每一项存的是包含键值对的一个小数组

所以我们对大数组进行for…of遍历就会得到：

entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。
迭代对象中数组的索引值作为 key， 数组元素作为 value。
1.可以避免所有 for-in 循环的陷阱
2.不同于 forEach()，可以使用 break, continue 和 return
3.for-of 循环不仅仅支持数组的遍历。同样适用于很多类似数组的对象
4.它也支持字符串的遍历
5.for-of 并不适用于处理原有的原生对象

总结

1.'for…in’用于迭代对象的所有’可枚举’属性，包括继承的可枚举属性, 该迭代语句可用于数组字符串或普通对象，但不能用于Map或Set对象
2.'for…of’用于’可迭代’对象，迭代其值而不是其属性，该迭代语句可以与数组，字符串Map或Set对象一起使用，但不能与普通对象一起使用。

5、map方法

MDN对于map方法的解释是：

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

var array1 = [1,4,9,16];
const map1 = array1.map(x => x *2);
console.log(map1);

输出结果为：

> Array [2,8,18,32]

而我这样写时：

var array1 = [1, 4, 9, 16];
 
const map1 = array1.map(x => {
    if (x == 4) {
        return x * 2;
    }
});
 
console.log(map1);

输出结果为：

> Array [undefined, 8, undefined, undefined]

为什么会出现三个undefined呢？而不是预期的[1,8,9,16]呢？

这样写只是增加了一个条件，即x的值为4时才乘以2，之所以会出现undefined，是因为map()方法创建了一个新数组，但新数组并不是遍历一次array1赋一次值的，而是每遍历完一次数组就得到一个值。所以，下面这样修改后就正确了：

var array1 = [1, 4, 9, 16];
 
const map1 = array1.map(x => {
    if (x == 4) {
        return x * 2;
    }
    return x;
});

这里注意箭头函数有两种格式：
1.只包含一个表达式，这时花括号和return都省略了。
2.包含多条语句，这时花括号和return都不能省略。