js数组的遍历

1,443 阅读4分钟

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)=>{
   return 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:当前遍历的数组本身(可选)

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

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:当前遍历的数组本身(可选)

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:当前遍历的数组本身(可选)