JavaScript遍历含数组的JSON：如何循环内部tags数组？

问题背景 #

现有如下JSON数据：

{
    "blogs":{
        "id1":{
            "title":"Title 1",
            "date":"test_date",
            "datestamp":"test_datestamp 1",
            "content":"The content",
            "url":"https:\/\/www.testlink1.com",
            "tags":["move","New"]
        },
        "id2":{
            "title":"Title 2",
            "date":"test_date",
            "datestamp":"test_datestamp 2",
            "content":"The content 2",
            "url":"https:\/\/www.testlink2.com",
            "tags":["Netherlands","Yellow"]
        }
    }
}

通过AJAX获取后解析：

data = JSON.parse(this.response); // AJAX请求PHP文件返回的结果

当前遍历博客数据的代码（注意原代码存在笔误：data.posts应改为data.blogs）：

for(let id in data.blogs){
    console.log(data.blogs[id].date);
    console.log(data.blogs[id].title);
    // 其他字段处理
}

尝试遍历标签数组时失败，错误代码：

for(let id in data.blogs){
    for(let tag in data.blogs.tags){
    alert(data.blogs[id].tags[tag]);
    }
}

解决方案 #

错误根源是data.blogs.tags不存在——tags是每个博客对象（data.blogs[id]）的属性，并非blogs本身的属性。以下是几种正确实现方式：

方法1：使用for...of遍历数组 #

for(let id in data.blogs){
    const blog = data.blogs[id];
    console.log(blog.date, blog.title);
    // 遍历标签
    for(const tag of blog.tags){
        console.log(tag);
        // 或执行alert(tag);
    }
}

方法2：使用数组forEach方法 #

for(let id in data.blogs){
    const blog = data.blogs[id];
    console.log(blog.date, blog.title);
    // 遍历标签
    blog.tags.forEach(tag => {
        console.log(tag);
        // 或执行alert(tag);
    });
}

方法3：修正for...in写法（不推荐用于数组，会遍历原型链属性） #

若坚持使用for...in，需指定到当前博客的tags数组：

for(let id in data.blogs){
    const blog = data.blogs[id];
    console.log(blog.date, blog.title);
    // 遍历标签
    for(let index in blog.tags){
        console.log(blog.tags[index]);
        // 或执行alert(blog.tags[index]);
    }
}

另外需注意：原遍历代码中的data.posts[id]是笔误，必须改为data.blogs[id]，否则会引发报错。

内容的提问来源于stack exchange，提问作者Ruudje