ES6 क्या है और जावास्क्रिप्ट प्रोग्रामर को क्या जानना चाहिए

ES6 क्या है और जावास्क्रिप्ट प्रोग्रामर को क्या जानना चाहिए

ES6 ECMA स्क्रिप्ट प्रोग्रामिंग भाषा के संस्करण 6 को संदर्भित करता है। ईसीएमए स्क्रिप्ट जावास्क्रिप्ट के लिए मानकीकृत नाम है, और संस्करण 6 संस्करण 5 के बाद अगला संस्करण है, जिसे 2011 में जारी किया गया था। यह जावास्क्रिप्ट भाषा में एक प्रमुख वृद्धि है, और बड़े पैमाने पर सॉफ्टवेयर विकास को आसान बनाने के उद्देश्य से कई और सुविधाएं जोड़ता है .





ईसीएमएस्क्रिप्ट, या ईएस6, जून 2015 में प्रकाशित हुआ था। बाद में इसका नाम बदलकर ईसीएमएस्क्रिप्ट 2015 कर दिया गया। पूरी भाषा के लिए वेब ब्राउज़र समर्थन अभी तक पूरा नहीं हुआ है, हालांकि प्रमुख हिस्से समर्थित हैं। प्रमुख वेब ब्राउज़र ES6 की कुछ विशेषताओं का समर्थन करते हैं। हालांकि, ए के रूप में ज्ञात सॉफ़्टवेयर का उपयोग करना संभव है खिलाड़ी ES6 कोड को ES5 में बदलने के लिए, जो कि अधिकांश ब्राउज़रों पर बेहतर समर्थित है।





आइए अब कुछ बड़े बदलावों को देखें जो ES6 जावास्क्रिप्ट में लाता है।





1. स्थिरांक

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

const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.

आप जहाँ भी चर का उपयोग कर सकते हैं, आप स्थिरांक का उपयोग कर सकते हैं ( कहां )



console.log('Value is: ' + joe * 2)
// prints: 8

2. ब्लॉक-स्कोप्ड चर और कार्य

२१वीं सदी में आपका स्वागत है, जावास्क्रिप्ट! ES6 के साथ, चर का उपयोग करके घोषित किया गया होने देना (और ऊपर वर्णित स्थिरांक) जावा, सी ++, आदि की तरह ही ब्लॉक स्कोपिंग नियमों का पालन करें। (अधिक जानने के लिए, जावास्क्रिप्ट में चर घोषित करने का तरीका देखें।)

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





चर ब्लॉक के अंत तक मूल्य बनाए रखते हैं। ब्लॉक के बाद, बाहरी ब्लॉक (यदि कोई हो) में मान बहाल हो जाता है।

कैसे जांचें कि मेरा मदरबोर्ड क्या है
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello

आप ऐसे ब्लॉकों के भीतर भी स्थिरांक को फिर से परिभाषित कर सकते हैं।





{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world

3. तीर कार्य

ES6 परिचय तीर कार्य जावास्क्रिप्ट को। (ये पारंपरिक कार्यों के समान हैं, लेकिन एक सरल वाक्य रचना है।) निम्नलिखित उदाहरण में, एक्स एक फ़ंक्शन है जो एक पैरामीटर को स्वीकार करता है जिसे कहा जाता है प्रति , और इसकी वृद्धि लौटाता है:

var x = a => a + 1;
x(4) // returns 5

इस सिंटैक्स का उपयोग करके, आप कार्यों में तर्कों को आसानी से परिभाषित और पारित कर सकते हैं।

a . के साथ प्रयोग करना प्रत्येक के लिए() :

[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16

कई तर्कों को कोष्ठक में संलग्न करके स्वीकार करने वाले कार्यों को परिभाषित करें:

[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]

4. डिफ़ॉल्ट फ़ंक्शन पैरामीटर्स

फ़ंक्शन पैरामीटर को अब डिफ़ॉल्ट मानों के साथ घोषित किया जा सकता है। निम्नलिखित में, एक्स दो मापदंडों वाला एक फ़ंक्शन है प्रति तथा बी . दूसरा पैरामीटर बी का डिफ़ॉल्ट मान दिया जाता है 1 .

var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4

सी ++ या पायथन जैसी अन्य भाषाओं के विपरीत, डिफ़ॉल्ट मान वाले पैरामीटर बिना डिफ़ॉल्ट वाले लोगों के सामने आ सकते हैं। ध्यान दें कि इस फ़ंक्शन को एक ब्लॉक के रूप में परिभाषित किया गया है a वापसी चित्रण के माध्यम से मूल्य।

var x = (a = 2, b) => { return a * b }

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

x(2)
// returns NaN
x(1, 3)
// returns 3

जब आप स्पष्ट रूप से अंदर जाते हैं अपरिभाषित एक तर्क के रूप में, यदि कोई है तो डिफ़ॉल्ट मान का उपयोग किया जाता है।

x(undefined, 3)
// returns 6

5. आराम समारोह पैरामीटर्स

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

var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left

6. स्ट्रिंग टेम्प्लेटिंग

स्ट्रिंग टेम्प्लेटिंग, पर्ल या शेल जैसे सिंटैक्स का उपयोग करके चर और अभिव्यक्तियों को स्ट्रिंग्स में इंटरपोल करने के लिए संदर्भित करता है। एक स्ट्रिंग टेम्पलेट बैक-टिक वर्णों में संलग्न है ( `` ) इसके विपरीत सिंगल कोट्स ( ' ) या दोहरे उद्धरण ( ' ) सामान्य तार इंगित करें। टेम्पलेट के अंदर के भावों को बीच में चिह्नित किया गया है $ { तथा } . यहाँ एक उदाहरण है:

var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'

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

// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'

स्ट्रिंग्स को परिभाषित करने के लिए इस सिंटैक्स का उपयोग मल्टी-लाइन स्ट्रिंग्स को परिभाषित करने के लिए भी किया जा सकता है।

var x = `hello world
next line`
// returns
hello world
next line

7. वस्तु गुण

ES6 एक सरलीकृत वस्तु निर्माण सिंटैक्स लाता है। नीचे दिए गए उदाहरण पर एक नज़र डालें:

var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}

गणना की गई संपत्ति के नाम भी काफी निफ्टी हैं। ES5 और पहले के साथ, किसी ऑब्जेक्ट प्रॉपर्टी को परिकलित नाम के साथ सेट करने के लिए, आपको यह करना होगा:

var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}

अब आप यह सब एक ही परिभाषा में कर सकते हैं:

var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}

और निश्चित रूप से, विधियों को परिभाषित करने के लिए, आप इसे केवल नाम से परिभाषित कर सकते हैं:

var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6

8. औपचारिक वर्ग परिभाषा सिंटैक्स

कक्षा परिभाषा

और अंत में, जावास्क्रिप्ट को औपचारिक वर्ग परिभाषा वाक्यविन्यास मिलता है। हालांकि यह पहले से उपलब्ध प्रोटोटाइप-आधारित वर्गों पर केवल वाक्यात्मक चीनी है, लेकिन यह कोड स्पष्टता को बढ़ाने का काम करता है। इसका मतलब है कि यह करता है नहीं एक नया ऑब्जेक्ट मॉडल या ऐसा कुछ भी फैंसी जोड़ें।

class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}

घोषित तरीके

एक विधि को परिभाषित करना भी काफी सरल है। वहाँ कोई आश्चर्य नहीं।

class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669

गेटर्स और सेटर्स

सिंटैक्स के लिए एक साधारण अपडेट के साथ अब हमारे पास गेटर्स और सेटर्स भी हैं। आइए हम इसे फिर से परिभाषित करें वृत्त एक के साथ कक्षा क्षेत्र संपत्ति।

class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669

आइए अब एक सेटर जोड़ें। परिभाषित करने में सक्षम होने के लिए RADIUS एक व्यवस्थित संपत्ति के रूप में, हमें वास्तविक क्षेत्र को फिर से परिभाषित करना चाहिए _त्रिज्या या ऐसा कुछ जो सेटर से नहीं टकराएगा। अन्यथा हम एक स्टैक ओवरफ्लो त्रुटि का सामना करते हैं।

यहाँ पुनर्परिभाषित वर्ग है:

class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255

कुल मिलाकर, यह वस्तु-उन्मुख जावास्क्रिप्ट के लिए एक अच्छा अतिरिक्त है।

विरासत

कक्षाओं को परिभाषित करने के अलावा कक्षा कीवर्ड, आप भी उपयोग कर सकते हैं फैली सुपर क्लास से इनहेरिट करने के लिए कीवर्ड। आइए देखें कि यह एक उदाहरण के साथ कैसे काम करता है।

class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483

और यह जावास्क्रिप्ट ES6 की कुछ विशेषताओं का संक्षिप्त परिचय था।

अगला: परिचित होना कुछ महत्वपूर्ण जावास्क्रिप्ट सरणी विधियाँ और एक आवाज के प्रति संवेदनशील रोबोट एनीमेशन की स्क्रिप्टिंग! इसके अलावा, Vue नामक एक महान फ्रंट-एंड फ्रेमवर्क के बारे में पता करें।

छवि क्रेडिट: माइक्रोलोगिया/ जमा तस्वीरें

साझा करना साझा करना कलरव ईमेल कैनन बनाम निकॉन: कौन सा कैमरा ब्रांड बेहतर है?

कैनन और निकॉन कैमरा इंडस्ट्री के दो सबसे बड़े नाम हैं। लेकिन कौन सा ब्रांड कैमरा और लेंस की बेहतर लाइनअप प्रदान करता है?

विंडोज़ 10 charging को चार्ज न करने में प्लग इन किया गया
आगे पढ़िए संबंधित विषय
  • प्रोग्रामिंग
  • जावास्क्रिप्ट
लेखक के बारे में जय श्रीधर(17 लेख प्रकाशित) जय श्रीधर की और फ़िल्में या टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें