জাভাস্ক্রিপ্ট অবজেক্ট আক্ষরিক কোনও কীর জন্য একটি চলক কীভাবে ব্যবহার করবেন?

Question

নিম্নলিখিত কাজ করে কেন?

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

যদিও এটি কাজ করে না:

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

এটি আরও পরিষ্কার করার জন্য: এই মুহুর্তে আমি ভেরিয়েবল হিসাবে অ্যানিমেট ফাংশনে কোনও সিএসএস সম্পত্তি পাস করতে পারছি না।

Comments

আরও দেখুন: সম্পত্তি নামের জন্য ভেরিয়েবল ব্যবহার করে অবজেক্ট তৈরি করুন

— বার্গি

আরও দেখুন: গতিশীল কীগুলির সাহায্যে অবজেক্ট তৈরি করা

— বার্জি

Answer 1

{ thetop : 10 }আক্ষরিক একটি বৈধ অবজেক্ট। কোডটি একটি সম্পত্তি হিসাবে নামের সাথে একটি অবজেক্ট তৈরি করবে যার thetopমান 10 রয়েছে the নীচের উভয়ই একই:

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 বস্তু আক্ষরিক জন্য ব্যাকরণের অংশ হিসাবে কম্পিউটেডপ্রোপার্টিনেম সংজ্ঞায়িত করে , যা আপনাকে কোডটি এইভাবে লেখার অনুমতি দেয়:

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

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

আপনি প্রতিটি মূলধারার ব্রাউজারের সর্বশেষতম সংস্করণগুলিতে এই নতুন বাক্য গঠনটি ব্যবহার করতে পারেন।

Comments

আমি বুঝেছি! ধন্যবাদ! শোডল এটা কি ইওল দিয়ে কাজ করে না? আমার অর্থ এই মুহূর্তে এটি আমার উদাহরণে কাজ করে না, তবে আমার পাতলা হওয়া উচিত ... :-)

— স্পেন্ডো

@ মার্সেল: eval()গতিশীল সম্পত্তি নামের জন্য কোনও অবজেক্টের অভ্যন্তরে কাজ করবে না, আপনি কেবল একটি ত্রুটি পাবেন। কেবল তা-ই নয়, তবে এই eval()জাতীয় জিনিসগুলির জন্য সত্যই ব্যবহার করা উচিত নয়। এর সঠিক এবং ভুল ব্যবহার সম্পর্কে একটি দুর্দান্ত নিবন্ধ রয়েছে eval: ব্লগস.এমএসডন.মিরিক্লিপার্ট

— অ্যান্ডি ই

@ অ্যান্ডি "সাম্প্রতিক সংস্করণগুলি" এবং "বর্তমান আইপিপি" আপডেট করার মতো আরও কিছু নির্দিষ্ট সময়ের সাথে "XXX এর পরে সংস্করণগুলি" বা "2014-মিমি" পরে বিবেচনা করুন (আমি নিজেকে বদলে ফেলব, তবে আমি কী ভাল মান জানি না) হবে।

— আলেক্সেই Levenkov

ES6 এর জন্য, কীটি বাতিল বা অপরিজ্ঞাত থাকলে সম্পত্তিটি ছেড়ে দেওয়ার কোনও উপায় আছে? উদাহরণস্বরূপ, এর মধ্যে {[key] : "value"}যদি চাবিটি নাল ছিল তবে তা দিবে { null: "value"}, যেখানে আমি ফলাফলটি দেখতে চাই{}

— wasabigeek

দুর্দান্ত সমাধান, তবে আপনি কেন এত বেশি জানেন, এমনকি পুরো স্পেসিফিকেশনটি পড়তে

— পয়েন্টও

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
• StringLiteral
• NumericLiteral

[...]

উত্পাদনের সম্পত্তি নাম: আইডেন্টিফায়ারনেম নিম্নলিখিত হিসাবে মূল্যায়ন করা হয়:

1. আইডেন্টিফায়ারনেম হিসাবে অক্ষরের একই ক্রম যুক্ত স্ট্রিং মানটি ফিরিয়ে দিন।

উত্পাদন সম্পত্তি নাম: স্ট্রিংলাইটারাল নিম্নলিখিত হিসাবে মূল্যায়ন করা হয়:

1. স্ট্রিংলিটারালের এসভি [স্ট্রিং মান] প্রদান করুন।

উত্পাদনের সম্পত্তি নাম: সংখ্যাসূচককে নিম্নরূপে মূল্যায়ন করা হয়:

1. এনবিআর হ'ল সংখ্যাসৈনিকের মান গঠনের ফলাফল হোক।
2. টুস্ট্রিং (এনবিআর) ফিরুন।

এই যে মানে:

• { theTop : 10 } ঠিক হিসাবে একই { 'theTop' : 10 }

  PropertyName theTopএকটি হল IdentifierNameতাই এটি রূপান্তরিত হয়, 'theTop'স্ট্রিং মান, যার মধ্যে স্ট্রিং মান 'theTop'।

• ভেরিয়েবল কী সহ অবজেক্ট ইনিশিয়ালাইজার (লিটারাল) লেখা সম্ভব নয়।

  কেবলমাত্র তিনটি বিকল্প IdentifierName(স্ট্রিং আক্ষরিক পর্যন্ত প্রসারিত হয়) StringLiteral, এবং NumericLiteral(একটি স্ট্রিংতেও প্রসারিত হয়)।

Comments

Downvoters: আমি ছিল প্রথম এই প্রশ্নে কোনো মান উদ্ধৃত করা। উপরের উত্তরের ES6 উদ্ধৃতিটি আমি উত্তর দেওয়ার পরে সম্পাদিত হয়েছিল , এবং সেই মানটি এখনও সেই সময়ে গৃহীত হয়নি। আপনি কেন যদি আরও জানতে পেলেন যে আমি কেন নিম্নগামী হচ্ছি, দয়া করে ব্যাখ্যা করুন, আমি কেবল শিখতে চাই। আমি পিয়ার চাপ

— ব্যাজটিও পেতে পারি

আমি অনুমান করি ডাউনওয়োটটি বেশিরভাগ কারণে ছিল কারণ আপনার উত্তরটি কোনও সমাধান দেয় না এবং সে ক্ষেত্রে "দরকারী নয়"। পিয়ার চাপের পক্ষে ভোটদান :-)

— বার্গি

@ বেরজি সাহস করার জন্য ধন্যবাদ! :-) তবে আমি মনে করি আমি সরাসরি প্রশ্নের উত্তর দিয়েছি : প্রশ্ন: "নিম্নলিখিতটি কেন কাজ করে?" উত্তর: কারণ ES5 তাই বলে। "এটা সম্পর্কে কি করতে হবে?" অন্তর্নিহিত হয়। ES6 সমাধানে কেউ সম্পাদনা করার আগে আপনি কোনও মানক উদ্ধৃতি ব্যতীত " এটি অসম্ভব" বলার শীর্ষ প্রশ্নের প্রশ্নটি নাকচ করে দিয়েছিলেন ?

— Ciro Santilli 郝海东 冠状 病 六四 事件

আহ ঠিক. আমি সাধারণত ব্লককোটে নির্দিষ্ট প্রশ্নগুলি উদ্ধৃত করি যখন আমি তাদের সরাসরি উত্তর দিই তা স্পষ্ট করে তোলে। মানকে উদ্ধৃত করা আরও ভাল উত্তর দিতে পারে তবে বর্তমানে আপনার পোস্টটি ইমো প্রশ্নের উত্তর দেয় না। ES5- এ কী কী তৈরি করতে পারে তা উল্লেখ করে তারা কীভাবে কাজ করে তা বোঝায় না । অবশ্যই thetopএকটি IdentifierName, তাই এটি কাজ করে না কেন ? এই প্রশ্ন এখনও খোলা আছে।

— বেরগি

@ বার্গি আবার আমাকে ব্যাখ্যা করার জন্য ধন্যবাদ! এটি আরও স্পষ্ট করতে আমি এটি আপডেট করেছি। আমি এটি আগে করিনি কারণ আমি যদিও এটি স্পষ্ট ছিলাম, কারণ আমরা লিখতে পারি {a:1}.a, তাই aস্পষ্টত সনাক্তকারী ক্ষেত্রে পরিবর্তনশীল মানটি প্রসারিত না করে। তবে হ্যাঁ, আরও ব্যাখ্যা করা এই ক্ষেত্রে একটি উন্নতি।

— সিরো সান্তিলি 郝海东 冠状 病 六四 事件

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

ES6 এবং ES5 এর মধ্যে পার্থক্য সম্পর্কে আমি একটি সাধারণ উদাহরণ খুঁজে পাইনি, তাই আমি একটি তৈরি করেছি। উভয় কোডের নমুনা হুবহু একই বস্তু তৈরি করে। তবে ইএস 5 উদাহরণটি পুরানো ব্রাউজারগুলিতেও (আই 11 এর মতো) কাজ করে, 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));

Answer 7

2020 আপডেট / উদাহরণ ...

আরও জটিল উদাহরণ, বন্ধনী এবং আক্ষরিক ব্যবহার ... ভ্যু / অক্সিজোসের সাহায্যে আপনার কিছু করতে হতে পারে। আক্ষরিক বন্ধনী মধ্যে আবরণ, তাই

[`...`]

{
    [`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}সিনট্যাক্সকে এখনও সমর্থন করে না এমন পরিবেশে দরকারী — যেমন আপাতদৃষ্টিতে; আমি কেবল এটি 2020-01-08 প্রকাশিত আমার ওয়েব বিকাশকারী কনসোল-ফায়ারফক্স 72.0.1 এ যাচাই করেছি।

(আমি নিশ্চিত যে আপনি সম্ভাব্যভাবে আরও কিছু শক্তিশালী / এক্সটেনসিবল সমাধান তৈরি করতে পারেন বা যা কিছু চতুর ব্যবহারের সাথে জড়িত 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 এ একটি সংক্ষিপ্ত হাত রয়েছে E 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);