forEach、for in、for of的区别对比

其实这三个方法我们在项目中经常用到，但是如果要你说出这三者的区别和各自的特点是什么？我想肯定会有人会卡住在这了。反正我是被卡住了(此处手动狗头)，下面就来记录下这三者的区别和用法吧

一、forEach介绍

forEach详细的介绍查看这里

1.forEach() 方法对数组的每个元素执行一次给定的函数。

const arr = [1,2,3];
arr.forEach(callback) //callback表示指定的函数
callback(currentValue,index,[])

2.forEach执行后的返回值为undefined

//返回值为undefined
const arr = [1,2,3]
const temp_arr = arr.forEach(function(item){
	return item*2
}) 
temp_arr //undefined

3.forEach不改变原数组

const arr = [1,2,3]
const temp_arr = arr.forEach(function(item){
	return item*2
}) 
arr //[1,2,3]

4.forEach循环不会被中断

const arr = [1,2,3];
let count = 0;
arr.forEach(function(item){
	if(item % 2 === 0){
		return;
	}
	count++;
})
//如果可以中断的话，此时的count应为1,而运行结果为2
count // 2

5.想要实现返回筛选的结果可以结合filter

//找出能被2整除的数
const arr = [1,2,3,4,5,6,7,8,9];
const arr_temp = [];
arr.filter(item => item%2 === 0).forEach(item => {
	//此处写要处理的逻辑
	arr_temp.push(item)
})
arr_temp//[2,4,6,8]

二、for in

for in详细的介绍查看这里

1.以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

const arr = [1,2,3]
for(key in arr) {
	console.log(key)
}
// 0,1,2 为数组的下标值
let str = "hello";
for(key in str){
	console.log(key)
}
//0,1,2,3,4 为str的下标
const person = {
	name:"ssypp",
	sex:"男"
}
for(key in person){
	console.log(key)
}
//name,sex 为对象的键值
//想要获取对应的值可以使用中括号的形式
//arr[key]
//str[key]
//person[key]

2.for…in不应该用于迭代一个 Array，其中索引顺序很重要。

for ... in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for ... of

3.for in的应用

它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）
########################################
在处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用for ... in

三、for of

for of详细介绍查看这里

1.迭代一个可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）的，为每个不同属性的值执行语句

//array
let iterable = [10, 20, 30];
for (let value of iterable) {
    console.log(value);
}
//string
let iterable = "boo";
for (let value of iterable) {
  console.log(value);
}
...

2.for…of与for…in的区别

无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以任意顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。