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}`)
        }
    }
}

图片供参考： Console log output

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

Answer 1

for...in用于iterating over object properties，而不是用于遍历数组。请改用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}`)
        }
    }
}

Answer 2

请阅读for..in的文档。这将返回可枚举的属性。对于数组，它是数组索引。因此您仍然必须执行this.events[index]才能获取实际事件。

此外，不能保证顺序纯粹取决于实现。因此，您必须小心。有关更多信息，请访问https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in#Array_iteration_and_for...in

Answer 3

用于/以数组形式返回索引，如果用于数组，在这里参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Answer 4

for / in的

遍历数组中的每个元素，没有定义的顺序，但是迭代器仍然只是数组索引。您可能要使用for / of。请记住： i n是 i ndex， o f是 o 对象

var events = [ { latitude: "10", longitude: "100" }
             , { latitude: "11", longitude: "101" }
             ];

console.log(events);

console.log('for/in:');
for(let event in events) {
    console.log(`Lat: ${events[event].latitude}, Lng: ${events[event].longitude}`)
}

console.log('for/of:');
for(event of events) {
    console.log(`Lat: ${event.latitude}, Lng: ${event.longitude}`);
}

为什么我的for / in循环没有返回结果，而我的常规for循环却没有（图片）？

4 个答案: