将一个连接的（动态的）字符串作为JavaScript对象的键使用？

Question

var test = "test123"
var test123 ={
    "key" + test: 123
}

这段代码不起作用。"key" + test 有什么问题？

- thinkanotherone

---

从略微不同的角度来看：https://dev59.com/VXE95IYBdhLWcg3wlvCz - user166390

Answer 1

由于"key" + test是一个表达式，而不是标识符、字符串字面量或数字字面量，这些是对象字面量中允许用作键的唯一内容。

因此，您必须在创建对象后使用[]记号来表示动态键：

var test123 = {};
test123["key" + test] = 123;

标识符基本上是变量可以使用的字符子集合（字母、数字、_ 和 $；不以数字开头），而字符串字面量是用' 或 "括起来的任何字符串。

因此，在对象字面量中可以使用的键的唯一类型是：

{
  a0:   true, // valid identifier
  $$_:  true, // same
  123:  true, // valid numeric literal
  012:  true, // same (octal)
  0xf:  true, // same (hex)
  "@":  true, // not allowed as an identifier
  '0a': true  // same
}

参考资料：http://es5.github.com/#x11.1.5.

PropertyName：

标识符名称

字符串字面量

数值字面量

- pimvdb

---

此外，对象字面量中也允许包含数字，例如0或5e10（但不包括-10，因为减号 - 不是数字字面量的一部分，而是一元运算符的负号）。 - Felix Kling

@Felix Kling：确实如此，谢谢。 - pimvdb

Answer 2

使用ES6，您可以在对象字面量中定义动态键：

const test = "test123"
const test123 = { [`key${test}`]: 123 };  //{ keytest123: 123 }

- Ben

---

这个可以与扩展运算符一起使用。 - friartuck

Answer 3

你可以这样做，但不能使用字面量表示法（ES6之前的方法）。

var test123 = {};
test123["foo" + "bar"] = 'baz';

test123.foobar === 'baz'; // true

- max

---

谢谢你提供简单的答案，这正是我所需要的 :) - Daniel Tonon

Answer 4

Javascript提供了两种定义对象属性的方式：

1. object.propertyName = value;

在这种情况下，propertyName是不可编辑和不可计算的。您无法执行以下操作：

    object.('property'+'Name')

如您所见，

    object = {propertyName:value};
    object = {'propertyName':value};

它们是相等的

2. 您可以使用“[]”将变量作为属性名称；

您可以这样做：

 var a  = "propertyName";
 object[a] = value;

这次你需要使用一个字符串

object[propertyName] = value;//error
object["propertyName"] = value;//correct
object = {'propertyName':value};//correct
object = {propertyName:value};//correct

- jilykate

Answer 5

您的代码相当于test123.("key" + test) = 123，这可能更有助于您理解为什么它是错误的。

要通过字符串访问字段需要使用["name"]符号。其他符号（您的和.）需要标识符。

- Krizz

Answer 6

--HTML--
<div id="name1"></div>
<div id="name2"></div>
<div id="name3"></div>

--JS--
  function getJsonData(){
   var hr = new XMLHttpRequest();
   hr.open("GET", "bookJson.json", true);
   hr.setRequestHeader("Content-type", "application/json", true);
   hr.onreadystatechange = function() {
  if(hr.readyState == 4 && hr.status == 200) {

     var data = JSON.parse(hr.responseText);
   for(var i=0;i<3;i++){
     var a = "p"+(i+1)+"H";
     $("#name"+(i+1)).html(data[objName][a]);
     }


   }

 }
  hr.send(null);
}

---JSON--- save JSON file name as bookJson.json
 { "objName":
   {
    "p1H":"content1",
    "p2H":"content2",
    "p3H":"content3",
   }
  }
----------------------------------- 
 json object key name p1H,p2H,p3H ... 
 We want to dynamically get this keys in javacript instead of   **data[objName].p1H**. you can get dynamical key like **data[objName]["p1H"]**

- Bhushana Rao Kadimi

---

请提供您的答案解释，以帮助该网站的其他用户。仅有代码的答案并不是很有用，往往会被标记为低质量并可能被删除。 - Tristan

感谢您的建议，我提供了我的答案解释... - Bhushana Rao Kadimi