जावास्क्रिप्ट में कई चर की घोषणा


333

जावास्क्रिप्ट में, इस तरह से कई चर घोषित करना संभव है:

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

... या इस तरह:

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

क्या एक तरीका दूसरे से बेहतर / तेज है?


6
के रूप में तेजी से , इस jsperf का उपयोग कर मैं एक विधि या दूसरे का उपयोग कर एक निरंतर गति हासिल नहीं देख सका।
माजिद फौलादपुर

जवाबों:


344

पहला तरीका बनाए रखना आसान है। प्रत्येक घोषणा एक लाइन पर एक एकल स्टेटमेंट है, इसलिए आप घोषणाओं को आसानी से जोड़ सकते हैं, हटा सकते हैं और पुनः व्यवस्थित कर सकते हैं।

दूसरे तरीके के साथ, यह पहली या आखिरी घोषणा को हटाने के लिए कष्टप्रद है क्योंकि उनमें varकीवर्ड और अर्धविराम शामिल हैं। और हर बार जब आप एक नई घोषणा जोड़ते हैं, तो आपको पुरानी लाइन में अर्धविराम को अल्पविराम में बदलना होगा।


67
यदि आप ऐसा कोड लिख रहे हैं, जिसकी अपेक्षा आप बाद में करते हैं या पैक करने की अपेक्षा करते हैं, तो दूसरा तरीका कम्प्रेसर (YUI कंप्रेसर की तरह) आपको और अधिक छोटा संस्करण देने की अनुमति देता है। यदि आकार एक विचार है, तो मैं यथासंभव JSLint के सुझावों का पालन करने का सुझाव दूंगा।
लेन

36
jslint का दावा है कि दूसरा तरीका अधिक धार्मिक है लेकिन मैं असहमत हूं।
ThatGuy

29
दूसरा तरीका माइक्रो-ऑप्टिमाइज़ेशन है। सभी var घोषणाओं को एक बार में संसाधित किया जाता है, बजाय एक समय में। यह आधुनिक ब्राउज़रों / आधुनिक कंप्यूटरों में बहुत मायने नहीं रखता है।
webnesto

18
@ 0xc0de: मैं एक कथन में सभी चर को "कुशल" घोषित करने का प्रमाण देखना चाहूंगा। यदि आप केवल कुछ बाइट्स की बचत के रूप में दक्षता को माप रहे हैं, तो हो सकता है। लेकिन अगर आप पठनीयता और स्थिरता को ध्यान में रखते हैं, तो मुझे लगता है कि आप पाएंगे कि समय से पहले अनुकूलन आमतौर पर जाने का गलत तरीका है, खासकर जब से आधुनिक ब्राउज़र एक पूर्व-निष्पादन पास पर एक दायरे में सभी चर एकत्र करेंगे और आरंभ करेंगे। व्यक्तिगत रूप से, मुझे लगता है कि सभी कोड एक ही पंक्ति या कथन में घोषित किए गए हैं, जिससे कोड को अधिक कठिन और अधिक त्रुटि वाला समझने की जल्दी हो।
ओगराडीजड

9
कार्यकुशलता, दोनों खुरचनी और गूगल क्लोजर कंपाइलर स्वचालित रूप से एक में अनुक्रमिक var स्टेटमेंट स्क्वैश करेंगे, उस बिंदु म्यूट को रेंडर करेंगे (जहां तक ​​मैं बता सकता हूं कि YUI ऐसा नहीं करेगा, हालांकि मैंने बड़े पैमाने पर परीक्षण नहीं किया है)।
15

215

स्थिरता के अलावा, पहला रास्ता दुर्घटना की संभावना को समाप्त करता है वैश्विक चर निर्माण:

(function () {
var variable1 = "Hello World!" // semicolon is missed out accidently
var variable2 = "Testing..."; // still a local variable
var variable3 = 42;
}());

जबकि दूसरा तरीका कम क्षमा करना है:

(function () {
var variable1 = "Hello World!" // comma is missed out accidently
    variable2 = "Testing...", // becomes a global variable
    variable3 = 42; // a global variable as well
}());

4
अच्छी बात। यदि वे कम हैं, तो एक लाइन पर लिखने से इस समस्या से बचा जा सकता है var variable1 = "Hello World!", variable2 = "Testing...", variable3 = 42;:। एक लापता ,दुर्घटनाग्रस्त हो जाएगा, लेकिन मैं मानता हूं कि यह जोखिम भरा है
अराम कोचरन

14
यदि आप सख्त मोड का उपयोग कर रहे हैं तो आप वैसे भी ग्लोबल्स नहीं बना पाएंगे।
डेनियल आयटेकिन

1
मैं एक ही लाइन पर कई चर घोषित करने का प्रशंसक हूं क्योंकि मुझे लगता है कि यह क्लीनर दिखता है। उस ने कहा, गलती से वैश्विक चर घोषित करना एक वास्तविक खतरा है। मेमोरी लीक का शिकार होते हुए मैं कई उदाहरणों में आया हूं जहां मैंने गलती से एक साथ कई वैश्विक चर घोषित किए क्योंकि मैं अल्पविराम के बजाय अर्धविराम का उपयोग करता था।
smbbott

+1 दिन का आधा समय बिताते हैं और यहां तक ​​कि यह भी सोचने लगे हैं कि इन दोनों घोषणाओं के बीच अनैच्छिक अंतर क्यों है। फिर इस उत्तर को पढ़ें, कोड सुपर को ध्यान से जांचा और गलती पाई। छुट्टी चाहिए ...
गिदरीस

1
मेरा पाठ संपादक मुझे देता है Possible Fatal Errorअगर मुझे एक कोमा याद आती है, तो मेरे लिए तूफान!

33

संगठन के लिए प्रति गुंजाइश एक varकथन का उपयोग करना आम है । जिस तरह से सभी "स्कोप" एक समान पैटर्न का पालन करते हैं, जिससे कोड अधिक पठनीय बन जाता है। इसके अतिरिक्त, इंजन उन सभी को वैसे भी ऊपर "लहराता" है। तो अपनी घोषणाओं को एक साथ रखने से वास्तव में और अधिक निकटता होगी।


6
आप उन्हें एक ही 'var' घोषणा साझा किए बिना घोषणाओं को एक साथ रख सकते हैं। मैं jslint (आपके लिंक) पर दिए गए स्पष्टीकरण को समझता और स्वीकार करता हूं लेकिन मैं निष्कर्ष साझा नहीं करता। जैसा कि ऊपर कहा गया है, यह कुछ और की तुलना में शैली का अधिक मामला है। जावा दुनिया में (दूसरों के बीच), पठनीयता के लिए रिवर्स (प्रति पंक्ति एक घोषणा) की सिफारिश की जाती है।
फीलोहो

अधिक पठनीय? एकमात्र कारण है कि लोग उन्हें एक पंक्ति में रखते हैं जेएस-विशिष्ट कारण जिसका आपने उल्लेख किया है: जेएस सभी घोषणाओं को शीर्ष पर ले जाता है। यदि ऐसा नहीं होता है, तो हम सभी अपने संस्करण को उस बिंदु के सबसे निकट घोषित करेंगे जहां उनका उपयोग किया जाता है।
डेनियल आयटेकिन

@ vol7ron जो कि मामला नहीं है, और varबयान की एक गलत गलतफहमी है । सही विपरीत सच है। दस्तावेज़ीकरण और इस उदाहरण को देखें
jackweirdy

@jackweirdy आप सही हैं और पुराने ब्राउज़रों में यह मामला, खराब कार्यान्वयन, या बग था। मैंने तब से अपनी टिप्पणी हटा दी है।
Vol7ron

29

इसे इस तरह से करना बहुत अधिक पठनीय है:

var hey = 23;
var hi = 3;
var howdy 4;

लेकिन इस तरह कम जगह और कोड की लाइनें लेता है:

var hey=23,hi=3,howdy=4;

यह अंतरिक्ष को बचाने के लिए आदर्श हो सकता है, लेकिन जावास्क्रिप्ट कंप्रेशर्स को इसे आपके लिए संभाल कर रखें।


15

शायद ऐसे ही

var variable1 = "hello world"
, variable2 = 2
, variable3 = "how are you doing"
, variable4 = 42;

पहले या अंतिम चर को बदलते समय इसे बनाए रखना और पढ़ना आसान है।


6
आमतौर पर, अल्पविराम का उपयोग करते हुए, अर्धविराम उस मुद्दे को रोकने के लिए एक नई लाइन पर जाता है। var variable1 = "hello world" \ n, variable2 = 2 \ n, variable3 = "आप कैसे कर रहे हैं" \ n, variable4 = 42 \ n; \ n
ब्रायनफ्रैड

2
यह हास्केल सिंटेक्स है। मुझे लगता है कि किसी तरह यह अनुशंसित नहीं है / जावास्क्रिप्ट में सामान्य अभ्यास
shamanSK

14

यह सिर्फ व्यक्तिगत पसंद की बात है। यदि आप सफेद स्थान को बाहर निकालते हैं तो इन दो तरीकों के बीच कोई अंतर नहीं है, दूसरे बाइट के साथ बचाए गए कुछ बाइट्स के अलावा।


दूसरा एक दो बाइट्स बचाता है।
सोफी अल्परट

बेन अल्परट: आप कैसे आंकते हैं?
जोश स्टोडोला ने

यदि आप व्हॉट्सएप को 'var foo = "hello", bar = "world"; घोषणा 'var foo = "hello"; var bar = "world"; " यदि आपके पास एक लोकप्रिय साइट है, तो जेएस पर कुछ बाइट्स को बचाने से आपको मदद मिल सकती है (आप चर नामों को कम करना चाहते हैं, आदि)
ब्रायन कैंपबेल

मैं इस समय सहेजे गए बाइट्स को अप्रासंगिक के रूप में देखता हूं, जो कि जावास्क्रिप्ट मिनिफायर्स के उदय के कारण, विशेष रूप से Google क्लोजर कंपाइलर (तथाकथित) सरल मोड में है।
ब्रायन फील्ड

1
@webnesto सिंटैक्स से कभी कोई प्रदर्शन नहीं होता है जब सिंटैक्स के शब्दार्थ समान होते हैं। एक कोड को तुरंत निष्पादित नहीं करेगा लेकिन पहले इसे पार्स करें और सिमेंटिक विश्लेषण करें - यह वह जगह है जहां दोनों घोषणा शैलियों को बराबर किया जाता है।
एस्लिजा

14

ECMAScript6 ने विनाशकारी विनाशकारी कार्य शुरू किया जो बहुत अच्छा काम करता है:

[a, b] = [1, 2] aबराबर होगा 1और बराबर bहोगा 2


यह प्रश्न का उत्तर नहीं देता है, लेकिन यह दोनों वर्णित दृष्टिकोणों का एक बेहतर विकल्प हो सकता है।
सरोगेट

1
मुझे लगता है कि यदि आपके पास चर की लंबी सूची है, तो आपका दृष्टिकोण वास्तव में व्यवहार्य नहीं है। यह कहना कठिन है कि कौन सा चर किस मूल्य से संबंधित है और आपके पास त्रुटियों से सुरक्षा नहीं है, खराब मर्ज की स्थिति है जिसके दौरान आप गलती से एक तत्व को किसी सरणी से निकाल सकते हैं। उदाहरण: let [aVar, bVar, cVar, xVar, yVar, zVar] = [10, 20, 30, 40, 50]; तो, व्यक्तिगत रूप से मैं इसकी सिफारिश नहीं करता हूं।
किरिल रेजनिकोव

1
यदि आप एक ही मान के साथ बहुत सारे चर सेट करना चाहते हैं तो आसान है। उदाहरण के लिए लूप में शून्य पर रीसेट करने का उपयोग करना।
निक

हाँ! यह वही है जिसे मैं देख रहा था। खासकर यदि आप दो आयामी जोड़ी, या बहुआयामी मूल्यों को परिभाषित करना चाहते हैं, तो अभी तक नहीं।
यूजीन कार्दश

11
var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

से अधिक पठनीय है:

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

लेकिन वे वही काम करते हैं।


कम "फ़ाइल स्थान" का उपयोग करता है? मुझे लगता है कि आपके पास करने के लिए कुछ व्याख्या है।
जोश स्टोडोला ने

@JoshStodola मुझे एक ही फ़ाइल स्थान दिखता है। बजाय var<space>इसके, इसके<space><space><space><space>
WORMSS

@WORMSS जब तक यह var<space>या var<tab>बनाम <tab>। अभी भी बड़े पैमाने पर लूट।
एमपाग

9

ES6 विनाशकारी असाइनमेंट का उपयोग करें : यह सरणियों, या गुणों से मानों को अलग-अलग चर में अनपैक करेगा।

let [variable1 , variable2, variable3] = 
["Hello World!", "Testing...", 42];

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(variable3); // 42


4
यह एक भयानक विचार है, खासकर यदि आपको लगभग 10 चर असाइन करने की आवश्यकता है।
किरिल रेजनिकोव

7

अल्पविराम के लिए मेरा एकमात्र, आवश्यक उपयोग लूप में है:

for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}

मैं यह देखने के लिए यहां गया था कि क्या यह जावास्क्रिप्ट में ठीक है।

यहां तक ​​कि यह काम करते हुए भी, एक सवाल बना रहा कि क्या n फ़ंक्शन के लिए स्थानीय है।

यह सत्यापित करता है, n स्थानीय है:

a=[3,5,7,11];
(function l () { for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}}) ();
console.log(typeof n == "undefined" ?
  "as expected, n was local" : "oops, n was global");

एक पल के लिए मुझे यकीन नहीं हुआ, भाषाओं के बीच स्विच कर रहा हूं।


7

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

मुझे लगता है कि ट्रेड-ऑफ इसके लायक है, अगर इसका मतलब है कि किसी डेवलपर को 'var' छोड़ने की छूट है, तो वे कहीं भी महसूस करें।

लोग JSLint के बारे में शिकायत कर सकते हैं, मैं भी करता हूं, लेकिन इसका बहुत कुछ मतलब है कि भाषा के साथ मुद्दों को ठीक करने की दिशा में नहीं, बल्कि कोडर्स की बुरी आदतों को सुधारने और इसलिए कोड में समस्याओं को रोकने के लिए। इसलिए:

"ब्लॉक स्कोप वाली भाषाओं में, आमतौर पर यह सिफारिश की जाती है कि चर को पहले उपयोग की साइट पर घोषित किया जाए। लेकिन क्योंकि जावास्क्रिप्ट में ब्लॉक गुंजाइश नहीं है, यह फ़ंक्शन के शीर्ष पर सभी फ़ंक्शन के चर घोषित करना समझदारी है।" सिफारिश की गई है कि प्रति फ़ंक्शन एक एकल संस्करण विवरण का उपयोग किया जाए। " - http://www.jslint.com/lint.html#scope


6

मुझे लगता है कि यह व्यक्तिगत पसंद की बात है। मैं इसे निम्नलिखित तरीके से करना पसंद करता हूं:

   var /* Vars */
            me = this, that = scope,
            temp, tempUri, tempUrl,
            videoId = getQueryString()["id"],
            host = location.protocol + '//' + location.host,
            baseUrl = "localhost",
            str = "Visit W3Schools",
            n = str.search(/w3schools/i),
            x = 5,
            y = 6,
            z = x + y
   /* End Vars */;

6

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

यदि आपके पास अल्पविराम सिंटैक्स के साथ 10 चर परिभाषित किए गए हैं, तो आपके पास सीधे तौर पर यह जानने का कोई तरीका नहीं है कि कौन सा अपराधी था।

व्यक्तिगत कथन संस्करण इस अस्पष्टता से ग्रस्त नहीं है।


2

"युग्मन पर सामंजस्य" की अवधारणा को केवल वस्तुओं / मॉड्यूल / कार्यों की तुलना में अधिक सामान्यतः लागू किया जा सकता है। यह इस स्थिति में भी सेवा दे सकता है:

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

"कम युग्मन अक्सर एक अच्छी तरह से संरचित कंप्यूटर सिस्टम और एक अच्छे डिज़ाइन का संकेत होता है, और जब उच्च सामंजस्य के साथ संयुक्त होता है, तो उच्च पठनीयता और स्थिरता के सामान्य लक्ष्यों का समर्थन करता है।"

http://en.wikipedia.org/wiki/Coupling_(computer_programming)

इसलिए पहले वाला चुनें।


1
मैं यह देखने में विफल हूं कि यह युग्मन या सामंजस्य से कैसे संबंधित है। विस्तृत करने के लिए परवाह?
एडसन मदीना

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

युग्मन विभिन्न मॉड्यूल / ऑब्जेक्ट / फ़ंक्शन के बीच अन्योन्याश्रयता के बारे में है, कोड की लाइनें नहीं!
एडसन मदीना

1
मूल रूप से यह मॉड्यूल के बारे में था, हां, लेकिन अवधारणा को अधिक सामान्यतः लागू किया जा सकता है, यहां तक ​​कि परिभाषा शो में वस्तुओं / कार्यों के अपने समावेश को भी।
मैग्ने

2

एक पुराना पोस्ट, मुझे पता है, लेकिन साथी गोगलर्स के लिए परिप्रेक्ष्य का एक छोटा सा विवरण जोड़ने के लिए:

अनुरक्षण समस्या को बहुत आसानी से थोड़ा स्वरूपण के साथ दूर किया जा सकता है, जैसे कि।

let
  my_var1 = 'foo',
  my_var2 = 'bar',
  my_var3 = 'baz'
;

मैं इस स्वरूपण का उपयोग व्यक्तिगत प्राथमिकता के मामले में कड़ाई से करता हूं। मैं इस प्रारूप को एकल घोषणाओं के लिए छोड़ देता हूं, निश्चित रूप से, या जहां यह काम करता है।


1

मेरा मानना ​​है कि इससे पहले कि हम ES6 का उपयोग करना शुरू करते हैं, एकल संस्करण घोषणा के साथ दृष्टिकोण न तो अच्छा था और न ही बुरा (यदि आपके पास सर्दियां हैं और 'use strict'यह वास्तव में स्वाद की पसंद है। लेकिन अब मेरे लिए चीजें बदल गईं। बहुस्तरीय घोषणा के पक्ष में मेरे विचार हैं। :

  1. अब हमारे पास दो नए प्रकार के चर हैं, और varअप्रचलित हो गए हैं। यह constवास्तव में आप की जरूरत है हर जगह का उपयोग करने के लिए अच्छा अभ्यास है let। तो अक्सर आपके कोड में कोड के बीच में एसिगमेंट के साथ परिवर्तनीय घोषणाएं शामिल होंगी, और ब्लॉक स्कूपिंग के कारण आप अक्सर छोटे बदलावों के मामले में ब्लॉक के बीच चर को स्थानांतरित करेंगे। मुझे लगता है कि बहुस्तरीय घोषणाओं के साथ ऐसा करना अधिक आश्वस्त है।

  2. ईएस 6 सिंटैक्स अधिक विविध हो गया, हमें विध्वंसक, टेम्पलेट तार, तीर के कार्य और वैकल्पिक वर्गीकरण मिले। जब आप भारी मात्रा में एकल संस्करण घोषणाओं के साथ सभी सुविधाओं का उपयोग करते हैं, तो यह पठनीयता को नुकसान पहुंचाता है।


0

मुझे लगता है कि पहला तरीका (एकाधिक संस्करण) सबसे अच्छा है, क्योंकि आप अन्यथा इसे समाप्त कर सकते हैं (एक आवेदन से जो नॉकआउट का उपयोग करता है), जो मेरी राय में पढ़ना मुश्किल है:

    var categories = ko.observableArray(),
        keywordFilter = ko.observableArray(),
        omniFilter = ko.observable('').extend({ throttle: 300 }),
        filteredCategories = ko.computed(function () {
            var underlyingArray = categories();
            return ko.utils.arrayFilter(underlyingArray, function (n) {
                return n.FilteredSportCount() > 0;
            });
        }),
        favoriteSports = ko.computed(function () {
            var sports = ko.observableArray();
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        sports.push(a);
                    }
                });
            });
            return sports;
        }),
        toggleFavorite = function (sport, userId) {
            var isFavorite = sport.IsFavorite();

            var url = setfavouritesurl;

            var data = {
                userId: userId,
                sportId: sport.Id(),
                isFavourite: !isFavorite
            };

            var callback = function () {
                sport.IsFavorite(!isFavorite);
            };

            jQuery.support.cors = true;
            jQuery.ajax({
                url: url,
                type: "GET",
                data: data,
                success: callback
            });
        },
        hasfavoriteSports = ko.computed(function () {
            var result = false;
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        result = true;
                    }
                });
            });
            return result;
        });
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.