วิธีการใช้ตัวแปรสำหรับคีย์ในวัตถุ JavaScript ตัวอักษร?

ทำไมงานต่อไปนี้

<something>.stop().animate(
    { 'top' : 10 }, 10
);

ในขณะที่สิ่งนี้ไม่ทำงาน:

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

วิธีทำให้ชัดเจนยิ่งขึ้น: ในขณะนี้ฉันไม่สามารถส่งคุณสมบัติ CSS ไปยังฟังก์ชันภาพเคลื่อนไหวเป็นตัวแปรได้

{ thetop : 10 }เป็นวัตถุที่ถูกต้องตามตัวอักษร รหัสจะสร้างวัตถุที่มีคุณสมบัติชื่อthetopที่มีค่า 10 ทั้งสองอย่างต่อไปนี้จะเหมือนกัน:

obj = { thetop : 10 };
obj = { "thetop" : 10 };

ใน ES5 และก่อนหน้านี้คุณไม่สามารถใช้ตัวแปรเป็นชื่อคุณสมบัติภายในวัตถุตามตัวอักษร ตัวเลือกเดียวของคุณคือทำสิ่งต่อไปนี้:

var thetop = "top";

// create the object literal
var aniArgs = {};

// Assign the variable property name with a value of 10
aniArgs[thetop] = 10; 

// Pass the resulting object to the animate method
<something>.stop().animate(
    aniArgs, 10  
);  

ES6 กำหนด ComputedPropertyNameเป็นส่วนหนึ่งของไวยากรณ์สำหรับตัวอักษรวัตถุซึ่งช่วยให้คุณสามารถเขียนรหัสเช่นนี้:

var thetop = "top",
    obj = { [thetop]: 10 };

console.log(obj.top); // -> 10

คุณสามารถใช้ไวยากรณ์ใหม่นี้ในเวอร์ชันล่าสุดของแต่ละเบราว์เซอร์หลัก

ด้วยECMAScript 2015ตอนนี้คุณสามารถทำได้โดยตรงในการประกาศวัตถุด้วยเครื่องหมายวงเล็บ: 

var obj = {
  [key]: value
}

โดยที่keyสามารถเป็นนิพจน์ประเภทใดก็ได้ (เช่นตัวแปร) ที่ส่งคืนค่า

ดังนั้นรหัสของคุณจะมีลักษณะดังนี้:

<something>.stop().animate({
  [thetop]: 10
}, 10)

thetopจะทำการประเมินที่ไหนก่อนใช้เป็นกุญแจ

ใบเสนอราคา ES5 ที่บอกว่าไม่ควรใช้งาน

หมายเหตุ: กฎมีการเปลี่ยนแปลงสำหรับ ES6: https://stackoverflow.com/a/2274327/895245

ข้อมูลจำเพาะ: http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

ชื่อคุณสมบัติ:

• IdentifierName
• StringLiteral
• NumericLiteral

[ ... ]

PropertyName การผลิต: IdentifierName ถูกประเมินดังนี้:

1. ส่งคืนค่าสตริงที่มีลำดับของอักขระเหมือนกับ IdentifierName

PropertyName การผลิต: StringLiteral ถูกประเมินดังนี้:

1. ส่งคืน SV [ค่าสตริง] ของ StringLiteral

PropertyName การผลิต: NumericLiteral ได้รับการประเมินดังนี้:

1. ให้ nbr เป็นผลลัพธ์ของการสร้างค่าของ NumericLiteral
2. ส่งคืน ToString (nbr)

ซึ่งหมายความว่า:

• { theTop : 10 } เหมือนกันทุกประการ { 'theTop' : 10 }

  PropertyName theTopเป็นIdentifierNameดังนั้นจึงได้รับการแปลงเป็นค่าสตริงซึ่งเป็นค่าสตริงของ'theTop''theTop'

• ไม่สามารถเขียนวัตถุเริ่มต้น (ตัวอักษร) ด้วยปุ่มตัวแปร

  สามตัวเลือกเท่านั้นคือIdentifierName(ขยายเป็นสตริงตัวอักษร) StringLiteralและNumericLiteral(ขยายเป็นสตริงด้วย)

ฉันใช้สิ่งต่อไปนี้เพื่อเพิ่มคุณสมบัติที่มีชื่อ "ไดนามิก" ลงในวัตถุ:

var key = 'top';
$('#myElement').animate(
   (function(o) { o[key]=10; return o;})({left: 20, width: 100}),
   10
);

key เป็นชื่อของคุณสมบัติใหม่

วัตถุของคุณสมบัติที่ส่งผ่านไปanimateจะเป็น{left: 20, width: 100, top: 10}

นี่เป็นเพียงการใช้[]สัญกรณ์ที่จำเป็นตามที่แนะนำโดยคำตอบอื่น ๆ แต่มีรหัสบรรทัดน้อยลง!

การเพิ่มวงเล็บเหลี่ยมรอบ ๆ ตัวแปรใช้งานได้ดีสำหรับฉัน ลองสิ่งนี้

var thetop = 'top';
<something>.stop().animate(
    { [thetop] : 10 }, 10
);

ฉันไม่พบตัวอย่างง่ายๆเกี่ยวกับความแตกต่างระหว่าง ES6 และ ES5 ดังนั้นฉันจึงสร้างมันขึ้นมา ตัวอย่างโค้ดทั้งคู่สร้างวัตถุเดียวกันทั้งหมด แต่ตัวอย่าง ES5 ยังทำงานในเบราว์เซอร์รุ่นเก่า (เช่น IE11) ซึ่งตัวอย่าง ES6 ใช้ไม่ได้

ES6

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

matrix[a] = {[b]: {[c]: d}};

ES5

var matrix = {};
var a = 'one';
var b = 'two';
var c = 'three';
var d = 'four';

function addObj(obj, key, value) {
  obj[key] = value;
  return obj;
}

matrix[a] = addObj({}, b, addObj({}, c, d));

อัปเดต / ตัวอย่าง 2020

ตัวอย่างที่ซับซ้อนมากขึ้นการใช้วงเล็บและตัวอักษร ... สิ่งที่คุณอาจต้องทำกับ vue / axios ล้อมตัวอักษรไว้ในวงเล็บดังนั้น

[`... `]

{
    [`filter[${query.key}]`]: query.value,  // 'filter[foo]' : 'bar'
}

รับรหัส:

var thetop = 'top';
<something>.stop().animate(
    { thetop : 10 }, 10
);

แปล:

var thetop = 'top';
var config = { thetop : 10 }; // config.thetop = 10
<something>.stop().animate(config, 10);

ในขณะที่คุณสามารถดูประกาศไม่ได้ทำให้การใช้งานของตัวแปร{ thetop : 10 } thetopแต่จะสร้างวัตถุที่มีชื่อคีย์thetopแทน หากคุณต้องการให้คีย์เป็นค่าของตัวแปรthetopคุณจะต้องใช้วงเล็บเหลี่ยมรอบthetop:

var thetop = 'top';
var config = { [thetop] : 10 }; // config.top = 10
<something>.stop().animate(config, 10);

ไวยากรณ์ของวงเล็บเหลี่ยมได้รับการแนะนำให้รู้จักกับ ES6 ใน JavaScript เวอร์ชันก่อนหน้าคุณต้องทำสิ่งต่อไปนี้:

var thetop = 'top';
var config = (
  obj = {},
  obj['' + thetop] = 10,
  obj
); // config.top = 10
<something>.stop().animate(config, 10);

ฉันไม่อยากจะเชื่อว่าสิ่งนี้ยังไม่ได้โพสต์: เพียงใช้สัญลักษณ์ลูกศรพร้อมการประเมินแบบไม่ระบุชื่อ!

ไม่มีการบุกรุกอย่างสมบูรณ์ไม่ยุ่งกับเนมสเปซและใช้เพียงบรรทัดเดียว:

myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);

การสาธิต:

var myKey="valueof_myKey";
var myValue="valueof_myValue";
var myNewObj = ((k,v)=>{o={};o[k]=v;return o;})(myKey,myValue);
console.log(myNewObj);

มีประโยชน์ในสภาพแวดล้อมที่ไม่รองรับสิ่งใหม่ {[myKey]: myValue}ไวยากรณ์เช่น - ชัดเจน ฉันเพิ่งตรวจสอบแล้วบนคอนโซลนักพัฒนาเว็บ - Firefox 72.0.1, เปิดตัว 2020-01-08

(ฉันแน่ใจว่าคุณสามารถสร้างโซลูชันที่มีประสิทธิภาพ / ขยายได้มากขึ้นหรืออะไรก็ตามที่เกี่ยวข้องกับการใช้งานอย่างชาญฉลาดreduceแต่ ณ จุดนั้นคุณอาจได้รับการบริการที่ดีขึ้นโดยการแยกการสร้างวัตถุออกเป็นฟังก์ชันของตัวเอง ทั้งหมดในบรรทัด)

ไม่ว่าเรื่องตั้งแต่ OP ถามนี้สิบปีที่ผ่านมา แต่เพื่อความสมบูรณ์ประโยชน์และเพื่อแสดงให้เห็นถึงวิธีการที่จะว่า ตอบคำถามตามที่ระบุไว้ฉันจะแสดงนี้ในบริบทเดิม:

var thetop = 'top';
<something>.stop().animate(
    ((k,v)=>{o={};o[k]=v;return o;})(thetop,10), 10
);

ด้วยวิธีนี้คุณสามารถบรรลุผลลัพธ์ที่ต้องการ

var jsonobj={};
var count=0;
$(document).on('click','#btnadd', function() {
    jsonobj[count]=new Array({ "1"  : $("#txtone").val()},{ "2"  : $("#txttwo").val()});
    count++;
    console.clear();
    console.log(jsonobj);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>value 1</span><input id="txtone" type="text"/>
<span>value 2</span><input id="txttwo" type="text"/>
<button id="btnadd">Add</button>

การติดตั้ง ES5 เพื่อกำหนดคีย์ด้านล่าง:

var obj = Object.create(null),
    objArgs = (
      (objArgs = {}),
      (objArgs.someKey = {
        value: 'someValue'
      }), objArgs);

Object.defineProperties(obj, objArgs);

ฉันแนบตัวอย่างที่ฉันใช้ในการแปลงเป็นวัตถุเปล่า

var obj = {
  'key1': 'value1',
  'key2': 'value2',
  'key3': [
    'value3',
    'value4',
  ],
  'key4': {
    'key5': 'value5'
  }
}

var bareObj = function(obj) {

  var objArgs,
    bareObj = Object.create(null);

  Object.entries(obj).forEach(function([key, value]) {

    var objArgs = (
      (objArgs = {}),
      (objArgs[key] = {
        value: value
      }), objArgs);

    Object.defineProperties(bareObj, objArgs);

  });

  return {
    input: obj,
    output: bareObj
  };

}(obj);

if (!Object.entries) {
  Object.entries = function(obj){
    var arr = [];
    Object.keys(obj).forEach(function(key){
      arr.push([key, obj[key]]);
    });
    return arr;
  }
}

console(bareObj);

คุณสามารถทำสิ่งต่อไปนี้สำหรับ ES5:

var theTop = 'top'
<something>.stop().animate(
  JSON.parse('{"' + theTop + '":' + JSON.stringify(10) + '}'), 10
)

หรือแยกไปยังฟังก์ชัน:

function newObj (key, value) {
  return JSON.parse('{"' + key + '":' + JSON.stringify(value) + '}')
}

var theTop = 'top'
<something>.stop().animate(
  newObj(theTop, 10), 10
)

ถ้าคุณต้องการให้วัตถุคีย์เป็นชื่อตัวแปรมีมือสั้น ๆ ใน ES 2015 สัญลักษณ์ใหม่ใน ECMAScript 2015

var thetop = 10;
var obj = { thetop };
console.log(obj.thetop); // print 10

คุณสามารถทำได้ด้วยวิธีนี้:

var thetop = 'top';
<something>.stop().animate(
    new function() {this[thetop] = 10;}, 10
);

คุณสามารถลองสิ่งนี้:

let array1 = [{
    "description": "THURSDAY",
    "count": "1",
    "date": "2019-12-05"
},
{
    "description": "WEDNESDAY",
    "count": "0",
    "date": "2019-12-04"
}]
let res = array1.map((value, index) => {
    return { [value.description]: { count: value.count, date: value.date } }
})
console.log(res);