javascript - 为什么我的 for/in 循环给我空结果，但我的常规 for 循环没有（图片）？

Question

我正在尝试使用 for/in 循环迭代一个对象数组，以将每个对象的一些属性记录到 Chrome 开发控制台，但我不断得到空值。然后我决定使用常规的 for 循环，并在开发控制台中收到了我期望的值。

有人可以向我解释为什么当常规 for 循环给我预期的（非空）值时 for/in 给我空值？

这是代码：

watch: {
    events() {
        console.log(this.events)

        for(let event in this.events) {
            console.log(`Lat: ${event.latitude}, Lng: ${event.longitude}`)
        }

        for(let i = 0; i < this.events.length; i++) {
            console.log(`Lat: ${this.events[i].latitude}, Lng: ${this.events[i].longitude}`)
        }
    }
}

图片供参考： 控制台日志输出

链接图片中的第一个输出是数组，第二个是 for/in 循环值（旁边有“10”的那个），之后的值是来自常规 for 循环的值。

标签： javascriptvue.js

Answer 1

for...in用于迭代对象属性，而不是用于迭代数组。改用for...of：

watch: {
    events() {
        console.log(this.events)

        for(const event of this.events) {
            console.log(`Lat: ${event.latitude}, Lng: ${event.longitude}`)
        }

        for(let i = 0; i < this.events.length; i++) {
            console.log(`Lat: ${this.events[i].latitude}, Lng: ${this.events[i].longitude}`)
        }
    }
}