for...of 、 for...in , forEach、 map的区别

循环的几种常见用法

1、for…of ,for…in

var arr = [11,22,33];

var obj = {
  name: '张三',
  age: 17,
  action: {
    123: '123',
    456: '456'
  }
}

for(let i in arr){console.log(i)} // 打印：0，1，2
for(let i in obj){console.log(i)} // 打印：name，age，action

for(let i of arr){console.log(i)} // 打印：11，22，33
for(let i of obj){console.log(i)} // 报错：Uncaught TypeError: obj1 is not iterable

// Object.keys() 获取keys的集合，返回值是一个数组
console.log(Object.keys(obj))  // 打印：["0","1","2"]
console.log(Object.keys(obj1)) // 打印：["name","age","action"]

使用for…in循环时，获得的是数组的下标；使用for…of循环时，获得的是数组的元素值。
for...in 循环对象可以是数组，也可以是对象
for...of 循环对象是数组

2、forEach() 和 map()

forEach 就是一个循环，操作对象是数组

arr.forEach((currentValue,index,arr)=>{
 // do something
})

map也是一个循环，操作对象是数组

var newArr = arr.map((currentValue,index,arr)=>{})
// 返回一个新数组

forEach()会修改原来的数组。
而map()方法返回一个新的数组，原本的数组不受到影响。

示例

下方提供了一个数组，如果我们想将其中的每一个元素翻倍，我们可以使用map和forEach来达到目的。

let arr = [1, 2, 3, 4, 5];

arr.forEach((num, index) => {
  return arr[index] = num * 2;
});
// 结果：arr = [2, 4, 6, 8, 10]

let doubled = arr.map(num => {
  return num * 2;
});
// 结果：doubled = [2, 4, 6, 8, 10]
// arr = [1, 2, 3, 4, 5]

注意，forEach是不会返回有意义的值的。

我们在回调函数中直接修改arr的值。

哪个更好呢？

取决于你想做什么。

forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。

map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)来玩出更多的花样。

核心要点：
能用forEach()做到的，map()同样可以。反过来也是如此。