带有 for 循环和 push 方法的函数返回 250 个长度为 1 的数组，而不是长度为 250 的单个数组答案

【问题标题】：Function with a for loop and push method returning 250 arrays of length one instead of single array of length 250带有 for 循环和 push 方法的函数返回 250 个长度为 1 的数组，而不是长度为 250 的单个数组
【发布时间】：2021-01-07 20:00:08
【问题描述】：

我创建了一个名为“worldRegion”的函数，并在其中使用了 push 方法。每次我控制台记录数组时，元素将被推入其中，我希望看到一个包含 250 个元素的数组。相反，我得到的是 250 个数组，每个数组都包含一个元素，for 循环已经对其进行了迭代。

根据 MDN 给出的定义：push 方法将值附加到数组中。不是“数组”。所以我猜我的 for 循环有问题。但我不知道是什么。

我在互联网上查找了我的问题，但没有找到任何结果。

const url = "https://restcountries.eu/rest/v2/all"
const btn = document.querySelector("button")




  fetch(url)
  .then(function(response){
    return response.json()
  })
  .then(function(data){
    var options  = ''
    for(var i = 0; i < data.length; i++) {
      options += `<option value="${data[i].name}">${data[i].name}</option>`
    }
    document.querySelector("select").innerHTML = options
    worldRegion(data)
  })


  function worldRegion(myData) { 
    for(var i = 0; i < myData.length; i++) {
      var myArray = []
      myArray.push(myData[i].name)
        console.log(myArray) 
    }
  }

  function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8"

> Blockquote

    <title>what language do they speak</title>
  </head>
  <body>
    <select class="" name=""></select><br>

  </body>
  <script src="index.js" `enter code here`type="text/javascript">

  </script>
</html>

【问题讨论】：

标签： javascript arrays for-loop

【解决方案1】：

每次循环运行时，您都会初始化一个新数组。将 myArray 的初始化移到 for 循环之外。

  function worldRegion(myData) { 
    var myArray = []; //<--Move this here
    for(var i = 0; i < myData.length; i++) {
      myArray.push(myData[i].name);
      console.log(myArray);
    }
  }

const url = "https://restcountries.eu/rest/v2/all"
const btn = document.querySelector("button")




  fetch(url)
  .then(function(response){
    return response.json()
  })
  .then(function(data){
    var options  = ''
    for(var i = 0; i < data.length; i++) {
      options += `<option value="${data[i].name}">${data[i].name}</option>`
    }
    document.querySelector("select").innerHTML = options
    worldRegion(data)
  })


  function worldRegion(myData) { 
    var myArray = []
    for(var i = 0; i < myData.length; i++) {
      myArray.push(myData[i].name)
        console.log(myArray) 
    }
  }

  function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8"

> Blockquote

    <title>what language do they speak</title>
  </head>
  <body>
    <select class="" name=""></select><br>

  </body>
  <script src="index.js" `enter code here`type="text/javascript">

  </script>
</html>

【讨论】：

return 数组也可能是个好主意。