js数组的遍历

js中数组的遍历

1. Map()方法

Map 映射的意思，可以看做是一个映射函数，所谓的映射。一个萝卜一个坑，一一对应的关系；

语法:

1`const arr=Array();
2arr.map((item,index,arr)=>{
3 //函数体
4 return   ;
5});
6//参数1：数组中的每一项(必选)
7//参数2：索引(可选)
8//参数3：当前遍历的数组本身(可选)
9//注意，map()不能对空的数组进行操作`

案例

1`const arr=[1,2,3,4];
2const arr2=arr.map((item)=>{
3 item+1;
4});
5console.log(arr2);`

2.forEach（）方法

语法：

1`const arr = [11,22,33,44,55,66,77,88];
2arr.forEach((item,index,arr)=>{
3 });
4//参数1：数组中的每一项(必选)
5//参数2：索引(可选)
6//参数3：当前遍历的数组本身(可选)`

案例：遍历数组对象

1`const arr = [
2 {id:1,title:'标题1标题1标题1'},
3 {id:2,title:'标题2标题2标题2'},
4 {id:3,title:'标题3标题3标题3'}
5 ];
6arr.forEach((item)=>{
7 console.log(item.id+ '---' +item.title)
8})`

案例：遍历普通的数组

1``const arr = [11,22,33,44,55,66,77,88];
2arr.forEach((item,index)=>{
3 console.log(`${item}-----${index+1}`);
4})``

forEach()和map()的区别：

1、forEach()：用来遍历数组中的每一项，这个方法执行没有返回值，不影响原数组

2、map()：相当与原数组克隆了一份，对克隆的数据进行操作，需要return, 返回一个新的数组，不影响原数组

3.for... in 方法

for...in既可以遍历数组，也可以遍历对象

案例：

1``//遍历数组
2const arr = [1111, 2222, 3333];
3for (let i in arr) {
4 console.log(`索引：${i}  -------  值:${arr[i]}`);
5}
6console.log("--------漂亮的分割线-------");
7//遍历对象
8let obj = {
9 userName: 'symbol卢',
10 age: 18,
11 sex:"男"
12};
13for (let i in obj) {
14 console.log(`key:${i}   -----  value: ${obj[i]}`)
15}``

for...in 在**遍历数组的时候，变量 i 指的是数组的索引**

for...in在遍历对象的时候，变量 i 指的是 对象的 key

4.for…of 方法

for...of遍历数组，遍历的是数组的 value (每一项)

1`const arr = [1111, 2222, 3333];
2for (let i of arr) {
3 console.log(i);
4}`

for...in 和 for..of的区别：

1，for..in既可以遍历数组，也可以遍历对象，在遍历数组的时候 i表示的是数组的索引，遍历对象的时候，遍历的是对象的key

2，for...of只能遍历数组，不能遍历对象,遍历数组的时候，i 表示的是数组的值

5.for 循环（最常见的循环）

1`const arr = [1111, 2222, 3333];
2for(let i=0;i<arr.length;i++){
3 console.log(arr[i]);
4}
5//优化   使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显
6var arr = [1111, 2222, 3333];
7var len = arr.length;
8for(var i = 0; i < len; i++) {
9 console.log(arr[i]);
10}`

6.filter 过滤器函数

遍历数组，过滤出符合条件的元素并返回一个新数组

1`const arr = [
2 { id: 1, name: '电脑', active: true },
3 { id: 2, name: '手机', active: true },
4 { id: 3, name: '数码相机', active: false },
5 { id: 4, name: 'U盘', active: true },
6 { id: 5, name: '机械键盘', active: false }
7];  
8const newArr = arr.filter((item, index,arr)=>{
9 return item.active;
10});
11console.log(newArr);
12//参数1：数组中的每一项(必选)
13//参数2：索引(可选)
14//参数3：当前遍历的数组本身(可选)`

7.some() 方法

****** 遍历数组，数组中只要有一个元素满足条件就返回 true 并且终止遍历，否则返回 false;

1`const arr = [
2 { id: 1, name: '电脑', active: false },
3 { id: 2, name: '手机', active: true },
4 { id: 3, name: '数码相机', active: false },
5 { id: 4, name: 'U盘', active: true },
6 { id: 5, name: '机械键盘', active: false }
7];   
8const res = arr.some((item, index,arr)=>{
9 return item.active;
10});
11console.log(res);
12//参数1：数组中的每一项(必选)
13//参数2：索引(可选)
14//参数3：当前遍历的数组本身(可选)`

8. every() 方法

****** 遍历数组，数组中的每一个元素都满足条件则返回 true，否则返回 false

1`const arr = [
2 { id: 1, name: '电脑', active: true },
3 { id: 2, name: '手机', active: true },
4 { id: 3, name: '数码相机', active: false },
5 { id: 4, name: 'U盘', active: true },
6 { id: 5, name: '机械键盘', active: false }
7]; 
8const res = arr.every((item, index,arr)=>{
9 console.log(item);
10 console.log(index);
11 console.log(arr);
12 return item.active;
13});
14console.log(res);
15//参数1：数组中的每一项(必选)
16//参数2：索引(可选)
17//参数3：当前遍历的数组本身(可选)`

在遍历的过程中，元素满足条件，则会继续向下遍历，如果不满足条件，则会终止循环

9. find() 方法

****** 遍历数组，返回满足条件的第一个元素后终止循环，如果没有符合条件的元素则返回 undefined

1`const arr = [
2 { id: 1, name: '电脑', active: false },
3 { id: 2, name: '手机', active: true },
4 { id: 3, name: '数码相机', active: true },
5 { id: 4, name: 'U盘', active: true },
6 { id: 5, name: '机械键盘', active: false }
7];  
8const res = arr.find((item,index,arr)=>{
9 return item.active;
10});
11console.log(res);
12//参数1：数组中的每一项(必选)
13//参数2：索引(可选)
14//参数3：当前遍历的数组本身(可选)`

10.findIndex()方法

遍历数组，返回满足条件的第一个元素的 **索引 ** 后终止循环，如果没有符合条件的元素则返回 -1

1`const arr = [
2 { id: 1, name: '电脑', active: false },
3 { id: 2, name: '手机', active: true },
4 { id: 3, name: '数码相机', active: true },
5 { id: 4, name: 'U盘', active: true },
6 { id: 5, name: '机械键盘', active: false }
7];  
8const res = arr.findIndex((item,index,arr)=>{
9 return item.active;
10});
11console.log(res);//1
12//参数1：数组中的每一项(必选)
13//参数2：索引(可选)
14//参数3：当前遍历的数组本身(可选)`