当前位置：首页 > news >正文

web中的循环遍历

news 2025/9/11 9:50:33

转载自：咸虾米循环遍历

for与forEach比较

1：两者概念

1：for循环是常规通用的一种循环方式，map，filter等都可以通过for循环完成
2：forEach方法是一个高阶函数，会引入额外的函数调用开销【细小，不是很明显】

2：比较

2.1:性能比较

for > forEach
1：for循环直接操作索引，没有额外的函数调用和上下文【性能快】
2：for可是使用break终止，forEach不支持跳出循环【支持return，跳出本次循环，类似于for循环中的continue】

2.2异步同步化支持度

1：都支持异步同步化
2：使用for进行异步同步化操作，查询效率非常低，建议使用map+promise.all实现方法

Array方法

1：map( )方法

map( )方法时数组原型的一个函数
对数组遍历不破坏原数组，将会创建一个新数组，按照原始数组元素顺序依次执行给定函数
map方法非常适合用于处理数组中的每个元素并生成新的数组

在这里插入图片描述

// 使用样例
let arrs = [{name:"华为",price:6999},{name:"苹果",price:9888},{name:"小米",price:4999}]
let newArrs = arrs.map(item=>item.name);
console.log(newArrs);// ['华为', '苹果', '小米']

let arrs = [{key:0,content:"篮球"},{key:1,content:"足球"},{key:2,content:"排球"}];
let newArrs = arrs.map(({key,content})=>({value:key,text:content}));
console.log(newArrs);// [{value: 0, text: '篮球'},{value: 1, text: '足球'},{value: 2, text: '排球'}]

// 将异步请求的数据到新数组中，使用promise.all同时处理多个promise
let arrs = Array.from({length:3},(_,index)=>index+1);
const promises = arrs.map(async (num) => {const result = await uni.request({url:"http://jsonplaceholder.typicode.com/posts/"+num})return result;
});
Promise.all(promises).then(res=>{console.log(res);
})

2：filter( )方法

filter( )过滤方法，会对原数组中的每个元素应用指定的函数，并返回一个新数组，其中包含符合条件的元素。原数组不会受到影响。

在这里插入图片描述

let arrs = [5,7,8,15,22,1,2];
let newArrs = arrs.filter(item=>{return item>10
})
console.log(newArrs);// [15,22]

// 去重
let arrs = [6,1,2,3,5,3,6];
let newArrs = arrs.filter((item,index,self)=>{return self.indexOf(item) === index
})
console.log(newArrs);// [6, 1, 2, 3, 5]

// filter和map组合使用，使用链式调用写法
// 去除无用数据，后给每一条增加一个属性
let arrs = [{id:1,name:"HTML5"},{id:2,name:"JavaScript"},{id:null,name:"小程序"},{name:"NodeJS"},{id:3,name:"VueJS"}];
let newArrs = arrs.filter(item=>{return item.id
}).map(item=>{return {...item,author:"咸虾米"}
})
console.log(newArrs);// [{id: 1, name: 'HTML5', author: '咸虾米'},...]

3：reduce( )方法

reduce() 方法对数组中的每个元素按序执行一个指定方法，每一次运行 reducer 会将先前元素的计算结果作为参数传入。

在这里插入图片描述

// 求数组最大值
let arrs = [5,6,1,22,3,7];
let result = arrs.reduce((prev,current,index)=>{	return Math.max(prev,current);
},0)
console.log(result);// 22

let arrs = [{name:"张三",age:29},{name:"李四",age:16},{name:"王五",age:50},{name:"小明",age:21}];
let result = arrs.reduce((prev,current,index)=>{	return prev+current.age
},0)
console.log(result);// 116

4：every( )方法

判断数组中所有元素是否满足函数中给定的条件
全部满足返回true，只要有一项不满足返回false【类似于逻辑判断中的且 &&】

在这里插入图片描述

let arrs = [{name:"华为",price:5899,stock:true},{name:"苹果",price:9999,stock:false},{name:"小米",price:4399,stock:true},{name:"红米",price:899,stock:true}];
let result = arrs.every(item=>item.stock);
console.log(result);// false

5：some( )方法

some方法和every方法基本类似，只是some方法检测数组中，只要有一个满足条件即返回true，全部不满足条件才会返回false
类似于逻辑判断中的与 ||

在这里插入图片描述

let arrs = [{name:"华为",price:5899,stock:true},{name:"苹果",price:9999,stock:false},{name:"小米",price:4399,stock:true},{name:"红米",price:899,stock:true}];
let result = arrs.some(item=>item.price<1000 && item.stock);
console.log(result);// true

6：includes( )方法

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
注意
1. includes() 方法只能用于检测基础数据类型（如数字、字符串、布尔值），而不能用于检测包含对象或其他数组的二维数组
2. 如果需要检测对象或其他复杂数据类型，可以使用其他方法或自定义函数来实现

在这里插入图片描述

let arrs1 = [1,2,3,4,5,6,7];
let arrs2 = [2,5,7];
let arrs3 = [1,6,9];
let result1 = arrs2.every(item=>arrs1.includes(item));
let result2 = arrs3.every(item=>arrs1.includes(item));
console.log(result1);
console.log(result2);// true
// false

7：find( )方法

find() 方法返回数组中满足提供函数第一个符合条件的值，否则返回 undefined

在这里插入图片描述

const arrs = [5, 10, 15, 20, 25];
const result = arrs .find((num) => num > 18); 
console.log(result); 
//结果：20，因为20是数组arrs中第一个大于18的元素。

//数组对象中用法
const arrs = [{id: 1, name: '张三'},{id: 2, name: '李四'}
];
const result = arrs.find(f => f.id === 2); 
console.log(result);
// 结果：{id: 2, name: '李四'}