遍历数组常见的方法：vue案例分析

前端基地

已于 2024-08-08 10:36:32 修改

阅读量972

点赞数 38

分类专栏： Vue 3.0从入门到精通文章标签： forEach map reduce filter some for...of every

于 2024-07-23 12:19:45 首次发布

本文链接：https://blog.csdn.net/chinayun_6401/article/details/140632363

版权

非 VIP 用户能够免费下载博文资源

for

for循环借助数组的长度来把控循环执行的次数。在循环过程中，运用索引 i 能够精准地获取数组内每个元素的具体值。

示例代码如下：

<body>  
    <div id="app">  
        <el-divider content-position="left">for循环</el-divider>  
        <el-button type="primary" @click="forFun">显示总年龄</el-button>  
        <p>总年龄：{
  {sumAge}}</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}  
                ],  
                sumAge:0  
            }  
        },  
        methods:{  
            forFun(){  
                let arr=this.arr,sum=0;  
                for(let i=0;i<arr.length;i++){  
                    sum+=arr[i].age;  
                }  
                this.sumAge=sum;  
            }  
        }  
    })  
    app.use(ElementPlus);  
    app.mount('#app');  
</script>

运行结果：当单击“ 显示总年龄”按钮，显示“总年龄：72”。

for...of

for...of 乃是 JavaScript 中用于遍历可迭代对象的一种循环结构。可迭代对象囊括了数组、字符串、Set 以及 Map 等诸类。不过，就对象来说（除非此对象实现了 Symbol.iterator 方法），是不能够直接采用 for...of 进行遍历的。并且，for...of 循环会自动逐个取出数组里的每个元素，而后将其赋值给变量 item 。

示例代码如下：

<body>  
    <div id="app">  
        <el-divider content-position="left">for...of循环</el-divider>  
        <el-button type="primary" @click="forOfFun">显示总年龄</el-button>  
        <p>总年龄：{
  {sumAge}}</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}  
                ],  
                sumAge:0  
            }  
        },  
        methods:{  
            forOfFun(){  
                let arr=this.arr,sum=0;  
                for(let item of arr){  
                    sum+=item.age;  
                }  
                this.sumAge=sum;  
            }  
        }  
    })  
    app.use(ElementPlus);  
    app.mount('#app');  
</script>

运行结果：当单击“ 显示总年龄”按钮，显示“总年龄：72”。

forEach

forEach 方法没有返回值，无法通过 break 或 return 中途停止遍历。

forEach 方法的语法如下：

array.forEach(function(currentValue, index, array) {

最低0.47元/天解锁文章

前端基地

关注

38
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
遍历数组常见的方法：vue案例分析

本文详细阐述了数组所常用的一系列方法，包括：for 循环、for...of 循环、forEach 方法、reduce 方法、map 方法、filter 方法、some 方法以及 every 方法。不仅对它们各自的语法进行了精准剖析，还通过丰富详实的案例进行了精心讲解，旨在为读者清晰地呈现出这些方法之间的显著区别。
复制链接

扫一扫