js数组的遍历 - HelloWorld开发者社区

js中数组的遍历

1. Map()方法

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

语法:

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

案例

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

2.forEach（）方法

语法：

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

案例：遍历数组对象

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

案例：遍历普通的数组

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

forEach()和map()的区别：

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

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

3.for... in 方法

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

案例：

``//遍历数组
const arr = [1111, 2222, 3333];
for (let i in arr) {
 console.log(`索引：${i}  -------  值:${arr[i]}`);
}
console.log("--------漂亮的分割线-------");
//遍历对象
let obj = {
 userName: 'symbol卢',
 age: 18,
 sex:"男"
};
for (let i in obj) {
 console.log(`key:${i}   -----  value: ${obj[i]}`)
}``

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

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

4.for…of 方法

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

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

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

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

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

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

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

6.filter 过滤器函数

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

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

7.some() 方法

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

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

8. every() 方法

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

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

js数组的遍历

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

9. find() 方法

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

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

js数组的遍历

10.findIndex()方法

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

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