javascript表示未定义array.length，但未定义数组

Question

我正试图通过将Politifact API中的信息存储在名为“ supperArray”的数组中来使用信息。我这样做是通过调用API三次，然后将每个响应中的10个值推送到superArray，就像这样：

const URL1 = "https://www.politifact.com/api/statements/truth-o-meter/people/barack-obama/json/?n=50";
const URL2 = "https://www.politifact.com/api/statements/truth-o-meter/people/hillary-clinton/json/?n=210";
const URL3 = "https://www.politifact.com/api/statements/truth-o-meter/people/bernie-s/json/?n=70";
var superArray = [];
        fetch("https://cors-anywhere.herokuapp.com/"+URL1)
        .then(results => {
            return results.json();
        })
        .then(data => {
            data=data.filter(function(item){return item.speaker.name_slug=="barack-obama" && item.statement_type.statement_type !== "Flip";});
            for(var i=0; i<10; i++){
                superArray.push(data.splice(Math.random()*data.length, 1)[0]);
            }
        })
        fetch("https://cors-anywhere.herokuapp.com/"+URL2)
        .then(results => {
            return results.json();
        })
        .then(data => {
            data=data.filter(function(item){return item.speaker.name_slug=="hillary-clinton" && item.statement_type.statement_type !== "Flip";});
            for(var i=0; i<10; i++){
                superArray.push(data.splice(Math.random()*data.length, 1)[0]);
            }
        })
        fetch("https://cors-anywhere.herokuapp.com/"+URL3)
        .then(results => {
            return results.json();
        })
        .then(data => {
            data=data.filter(function(item){return item.speaker.name_slug=="bernie-s" && item.statement_type.statement_type !== "Flip";});
            for(var i=0; i<10; i++){
                superArray.push(data.splice(Math.random()*data.length, 1)[0]);
            }
        })

当我要求React完整记录supperArray时，就像这样：

console.log(superArray);

它记录以下内容： 这是我所期望的。但是当我要求它记录一个特定值时，就像这样：

console.log(superArray[0]);

它记录为undefined，为什么？

Answer 1

原因是您没有在superArray承诺中记录fetch。如果您在上一次then()调用中将调用添加到console.log（），它将起作用。这样做的原因是，获取操作是异步执行的，这意味着在获取调用之后很久才执行获取调用之后出现的所有其他代码。

即使在获取操作之外仍可以看到superArray完整日志的原因是一种特殊的控制台行为。

const URL1 = "https://www.politifact.com/api/statements/truth-o-meter/people/barack-obama/json/?n=50";
const URL2 = "https://www.politifact.com/api/statements/truth-o-meter/people/hillary-clinton/json/?n=210";
const URL3 = "https://www.politifact.com/api/statements/truth-o-meter/people/bernie-s/json/?n=70";
var superArray = [];
fetch("https://cors-anywhere.herokuapp.com/" + URL1)
  .then(results => {
    return results.json();
  })
  .then(data => {
    data = data.filter(function(item) {
      return item.speaker.name_slug == "barack-obama" && item.statement_type.statement_type !== "Flip";
    });
    for (var i = 0; i < 10; i++) {
      superArray.push(data.splice(Math.random() * data.length, 1)[0]);
    }
  })
fetch("https://cors-anywhere.herokuapp.com/" + URL2)
  .then(results => {
    return results.json();
  })
  .then(data => {
    data = data.filter(function(item) {
      return item.speaker.name_slug == "hillary-clinton" && item.statement_type.statement_type !== "Flip";
    });
    for (var i = 0; i < 10; i++) {
      superArray.push(data.splice(Math.random() * data.length, 1)[0]);
    }
  })
fetch("https://cors-anywhere.herokuapp.com/" + URL3)
  .then(results => {
    return results.json();
  })
  .then(data => {
    data = data.filter(function(item) {
      return item.speaker.name_slug == "bernie-s" && item.statement_type.statement_type !== "Flip";
    });
    for (var i = 0; i < 10; i++) {
      superArray.push(data.splice(Math.random() * data.length, 1)[0]);
    }
    console.log(superArray[0]);
  })

Answer 2

可以在获取数据之前登录到控制台。为了确定这一点，请在完成数据后记录该日志。在.then()内部。

fetch(...)
.then(results => {...})
.then(data => {...})
.then(()=> console.log(superArr[0]))

或者，您可以使用：

superArray.length && console.log(superArray[0]);

Answer 3

我认为在console.log之前尚未执行对URL的提取。

在输出到控制台之前，请确保已执行所有诺言。