for、foreach、for in、for of 的区别

for

javascript 中的 for 循环，用来遍历数组

foreach

foreach 循环可以直接取到元素，同时也可以取到 index 值。但是 foreach 的局限是，不能 continue 跳过或者 break 终止循环。

let arr = [1,2,3,4];
arr.forEach(function (item, index, arr) { // item是当前元素，index是当前索引值，arr是当前元素所属的数组对象
    console.log("当前元素： " + item + " 当前元素的索引值: " + index);
    console.log("当前元素所属的数组对象: " + arr )
})
// 当前元素： 1 当前元素的索引值: 0
// 当前元素所属的数组对象: 1,2,3,4
// 当前元素： 2 当前元素的索引值: 1
// 当前元素所属的数组对象: 1,2,3,4
// 当前元素： 3 当前元素的索引值: 2
// 当前元素所属的数组对象: 1,2,3,4
// 当前元素： 4 当前元素的索引值: 3
// 当前元素所属的数组对象: 1,2,3,4

for in

for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性

可用于遍历数组和对象，只能获取对象的键名，不能获取键值

• 遍历数组时，item 表示索引值，arr 表示当前索引值对应的元素 arr [ item ]
• 遍历对象时，item表示key值，arr 表示 key 值对应的 value 值 obj [ item ]

for in 一般循环遍历的都是对象的属性，遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性

var obj = {a:1, b:2, c:3};    
for (let item in obj) {
  console.log("obj." + item + " = " + obj[item]);
}
// obj.a = 1
// obj.b = 2
// obj.c = 3
var arr = ['a','b','c'];
for (var item in arr) {
    console.log(item) //0 1 2
    console.log(arr[item]) //a b c
}

let arr = [1, 2, 3]
arr.set = 'world'  // 手动添加的键
Array.prototype.name = 'hello'  // 原型链上的键
 
for(let item in arr) {
  console.log('item', item)
}
 
/*
  item 0
  item 1
  item 2
  item set
  item name
*/
 
for(let value of arr) {
  console.log('value', value)
}
 
/*
  value 1
  value 2
  value 3
*/

for of

for of 允许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。

// 循环一个数组
let arr = ['A', 'B', 'C']
for (let val of arr) {
    console.log(val) 
}
// A B C

// 循环一个字符串
let iterable = "abc";

for (let value of iterable) {
  console.log(value);
}
// "a"
// "b"
// "c"

// 循环一个Map
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);    
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]


// 循环一个Set
let iterable = new Set([1, 1, 2, 2, 3, 3]);    
for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

如果要遍历对象，需要搭配内置的Object.keys()与 Object.values()方法适用，但遍历对象推荐使用for in

// 遍历属性
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
    console.log(o) // a,b,c,d
}
// 遍历值
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
    console.log(o) // 1,2,3,4
}

区别

• for…of 与 for…in 都支持continue、break、return，foreach 不支持；
• for…in 循环不仅遍历数字键名，还会遍历手动添加的其它键，甚至包括原型链上的键。for…of 则不会这样
• for in 循环出的是 key ，for of 循环出的是 value；
• 推荐在循环对象属性的时候使用 for in,在遍历数组的时候的时候使用 for of；
• 对于数组的空元素，
  • 对于['a',, 'c']，for/in与forEach会跳过空元素，而for与for/of则不会跳过。
  • 对于['a', undefined, 'c']，3 种循环语法一致，打印的都是"a, undefined, c"。
• 对于函数的this，for，for/in与for/of会保留外部作用域的this；对于forEach， 除非使用箭头函数，它的回调函数的 this 将会变化。