转换 JavaScript 个对象数组

Question

我有以下两个 JavaScript 数组：

var grades = [ { name: "A", color: "#00FF00" }, 
               { name: "B", color: "#88CC00" },
               { name: "C", color: "#AAAA00" }, 
               { name: "D", color: "#CC8800" }, 
               { name: "F", color: "#FF0000" }];

var studentGrades = [ { Student: "James", Class: "Math", Grade: "A" },
                      { Student: "Lily", Class: "Math", Grade: "B" },
                      { Student: "Bob", Class: "Math", Grade: "C" },
                      { Student: "Tom", Class: "Math", Grade: "C" },
                      { Student: "James", Class: "Science", Grade: "A" },
                      { Student: "Lily", Class: "Science", Grade: "B" },
                      { Student: "Bob", Class: "Science", Grade: "B" },
                      { Student: "Tom", Class: "Science", Grade: "B" },
                      { Student: "James", Class: "Chemistry", Grade: "F" },
                      { Student: "Lily", Class: "Chemistry", Grade: "A" },
                      { Student: "Bob", Class: "Chemistry", Grade: "B" },
                      { Student: "Tom", Class: "Chemistry", Grade: "A" } ];

我正在尝试从中生成以下两个数组：

grades = [ { name: "A", color: "#00FF00", data: [1, 1, 2] },
                    { name: "B", color: "#88CC00", data: [1, 3, 1] },
                    { name: "C", color: "#AAAA00", data: [2, 0, 0] },
                    { name: "D", color: "#CC8800", data: [0, 0, 0] },
                    { name: "F", color: "#FF0000", data: [0, 0, 1] } ];

var classes = [ "Math", "Science", "Chemistry" ];

有没有一种简单的方法可以做到这一点，而无需遍历 studentGrades 并维护计数和类的唯一列表？

编辑： 我在发布问题后创建了以下代码。我仍然更喜欢一种更简单的方法来做到这一点，它更具可读性。

<!DOCTYPE html>
<html>
  <head>
    <base href="http://demos.telerik.com/kendo-ui/bar-charts/local-data-binding">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.bootstrap.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.bootstrap.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
  </head>
  <body>
    <div id="example">
      <div class="demo-section k-content">
        <div id="chart"></div>
      </div>
      <script>

        // Start of code that is specific to the Whosebug question

        var grades = [ { name: "A", color: "#00FF00" }, 
                       { name: "B", color: "#88CC00" },
                       { name: "C", color: "#AAAA00" }, 
                       { name: "D", color: "#CC8800" }, 
                       { name: "F", color: "#FF0000" }];

        var studentGrades = [ { Student: "James", Class: "Math", Grade: "A" },
                              { Student: "Lily", Class: "Math", Grade: "B" },
                              { Student: "Bob", Class: "Math", Grade: "C" },
                              { Student: "Tom", Class: "Math", Grade: "C" },
                              { Student: "James", Class: "Science", Grade: "A" },
                              { Student: "Lily", Class: "Science", Grade: "B" },
                              { Student: "Bob", Class: "Science", Grade: "B" },
                              { Student: "Tom", Class: "Science", Grade: "B" },
                              { Student: "James", Class: "Chemistry", Grade: "F" },
                              { Student: "Lily", Class: "Chemistry", Grade: "A" },
                              { Student: "Bob", Class: "Chemistry", Grade: "B" },
                              { Student: "Tom", Class: "Chemistry", Grade: "A" } ];

        var classes = [];

        // Returns an array that maintains the grade counts for each class based on the grades array.
        var getGradeCounts = function (studentData, gradeCounts) {
            if (gradeCounts == null) {
                gradeCounts = [];
            }
            for (var i = 0; i < grades.length; i++) {
                if (gradeCounts[i] == undefined) {
                    gradeCounts[i] = 0;
                }
                if (grades[i].name === studentData.Grade) {
                    gradeCounts[i]++;
                }
            }
            return gradeCounts;
        }

        // Iterates over each student grade and maintains an object of the grade counts by class, and an unique array of classes used for the chart category.
        var classGradeCounts = {};
        for (var student in studentGrades) {
            var studentClass = studentGrades[student].Class;
            if (classGradeCounts[studentClass] == undefined) {
                classes.push(studentClass);
            }
            classGradeCounts[studentClass] = getGradeCounts(studentGrades[student], classGradeCounts[studentClass]);
        }

        // Now that we have the grade counts for each class, build up the chart series
        for (var i = 0; i < grades.length; i++) {
            grades[i].data = [];
            for (var classGradeCount in classGradeCounts) {
                grades[i].data.push(classGradeCounts[classGradeCount][i]);
            }
        }

        // End of Whosebug code, the rest of this is code is used to generate a Kendo chart.

        var chartSettings = {
            seriesDefaults: { type: "column", stack: true },
            series: grades,
            categoryAxis: { categories: classes },
        };

        function createChart() {
          $("#chart").kendoChart(chartSettings);
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
      </script>
    </div>


  </body>
</html>

Answer 1

你无法避免循环。您可以使用 Array.prototype.forEach and Array.prototype.map 等函数使其看起来没有循环。

我认为最简单的方法是创建可让您快速访问所需数据的地图，这样您就不必不断扫描数组，也不需要像 underscore 或 jQuery。这些地图的一个好处是您可以轻松地使用它们更轻松地生成不同格式的数据。

您可以研究以下生成所需输出的内容，并自行决定它是否比使用常规循环更容易。

var grades = [ { name: "A", color: "#00FF00" }, 
               { name: "B", color: "#88CC00" },
               { name: "C", color: "#AAAA00" }, 
               { name: "D", color: "#CC8800" }, 
               { name: "F", color: "#FF0000" }];

var studentGrades = [ { Student: "James", Class: "Math", Grade: "A" },
                      { Student: "Lily", Class: "Math", Grade: "B" },
                      { Student: "Bob", Class: "Math", Grade: "C" },
                      { Student: "Tom", Class: "Math", Grade: "C" },
                      { Student: "James", Class: "Science", Grade: "A" },
                      { Student: "Lily", Class: "Science", Grade: "B" },
                      { Student: "Bob", Class: "Science", Grade: "B" },
                      { Student: "Tom", Class: "Science", Grade: "B" },
                      { Student: "James", Class: "Chemistry", Grade: "F" },
                      { Student: "Lily", Class: "Chemistry", Grade: "A" },
                      { Student: "Bob", Class: "Chemistry", Grade: "B" },
                      { Student: "Tom", Class: "Chemistry", Grade: "A" } ];

var gradeMap={}, gradesByClass={}, classMap={}, classArray=[], classIndex=0;

grades.forEach(function(grade) {
    gradeMap[grade.name] = grade.color;
});
 
studentGrades.forEach(function(studentGrade){
    if (!gradesByClass[studentGrade.Class]) {
        gradesByClass[studentGrade.Class] = {};
        classMap[studentGrade.Class] = classIndex;
        classIndex++;
    }
    if(!gradesByClass[studentGrade.Class][studentGrade.Grade]) {
        gradesByClass[studentGrade.Class][studentGrade.Grade] = 0;
    }
    gradesByClass[studentGrade.Class][studentGrade.Grade]++;
});

Object.keys(classMap).forEach(function(className){
  classArray[classMap[className]] = className;
});

var finalGrades = Object.keys(gradeMap).map(function(grade){
    var obj = {
      name: grade, color: gradeMap[grade], data: []
    };
    classArray.forEach(function(className, index){
        if (gradesByClass[className] && gradesByClass[className][grade]) {
            obj.data[index] = gradesByClass[className][grade];
        } else {
            obj.data[index] = 0;
        }        
    }); 
  return obj;
});

console.log(JSON.stringify(finalGrades));
/*
[{"name":"A","color":"#00FF00","data":[1,1,2]},
 {"name":"B","color":"#88CC00","data":[1,3,1]},
 {"name":"C","color":"#AAAA00","data":[2,0,0]},
 {"name":"D","color":"#CC8800","data":[0,0,0]},
 {"name":"F","color":"#FF0000","data":[0,0,1]}]
*/

转换 JavaScript 个对象数组

Transforming a JavaScript array of objects

javascript

jquery

underscore.js

kendo-chart