在 javascript 中的命名对象数组中 - 名称可以访问吗？

Question

如果我们创建一些对象，并用这些对象填充一个数组，数组中存储的是名称，还是仅存储对象的属性？ 我想这可能是微不足道的，但我一直无法找到答案。

var boxA = {color: "red", width: 100};
var boxB = {color: "yellow", width: 200};
var boxC = {color: "blue", width: 300};

boxArray = [boxA, boxB, boxC];

for (var i = 0; i < boxArray.length; i++) {

    //****
    // What code do we insert here to log
    // boxA
    // boxB
    // boxC
    //****

}

当然，添加是一个简单的解决方法

boxA.box = boxA; 

等等，然后致电

console.log(boxArray[i].box);

但这真的有必要吗？

Answer 1

直接回答你的问题 - 不，你不能做你所要求的事情。我曾经多次遇到过同样的情况。这就是我所做的。您可以不使用数组，而是将对象添加到对象文字中，并将对象映射到某个唯一键，例如 id。

var boxes = {
  boxA: { color: 'red', width: 100 },
  boxB: { color: 'blue', width: 200 },
  boxC: { color: 'yellow', width: 300 },
};

for (var boxKey in boxes) {
  console.log(boxKey);
}

// to use
boxes.boxA; // do something with boxA

Answer 2

不，那不是那样的。

变量名是 JS 自动为您管理的内存堆区域中对象的引用。

详细来说意味着：

var boxA = {color: "red", width: 100};

本声明：

1. 在堆中创建一个对象
2. 将局部符号

   boxA

   与该对象相关联。

所以该对象还被一个变量引用。

var boxArray = [boxA];

这里：

1. 创建了一个包含一个元素的数组。该元素包含对对象的引用。准确地说，是参考文献的副本。因此，同一个原始对象现在被引用两次。
2. A

   boxArray

   被分配了对数组的引用，该数组也放置在堆中。

总结一下：变量名仅存在于代码清单中，以便开发人员更容易地推理内存中的某些对象，而不是使用内存地址进行操作（这将是可怕的）。

Answer 3

boxArray 中充满了您放入其中的变量值。例子： 如果您要保存三个整数变量而不是变量名称。所以你的新 boxArray 等于：

boxArray = [{color: "red", width: 100},{color: "yellow", width: 200},{color: "blue", width: 300}];

Answer 4

如果您想获取对象的键，请尝试 Object.keys(object)

Object.keys(boxA)

["color", "width"]

Answer 5

执行代码无法访问您的变量名称，但如果您需要能够做到这一点，您可以嵌套对象：

var boxes = {
  boxA: {
    color: "red",
    width: 100
  },
  boxB: {
    color: "yellow",
    width: 200
  },
  boxC: {
    color: "blue",
    width: 300
  }
};

Object.keys(boxes).forEach(function(key) {
  console.log(key) // boxA, boxB, boxC
  console.log(boxes[key]) // {color: "red", width: 100}, etc.
});

Answer 6

迟到了，但是......自从 ES6 javascript 引入了类。如果您可以选择上课：

class boxA { constructor() { this.color = "red"; this.width = 100; } };
class boxB { constructor() { this.color = "yellow"; this.width = 200; } };
class boxC { constructor() { this.color = "blue"; this.width = 300; } };

let boxArray = [new boxA(), new boxB(), new boxC()];

for (var i = 0; i < boxArray.length; i++) {
  console.log(boxArray[i].constructor.name);
}