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

Question

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

jsObj = {};

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

如何制作这样的动态密钥呢？

Answer 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"的值将是一个包含just的字符串["hello world"]; "某物"财产将会丢失.

ES2015:

如果您能够使用ES6 JavaScript功能,则可以使用计算属性名称来轻松处理:

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

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