前言

数组、对象的遍历方法有很多种，我们在开发中该如何选择适合的方法，以下是我的开发经验总结，希望能帮到大家。

一、对数组进行遍历的各个方法的特点

forEach

特点
- 1. 可以对数组进行遍历不能遍历对象
- 1. 不可以使用break跳出循环
- 1. 返回值为undefined

语法

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])，这里需要注意currentValue是引用类型还是值类型即：currentValue 为 '123'或 {id: '123'}时，对原数组的操作结果将会不一样，如下：

const array = ['火锅', '烧烤', '炸鸡']
array.forEach(arrayItem => arrayItem = `吃${arrayItem}`)
// 打印结果["火锅", "烧烤", "炸鸡"]
console.log(array)

const array = [{id: '火锅'}, {id: '烧烤'}, {id: '炸鸡'}]
array.forEach(arrayItem => arrayItem.id = `吃${arrayItem.id}`)
// 打印结果[{id: '吃火锅'}, {id: '吃烧烤'}, {id: '吃炸鸡'}]
console.log(array)

filter

特点
- 1. 可以对数组进行遍历不能遍历对象
- 1. 不可以使用break跳出循环
- 1. filter会遍历整个数组
- 1. 返回一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组
```
let array = ['火锅', '烧烤', '炸鸡']
let newArray = array.filter(arrayItem => arrayItem === '烧烤')
// 打印结果['烧烤']
console.log(newArray)
```
语法
- var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

map

特点

1. 可以对数组进行遍历不能遍历对象
1. 不可以使用break跳出循环
1. 返回一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

let array = ['火锅', '烧烤', '炸鸡']
let newArray = array.map(arrayItem => arrayItem = `吃烧烤`)
// 打印结果["吃烧烤", "吃烧烤", "吃烧烤"]
console.log(newArray)

语法
- var new_array = arr.map(function callback(currentValue[, index[, array]]) {// Return element for new_array }[, thisArg])

for

特点
- 1. 可以对数组进行遍历不能遍历对象
- 1. for语句是前测试循环语句，只有当条件表达式达到情况下，才会进去for循环，因此也有可能永远不会执行循环体的代码。
- 1. 可以使用break跳出循环
- 1. 执行语句是没有返回值的
语法
- for ([initialization]; [condition]; [final-expression])statement

findIndex

特点
- 1. 返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
- 1. 不可以使用break跳出循环
- 1. findIndex找到符合条件的item, 就不会再继续遍历数组
```
let ages = [{id: 4}, {id: 2}, {id: 19}, {id: 14}];
let index = ages.findIndex((value) => value.id === 14)
// 打印结果3
console.log(index)
```
语法
- arr.findIndex(callback[, thisArg])

find

特点
- 1. 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
- 1. 不可以使用break跳出循环
- 1. find找到符合条件的item, 就不会再继续遍历数组
```
let ages = [{id: 4}, {id: 2}, {id: 19}, {id: 14}];
let index = ages.find((value) => value.id === 14)
// 打印结果{id: 14}
console.log(index)
```
语法
- arr.find(callback[, thisArg])

some

特点

1. 遍历数组，若有某个元素满足条件，则跳出循环返回true, 否则返回false。

let array = ['火锅', '烧烤', '炸鸡']
let test = array.some(arrayItem => arrayItem === '烧烤')
let test2 = array.some(arrayItem => arrayItem === '冰淇淋')
// 打印结果true, false
console.log(test, test2)

语法
- arr.some(callback(element[, index[, array]])[, thisArg])

includes

特点
- 1. 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。
```
  let array = [1, 2, 3];
  // 打印结果true
  console.log(array.includes(2));
```
语法
- arr.includes(valueToFind[, fromIndex])

every

特点

1. 遍历数组，数组每个元素都满足条件，返回true反之返回false。

let array = ['火锅', '烧烤', '炸鸡', 11]
let array2 = ['火锅', '烧烤', '炸鸡']
let test = array.every(arrayItem => typeof arrayItem === 'string')
let test2 = array2.every(arrayItem => typeof arrayItem === 'string')
// 打印结果false, true
console.log(test, test2)

语法
- arr.every(callback(element[, index[, array]])[, thisArg])

flat

特点
- 1. flat() 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

     const arr1 = [1, 2, [3, 4]];
     arr1.flat();
     // [1, 2, 3, 4]

     const arr2 = [1, 2, [3, 4, [5, 6]]];
     arr2.flat();
     // [1, 2, 3, 4, [5, 6]]

     const arr3 = [1, 2, [3, 4, [5, 6]]];
     arr3.flat(2);
     // [1, 2, 3, 4, 5, 6]

     //使用 Infinity，可展开任意深度的嵌套数组
     const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
     arr4.flat(Infinity);
     // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

语法
- var newArray = arr.flat([depth]), depth指定要提取嵌套数组的结构深度，默认值为 1, depth为Infinity，则可展开任意深度的嵌套数组

二、可对数组 || 对象 || Map || Set进行遍历的各个方法的特点

for in

特点

1. 以任意顺序遍历一个对象的除Symbol以外的可枚举属性。（所以既可用于遍历数组又可用于遍历对象）
1. for...in不应该用于迭代一个关注索引顺序的 Array(简而言之: 不建议与数组一起使用)
1. 可以使用break跳出循环

Array.prototype.ArrayName = "cat";
const arr = [1, 2, 3];
arr.name = "Hello cat";
for(let index in arr) {
  // 打印结果 0 1 2 name ArrayName(for-in 遍历了对象的所有属性，而不仅仅是“索引”)
  console.log(index);
}

1. 遍历原型和实例中可以通过对象访问的可枚举的属性

Object.prototype.age = '16';
let person = {
   name: 'nacy',
   sex: '女'
};
for(let key in person)
{
   // 打印结果 name sex age
   console.log(key);
}

语法
- for (variable in object)statement

for of

特点

1. 遍历对象范围包括数组、Set 和 Map 结构等。
1. 可以使用break跳出循环

 let array = ['火锅', '烧烤', '炸鸡']
 for(let item of array) {
 if(item === '炸鸡') break;
 // 打印结果火锅 烧烤
 console.log(item)
 }

1. 获取下标

 let array = ['火锅', '烧烤', '炸鸡']
 for(let item of array.keys()) {
 // 打印出 0 1 2
 console.log(item)
 }

1. 获取下标和值

  let array = ['火锅', '烧烤', '炸鸡']
 for(let item of array.entries()) {
 // 打印结果 [0, '火锅'] [1, '烧烤'] [2, '炸鸡']
 console.log(item)
 }

语法
- for (variable of iterable) { //statements }

三、对象进行遍历的各个方法的特点

Object.keys()

特点

1. 返回一个由一个给定对象的自身可枚举属性组成的数组
1. 只遍历实例自身可枚举属性

Object.prototype.age = '16';
let person = {
	name: 'nacy',
 	sex: '女'
};
// 输出结果['name', 'sex']
Object.keys(person)

Object.values()

特点

1. 返回一个给定对象自身的所有可枚举属性值的数组
1. 只遍历实例自身可枚举属性

Object.prototype.age = '16';
let person = {
	name: 'nacy',
 	sex: '女'
};
// 输出结果['nacy', '女']
Object.values(person)

Object.entries()

特点

1. 返回一个给定对象自身可枚举属性的键值对数组
1. 只遍历实例自身可枚举属性

Object.prototype.age = '16';
let person = {
	name: 'nacy',
 	sex: '女'
};
// 输出结果[['name', 'nacy'], ['sex', '女']]
Object.entries(person)

最后

感谢大家阅读，如有问题欢迎纠正！

数组、对象的遍历总结

前言

一、对数组进行遍历的各个方法的特点

forEach

filter

map

for

findIndex

find

some

includes

every

flat

二、可对数组 || 对象 || Map || Set进行遍历的各个方法的特点

for in

for of

三、对象进行遍历的各个方法的特点

Object.keys()

Object.values()

Object.entries()

最后