जावास्क्रिप्ट ऑब्जेक्ट शाब्दिक में कुंजी के लिए एक चर का उपयोग कैसे करें?

Question

निम्नलिखित कार्य क्यों करता है?

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

जबकि यह काम नहीं करता है:

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

इसे और भी स्पष्ट करने के लिए: फिलहाल मैं एक चर के रूप में चेतन समारोह के लिए एक सीएसएस संपत्ति को पारित करने में सक्षम नहीं हूं।

Comments

यह भी देखें: संपत्ति के नाम के लिए चर का उपयोग करके ऑब्जेक्ट बनाएं

— बर्गी

यह भी देखें: गतिशील कुंजी के साथ वस्तु का निर्माण

— बर्गी

Answer 1

{ thetop : 10 }एक वैध वस्तु शाब्दिक है। कोड एक ऐसी संपत्ति बना देगा जिसका नाम thetop10 है, जिसका मूल्य 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

आप प्रत्येक मुख्यधारा ब्राउज़र के नवीनतम संस्करणों में इस नए सिंटैक्स का उपयोग कर सकते हैं।

Comments

मै समझता हुँ! धन्यवाद! Shoudl क्या यह भी eval के साथ काम नहीं करता है? मेरा मतलब है कि यह इस समय मेरे उदाहरण में काम नहीं करता है, लेकिन मुझे इसे पतला करना चाहिए ... :-)

— speendo

@ मार्सेल: eval()डायनामिक प्रॉपर्टी के नामों के लिए ऑब्जेक्ट के अंदर काम नहीं करेगा, आपको सिर्फ एक त्रुटि मिलेगी। इतना ही नहीं, लेकिन eval()वास्तव में ऐसी चीजों के लिए इस्तेमाल नहीं किया जाना चाहिए। सही और गलत उपयोग पर एक उत्कृष्ट लेख है eval: blogs.msdn.com/ericlippert/archive/2003/11/01/53329.aspx

— Andy E

@AndyE "हाल के संस्करणों" और "वर्तमान IE टीपी" को कुछ और विशिष्ट समय जैसे "संस्करणों से बाद में XXX" या "2014-मिमी के बाद" अपडेट करने पर विचार करें (मैं खुद को बदल दूंगा, लेकिन मुझे नहीं पता कि क्या अच्छे मूल्य हैं होगा।

— अलेक्सई लेवेनकोव

ES6 के लिए, क्या संपत्ति को छोड़ने का एक तरीका है यदि कुंजी शून्य / अपरिभाषित है? उदाहरण के लिए, {[key] : "value"}अगर, कुंजी शून्य थी, तो वह देगा { null: "value"}, जबकि मैं परिणाम चाहता हूं{}

— वासिगीक

अद्भुत समाधान, लेकिन आप इतना क्यों जानते हैं, यहां तक ​​कि पूरे विनिर्देशन को पढ़ने से भी बात नहीं बन सकती है :(

— ह्यूग्मो

Answer 2

ECMAScript 2015 के साथ अब आप इसे सीधे ब्रैकेट संकेतन के साथ ऑब्जेक्ट डिक्लेरेशन में कर सकते हैं: 

var obj = {
  [key]: value
}

keyकिसी मान को लौटाने के लिए किसी भी प्रकार की अभिव्यक्ति (उदाहरण के लिए एक चर) कहां हो सकती है।

तो यहां आपका कोड इस तरह दिखेगा:

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

thetopकुंजी के रूप में उपयोग किए जाने से पहले कहां मूल्यांकन किया जाएगा।

Answer 3

ES5 बोली कि यह काम नहीं करना चाहिए

नोट: ES6 के लिए नियम बदल गए हैं: https://stackoverflow.com/a/2274327/895245

युक्ति: http://www.ecma-international.org/ecma-262/5.1/#sec-11.1.5

सम्पत्ति का नाम :

• IdentifierName
• शाब्दिक स्ट्रिंग
• NumericLiteral

[...]

उत्पादन गुणनाम: पहचानकर्ता नाम का मूल्यांकन इस प्रकार किया जाता है:

1. पहचानकर्तानाम के रूप में वर्णों के समान अनुक्रम वाले स्ट्रिंग मान को लौटाएं।

उत्पादन गुणनाम: स्ट्रिंगलिटरल का मूल्यांकन निम्नानुसार किया जाता है:

1. StringLiteral का SV [String value] लौटाएँ।

उत्पादन गुणनाम: न्यूमेरिकल्टर का मूल्यांकन निम्नानुसार किया जाता है:

1. मान लीजिए कि न्यूमेरिकलिटरल का मान बनने का परिणाम है।
2. वापसी toString (nbr)।

इस का मतलब है कि:

• { theTop : 10 } बिल्कुल वैसा ही है { 'theTop' : 10 }

  PropertyName theTopएक है IdentifierNameतो यह परिवर्तित हो जाता है, 'theTop'स्ट्रिंग मान, जिनमें से स्ट्रिंग मान है 'theTop'।

• चर कुंजियों के साथ ऑब्जेक्ट इनिशियलाइज़र (शाब्दिक) लिखना संभव नहीं है।

  केवल तीन विकल्प हैं IdentifierName(स्ट्रिंग शाब्दिक का विस्तार) StringLiteral, और NumericLiteral(एक स्ट्रिंग का विस्तार भी)।

Comments

डाउनवोटर्स: मैं इस प्रश्न पर किसी भी मानक को उद्धृत करने वाला पहला व्यक्ति था । मेरे द्वारा दिए गए उत्तर के बाद शीर्ष उत्तर पर ES6 उद्धरण संपादित किया गया था , और उस मानक को उस समय स्वीकार नहीं किया गया था। यदि आपको पता है कि मुझे नीचे क्यों जाना पड़ रहा है, तो कृपया बताएं, मैं बस सीखना चाहता हूं। मुझे सहकर्मी दबाव बिल्ला मिल सकता है ...

— सिरो सेंटिल्ली 冠状 the the the at at

मुझे लगता है कि डाउनवोट ज्यादातर इसलिए था क्योंकि आपका जवाब समाधान की पेशकश नहीं करता है, और उस संबंध में "उपयोगी नहीं" है। सहकर्मी दबाव की ओर वोटिंग :-)

— बरगी 21

@Bergi साहस करने के लिए धन्यवाद! :-) लेकिन मुझे लगता है कि मैंने सीधे सवाल का जवाब दिया है : क्यू: "निम्न कार्य क्यों करता है?"। A: क्योंकि ES5 ऐसा कहता है। "इसके बारे में क्या करना है?" निहित है। क्या आपने ES6 समाधान में किसी को संपादित करने से पहले एक मानक उद्धरण के बिना "असंभव है" कहने के लिए शीर्ष प्रश्न को अस्वीकार कर दिया था?

— सिरो सेंटिल्ली 郝海东 冠状 iro i 法轮功 '

ओह सही। जब मैं उन्हें सीधे उत्तर देता हूं, तो मैं विशेष रूप से एक ब्लॉकचोट में विशिष्ट प्रश्नों का हवाला देता हूं। मानक का हवाला देते हुए एक अच्छा जवाब और भी बेहतर बना सकता है, लेकिन वर्तमान में आपकी पोस्ट भी सवाल का जवाब नहीं देती है। यह कहते हुए कि ES5 में एक कुंजी बना सकते हैं कि वे कैसे काम करते हैं। निश्चित रूप thetopसे एक है IdentifierName, तो यह काम क्यों नहीं करता है ? यह प्रश्न अभी भी खुला है।

— बरगी

@Bergi मुझे समझाने के लिए फिर से धन्यवाद! मैंने इसे और अधिक स्पष्ट करने के लिए इसे अपडेट किया है। मैंने इसे पहले नहीं किया था क्योंकि मैं स्पष्ट था, क्योंकि हम लिख सकते हैं {a:1}.a, इसलिए aस्पष्ट रूप से पहचानकर्ता मामले में चर मूल्य का विस्तार नहीं करते हैं। लेकिन हां, आगे समझाना इस मामले में एक सुधार है।

— सिरो सांटिल्ली 23 iro iro i

Answer 4

मैंने एक वस्तु में "गतिशील" नाम के साथ एक संपत्ति जोड़ने के लिए निम्नलिखित का उपयोग किया है:

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}

यह सिर्फ []अन्य उत्तरों द्वारा अनुशंसित आवश्यक संकेतन का उपयोग कर रहा है, लेकिन कोड की कम पंक्तियों के साथ!

Answer 5

चर के चारों ओर वर्ग ब्रैकेट जोड़ना मेरे लिए अच्छा काम करता है। इसे इस्तेमाल करे

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

Comments

यह एक्मास्क्रिप्ट के पुराने संस्करणों में काम नहीं करेगा, लेकिन आजकल यह बहुत साफ दृष्टिकोण है।

— ओलिवर

Answer 6

मुझे ईएस 6 और ईएस 5 के बीच अंतर के बारे में एक सरल उदाहरण नहीं मिला , इसलिए मैंने एक बना दिया। दोनों कोड नमूने वास्तव में एक ही वस्तु बनाते हैं। लेकिन ईएस 5 उदाहरण पुराने ब्राउज़रों (जैसे IE11) में भी काम करता है, ईएस 6 का उदाहरण नहीं देता है।

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));

Answer 7

2020 अपडेट / उदाहरण ...

एक अधिक जटिल उदाहरण, कोष्ठक और शाब्दिक का उपयोग करते हुए ... कुछ आपको उदाहरण के लिए vue / axios के साथ करना पड़ सकता है। शाब्दिक को कोष्ठक में लपेटें, इसलिए

[`...`]

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

Answer 8

दिया गया कोड:

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 के साथ पेश किया गया है। जावास्क्रिप्ट के पुराने संस्करणों में, आपको निम्नलिखित कार्य करने होंगे:

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

Answer 9

मुझे विश्वास नहीं हो रहा है कि यह अभी तक पोस्ट नहीं किया गया है: अनाम मूल्यांकन के साथ सिर्फ तीर-संकेतन का उपयोग करें!

पूरी तरह से गैर-इनवेसिव, नेमस्पेस के साथ गड़बड़ नहीं करता है, और यह सिर्फ एक लाइन लेता है:

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}अभी तक नए वाक्यविन्यास का समर्थन नहीं करते हैं , जैसे कि - जाहिरा तौर पर; मैंने इसे अपने वेब डेवलपर कंसोल- फ़ायरफ़ॉक्स 72.0.1 पर सत्यापित किया, जो 2020-01-08 को जारी किया गया था।

(मुझे यकीन है कि आप संभावित रूप से कुछ और अधिक शक्तिशाली / एक्स्टेंसिबल समाधान या जो कुछ भी हो सकता है कि चतुर उपयोग शामिल कर सकते हैं reduce, लेकिन उस बिंदु पर आप अनिवार्य रूप से ठेला के बजाय ऑब्जेक्ट-क्रिएशन को अपने स्वयं के फ़ंक्शन में तोड़कर बेहतर सेवा करेंगे) सभी इनलाइन)

---

ऐसा नहीं है कि यह तब से मायने रखता है जब ओपी ने दस साल पहले यह पूछा था, लेकिन पूर्णता के लिए और यह प्रदर्शित करने के लिए कि यह वास्तव में पूछे गए प्रश्न का उत्तर कैसे है , मैं इसे मूल संदर्भ में दिखाऊंगा:

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

Answer 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>

Answer 11

चाबियाँ सौंपने के लिए 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);

Answer 12

आप 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
)

Answer 13

यदि आप चाहते हैं कि ऑब्जेक्ट कुंजी वैरिएबल नाम के समान हो, तो ES 2015 में एक छोटा हाथ है। ECMAScript 2015 में नई सूचनाएं

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

Answer 14

आप इसे इस तरह से कर सकते हैं:

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

Answer 15

आप भी इस तरह की कोशिश कर सकते हैं:

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);