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

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

热爱前端的小菜

7259人浏览 · 2021-12-25 11:13:12

热爱前端的小菜 · 2021-12-25 11:13:12 发布

写这个的目的是记录下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不能遍历对象

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^