vue中插值语法中v-for() of 与v-for() in 遍历对象数组的异同，以及for in for of在方法中遍历对象和数组的异同
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
项目地址：https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
写这个的目的是记录下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不能遍历对象
创作不易，如果对各位同仁有所帮助，我将感到荣幸
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
27
0- 0
已为社区贡献1条内容
所有评论(0)