Sử dụng chuỗi được nối (động) làm khóa đối tượng JavaScript?

Question

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

Mã này không hoạt động. Có vấn đề gì với thử nghiệm "key" +?

Answer 1

Bởi vì "key" + test là một biểu thức chứ không phải là số nhận dạng cũng như chuỗi ký tự cũng như chữ số, là những thứ duy nhất được phép làm khóa trong một đối tượng theo nghĩa đen.

Bạn phải sử dụng các [] ký hiệu sau khi tạo đối tượng cho một phím năng động như:

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

Một định danh về cơ bản là tập hợp con cùng các ký tự mà bạn có thể gọi một biến (chữ cái, số, _ và $; không được bắt đầu bằng số) và chuỗi ký tự là bất kỳ chuỗi nào kèm theo ' hoặc ".

Vì vậy, các loại duy nhất của phím bạn có thể sử dụng trong một đối tượng theo nghĩa đen là:

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

tham khảo: http://es5.github.com/#x11.1.5.

PropertyName:

IdentifierName

StringLiteral

NumericLiteral

Answer 2

Bạn có thể nhưng không phải với ký hiệu chữ (trước ES6).

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

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

Answer 3

Mã của bạn tương đương với test123.("key" + test) = 123, điều này có thể giúp bạn hiểu tại sao nó sai.

Bạn cần ["name"] ký hiệu để có thể truy cập các trường theo tên của chúng theo chuỗi. Các ký hiệu khác (của bạn và . một) yêu cầu mã định danh.

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 cung cấp hai cách để xác định một tài sản của một đối tượng:

1. object.propertyName = giá trị;

Trong trường hợp này, propertyName không thể chỉnh sửa và không thể tính toán được.bạn không thể làm như sau:

object.('property'+'Name') 

như bạn có thể nhìn thấy

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

họ đều bình đẳng

2. bạn có thể sử dụng một biến như tên sở hữu với "[]";

bạn có thể làm:

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

và lần này bạn phải sử dụng một chuỗi

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

Answer 6

Với ES6, bạn có thể xác định các phím năng động trong một đối tượng theo nghĩa đen:

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