遍历数组常见的方法案例
资源内容介绍
本资源列举了数组所常用的一系列方法案例分析，包括：for 循环、for...of 循环、forEach 方法、reduce 方法、map 方法、filter 方法、some 方法以及 every 方法案例。不仅对它们各自的语法进行了精准剖析，还通过丰富详实的案例进行了精心讲解，旨在为读者清晰地呈现出这些方法之间的显著区别。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>遍历数组常见的方法</title> <link rel="stylesheet" href="./css/element-plus.css"/> <script src="./js/vue.global.js"></script> <script src="./js/element-plus.js"></script></head><body> <div id="app"> <el-divider content-position="left">原数组</el-divider> <p>{{showArr}}</p> <el-divider content-position="left">for循环</el-divider> <el-button type="primary" @click="forFun">显示总年龄</el-button> <p>总年龄：{{sumAge1}}</p> <el-divider content-position="left">for...of循环</el-divider> <el-button type="primary" @click="forOfFun">显示总年龄</el-button> <p>总年龄：{{sumAge2}}</p> <el-divider content-position="left">forEach方法</el-divider> <el-button type="primary" @click="forEachFun">显示总年龄</el-button> <p>总年龄：{{sumAge3}}</p> <el-divider content-position="left">map方法</el-divider> <el-button type="primary" @click="mapFun">显示年龄组成的新数组</el-button> <p>新数组：{{newArr1}}</p> <el-divider content-position="left">filter方法</el-divider> <el-button type="primary" @click="filterFun">显示数组中年龄相同的元素</el-button> <p>新数组：{{newArr2}}</p> <el-divider content-position="left">reduce方法</el-divider> <el-button type="primary" @click="reduceFun">显示总年龄</el-button> <p>总年龄：{{sum}}</p> <el-divider content-position="left">some方法</el-divider> <el-button type="primary" @click="someFun">显示数组中年龄是否大于22</el-button> <p>判断结果：{{msg1}}</p> <el-divider content-position="left">every方法</el-divider> <el-button type="primary" @click="everyFun">显示数组中年龄是否大于22</el-button> <p>判断结果：{{msg2}}</p> </div></body><script> const {createApp}=Vue; const app=createApp({ data(){ return{ arr:[ {id:0,name:'Lucy',age:22}, {id:1,name:'Jack',age:28}, {id:2,name:'Mack',age:22} ], sumAge1:0, sumAge2:0, sumAge3:0, showArr:null, newArr1:null, newArr2:null, newArr3:null, sum:0, msg1:'', msg2:'' } }, created(){ this.originalArr(); }, methods:{ // for循环 forFun(){ let arr=this.arr,sum=0; for(let i=0;i<arr.length;i++){ sum+=arr[i].age; } this.sumAge1=sum; }, // for...of循环 forOfFun(){ let arr=this.arr,sum=0; for(let item of arr){ sum+=item.age; } this.sumAge2=sum; }, // forEach方法 forEachFun(){ let arr=this.arr,sum=0; arr.forEach(item=>{ sum+=item.age; }); this.sumAge3=sum; }, // map方法（创建一个新数组） mapFun(){ let arr=this.arr; let newArr=arr.map(item=>item.age); this.newArr1=JSON.stringify(newArr); }, // filter方法（创建一个新数组） filterFun(){ let arr=this.arr; let newArr=arr.filter(item=>item.age==22); this.newArr2=JSON.stringify(newArr); }, // reduce方法(设置初始值为0) reduceFun(){ let arr=this.arr; let sum=arr.reduce((add,item)=>add+item.age,0); this.sum=sum; }, // some方法（检查数组中是否至少有一个元素通过） someFun(){ let arr=this.arr; let flag=arr.some(item=>item.age>22); this.msg1=flag?'是':'否' }, // every方法（检查数组中的所有元素是否都通过） everyFun(){ let arr=this.arr; let flag=arr.every(item=>item.age>22); this.msg2=flag?'是':'否' }, // 显示原数组 originalArr(){ this.showArr=JSON.stringify(this.arr); } } }) app.use(ElementPlus); app.mount('#app');</script></html>