Javascript循环和对象创建答案

【问题标题】：Javascript looping and object creationJavascript循环和对象创建
【发布时间】：2020-08-08 10:12:30
【问题描述】：

我有以下 JSON：

[
  {
    "name": "sp5",
    "damage": "68",
    "penetration": "35",
    "class1": "6",
    "class2": "6",
    "class3": "6",
    "class4": "5",
    "class5": "3",
    "class6": "2"
  },
  {
    "name": "sp6",
    "damage": "58",
    "penetration": "43",
    "class1": "6",
    "class2": "6",
    "class3": "6",
    "class4": "6",
    "class5": "5",
    "class6": "4"
  }
]

我有一个函数循环遍历数组中的对象，然后循环遍历该对象的属性/键，并尝试通过每个对象的 class6 对它自己的新对象和 chart.data 进行属性损坏和推送。数据集数组。我在每个对象数据数组中得到 16 个值，而不是所需的 8 个。

function createObjectsForChart(data) {
        console.log(`Data: ${data}`);
        const chart = {
          type: 'bar',
            data: {
                labels: ["Damage", "Penetration", "Class1", "Class 2", "Class 3", "Class 4", "Class 5", "Class 6"],
                datasets: [],
            }
          }
          const dataset = {
            label: "",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: []
          }

          let myChart = Object.create(chart);

          data.forEach((item, i) => {
            console.log(`Item: ${item}, Index: ${i}`);


            console.log(`Data length: ${data.length}`);
            //data[i]

            let myData = Object.create(dataset);
            count = 0;
            for (const property in item) {
              if(count >= 1) {

                //console.log(`Value: ${data[i][property]}`);
                myData.data.push(item[property]);
              }
              console.log(`Property: ${property}, Value: ${item[property]}`);
              count++;
            }
            myData.label = data[i].name;
            myChart.data.datasets.push(myData);
          });






          //myChart.data.datasets[0].highlightStroke = "";
          console.log(myChart.data.datasets);
      }

【问题讨论】：

能否也分享一下预期的输出！

标签： javascript arrays loops object prototype

【解决方案1】：

这里的问题是您正在尝试使用Object.create 创建dataset 变量的深层副本。它不会创建深层副本，所有副本将共享一个 data 数组实例。作为一个快速的肮脏修复，您可以改用Object.assign({}, dataset, {data: []})

【讨论】：

我尝试插入上述建议但没有成功。你能提供一个完整的例子吗？
只需将 let myData = Object.create(dataset); 替换为 let myData = Object.assign({}, dataset, {data: []}); 对我有用
@webrocket 您误用了Object.create，它用于原型继承而不是克隆对象。
成功了！谢谢:) 你提到这是解决这个问题的快速而肮脏的方法。什么是干净和首选的方法？
@webrocket 如果您的环境支持对象传播，我会使用const myData = {...dataset, data: []}。此外，当您枚举对象属性时，不应依赖“名称”属性，而不是计数器比较属性值与 'name' 字符串

【解决方案2】：

var x=[
  {
    "name": "sp5",
    "damage": "68",
    "penetration": "35",
    "class1": "6",
    "class2": "6",'https':'//stackoverflow.com/editing-help',
    "class3": "6",
    "class4": "5",
    "class5": "3",
    "class6": "2"
  },
  {
    "name": "sp6",
    "damage": "58",
    "penetration": "43",
    "class1": "6",
    "class2": "6",
    "class3": "6",
    "class4": "6",
    "class5": "5",
    "class6": "4"
  }
]
createObjectsForChart(x);

function createObjectsForChart(data) {
        console.log(`Data: ${data}`);
        const chart = {
          type: 'bar',
            data: {
                labels: ["Damage", "Penetration", "Class1", "Class 2",
                "Class 3", "Class 4", "Class 5", "Class 6"],
                datasets: [],
            }
          }
          const dataset = {
            label: "",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: []
          }

          let myChart = Object.create(chart);

          data.forEach((item, i) => {
            console.log(`Item: ${item}, Index: ${i}`);


            console.log(`Data length: ${data.length}`);
            //data[i]

          //  let myData = Object.create(dataset);
         let myData =   Object.assign({}, dataset, {data: []})
            count = 0;
            for (const property in item) {
              if(count >= 1) {

                //console.log(`Value: ${data[i][property]}`);
                myData.data.push(item[property]);
              }
              console.log(`Property: ${property}, Value: ${item[property]}`);
              count++;
            }
            myData.label = data[i].name;
            myChart.data.datasets.push(myData);
          });






          //myChart.data.datasets[0].highlightStroke = "";
          console.log(myChart.data.datasets);
      }

【讨论】：

有趣的是，这条评论的添加时间比我的回答晚了一段时间，它确实包含了我在作者源代码中所做的更改。