JavaScript遍历方式总结
目录
一、数组遍历方法
1.1for循环
1.2for...of循环
1.3forEach
1.4map方法
1.5filter方法
1.6reduce方法
1.7some方法
1.8every方法
二、对象遍历方法
2.1for...in方法
2.2values、keys方法
2.3entries方法
一、数组遍历方法
1.1for循环
最普通的循环：
data = [1,2,3,4,5]
for(let i = 0; i < data.length; i++){
console.log(data[i]);
}- 通过指定：“起始条件”、“终止条件”、“迭代步长”来循环
可以遍历用的对象为：“数组”、“字符串”、“类数组对象”
1.2for...of循环
直接遍历数组元素的值，避免索引访问
const data = [1,2,3,4,5]
for (const item of data){
console.log(item);
}可以遍历用的对象为：“数组”、“字符串”、“Set”、“Map”、“Generator函数生成器”
1.3forEach
data.forEach(item,index,list)
- item：当前元素
- index：当前元素索引
- list：整个遍历对象
对数组的每个元素进行一次函数操作，没有返回值，主要遍历并执行某些操作
const data = [1,2,3,4,5]
data.forEach((item) => {
console.log(item)
})可以遍历的对象为：“数组”
1.4map方法
创建一个新数组，新数组中的元素是旧数组中每个元素进行函数操作后的返回值
- 不会改变原数组，会创建一个新数组
const data = [1,2,3,4,5]
const arr = data.map((item) => {
return item * 2
})
console.log(arr)可以遍历的对象为：“数组”
1.5filter方法
创建一个新数组，新数组中的元素为旧数组中符合条件的元素。
- 不会改变原数组，会创建一个新数组
const data = [1,2,3,4,5]
const arr = data.filter((item) => {
return item % 2 == 0
})
console.log(arr)可以遍历的对象为：“数组”
1.6reduce方法
对数组中的每个元素进行累积计算(求和、乘积)，将每个元素依次传入回调函数，并将上次计算结果作为下一次的参数
reduce((total,current,index,list),init)
- total：初始值，在每次迭代中存储上次计算的结果
- current：当前元素
- index：当前元素索引
- list：整个数组对象
- init：初始值，给定该值后数组将从第一个元素开始累积，total初始化为init。若不给定该值，total默认为元素第一个值，并且从第二个元素开始迭代。
可以遍历的对象为：“数组”
1.7some方法
判断数组中是否有某个元素满足条件，只要有一个满足就返回True，否则返回False
const data = [1,2,3,4,5]
const flag = data.some((item) => item > 6)
console.log(flag) //false1.8every方法
判断数组中是否全部元素满足条件，只要有一个不满足就返回False，否则返回True
const data = [1,2,3,4,5]
const flag = data.every((item) => item > 0)
console.log(flag) //true二、对象遍历方法
2.1for...in方法
遍历对象自身可枚举属性以及原型链继承的可枚举属性
- 遍历属性的顺序是不确定的，会因为不同环境或对象结构而有所不同
- 需要结合hasOwnproperty方法判断是否为对象自身属性
在这里有个坑，在打印时不能使用data.key只能用data[key]
因为data.key查找对象时，是根据属性名查找不是变量的值查找，因此会去查找data中名为“key”的属性
const data = {
name:'John',
age:30
}
for (const key in data){
console.log(key,data[key]) //name John, age 30
}
for (const key in data){
console.log(key,data.key) //name undefined age undefined
}
可以遍历的对象为：“数组”(不推荐) 、“对象”
2.2values、keys方法
Object.keys(obj)返回obj对象的键组成的一个迭代器
Object.values(obj)返回obj对象的值组成的一个迭代器
const data = {
name:'John',
age:30
}
Object.keys(data).forEach(key => console.log(key)) // ['name', 'age']
Object.values(data).forEach(key => console.log(key)) // ['John', 30]可以遍历的对象为：“数组” 、“对象”、“Map”、“Set”(只有values可以)
2.3entries方法
Object.entries(obj)返回对象的“键、值”对
const data = {
name:'John',
age:30
}
Object.entries(data).forEach(([key,value]) => console.log(key,value)) //name John age 30可以遍历的对象为：“数组” 、“对象”、“Map”