问题背景 #

我尝试编写一个JavaScript函数，通过XMLHTTPRequest从外部源加载文章到页面。每篇文章是包含链接、图片、摘要的JS对象，每次请求能获取5篇文章，但每次点击按钮只需展示4篇，所以需要把文章对象存入全局数组articles。不过刚接触XMLHTTPRequest，原代码里用for循环尝试把newArticles（包含5篇文章的对象）的元素推入articles时失败了。

原代码（存在问题） #

var articles = [];
document.getElementById("fc-blog-button-loadmore").addEventListener("click", receiveNewArticles);
function receiveNewArticles() {
    var http = new XMLHttpRequest();
    var url = "thelinktothepagewith5newarticles.json";
    http.onreadystatechange = function() {
        if(http.readyState == 4 && http.status == 200) {
            var newObj = JSON.parse(http.responseText);
            var newArticles = (newObj.blog.articles);
            console.log(newObj);
            console.log(newArticles);
            var i;
            for (i = 0; i < newArticles.length; i++) {
                articles.push(newArticles[i]);
            }
            console.log(articles);
        }
    }
    http.open("GET", url, true);
    http.send();
}

问题分析 #

原代码的核心问题在于：newArticles并不是一个数组，而是一个键值对形式的对象。你用for (i = 0; i < newArticles.length; i++)去遍历它，但对象没有length属性，所以这个循环根本不会执行，自然无法把文章推入全局数组。

修正方案 #

我们需要先把对象形式的newArticles转换成数组，再将数组元素批量推入articles：

1. 用Object.values(newArticles)获取对象的所有值，转换成一个包含所有文章对象的数组；
2. 用扩展运算符...把数组中的每个元素单独推入articles（相当于循环调用push）。

修正后的代码 #

var articles = [];
document.getElementById("fc-blog-button-loadmore").addEventListener("click", receiveNewArticles);
function receiveNewArticles() {
    var http = new XMLHttpRequest();
    var url = "http://freshcotton-dev.webshopapp.com/nl/blogs/blog/page2.html?format=json";
    http.onreadystatechange = function() {
        if(http.readyState == 4 && http.status == 200) {
            var newObj = JSON.parse(http.responseText);
            var newArticles = (newObj.blog.articles);
            console.log(newObj);
            console.log(newArticles);
            articles.push(...Object.values(newArticles))
            console.log(articles);
        }
    }
    http.open("GET", url, true);
    http.send();
}

问题已解决！

内容的提问来源于stack exchange，提问作者M. Borsato