无法弄清楚为什么我的对象中的值正在改变

Question

我想弄清楚为什么我的图表中的值没有正确显示。当我记录learningLanguages[j].count++的值时，它们是循环的，它们是准确的。然而，当我在图表$.map(nativeLanguages, function(n) {...})在地图功能登录n，计数是你的问题的所有不正确的（和看似随意的）

var getLanguages = $.get('/languages.json', function(languages){ 
     // top level language arrays 
     learningLanguages = [] 
     nativeLanguages = [] 

     // object constructor that correctly formats the language objects 
     function Language(lang) { 
      this.language = lang; 
      this.count = 0; 
     } 

     // Loop through the languages, create an object for each, push to top level language arrays 
     for(i = 0; i < languages.length; i++) { 
      currentLanguage = new Language(languages[i].language) 

      learningLanguages.push(currentLanguage) 
      nativeLanguages.push(currentLanguage) 
     } 
    }); 

    // once the languages call is complete find signed-in user's info 
    getLanguages.done(function() { 
     $.get('/users.json', function(response) { 
      // console.log(response) 
      // adds the total number of users to the DOM 
      var numberOfUsers = response.length 
      $('#userCount').append('<h1>Total Users: ' + numberOfUsers + '</h1>') 
      // find the number of approved users 
      // var numberApproved = 0 
      // for (i = 0; i < response.length; i++) { 
      //  if (response[i].approved === true) { 
      //   numberApproved++ 
      //  } 
      // } 
      // Add the number of approved users to the DOM 
      // $('#userCount').append('<h1>Total Approved Users: ' + numberApproved + '</h1>') 


      // search for the language in the array and increase the count for that language 
      for (i = 0; i < response.length; i++) { 
       var userLearningLanguage = response[i].learning_language 

       for (j = 0; j < learningLanguages.length; j++) { 
        if (learningLanguages[j].language === userLearningLanguage) { 
         learningLanguages[j].count++ 
        } 
       } 
      } 
      // search for the language in the array and increase the count for that language 
      for (i = 0; i < response.length; i++) { 
       var userNativeLanguage = response[i].native_language 
       for (j = 0; j < nativeLanguages.length; j++) { 
        if (nativeLanguages[j].language === userNativeLanguage) { 
         nativeLanguages[j].count++ 
        } 
       } 
      } 

      var ctx = $("#languageComparisonChart"); 
      var myChart = new Chart(ctx, { 
       type: 'bar', 
       data: { 
        labels: 
         $.map(learningLanguages, function(n) { 
          return n.language 
         }), 
        datasets: [{ 
         label: '# of Learners', 
         data: $.map(learningLanguages, function(n) { 
           return n.count 
          }), 
         backgroundColor: 'rgba(255, 99, 132, 0.2)', 
         borderColor: 'rgba(255,99,132,1)', 
         borderWidth: 1 
        }, 
        { 
         label: '# of Native Speakers', 
         data: $.map(nativeLanguages, function(n) { 
          console.log(n) 
           return n.count 
          }), 
         backgroundColor: 'rgba(54, 162, 235, 0.2)', 
         borderColor: 'rgba(54, 162, 235, 1)', 
         borderWidth: 1 
        }] 
       }, 
       options: { 
        scales: { 
         yAxes: [{ 
          ticks: { 
           beginAtZero:true 
          } 
         }] 
        }, 
        responsive: false, 
        maintainAspectRatio: true 
       } 
      }); 
     }) 
    }); 
} 

Answer 1

部分从推动同一个对象到2个不同的阵列这里茎：

for(i = 0; i < languages.length; i++) { 
     currentLanguage = new Language(languages[i].language) 

     learningLanguages.push(currentLanguage) 
     nativeLanguages.push(currentLanguage) 
    } 

这不会将currentLanguage复制到每个中，它会将相同对象的引用推送到每个对象中。

然后不管你做什么，以一个对象的引用将在其他

反映尝试制作2个独立的对象

for(i = 0; i < languages.length; i++) { 
     learningLanguages.push(new Language(languages[i].language)) 
     nativeLanguages.push(new Language(languages[i].language)) 
    } 

使用全局变量也将让你陷入困境......不要这样做！

Answer 2

learningLanguages = [] 
nativeLanguages = [] 

这两个变量看起来像它们没有在上面的范围中定义 - 因此第二个XHR调用不知道这些变量。

答案的第二部分是对同一对象实例的引用，同一个“count”属性触及两次。

我建议两个选项的位置：对于这两种阵列分别

• 使用new Language(...)或对每种类型的native/learning计数一个独立的计数器。