JS中 forEach、for...in、for...of 的区别

for循环：JS最原始的遍历，它用来遍历数组
注意：for循环中可以使用return、break等来中断循环

一、forEach

对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，若直接打印arr.forEach，结果为undefined

const arr=['小红','倪大红','苏大强','宝宝']
// forEach循环一旦开始，无法在中间被停止
arr.forEach((item,index)=>{
		console.log(item,index)
})

二、for…in

遍历数组或者对象【主要遍历对象，不建议遍历数组】

1.遍历数组：输出的 key 是数组索引
2.遍历对象：key为对象的属性名，obj[key]为属性值

// 遍历对象
let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let key in obj) {
    console.log(key)       //遍历的实际上是对象的属性名 a,b,c,d
    console.log(obj[key])  //这个才是属性对应的值1，2，3，4
}

// 遍历数组
let arr=['apple','banana','orange'];
for(let key in arr) {      //key中是索引
  console.log(key,arr[key]);
}
// 0 apple
// 1 banana
// 2 orange

三、for…of

ES6新增加的语法，是interator的语法糖，用于遍历可迭代（iterable）对象【注意：遍历的是对象本身的元素】

js中的可迭代对象有Set、Map、字符串、数组，arguments 对象，但不能遍历对象

1.遍历数组：

let arr = ['China', 'America', 'Korea']
for (let value of arr) {
    console.log(value) //China, America, Korea
}

2.遍历一个普通对象（报错）

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let key of obj) {
    console.log(key)   //Uncaught TypeError: obj[Symbol.iterator] is not a function
}

原因：一个数据结构只有部署了 Symbol.iterator 属性, 才具有 iterator接口，可以使用 for…of循环（for…of原理：内部调用数据结构内部的Symbol.iterator 属性）。上述的obj对象没有Symbol.iterator属性，所以会报错。

如果想用for…of遍历对象：

• 使用 Object.keys() 获取对象的 key值集合后，再使用 for…of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let value of Object.keys(obj)) {
    console.log(value) // a,b,c,d
}

• 或使用Object.values()方法获取对象的value值集合再使用 for…of

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let value of Object.values(obj)) {
    console.log(value) // 1,2,3,4
}

3.遍历一个Map（存储带键的数据的集合，允许任何类型的键）：

let reciprMap = new Map([
	['cucumber', 500],
	['tomatoes', 350], 
	['onion', 50]
]);

for (let [key,value] of reciprMap) {
  console.log(value);
}
// 500
// 350
// 50

4.遍历一个Set（存储值的集合，每个值只能出现一次）：

let reciprSet = new Set(['cucumber','tomatoes','onion']);

for (let value of reciprSet) {
  console.log(value);
}
// cucumber
// tomatoes
// onion

5.遍历一个字符串：

let str = 'love'
for (let value of str) {
    console.log(value) // l,o,v,e
}