如何避免Javascript对象的神秘行为？

Question

在之前的一个问题中，我在查询时收到了多个对象密钥。除此之外，我构建了一个非常小的对象示例来发现如何使用对象。我在MacBook air 2（yosemite）-uptodate上使用Firefox 51.0.1我得到的结果完全莫名其妙。有人可以解释这些结果，并建议如何解决这个问题吗？

预期输出

  

对象0
    j 0 key aprop obj（key）1
    j 1 key bprop obj（key）“one”
    j 2 key cprop obj（key）[1]
  0 :( aprop）：[1]，（bprop）：[“two”]，（cprop）：[[1]]，
    对象1
    j 0 key aprop obj（key）2
    j 1 key bprop obj（key）“two”
    j 2 key cprop obj（key）[2,2]
  1 :( aprop）：[2]，（bprop）：[“two”]，（cprop）：[[2,2]]，
    对象2
    j 0 key aprop obj（key）3
    j 1键bprop obj（键）“三”     j 2 key cprop obj（key）[3,3,3]
  2 :( aprop）：3，（bprop）：[“three”]，（cprop）：[[3,3,3]]，

实际输出

  

对象0
    j 0 key aprop obj（key）1
    j 1 key aprop obj（key）1
    j 2 key aprop obj（key）1
  0 :( aprop）：[1]，（aprop）：[1]，（aprop）：[1]，
    对象1
    j 0键bprop obj（键）两个
    j 1键bprop obj（键）两个
    j 2键bprop obj（键）两个
  1：（bprop）：[two]，（bprop）：[two]，（bprop）：[two]，
    对象2
    j 0 key cprop obj（key）3,3,3
    j 1 key cprop obj（key）3,3,3
    j 2 key cprop obj（key）3,3,3
  2：（cprop）：[3,3,3]，（cprop）：[3,3,3]，（cprop）：[3,3,3]，

var objList = [];

class TestObj {
  constructor(aprop, bprop, cprop) {
    this.aprop = aprop;
    this.bprep = bprop;
    this.cprep = cprop;
    this.dprop = 0;
  }
  getAprop() {
    return aprop;
  }
  getBprop() {
    return bprop;
  }
  getCprop() {
    return cprop;
  }
  getDprop() {
    return dprop;
  }

  setAprop(arg) {
    aprop = arg;
  }
  setBprop(arg) {
    bprop = arg;
  }
  setCprop(arg) {
    cprop = arg;
  }
  setDprop(arg) {
    dprop = arg;
  }
}

var keylist = ["aprop", "bprop", "cprop"];

function create() {
  putList();
  var t1 = objList[1];
  alert("fromlist " + t1);

  for (var i = 0; i < objList.length; i++) {
    var s = "" + i + ": ";
    var obj = objList[i];
    console.log("   object " + i);
    for (var j = 0; j < keylist.length; j++) {
      var key = keylist[i];
      console.log("   j " + j + " key " + key + " obj(key) " + obj[key]);

      s += "(";
      s += key;
      s += ")";
      s += ": ";
      s += "[";
      s += obj[key];
      s += "]";
      s += ",";
    }
    console.log(s);
  }
}

function putList() {
  onlist(1, "one" [1]);
  onlist(2, "two", [2, 2]);
  onlist(3, "three", [3, 3, 3]);
}

function onlist(a, b, c) {
  var item = new TestObj();
  item["aprop"] = a;
  item["bprop"] = b;
  item["cprop"] = c;
  objList.push(item);
}

create();

Answer 1

由于几个拼写错误，你没有得到预期的输出：

1. var key = keylist[j]; //需要使用j而不是我在评论中指出的那个
2. onlist(1, "one", [1]); //此处缺少，（逗号）

修正片段:(输出符合预期）

＆＃13;
＆＃13;
var objList = [];

class TestObj {
  constructor(aprop, bprop, cprop) {
    this.aprop = aprop;
    this.bprep = bprop;
    this.cprep = cprop;
    this.dprop = 0;
  }
  getAprop() {
    return aprop;
  }
  getBprop() {
    return bprop;
  }
  getCprop() {
    return cprop;
  }
  getDprop() {
    return dprop;
  }

  setAprop(arg) {
    aprop = arg;
  }
  setBprop(arg) {
    bprop = arg;
  }
  setCprop(arg) {
    cprop = arg;
  }
  setDprop(arg) {
    dprop = arg;
  }
}

var keylist = ["aprop", "bprop", "cprop"];

function create() {
  putList();
  var t1 = objList[1];

  for (var i = 0; i < objList.length; i++) {
    var s = "" + i + ": ";
    var obj = objList[i];
    console.log("   object " + i);
    for (var j = 0; j < keylist.length; j++) {
      var key = keylist[j];
      console.log("   j " + j + " key " + key + " obj(key) " + obj[key]);

      s += "(";
      s += key;
      s += ")";
      s += ": ";
      s += "[";
      s += obj[key];
      s += "]";
      s += ",";
    }
    console.log(s);
  }
}

function putList() {
  onlist(1, "one", [1]);
  onlist(2, "two", [2, 2]);
  onlist(3, "three", [3, 3, 3]);
}

function onlist(a, b, c) {
  var item = new TestObj();
  item["aprop"] = a;
  item["bprop"] = b;
  item["cprop"] = c;
  objList.push(item);
}

create();
＆＃13;
＆＃13;
＆＃13;

注意：没有使用setter / getters，我把它们留在了片段中作为参考。