做一个小实验,假设有这样的一个数据
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]) => {
//循环操作
});