其实这三个方法我们在项目中经常用到,但是如果要你说出这三者的区别和各自的特点是什么?我想肯定会有人会卡住在这了。反正我是被卡住了(此处手动狗头),下面就来记录下这三者的区别和用法吧
一、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
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
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 语句遍历可迭代对象定义要迭代的数据。