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 语句遍历可迭代对象定义要迭代的数据。