JavaScript中数组和对象的几种循环遍历

数组

1、forEach

let arr = [1, 2, 3, 4]
arr.forEach((item, index, arr) => {
	console.log(item, index, arr)
})

不改变原数组 不能跳出循环
接收三个参数，项目值、索引、数组本身

2、map

let arr = [1, 2, 3, 4]
arr.map((item, index, arr) => {
	console.log(item, index, arr)
})

不改变原数组 不能跳出循环
接收三个参数，项目值、索引、数组本身

3、filter

let arr = [1, 2, 3, 4]
arr.filter((item, index, arr) => {
	return item > 3
})

不改变原数组 不能跳出循环
接收三个参数，项目值、索引、数组本身
创建一个包含通过测试的数组元素的新数组。

4、reduce

let arr = [1, 2, 3, 4]
arr.reduce((total, item, index, arr) => {
	return total + item
})

不改变原数组 不能跳出循环
接收一个函数和一个初始值，初始值不填默认为数组第一项
函数接收四个参数，初始值/先前返回的值、项目值、索引、数组本身
返回一个计算后的值

5、every

let arr = [1, 2, 3, 4]
arr.every((item, index, arr) => {
	return item > 3
})

接收三个参数，项目值、索引、数组本身
检查所有数组值是否通过测试
返回 true 或 false

6、some

let arr = [1, 2, 3, 4]
arr.some((item, index, arr) => {
	return item > 3
})

接收三个参数，项目值、索引、数组本身
检查某个数组值是否通过测试，只要有一个通过 就为true
返回 true 或 false

7、find和findIndex

let arr = [1, 2, 3, 4]
arr.find((item, index, arr) => {
	return item > 3
})

接收三个参数，项目值、索引、数组本身
返回通过测试函数的第一个数组元素的值
findIndex返回通过测试函数的第一个数组元素的索引

8、循环数组

for…of

let arr = [{name: 1,age: 18}, {name: 'a', age: 90}]
for (let item of arr) {
  console.log(item)
}

只能取到数组的值
可以通过arr.entries()

let arr = [{name: 1,age: 18}, {name: 'a', age: 90}]
for (let [index, item] of arr.entries()) {
  console.log(item, index)
}

item 为 值，index为索引

对象

1、for…in

不建议使用（它总是会访问该对象的原型）遍历数组时，遍历顺序有可能不是按照实际数组的内部顺序

for (let key in obj) {
    console.log(obj[key])
}

2、Object.keys(obj)、Object.values(obj)、Object.entries(obj)

Object.keys(obj)：得到对象所有属性合成的数组
Object.values(obj)：得到对象所有值合成的数组
Object.entries(obj)：得到对象二维数组

let obj = {name: 'name', age: 18, desc:'好的', sex: 1}
console.log(Object.entries(obj))
// [ [ 'name', 'name' ], [ 'age', 18 ], [ 'desc', '好的' ], [ 'sex', 1 ] ]

for (let item of Object.entries(obj)) {
  console.log(item)
}
/*
[ 'name', 'name' ] 
[ 'age', 18 ]
[ 'desc', '好的' ]
[ 'sex', 1 ]
*/

可通过解构来获取key、value
for (let [key, value] of Object.entries(obj)) {
  console.log(key, value)
}
/*
name name
age 18
desc 好的
sex 1
*/