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)

1. item：当前元素
2. index：当前元素索引
3. 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) //false

1.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”