小编典典

如何创建要添加到 JavaScript 对象变量的动态键

all

我正在尝试这样的事情,但这个例子不起作用。

jsObj = {};

for (var i = 1; i <= 10; i++) {
    jsObj{'key' + i} = 'example ' + 1;
}

我该怎么做才能制作这样的动态密钥?


阅读 78

收藏
2022-04-26

共1个答案

小编典典

方括号:

jsObj['key' + i] = 'example' + 1;

在 JavaScript 中,所有数组都是对象,但并非所有对象都是数组。主要区别(并且很难用直接的 JavaScript
和普通对象模仿)是数组实例维护length属性,以便它反映名称为数字的属性的数值加上其值,当转换为数字时,
是所有此类属性中最大的。这听起来很奇怪,但这只是意味着给定一个数组实例,名称为"0""5"、等的属性"207"都被特殊对待,因为它们的存在决定了
的值length。并且,最重要的是,length可以 设置 的值以 删除
此类属性。将length数组的0有效地删除名称看起来像整数的所有属性。

好的,这就是数组特别的原因。然而,所有这些都与 JavaScript 运算符的工作方式无关[ ]。该运算符是适用于任何对象的对象属性访问机制。重要的是要注意,就简单的属性访问而言,数值数组属性名称并不特殊。它们只是碰巧看起来像数字的字符串,但
JavaScript 对象属性名称可以是您喜欢的任何类型的字符串。

因此,[ ]运算符在for遍历数组的循环中的工作方式:

for (var i = 0; i < myArray.length; ++i) {
  var value = myArray[i]; // property access
  // ...
}

[ ]与访问名称为某个计算字符串的属性时的工作方式没有什么不同:

var value = jsObj["key" + i];

那里的[ ]操作员在这两种情况下都在做 完全相同 的事情。换句话说,在一种情况下,所涉及的对象恰好是一个数组这一事实并不重要。

使用 设置 属性值时, 除了 围绕维护属性的特殊行为外,[ ]情况相同。如果您在数组实例上使用数字键设置属性: __length

myArray[200] = 5;

然后(假设“200”是最大的数字属性名称)length属性将被更新201为属性分配的副作用。但是,如果对普通对象执行相同的操作:

myObj[200] = 5;

没有这样的副作用。数组和对象的名为“200”的属性将以5完全相同的方式设置为该值。

有人可能会认为,因为这种length行为有点方便,您不妨让 所有 对象都成为 Array
构造函数的实例,而不是普通对象。这并没有直接的错误(尽管它可能会令人困惑,特别是对于熟悉其他一些语言的人来说,某些属性包含在length但其他属性中)。但是,如果您正在使用
JSON 序列化(相当常见的事情),请了解数组实例以 涉及数字命名属性的方式序列化为 JSON。添加到数组的其他属性将永远不会出现在序列化的
JSON 表单中。例如:

var obj = [];
obj[0] = "hello world";
obj["something"] = 5000;

var objJSON = JSON.stringify(obj);

“objJSON”的值将是一个仅包含的字符串["hello world"];“某物”属性将丢失。

ES2015:

如果您能够使用 ES6 JavaScript 功能,则可以使用计算属性名称来非常轻松地处理这个问题:

var key = 'DYNAMIC_KEY',
    obj = {
        [key]: 'ES6!'
    };

console.log(obj);
// > { 'DYNAMIC_KEY': 'ES6!' }
2022-04-26