Użyj złożonego (dynamicznego) ciągu znaków jako klucza obiektu JavaScript?

Question

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

Ten kod nie działa. Co jest nie tak z "kluczem" + test?

Answer 1

Ponieważ "key" + test jest wyrażeniem, a nie identyfikatorem, ani literałem łańcuchowym, ani literałem liczbowym, które są jedynymi elementami, które są dozwolone jako klucz literału obiektu.

Musisz użyć notacji [] po utworzeniu obiektu dla takiego dynamicznego klucza:

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

Identyfikator jest w zasadzie taki sam podzbiór znaków, które można nazwać zmienną (litery, cyfry, _ i $; może nie zaczynać się od cyfry), a literał łańcuchowy to dowolny ciąg zawarty w ' lub ".

Więc jedyne rodzaje kluczy można użyć w obiekcie dosłownym są:

{ 
    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 
} 

referencyjny: http://es5.github.com/#x11.1.5.

PropertyName:

IdentifierName

literał łańcuchowy

NumericLiteral

Answer 2

Można, ale nie za pomocą zapisu dosłownego (przed ES6).

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

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

Answer 3

Twój kod jest równoważne test123.("key" + test) = 123 które mogą pomóc lepiej zrozumieć, dlaczego to jest złe.

Potrzebna jest notacja ["name"], aby móc uzyskać dostęp do pól według ich nazwy w łańcuchu. Inne notacje (twoje i .) wymagają identyfikatorów.

Answer 4

--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"]** 

Answer 5

JavaScript na dwa sposoby w celu wyznaczenia właściwości obiektu:

1. object.propertyName = wartość;

W tej sytuacji właściwość propertyName nie jest edytowalna i nie można jej obliczać.nie można wykonać następujące czynności:

object.('property'+'Name') 

jak widać

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

są równe

2. można użyć zmiennej jako nazwy właściwości z "[]";

można zrobić:

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

i tym razem trzeba użyć ciąg

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

Answer 6

Z ES6, można zdefiniować klucze dynamiczne wewnątrz obiektu dosłownym:

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