Vue Data循环

最新推荐文章于 2024-07-02 18:18:27 发布

alvyn

最新推荐文章于 2024-07-02 18:18:27 发布

阅读量1.9k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/alvyn/article/details/103457600

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

在这里插入图片描述
做一个小实验，假设有这样的一个数据

e.g. 1

console.log("typeof", typeof this.vue_array)
for (var i = 0; i < this.vue_array.length; i++) {
  console.log('vue_array.for', this.vue_array[i]);
}
this.vue_array.forEach((value, key) => {
  console.log('vue_array.forEach',value)
});

在这里插入图片描述

e.g. 2

console.log("typeof", typeof this.vue_object)
for (var i = 0; i < this.vue_object.length; i++) {
  console.log('vue_object.for', this.vue_object[i]);
}
this.vue_object.forEach((value, key) => {
  console.log('vue_object.forEach',value)
});

在这里插入图片描述

e.g. 3

console.log("typeof", typeof this.vue_array_two)
for (var i = 0; i < this.vue_array_two.length; i++) {
  console.log('vue_array_two.for', this.vue_array_two[i]);
}
this.vue_array_two.forEach((value, key) => {
  console.log('vue_array_two.forEach',value)
});

在这里插入图片描述

e.g. 4

Data里增加 vue_object_two: {1:0,2:1,3:2}

console.log("typeof", typeof this.vue_object_two)
for (var i = 0; i < this.vue_object_two.length; i++) {
  console.log('vue_object_two.for', this.vue_object_two[i]);
}
this.vue_object_two.forEach((value, key) => {
  console.log('vue_object_two.forEach',value)
});

在这里插入图片描述

虽然数组在 typeof 下是显示成object，但是length属性并没有丢失，也执行了Array.prototype.forEach()函数。
但是对象是因为没有length属性，所以如图中的for循环无法执行，forEach是Array的函数也就抛出了not a function的错误

所以要把对象转换成数组再做forEach循环

以e.g.4为例

console.log("typeof", typeof this.vue_object_two)
Object.keys(this.vue_object_two).map((key) => [this.vue_object_two[key], key]).forEach(([value,key]) => {
  //循环操作
  console.log("this.vue_object_two",value)
});

在这里插入图片描述
思路是用 Object.keys() 方法获取key的数组，利用Array.prototype.map()方法重新组合获得key列表的数组为值等于[value,key]的二维数组, 再用Array.prototype.forEach()做遍历

Object.keys(object).map((key) => [object[key], key]).forEach(([value,key]) => {
	//循环操作
});