जावास्क्रिप्ट संपत्ति का उपयोग: डॉट नोटेशन बनाम कोष्ठक?

394

इस तथ्य के अलावा कि पहला रूप एक चर का उपयोग कर सकता है और न केवल एक स्ट्रिंग शाब्दिक है, क्या किसी भी कारण से एक दूसरे पर उपयोग करने का कोई कारण है, और यदि ऐसा है तो किन मामलों में?

कोड में:

// Given:
var foo = {'bar': 'baz'};

// Then
var x = foo['bar'];

// vs. 
var x = foo.bar;

संदर्भ: मैंने एक कोड जनरेटर लिखा है जो इन भावों को उत्पन्न करता है और मैं सोच रहा हूं कि कौन सा बेहतर है।

javascript syntax object-literal

— मार्क रेनॉफ
स्रोत

3

बस चिप करने के लिए, अपने मूल प्रश्न का उत्तर नहीं (क्योंकि अब तक आपके पास बहुत सारी अच्छी व्याख्याएं हैं), लेकिन गति-वार का कोई अंतर नहीं है: jsperf.com/dot-vs-square-brackets । उपरोक्त परीक्षण उनमें से किसी एक को केवल 2% मार्जिन देता है, वे गर्दन और गर्दन हैं।

— बेखबर

यह भी देखें कि मैं नाम के रूप में एक चर का उपयोग करके किसी वस्तु में संपत्ति कैसे जोड़ूं? और वैरिएबल का उपयोग करके गतिशील रूप से ऑब्जेक्ट प्रॉपर्टी

— बर्गी

इस प्रश्न / उत्तर का उपयोग UTF-8 कुंजी के लिए भी किया जा सकता है।

— पीटर क्रूस

422

( यहां से शोक मनाया गया ।)

वर्ग ब्रैकेट संकेतन उन वर्णों के उपयोग की अनुमति देता है जिनका उपयोग डॉट संकेतन के साथ नहीं किया जा सकता है:

var foo = myForm.foo[]; // incorrect syntax
var foo = myForm["foo[]"]; // correct syntax

गैर-ASCII (UTF-8) वर्णों में, जैसे myForm["ダ"]( अधिक उदाहरण ) शामिल हैं।

दूसरी बात, वर्ग ब्रैकेट संकेतन उपयोगी है जब संपत्ति के नाम के साथ काम किया जाता है जो एक अनुमान के अनुसार भिन्न होता है:

for (var i = 0; i < 10; i++) {
  someFunction(myForm["myControlNumber" + i]);
}

बढ़ाना:

लिखने के लिए और पढ़ने के लिए स्पष्ट करने के लिए डॉट नोटेशन तेज़ है।

वर्ग ब्रैकेट संकेतन विशेष वर्णों वाले गुणों तक पहुँच देता है और चर का उपयोग करके गुणों का चयन करता है

वर्णों का एक और उदाहरण जिसे डॉट नोटेशन के साथ उपयोग नहीं किया जा सकता है, वह संपत्ति के नाम हैं जिनमें स्वयं एक डॉट होता है ।

उदाहरण के लिए एक जैसन प्रतिक्रिया में एक संपत्ति हो सकती है जिसे कहा जाता है bar.Baz।

var foo = myResponse.bar.Baz; // incorrect syntax
var foo = myResponse["bar.Baz"]; // correct syntax

— एरॉन रोटेवेल
स्रोत

45

सारांश के कोड उदाहरण और शब्दांकन भयानक रूप से परिचित हैं। dev-archive.net/articles/js-dot-notation

— क्वेंटिन

61

पहिया को फिर से आविष्कार करने की आवश्यकता नहीं है, क्या वहां है? इसे एक संदर्भ के रूप में उद्धृत करते हुए।

— एरॉन रोटेटेवेल

13

डॉट संकेतन तेज है (कम से कम मेरे लिए) अपने ब्राउज़र का परीक्षण करें jsperf.com/dot-notation-vs-bracket-notation/2

— डेव चेन

4

मेरी मशीन ब्रैकेट संकेतन पर क्रोम 44 में तेज है

— ऑस्टिन फ्रांस

2

@chenghuayang जब आप किसी ऐसी वस्तु की संपत्ति का उपयोग करना चाहते हैं जिसकी कुंजी एक चर में संग्रहीत है, तो आप डॉट नोटेशन के साथ नहीं कर सकते।

— अब्दुल

104

ब्रैकेट संकेतन आपको एक चर में संग्रहीत नाम से गुणों तक पहुंचने की अनुमति देता है:

var obj = { "abc" : "hello" };
var x = "abc";
var y = obj[x];
console.log(y); //output - hello

obj.x इस मामले में काम नहीं करेगा।

— naiquevin
स्रोत

12

जावास्क्रिप्ट में संपत्तियों तक पहुंचने के दो सबसे सामान्य तरीके एक डॉट के साथ और चौकोर कोष्ठक के साथ हैं। दोनों value.x and value[x]मूल्य पर एक संपत्ति का उपयोग करते हैं - लेकिन जरूरी नहीं कि एक ही संपत्ति हो। अंतर यह है कि एक्स की व्याख्या कैसे की जाती है। डॉट का उपयोग करते समय, डॉट के बाद का हिस्सा वैध चर नाम होना चाहिए, और यह सीधे संपत्ति का नाम देता है। वर्ग कोष्ठक का उपयोग करते समय, संपत्ति के नाम को प्राप्त करने के लिए कोष्ठक के बीच की अभिव्यक्ति का मूल्यांकन किया जाता है। जबकि value.x "x" नाम के मान की संपत्ति प्राप्त करता है, मूल्य [x] एक्सप्रेशन x का मूल्यांकन करने की कोशिश करता है और परिणाम को संपत्ति के नाम के रूप में उपयोग करता है।

इसलिए यदि आप जानते हैं कि जिस संपत्ति में आप रुचि रखते हैं उसे "लंबाई" कहा जाता है, तो आप कहते हैं value.length। यदि आप वैरिएबल में रखी गई वैल्यू के नाम पर संपत्ति निकालना चाहते हैं i, तो आप कहते हैं value[i]। और क्योंकि संपत्ति के नाम किसी भी स्ट्रिंग हो सकते हैं, यदि आप नाम की संपत्ति का उपयोग करना चाहते हैं “2”या “John Doe”, आपको वर्ग कोष्ठक का उपयोग करना चाहिए value[2] or value["John Doe"]:। यह तब भी होता है जब आप संपत्ति का सटीक नाम पहले से जानते हैं, क्योंकि न “2” nor “John Doe”तो कोई वैध चर नाम है और इसलिए डॉट नामांकन के माध्यम से पहुँचा नहीं जा सकता है।

Arrays के मामले में

एक सरणी में तत्व गुणों में संग्रहीत होते हैं। क्योंकि इन गुणों के नाम संख्याएं हैं और हमें अक्सर उनका नाम एक चर से प्राप्त करने की आवश्यकता होती है, हमें उन्हें एक्सेस करने के लिए ब्रैकेट सिंटैक्स का उपयोग करना होगा। एक सरणी की लंबाई संपत्ति हमें बताती है कि इसमें कितने तत्व हैं। यह गुण नाम एक मान्य चर नाम है, और हम इसके नाम को पहले से जानते हैं, इसलिए किसी सरणी की लंबाई का पता लगाने के लिए, आप आमतौर पर लिखते हैं array.lengthक्योंकि यह लिखने की तुलना में आसान है array["length"]।

— सागर मुंजाल
स्रोत

क्या आप array.length पर अधिक विस्तार कर सकते हैं? आप कहते हैं कि डॉट नोटेशन द्वारा एक्सेस की गई संपत्तियों का मूल्यांकन नहीं किया गया है, तो array.length के मामले में मूल्यांकन मूल्य के बजाय यह हमें "लंबाई" स्ट्रिंग नहीं देगा, इस मामले में सरणी में आइटमों की संख्या? The elements in an array are stored in propertiesयह मुझे भ्रमित करता है। संपत्तियों में संग्रहीत से आपका क्या अभिप्राय है? गुण क्या हैं? मेरी समझ में सरणी गुणों के बिना मूल्यों का सिर्फ गुच्छा है। यदि वे संपत्तियों में संग्रहीत हैं, तो यह कैसे आता है property: value/ साहचर्य सरणी नहीं है?

— लिम्पुल्स 15

यह उत्तर विशेष रूप से मूल्यवान है क्योंकि यह दो संकेतन के बीच के अंतर को बताता है।

— चेसवेब

11

डॉट नोटेशन कुछ कीवर्ड्स (जैसे newऔर) के साथ काम नहीं करता हैclassइंटरनेट एक्सप्लोरर 8 में ) के ।

मेरे पास यह कोड था:

//app.users is a hash
app.users.new = {
  // some code
}

और यह खतरनाक "अपेक्षित इंडेंटिफायर" को ट्रिगर करता है (कम से कम आईई 8 पर विंडोज़ एक्सपी पर, मैंने बहुत अधिक पर्यावरण की कोशिश नहीं की है)। ब्रैकेट नोटेशन पर स्विच करने के लिए इसके लिए सरल फिक्स है:

app.users['new'] = {
  // some code
}

— बेंजामिन क्राउज़ियर
स्रोत

मददगार जवाब। धन्यवाद।

— इलियास करीम

क्रोम 2019 पर काम करता है। res.cloudinary.com/rootworld/image/upload/v1567651133/js.png

— फणी पृथ्वीराज

8

इन सूचनाओं का उपयोग करते समय सावधान रहें: उदाहरण के लिए। अगर हम एक विंडो के माता-पिता में मौजूद फ़ंक्शन का उपयोग करना चाहते हैं। IE में:

window['parent']['func']

के बराबर नहीं है

window.['parent.func']

हम या तो उपयोग कर सकते हैं:

window['parent']['func']

या

window.parent.func

इसे एक्सेस करने के लिए

— user2593104
स्रोत

6

सामान्यतया, वे वही काम करते हैं।
फिर भी, ब्रैकेट नोटेशन आपको वह सामान करने का अवसर देता है जो आप डॉट नोटेशन के साथ नहीं कर सकते हैं, जैसे

var x = elem["foo[]"]; // can't do elem.foo[];

इसे विशेष वर्णों वाली किसी भी संपत्ति तक बढ़ाया जा सकता है।

— CDB
स्रोत

5

यदि संपत्ति के नामों में विशेष वर्ण हैं, तो आपको कोष्ठक का उपयोग करने की आवश्यकता है:

var foo = {
    "Hello, world!": true,
}
foo["Hello, world!"] = false;

इसके अलावा, मुझे लगता है कि यह सिर्फ स्वाद की बात है। IMHO, डॉट नोटेशन कम है और यह अधिक स्पष्ट करता है कि यह एक सरणी तत्व के बजाय एक संपत्ति है (हालांकि जावास्क्रिप्ट के पास वैसे भी साहचर्य सरणियां नहीं हैं)।

— अल्वारो गोंजालेज
स्रोत

3

ब्रैकेट संकेतन चर का उपयोग कर सकता है, इसलिए यह दो उदाहरणों में उपयोगी है जहां डॉट संकेतन काम नहीं करेगा:

1) जब संपत्ति के नाम गतिशील रूप से निर्धारित किए जाते हैं (जब सटीक नाम रनटाइम तक ज्ञात नहीं होते हैं)।

2) जब एक for..in लूप का उपयोग किसी वस्तु के सभी गुणों से गुजरने के लिए।

स्रोत: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects

— लेव स्टेफानोविच
स्रोत

3

आपको वर्ग कोष्ठक संकेतन का उपयोग करना होगा -

संपत्ति का नाम नंबर है।

var ob = {
  1: 'One',
  7 : 'Seven'
}
ob.7  // SyntaxError
ob[7] // "Seven"

संपत्ति के नाम में विशेष चरित्र है।

var ob = {
  'This is one': 1,
  'This is seven': 7,
}  
ob.'This is one'  // SyntaxError
ob['This is one'] // 1

संपत्ति का नाम एक चर को सौंपा गया है और आप इस चर द्वारा संपत्ति के मूल्य का उपयोग करना चाहते हैं।
```
var ob = {
  'One': 1,
  'Seven': 7,
}

var _Seven = 'Seven';
ob._Seven  // undefined
ob[_Seven] // 7
```

— हरुनूर रशीद
स्रोत

1

मामला जहां []संकेतन सहायक हो:

अपने वस्तु गतिशील है और कुछ यादृच्छिक मूल्यों की तरह कुंजी में हो सकता है, तो numberऔर [], या किसी अन्य विशेष वर्ण उदाहरण के लिए -

var a = { 1 : 3 };

अब अगर आप a.1किसी त्रुटि के माध्यम से इसे एक्सेस करने का प्रयास करेंगे, क्योंकि यह वहां पर एक स्ट्रिंग की उम्मीद कर रहा है।

— अंशुल
स्रोत

1

डॉट नोटेशन हमेशा बेहतर होता है। यदि आप कुछ "स्मार्ट" आईडीई या टेक्स्ट एडिटर का उपयोग कर रहे हैं, तो यह उस ऑब्जेक्ट से अपरिभाषित नाम दिखाएगा। कोष्ठक संकेतन का उपयोग केवल तभी करें जब आपके पास डैश या कुछ समान समान नाम हो। और यह भी कि नाम चर में संग्रहित है या नहीं।

— डुआसन नोवाक
स्रोत

और ऐसी स्थितियां भी हैं जहां ब्रैकेट संकेतन की अनुमति नहीं है, भले ही आपके पास डैश न हों। उदाहरण के लिए, आप लिख सकते हैं Math.sqrt(25), लेकिन नहीं Math['sqrt'](25)।

— श्री लिस्टर

0

मुझे स्क्वायर-ब्रैकेट नोटेशन के कुछ और उपयोग के मामले जोड़ते हैं। यदि आप किसी संपत्ति x-proxyको किसी वस्तु में कहना चाहते हैं , तो -उसकी गलत तरीके से व्याख्या की जाएगी। उनके कुछ अन्य मामले भी हैं जैसे स्पेस, डॉट आदि, जहां डॉट ऑपरेशन आपकी मदद नहीं करेगा। इसके अलावा, यदि आपके पास एक चर में कुंजी है, तो किसी ऑब्जेक्ट में कुंजी के मूल्य तक पहुंचने का एकमात्र तरीका ब्रैकेट नोटेशन है। आशा है आपको कुछ और प्रसंग मिलेंगे।

— मनीष वारन
स्रोत

0

एक उदाहरण जहां डॉट नोटेशन विफल हो जाता है

json = { 
   "value:":4,
   'help"':2,
   "hello'":32,
   "data+":2,
   "😎":'😴',
   "a[]":[ 
      2,
      2
   ]
};

// correct
console.log(json['value:']);
console.log(json['help"']);
console.log(json["help\""]);
console.log(json['hello\'']);
console.log(json["hello'"]);
console.log(json["data+"]);
console.log(json["😎"]);
console.log(json["a[]"]);

// wrong
console.log(json.value:);
console.log(json.help");
console.log(json.hello');
console.log(json.data+);
console.log(json.😎);
console.log(json.a[]);

संपत्ति के नाम को आप के रूप में उपयोग करने में सक्षम होने के लिए जावास्क्रिप्ट के वाक्यविन्यास नियमों में हस्तक्षेप नहीं करना चाहिए json.property_name

— फणी ऋत्विज
स्रोत