बेस्ट जावास्क्रिप्ट सिंटैक्टिक शुगर

Question

यहाँ कुछ रत्न दिए गए हैं:

शाब्दिक:

var obj = {}; // Object literal, equivalent to var obj = new Object();
var arr = []; // Array literal, equivalent to var arr = new Array();
var regex = /something/; // Regular expression literal, equivalent to var regex = new RegExp('something');

चूक:

arg = arg || 'default'; // if arg evaluates to false, use 'default', which is the same as:
arg = !!arg ? arg : 'default';

बेशक हम गुमनाम कार्यों को जानते हैं, लेकिन उन्हें शाब्दिक रूप से व्यवहार करने और उन्हें मौके पर निष्पादित करने में सक्षम होने के नाते (एक करीबी के रूप में) बहुत अच्छा है:

(function() { ... })(); // Creates an anonymous function and executes it

प्रश्न: जावास्क्रिप्ट में कौन सी अन्य महान वाक्यगत शर्करा उपलब्ध है?

Comments

मुझे इसकी जानकारी नहीं थी || डिफ़ॉल्ट मान सिंटैक्स। अच्छा और कॉम्पैक्ट, हालांकि इतना सहज नहीं है। (शायद मैंने इसे देखा हो, लेकिन इसे कभी नहीं समझा।)

— क्रिस नू

मेरे पास बहुत कठिन समय था, जो टर्नरी सिंटैक्स को समेट रहा था। यह आपको दूसरी बार लिखने के बाद दूसरी प्रकृति की तरह प्रतीत होगा। जहाँ तक आपने इसे देखा होगा, मुझे लगता है कि दोनों jquery.js और प्रोटोटाइप.js इसका उपयोग करते हैं।

— पलकहीनता

प्रत्येक उदाहरण को समझाने के बारे में कैसे?

— pc1oad1etter

मुझे "arg" 'default' के बारे में नहीं पता था। मुझे उम्मीद है कि यह एक बूलियन मान लौटाएगा, लेकिन यह पहला मूल्य (बाएं से) लौटाता है जो सच का मूल्यांकन करता है (अजगर के समान)! यह "arg = arg? Arg: 'default'" से बहुत बेहतर है!

— जामोल

क्रिस नो ने इस धागे को थपथपाया!

— महेश वेलगा

Answer 1

मिलीसेकंड के रूप में वर्तमान डेटाटाइम प्राप्त करना:

Date.now()

उदाहरण के लिए, कोड के एक खंड के निष्पादन के लिए:

var start = Date.now();
// some code
alert((Date.now() - start) + " ms elapsed");

Comments

यह वास्तव में, सबसे अच्छा जावास्क्रिप्ट सिंथैटिक चीनी है। एक विजेता सी युओ।

— पलकविहीनता

ऑर्बमैन, जो शायद संदर्भ पर निर्भर करता है; यदि इसे एक तर्क के रूप में पारित किया जाता है, तो यह एक संख्या या स्ट्रिंग के बजाय एक वस्तु के लिए मजबूर किया जा सकता है, जिस स्थिति में + पहले से ही इसे एक संख्या के लिए मजबूर कर दिया होगा। वास्तव में, + parseInt (मान, 10) के लिए शॉर्टहैंड के रूप में कार्य करता है।

— पलकविहीनता

सुधार: यह parseInt (मान, 10) से कुछ अंतर है। उदाहरण के लिए, + [3] और parseInt ([3], 10) दोनों संख्या 3 के बराबर हैं, लेकिन + [3, 4] == NaN और parseInt ([3, 4], 10) == 3.

— पलकविहीनता

Er ... parseInt (मूल्य, 10) के उन उदाहरणों के सभी parseFloat (मूल्य) होना चाहिए। और क्रिस नो, टिप्पणी स्पैम के लिए खेद है;)

— पलकहीनता

मेरी जिज्ञासा ने मुझे इसे jsperf में आज़माने के लिए प्रेरित किया और ऐसा लगता है कि सबसे अधिक प्रदर्शन करने वाला विहित getTime () :) (Ref। Jsperf.com/millisecondsdate ) है

— sirLisko

Answer 2

वस्तु सदस्यता परीक्षण:

var प्रॉप्स = {a: 1, b: 2};

("a" प्रॉप्स में) // true
("बी" प्रॉप्स में) // सच
("ग" प्रॉप्स में) // झूठा

Comments

यह निश्चित रूप से सहारा से अधिक संक्षिप्त है। === अपरिभाषित धन्यवाद।

— पलकहीनता

और यह सच है भले ही सहारा = {क: अपरिभाषित}।

— 3

FYI करें - जब आप XPCNativeWrapper ऑब्जेक्ट पर "इन" का उपयोग करने का प्रयास करते हैं, तो फ़ायरफ़ॉक्स एक टाइपरोर फेंकता है। और फ़ायरफ़ॉक्स 4 के साथ शुरू, बहुत सारी वस्तुएं लिपटे हुए हैं। तो वापस उन मामलों में अपरिभाषित === अपरिभाषित है।

— क्रिस नू

Answer 3

मोज़िला (और कथित रूप से IE7) में आप एक XML स्थिरांक का उपयोग कर बना सकते हैं:

var xml = <elem> </ elem>;

आप चर भी स्थानापन्न कर सकते हैं:

var elem = "html";
var text = "कुछ पाठ";
var xml = <{elem}> {text} </ {elem}>;

Comments

वास्तव में? क्या अन्य इंजन हैं जो समर्थन करते हैं?

— पलकविहीनता

बस सोच रहा था: एक बार बनाने के बाद आप उस "xml" चर के साथ क्या कर सकते हैं? बस अब इसके साथ फायरबग में खेल रहा है, ऐसा लगता है जैसे इसमें कोई विधियाँ या गुण नहीं हैं और आप इसे DOM में नहीं जोड़ सकते।

— निकफ

सहायक लिंक: developer.mozilla.org/index.php?title=En/…

— क्रिस नू

क्रॉस साइट-स्क्रिप्ट-इनक्लूजन हमलों के कारण E4X शाब्दिक सुरक्षा आपदा हैं, और वास्तव में "var xml = new XML ('<elem> </ elem>') IMO कहने में सक्षम होने से बेहतर नहीं है।

— बॉब

@CharlieSomerville यह जोखिम नहीं है। E4X संभावित रूप से 'सुरक्षित' [X] [HT] ML फ़ाइलों को सक्रिय JS में बदल देता है। कृपया इस मुद्दे पर पृष्ठभूमि के लिए code.google.com/p/doctype/wiki/ArticleE4XSecurity पढ़ें ।

— 13

Answer 4

अनाम फ़ंक्शंस का उपयोग करना और निजी चर बनाने के लिए एक बंद (सूचना छिपाना) और संबंधित प्राप्त / सेट विधियाँ:

var getter, setter;

(function()
{
   var _privateVar=123;
   getter = function() { return _privateVar; };
   setter = function(v) { _privateVar = v; };
})()

Comments

मुझे एक पल लगा, लेकिन मैं समझ गया। यह साफ है।

— मैट लोहकैंप

मैंने कुछ समय पहले इसी तरह की तकनीक की खोज की थी, जब swfobject स्रोत के माध्यम से देख रहा था। निजी चर / विधियों को बनाने के लिए क्लोजर का उपयोग करना कुछ ऐसा है जिसके बारे में मैंने शायद कभी नहीं सोचा होगा। यह शांत की तरह है।

— हर्म्स

नए JS वर्जन के साथ, हम सरलif(true) { let _privateVar=123; }

— कुलवार

यहां "डॉग बॉल" शैलीगत संभावित मुद्दे से अवगत रहें। देखें: twitter.com/paul_irish/status/176187448420864000?lang=en

— Jonathan.Brink

Answer 5

प्रोटोटाइप विरासत के माध्यम से देशी जावास्क्रिप्ट प्रकार का विस्तार करने में सक्षम होने के नाते।

String.prototype.isNullOrEmpty = function(input) {
    return input === null || input.length === 0;
}

Comments

केवल ऐरे करने के लिए ऐसा करने से बचें: stackoverflow.com/questions/61088/…

— क्रिस नू

यह सच है, लेकिन केवल अगर आप (बी) लूप के लिए उपयोग करते हैं। आमतौर पर मैं रूपरेखा का उपयोग करता हूं, जैसा कि मुझे यकीन है कि हर कोई करता है। एक परिणाम के रूप में मैं आमतौर पर .each () का उपयोग कर रहा हूं

— steve_c

यदि आपके कंटेनर में कोई भी कोड (b) उपयोग करता है तो यह एक संभावित समस्या है । और जब वह कंटेनर एक ब्राउज़र होता है, तो आप अपने ब्राउज़र में अन्य कोड को तोड़ सकते हैं, (उदाहरण के लिए, वह ढांचा)। मैं एक से डिंग किया गया हूं।

— क्रिस नोए

हां। अच्छे अंक, क्रिस। मैं अभी भी प्रोटोटाइप इनहेरिटेंस की गिनती जावास्क्रिप्ट की सबसे अच्छी विशेषताओं में से एक के रूप में करता हूं :)

— स्टीवे_सी

for (var i in obj) {if (! obj.hasOwnProperty (i)) {जारी; } ...}

— पलकविहीनता

Answer 6

===मूल्य और प्रकार की तुलना करने के लिए उपयोग करें :

var i = 0;
var s = "0";

if (i == s) // सच

if (i === s) // असत्य

Comments

इसे वास्तव में सख्त समान के रूप में संदर्भित किया जाता है - मूल रूप से यह सभी प्रकार के रूपांतरणों से बचता है जो अन्यथा करते समय होना चाहिए ==

— olliej

अन्य भाषाओं (PHP) भी इसे "पहचान" चेकिंग कहते हैं, यानी: क्या ये दोनों मूल्य समान हैं ?

— ०

@nickf, यह एक मिथ्या नाम का एक सा है। $var1 = 'string'; $var2 = 'string'; $var1 === $var2; // true, भले ही $var1और $var2समान (स्मृति में एक ही संग्रहीत मूल्य के लिए संदर्भ), बस एक ही प्रकार के और एक ही मूल्य नहीं हैं।

— आंखों की रोशनी

@eyelidlessness, मुझे यकीन नहीं है कि जावास्क्रिप्ट इस तरह से काम करता है ... तार (आमतौर पर) मूल्य द्वारा संग्रहीत और पारित किए जाते हैं। वस्तुओं को एक संदर्भ के रूप में संग्रहीत किया जाता है var1 = {a : 'b'}; var2 = {a : 'b'}; var1 === var2 // false:।

— निकफ

@nickf, मैं समझता हूँ कि। लेकिन आप PHP कोड में sigil निकाल सकते हैं और जावास्क्रिप्ट में समान परिणाम प्राप्त कर सकते हैं। वे तार समरूप नहीं हैं , लेकिन उनके मूल्य हैं।

— आंखों की रोशनी

Answer 7

बहु-पंक्ति तार:

var str = "यह \ _ है
सभी एक \
स्ट्रिंग "।

चूंकि आप व्हाट्सएप को स्ट्रिंग में शामिल किए बिना बाद की लाइनों को इंडेंट नहीं कर सकते हैं, इसलिए लोग आमतौर पर प्लस ऑपरेटर के साथ सहमति देना पसंद करते हैं। लेकिन यह एक अच्छा यहाँ दस्तावेज़ क्षमता प्रदान करता है।

Comments

निष्पक्ष चेतावनी - एक अपवाद है अगर वहाँ किसी भी अनुगामी रिक्त स्थान के बाद कर रहे हैं।

— डैनियल ज़ैबाओ

Answer 8

एक ऐरे की लंबाई का आकार बदलें

लंबाई संपत्ति केवल पढ़ने के लिए नहीं है । आप किसी सरणी के आकार को बढ़ाने या घटाने के लिए इसका उपयोग कर सकते हैं।

var myArray = [1,2,3];
myArray.length // 3 elements.
myArray.length = 2; //Deletes the last element.
myArray.length = 20 // Adds 18 elements to the array; the elements have the empty value. A sparse array.

Comments

महोदय, यह SO पर एक सबसे महत्वपूर्ण उत्तर होना चाहिए, मुझे विश्वास है। pushमेरे लिए और अधिक आईएनजी नहीं , हे। बहुत बहुत धन्यवाद।

— एफ़एक्सएक्सएक्सएक्स

वास्तव में, इस तरह से उपयोग किए गए तत्व वास्तव में मौजूद नहीं हैं (उनके पास अपरिभाषित मूल्य नहीं है, लेकिन उन्हें एक्सेस करने से आपको अपरिभाषित मिलेगा)। आप for..in के साथ भी उन पर पुनरावृति नहीं कर सकते।

— योरिक

Answer 9

एक स्ट्रिंग को दोहराना जैसे "-" एक खाली सरणी पर सम्मिलित विधि का लाभ उठाकर एक विशिष्ट संख्या:

var s = new Array(repeat+1).join("-");

"---" दोहराए जाने पर परिणाम == 3।

Answer 10

डिफ़ॉल्ट ऑपरेटर की तरह, ||गार्ड ऑपरेटर है &&,।

answer = obj && obj.property

विरोध के रूप में

if (obj) {
    answer = obj.property;
}
else {
    answer = null;
}

Comments

यह जरूरी नहीं है null। यह केवल जब मामला है obj === null।

— pimvdb

के साथ मिलकर भी इस्तेमाल किया जा सकता है || मामले में एक बैकअप सुनिश्चित करने के लिए कि या तो obj मौजूद नहीं है या ऑब्जेक्ट मौजूद है, लेकिन प्रमुख संपत्ति नहीं है। इस तरह से उत्तर को हमेशा परिभाषित किया जाता है: उत्तर = (obj && obj.property) || 'backupprop';

— 14

Answer 11

var tags = {
    name: "Jack",
    location: "USA"
};

"Name: {name}<br>From {location}".replace(/\{(.*?)\}/gim, function(all, match){
    return tags[match];
});

स्ट्रिंग प्रतिस्थापन के लिए कॉलबैक केवल उपयोगी है।

Answer 12

गेटएटर और सेटर :

function Foo(bar)
{
    this._bar = bar;
}

Foo.prototype =
{
    get bar()
    {
        return this._bar;
    },

    set bar(bar)
    {
        this._bar = bar.toUpperCase();
    }
};

हमें देता है:

>>> var myFoo = new Foo("bar");
>>> myFoo.bar
"BAR"
>>> myFoo.bar = "Baz";
>>> myFoo.bar
"BAZ"

Comments

हां, यह थोड़ा अच्छा होगा, फिर वर्तमान दृष्टिकोण जिसका मैंने उपयोग किया।

— ऐश

@eyelidlessness यह ECMAScript 5 के Object.defineProperty में है, जो IE लागू करता है और अन्य ब्राउज़र डिफाइनगेटर का उपयोग कर सकता है ।

— एली ग्रे

IE8 केवल डोम ऑब्जेक्ट्स के लिए गेटर्स / सेटर को लागू करता है, इसलिए यह बेकार है जब यह आपकी खुद की ऑब्जेक्ट एपीआई को बनाने के लिए आता है: - /

— जॉनी बुकानन

Answer 13

यह एक जावास्क्रिप्ट विशेष नहीं है, लेकिन कोड की तीन पंक्तियों की तरह बचाता है:

check ? value1 : value2

Comments

जब कोई मान निर्दिष्ट नहीं कर रहा है तो इसके बराबर है (जैसे। fnName? FnName: defaultFn?)।

— पलक

नहीं, टर्नरी ऑपरेटर भावों के लिए कड़ाई से है; कोई बयान नहीं

— जोश हिनमैन

आप इसका उपयोग अनाम कार्यों के मूल्यांकन के लिए कर सकते हैं, जैसे: "var myFunc = (browserIsIE? function?) (... {...}: function () {...})।" व्यक्तिगत रूप से, मैं इसकी सिफारिश नहीं करूंगा क्योंकि यह बहुत भ्रामक है, लेकिन कम से कम यह संभव है।

— ०0

"मूल्यांकन" शायद उस पिछली टिप्पणी में सबसे अच्छा शब्द नहीं है। उम्म .. असाइन?

— निक ०

@ व्यंग्यहीनता: हाँ: fnName? fnName (): defaultFn (); // अपने दम पर एक लाइन पर काम करता है

— एट्स गोरल

Answer 14

लेविक के उदाहरण पर थोड़ा और अधिक:

var foo = (condition) ? value1 : value2;

Comments

आपको कोष्ठक की आवश्यकता नहीं है। टर्नरी ऑपरेटर कई अन्य भाषाओं में भी आम हैं।

— एतेस गोरल

कोष्ठक में मदद मिलती है जब सशर्त कथन में वाक्यविन्यास अस्पष्टता होती है (उदाहरण के लिए, सशर्त कथन के कौन से घटक का निर्धारण होता है? लागू होता है)।

— पलकविहीनता

Answer 15

सरणी # foreach जावास्क्रिप्ट 1.6 पर

myArray.forEach(function(element) { alert(element); });

Answer 16

निम्नलिखित obj || {डिफ़ॉल्ट: सही} सिंटैक्स:

इसके साथ अपने फ़ंक्शन को कॉल करना: हैलो (needOne && needTwo && needThree) यदि एक पैरामीटर अपरिभाषित या गलत है, तो इसे हैलो (गलत), कभी-कभी उपयोगी कहा जाएगा

Answer 17

घटक भागों के एक निश्चित सेट के साथ पार्सिंग स्थितियों में:

var str = "John Doe";

"विनाशकारी असाइनमेंट" सिंटैक्स का उपयोग करके आप परिणामों को सीधे चर में दे सकते हैं:

var [fname, lname] = str.split(" ");
alert(lname + ", " + fname);

जो थोड़ा अधिक पठनीय है:

var a = str.split(" ");
alert(a[1] + ", " + a[0]);

वैकल्पिक रूप से:

var [str, fname, lname] = str.match(/(.*) (.*)/);

ध्यान दें कि यह एक जावास्क्रिप्ट 1.7 सुविधा है। तो इस समय मोजिला 2.0+ और क्रोम 6+ ब्राउज़र हैं।

Comments

मैंने सफारी जावास्क्रिप्ट कंसोल में यह कोशिश की और इसके परिणामस्वरूप पार्स त्रुटि हुई।

— आंखों की रोशनी

स्नैप, मुझे लगता है कि मैंने केवल फ़ायरफ़ॉक्स में इसका उपयोग किया है। मैंने एक ब्राउज़र संगतता नोट जोड़ा है।

— क्रिस नू

यह क्रोम 6 पर काम नहीं करता है SyntaxError: Unexpected token [। यह देता है ।

— रायल

थोड़ा शोध से पता चलता है कि क्रोम का 1.7 पूरी तरह से मानक नहीं है। कथित तौर पर लेट के साथ एक समस्या है: stackoverflow.com/questions/300185/…

— क्रिस नू

यह अभी भी क्रोम 13. पर काम नहीं करता है। इसे कब लागू किया जाएगा?

— pimvdb

Answer 18

तुरंत इनवॉइस किए गए एरो फंक्शन:

var test = "hello, world!";
(() => test)(); //returns "hello, world!";

Answer 19

मैं भूल गया:

(function() { ... }).someMethod(); // Functions as objects

Answer 20

बस के साथ एक अनाम वस्तु शाब्दिक बनाएँ: ({})

उदाहरण: यह जानने की जरूरत है कि क्या वस्तुओं में मूल्य विधि है:

var hasValueOf = !! ({})। valueOf

बोनस सिंटैक्टिक शुगर: डबल नहीं '!!' एक बूलियन में बहुत ज्यादा कुछ भी बहुत आसानी से परिवर्तित करने के लिए।

Answer 21

मुझे एक स्ट्रिंग स्ट्रिंग को विकसित () करने में सक्षम होना पसंद है और एक पूरी तरह से आबादी वाली डेटा संरचना को वापस मिलता है। मुझे कम से कम दो बार (एक बार IE के लिए, फिर से मोज़िला के लिए) लिखने से नफरत है।

Answer 22

Ths जैसे सरल चर के लिए अक्सर उपयोग किए जाने वाले कीवर्ड (या किसी भी तरीके) को समझना

  var $$ = document.getElementById;

  $$('samText');

Comments

यह काम नहीं करेगा (क्रोम में कम से कम), क्योंकि thisमूल्य खो गया है। इसके बजाय, आपको उपयोग करना चाहिए document.getElementById.bind(document)। इसके बिना bindयह केवल HTMLDocument.prototype.getElementByIdफ़ंक्शन को असाइन कर रहा है, बिना इस जानकारी के कि इसे कॉल किया जाना चाहिए document।

— pimvdb

Answer 23

जावास्क्रिप्ट की तिथि वर्ग एक अर्द्ध "धाराप्रवाह इंटरफ़ेस" प्रदान करता है। यह सीधे दिनांक वर्ग से दिनांक भाग निकालने में सक्षम नहीं होने के लिए बनाता है:

var today = new Date((new Date()).setHours(0, 0, 0, 0));

यह पूरी तरह से धाराप्रवाह इंटरफ़ेस नहीं है क्योंकि निम्नलिखित केवल हमें एक संख्यात्मक मान देगा जो वास्तव में दिनांक ऑब्जेक्ट नहीं है:

var today = new Date().setHours(0, 0, 0, 0);

Answer 24

डिफ़ॉल्ट फ़ॉलबैक:

var foo = {}; // empty object literal

alert(foo.bar) // will alert "undefined"

alert(foo.bar || "bar"); // will alert the fallback ("bar")

एक व्यावहारिक उदाहरण:

// will result in a type error
if (foo.bar.length === 0)

// with a default fallback you are always sure that the length
// property will be available.
if ((foo.bar || "").length === 0) 

Answer 25

यहाँ एक है जिसे मैंने अभी खोजा है: फ़ंक्शन को कॉल करने से पहले अशक्त जाँच करें:

a = b && b.length;

यह इसके बराबर छोटा है:

a = b ? b.length : null;

सबसे अच्छी बात यह है कि आप एक संपत्ति श्रृंखला की जांच कर सकते हैं:

a = b && b.c && b.c.length;

Answer 26

मुझे यह पसंद है कि सूचियों के साथ काम करना कितना सरल है:

var numberName = ["zero", "one", "two", "three", "four"][number];

और हैश:

var numberValue = {"zero":0, "one":1, "two":2, "three":3, "four":4}[numberName];

अधिकांश अन्य भाषाओं में यह काफी भारी कोड होगा। मान चूक भी प्यारे हैं। उदाहरण के लिए त्रुटि कोड रिपोर्टिंग:

var errorDesc = {301: "Moved Permanently",
                 404: "Resource not found",
                 503: "Server down"
                }[errorNo] || "An unknown error has occurred";

Comments

यह बहुत अच्छा लग रहा है, इसके लिए तकनीकी नाम क्या है?

— ट्राइस्पेस

Answer 27

स्ट्रिंग कलाकारों के लिए int

var i = 12;
var s = i+"";

Comments

यह मुझे सीधे "। स्ट्रिंग () या स्ट्रिंग (i) करने की तुलना में अधिक" शर्करा "नहीं दिखता है। लघु! = चीनी।

— एटल गोराल

Answer 28

element.innerHTML = "";  // Replaces body of HTML element with an empty string.

तत्व के सभी बच्चे नोड को हटाने के लिए एक शॉर्टकट।

Comments

यह वास्तव में जावास्क्रिप्ट नहीं है, यह डोम है, और यह वर्तमान में उस पर गैर-मानक है।

— पलकविहीनता

Answer 29

स्ट्रिंग को पूर्णांक डिफॉल्ट में बदलें

0 | "3" //result = 3
0 | "some string" -> //result = 0
0 | "0" -> 0 //result = 0

कुछ मामलों में उपयोगी हो सकता है, ज्यादातर जब 0 को खराब परिणाम माना जाता है

Answer 30

खाका शाब्दिक

var a = 10;
var b = 20;
var text = `${a} + ${b} = ${a+b}`;

फिर पाठ चर नीचे की तरह होगा!

10 + 20 = 30