vue中插值语法中v-for() of 与v-for() in 遍历对象数组的异同，以及for in for of在方法中遍历对象和数组的异同

热爱前端的小菜

已于 2022-07-17 08:45:18 修改

阅读量7.1k

点赞数 27

文章标签： vue.js 前端 javascript

于 2021-12-25 11:13:12 首次发布

本文链接：https://blog.csdn.net/weixin_47970316/article/details/122140047

版权

写这个的目的是记录下Vue中使用v-for-in v-for-of遍历对象与遍历数组的区别，以及JS中使用for-in for-of 遍历对象和数组的区别。

直接说结论，节约大家时间，下面是推论，有时间的同仁们可以看看

在vue中使用情况如下

v-for(value,index)-in 与v-for(value,index)-of在遍历数组的时候，value得到的是数组的值，index是数组的索引值 v-for-in与v-for-of在遍历数组的时候这俩者没有区别

v-for(value,index)-in 与v-for(value,index)-of在遍历对象的时候，value是对象的健值，index是对象的健名，v-for-in与v-for-of遍历对象的时候这俩者也没有区别的

在JS中使用情况如下

for( 变量 in 遍历数组) 得到的变量是索引值,并且它是字符串，而不是number类型的数字

for( 变量 of 遍历数组) 得到的变量是数组内的每一个值

for( 变量 in 遍历对象) 得到的变量是对象内的每一个健名(obj:{健名：健值})

for( 变量 of 遍历对象) 会报错，for of不能遍历对象

测试代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
    <h1>v-for(value,index) in 遍历数组</h1>
    <ul>
        <li v-for="(value,index) in arr"> {{value}}--{{index}}  </li>
    </ul>
    <br>
    <h1>v-for(value,index) of 遍历数组</h1>
    <ul>
        <li v-for="(value,index) of arr"> {{value}}--{{index}}  </li>
    </ul>
    <br>
    <h1>v-for(value,key) in 遍历对象</h1>
    <ul>
        <li v-for="(value,key) in obj"> {{value}}--{{key}}  </li>
    </ul>
    <br>
    <h1>v-for(value,key) of 遍历对象</h1>
    <ul>
        <li v-for="(value,key) of obj"> {{value}}--{{key}}  </li>
    </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    arr: [{
                        age: "20",
                        name: '李四',

                    },
                    {
                        age: "20",
                        name: '张三',

                    },
                    {
                        age: "20",
                        name: '王五',
                    }],
                    obj: {
                        age: "202",
                        name: '法外狂徒',
                    }
                }
            },
            methods: {
            // for in 遍历数组
            arrIn(){
                for(let key in this.arr){
                     console.log(key)
                 } 
             },
             //for of 遍历数组
             arrOf(){
                for(let key of this.arr){
                     console.log(key)
                 } 
             },
             //for in 遍历对象
             objIn(){
                 for(let key in this.obj){
                     console.log(key)
                 }
             },
            //  for of 遍历对象
             objOf(){
                for(let key of this.obj){
                     console.log(key)
                 } 
             },        
            },
            mounted() {
                this.arrIn()
                console.log('~~~~~~~~~')
                this.arrOf(),
                console.log('~~~~~~~~~')
                this.objIn(),
                console.log('~~~~~~~~~')
                this.objOf()       
            },
        })
    </script>
</body>

</html>

v-for-in遍历对象与数组、v-for-of遍历对象与数组的区别效果如图所示

v-for(value,index) in 遍历数组

 <h1>v-for(value,index) in 遍历数组</h1>
    <ul>
        <li v-for="(value,index) in arr"> {{value}}--{{index}}  </li>
    </ul>

在这里插入图片描述

v-for(value,index) of 遍历数组

 <h1>v-for(value,index) of 遍历数组</h1>
    <ul>
        <li v-for="(value,index) of arr"> {{value}}--{{index}}     </li>
    </ul>

在这里插入图片描述
因此可以知道v-for-in 与v-for-of在遍历数组的时候，俩者是没有区别的

v-for(value,key) in 遍历对象

<h1>v-for(value,key) in 遍历对象</h1>
    <ul>
        <li v-for="(value,key) in obj"> {{value}}--{{key}}  </li>
    </ul>

在这里插入图片描述

v-for(value,key) of 遍历对象

<h1>v-for(value,key) of 遍历对象</h1>
    <ul>
        <li v-for="(value,key) of obj"> {{value}}--{{key}}  </li>
    </ul>

在这里插入图片描述
因此可以知道v-for-in 与v-for-of在遍历对象的时候，俩者也没有区别的

现在比较下for in 与 for of 遍历对象和数组的异同

for in遍历数组

arrIn(){
                for(let key in this.arr){
                     console.log(key)
                 } 
             },

在这里插入图片描述
这里我们可以看到当for-in遍历数组的时候，变量key指的是数组的索引值

for of遍历数组

arrOf(){
                for(let key of this.arr){
                     console.log(key)
                 } 
             },

在这里插入图片描述
这里我们可以看到，当for-of遍历数组的时候，变量key却的是每一个数组的值

for in 遍历对象

objIn(){
                 for(let key in this.obj){
                     console.log(key)
                 }
             },

在这里插入图片描述

for in遍历对象时，变量key是对象的每一个健名

for of 遍历对象

 objOf(){
                for(let key of this.obj){
                     console.log(key)
                 } 
             },

在这里插入图片描述
这里我门可以看到当for of 遍历对象的时候是报错的，其实错误的原因也很简单，对象没有迭代器，所以不能使用for of 遍历

总结一下就是 for( 变量 in 遍历数组) 得到的变量是索引值——————for( 变量 of 遍历数组) 得到的变量是数组内的每一个值————for( 变量 in 遍历对象) 得到的变量是对象内的每一个健名————for( 变量 of 遍历对象) 会报错，for of不能遍历对象

创作不易，如果对各位同仁有所帮助，我将感到荣幸

热爱前端的小菜

关注

27
点赞
踩
47

收藏

觉得还不错? 一键收藏
1
评论
vue中插值语法中v-for() of 与v-for() in 遍历对象数组的异同，以及for in for of在方法中遍历对象和数组的异同

前端for-of for-in 遍历对象和数组的区别以及v-for-of和v-for-in遍历对象和数组的区别
复制链接

扫一扫