วิธีการตั้งชื่อคุณสมบัติวัตถุ JS จากตัวแปร


178

ฉันต้องการตั้งค่าชื่อคุณสมบัติวัตถุ JS แบบไดนามิก

for(i=1; i<3; i++) {
    var key  = i+'name';

    data = {
        key : 'name1',
    }
}

ผลลัพธ์ควรเป็น:

data = {
    1name: 'name1'
    2name: 'name1'
}

หากพวกเขาเรียงตามลำดับทำไมคุณไม่ใช้ Array?
epascarello

ฉันอยากรู้ว่าคุณสามคนโดนลูกศรผิด เเละยอมรับ
ชาร์ลส์

คำตอบ:


194
var jsonVariable = {};
for(var i=1; i < 3; i++) {
  jsonVariable[i + 'name'] = 'name' + i;        
}

4
การตอบสนองของ Musa ด้านล่างนั้นถูกต้องชัดเจนว่าการใช้เครื่องหมาย [] เป็นวิธีเดียวที่จะทำได้
Dennis Plucinik

1
โปรดทราบว่าการตอบสนองของ @ ChilNut ด้านล่างนี้อธิบายวิธีที่ง่ายที่สุดในการทำสิ่งนี้โดยใช้ ES6
rambossa

1
ที่จริงแล้วด้วยไวยากรณ์ใหม่สิ่งที่ OP พยายามบรรลุจะเป็นไปได้ก็ต่อเมื่อขีด จำกัด ลูปเป็นฮาร์ดโค้ดและขนาดเล็ก
Musa

168

คุณจะต้องใช้[]เครื่องหมายเพื่อตั้งค่าคีย์แบบไดนามิก

var jsonVariable = {};
for(i=1; i<3; i++) {        
 var jsonKey  = i+'name';
 jsonVariable[jsonKey] = 'name1';

}

ตอนนี้ใน ES6 คุณสามารถใช้ไวยากรณ์ตัวอักษรของวัตถุเพื่อสร้างคีย์วัตถุแบบไดนามิกเพียงแค่ล้อมรอบตัวแปร []

var key  = i + 'name';
data = {
    [key] : 'name1',
}

3
jsonVariable = {}; ไม่ควรเริ่มต้นภายใน for for loop
ปิด

นอกจากนี้คุณกำลังสร้าง jsonVariable global ที่นี่
Dennis Plucinik

130

ด้วย ECMAScript 6 คุณสามารถใช้ชื่อคุณสมบัติตัวแปรกับไวยากรณ์ตัวอักษรของวัตถุเช่นนี้:

var keyName = 'myKey';
var obj = {
              [keyName]: 1
          };
obj.myKey;//1

ไวยากรณ์นี้มีอยู่ในเบราว์เซอร์ที่ใหม่กว่าต่อไปนี้:

Edge 12+ (ไม่รองรับ IE), FF34 +, Chrome 44+, Opera 31+, Safari 7.1+

( https://kangax.github.io/compat-table/es6/ )

คุณสามารถเพิ่มการสนับสนุนเบราว์เซอร์รุ่นเก่าโดยใช้transpilerเช่นBabel มันเป็นเรื่องง่ายที่จะ transpile โครงการทั้งหมดถ้าคุณกำลังใช้โมดูล Bundler เช่นการยกเลิกหรือwebpack


2
ขอขอบคุณที่เพิ่มไวยากรณ์ ES6 ที่น่าประทับใจ
rambossa

หากไม่มี ES6 ฉันไม่สามารถกำหนด var payload = {dynamicKey: val} ฉันต้องทำ var payload = {} และ payload [variableName] = val
Sainath SR

23

นี่คือวิธีการตั้งค่าแบบไดนามิก

var jsonVariable = {};
for (var i = 1; i < 3; i++) {
    var jsonKey = i + 'name';
    jsonVariable[jsonKey] = 'name' + i;
}

20

ใช้ตัวแปรเป็นคีย์วัตถุ

let key = 'myKey';

let data = {[key] : 'name1'; }

ดูวิธีทำซ้ำบนวัตถุของคุณที่นี่


คุณช่วยอธิบายเพิ่มเติมอีกเล็กน้อยเพื่อให้คนอื่นรู้ได้ไหมว่าทำไมนี่จึงเป็นทางออก
phaberest

ข้อมูลที่คุณเพิ่มนั้นใช้ได้ แต่ไม่เคยให้คำตอบกับรหัสเพียง)
27432

7

มันไม่สำคัญว่าตัวแปรมาจากไหน สิ่งสำคัญที่เรามีหนึ่ง ... ตั้งชื่อตัวแปรระหว่างวงเล็บเหลี่ยม "[.. ]"

var optionName = 'nameA';
var JsonVar = {
[optionName] : 'some value'
}

มันใช้งานได้ดีฉันสงสัยว่ามันจะทำงานในทุกเบราว์เซอร์ / รุ่น
Mercury

1
jsonVariable = {}
for(i=1; i<3; i++) {        
   var jsonKey  = i+'name';
   jsonVariable[jsonKey] = 'name1'
}

สิ่งนี้จะคล้ายกับ

    jsonVariable = {
    1name : 'name1'
    2name : 'name1'
}

0

ตามความคิดเห็นของ Sainath SR ข้างบนฉันสามารถตั้งค่าชื่อคุณสมบัติวัตถุ js จากตัวแปรใน Google Apps Script (ซึ่งยังไม่รองรับ ES6) โดยการกำหนดวัตถุแล้วกำหนดคีย์ / ค่าอื่นนอกวัตถุ:

var salesperson = ...

var mailchimpInterests = { 
        "aGroupId": true,
    };

mailchimpInterests[salesperson] = true;
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.