通过for循环增加数组只保留最后一个对象？

Question

鉴于我的核心数据如下：

var data = [
    { name: "Student01", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ] },
    { name: "Student02", type: "given", grades: [ 11,6,15, 12 ] },
    { name: "Student03", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ]  },
    { name: "Student04", type: "given", grades: [ 12,8,13, 12 ] }
];

给定一个我应该尊重的模板对象：

var template = {
  text: "Hello guys !",
  side: "negative",
  name: "Some student",
  x: [ 12.65, 17.92, 16.45 ],
  orientation: "h"
};

然后我通过 for 循环构建一个 augmentedData：

var augmentedData = [];
for (var i=0; i<data.length;i++){
    var trace = template, 
         student = data[i];
    trace.text = "Step "+i;
    trace.name = student.name;
    trace.x    = student.grades;
    console.log(student, student.type)
    trace.side = student.type == "given"?"negative":"positive";
    console.log(vizGrades[i].type, trace, trace.side)
    augmentedData.push(trace);
}

我的最终增强数据由最后一个对象的 4 倍组成，本身就是增强的：

console.log(JSON.stringify(augmentedData));

返回：

[
  {"text":"Step 3","side":"negative","name":"Student04","x":[12,8,13,12],"orientation":"h"},
  {"text":"Step 3","side":"negative","name":"Student04","x":[12,8,13,12],"orientation":"h"},
  {"text":"Step 3","side":"negative","name":"Student04","x":[12,8,13,12],"orientation":"h"},
  {"text":"Step 3","side":"negative","name":"Student04","x":[12,8,13,12],"orientation":"h"}
];

出了什么问题？如何解决？

编辑：预期输出：

[
  {"text":"Step 0","side":"positive","name":"Student01","x":[12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15],"orientation":"h"},
  {"text":"Step 1","side":"negative","name":"Student02","x":[11,6,15, 12],"orientation":"h"},
  {"text":"Step 2","side":"positive","name":"Student03","x":[12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15],"orientation":"h"},
  {"text":"Step 3","side":"negative","name":"Student04","x":[12,8,13,12],"orientation":"h"}
];

Answer 1

trace = template 行仅从模板传递对跟踪的引用，因此您在循环中一直使用相同的对象。

试试

var template = function() {
  return {
    text: "Hello guys !",
    side: "negative",
    name: "Some student",
    x: [ 12.65, 17.92, 16.45 ],
    orientation: "h"
  };
}

所以trace每次使用trace = template();都会变成一个新对象

Fiddle

Answer 2

出了什么问题？如何解决？

通过编写var trace = template，您仅声明了对template 对象的引用。当您修改 trace 对象时，template 也将被修改。

您需要为您的 template 对象提供深层副本。为此，您可以使用Object.assign 方法。

工作示例。

var data = [
    { name: "Student01", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ] },
    { name: "Student02", type: "given", grades: [ 11,6,15, 12 ] },
    { name: "Student03", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ]  },
    { name: "Student04", type: "given", grades: [ 12,8,13, 12 ] }
];

var template = {
  text: "Hello guys !",
  side: "negative",
  name: "Some student",
  x: [ 12.65, 17.92, 16.45 ],
  orientation: "h"
};

var augmentedData = [];
for (var i=0; i<data.length;i++){
    var trace = Object.assign({}, template), 
    student = data[i];
    trace.text = "Step "+i;
    trace.name = student.name;
    trace.x    = student.grades;
    console.log(student, student.type)
    trace.side = student.type == "given"?"negative":"positive";
    augmentedData.push(trace);
}
console.log(JSON.stringify(augmentedData));

您可以通过传递回调函数来使用map 方法，以便为您的要求编写更简洁的解决方案。

另外，创建一个名为模板的对象构造函数。

var data = [
    { name: "Student01", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ] },
    { name: "Student02", type: "given", grades: [ 11,6,15, 12 ] },
    { name: "Student03", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ]  },
    { name: "Student04", type: "given", grades: [ 12,8,13, 12 ] }
];
function template(text, side, name, x) {
    this.text = text;
    this.side = side;
    this.name = name;
    this.x = x;
    this.orientation = "h";
}

const augmentedData = data.map((student, i) => 
   new template(`Step ${i}`, student.name, student.grades, student.type === "given" ? "negative" : "positive")
);
console.log(augmentedData);

Answer 3

目前我们每次迭代都引用同一个对象并创建一个相同对象的数组。为了防止这种情况，我们需要将template 对象的内容复制到trace 对象中。

您可以使用浅拷贝来完成此操作。有几种方法可以在 Javascript 中进行浅拷贝，我使用扩展运算符 (var trace = {...template}) 将新模板复制到跟踪中。

var data = [
    { name: "Student01", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ] },
    { name: "Student02", type: "given", grades: [ 11,6,15, 12 ] },
    { name: "Student03", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ]  },
    { name: "Student04", type: "given", grades: [ 12,8,13, 12 ] }
];

var template = {
  text: "Hello guys !",
  side: "negative",
  name: "Some student",
  x: [ 12.65, 17.92, 16.45 ],
  orientation: "h"
};

var augmentedData = [];
for (var i=0; i<data.length;i++){
    var trace = {...template}, 
         student = data[i];
    trace.text = "Step "+i;
    trace.name = student.name;
    trace.x    = student.grades;
    trace.side = student.type == "given"?"negative":"positive";

    augmentedData.push(trace);
}

console.log(JSON.stringify(augmentedData));

Answer 4

当您执行var trace = template 时，您只是在创建一个包含对 same 对象的引用的新变量。

您应该像这样每次都创建一个新对象，而不是创建名为 template 的对象：

var data = [
    { name: "Student01", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ] },
    { name: "Student02", type: "given", grades: [ 11,6,15, 12 ] },
    { name: "Student03", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ]  },
    { name: "Student04", type: "given", grades: [ 12,8,13, 12 ] }
];

var augmentedData = [];
for (var i = 0; i < data.length; i++){
    var student = data[i];

    var trace = {
      text: "Step " + i,
      side: student.type == "given" ? "negative" : "positive",
      name: student.name,
      x: student.grades,
      orientation: "h"
    };

    augmentedData.push(trace);
}

console.log(JSON.stringify(augmentedData));

Answer 5

您的trace 变量是对template 对象的引用，因此每当您更改trace 的某些属性时，它也会在引用的对象(template) 中发生更改。

避免此问题的一种方法是将代码重写为map 操作。这是地图的完美用例。

看起来像这样：

const data = [
    { name: "Student01", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ] },
    { name: "Student02", type: "given", grades: [ 11,6,15, 12 ] },
    { name: "Student03", type: "received", grades: [ 12,12, 17, 17, 14.5, 10, 16, 15.5, 15.5, 15 ]  },
    { name: "Student04", type: "given", grades: [ 12,8,13, 12 ] }
];

const augmentedData = data.map((student, i) => ({
  text: `Step ${i}`,
  name: student.name,
  x: student.grades,
  side: student.type === "given" ? "negative" : "positive",
}));

console.log(augmentedData);