ECMAScript 2017 (ES8) का परिचय

सामग्री की तालिका

प्रस्तावना
ES7 अवलोकन
1. वस्तु
2. वस्तु
3. String.prototyp.padEnd
4. String.prototype.padStart
5. Object.getOwnPropertyDescriptor
6. अनुगामी अल्पविराम
7. शारदाअरेबफ़र
8. एटिक्स
9. आसन कार्य

प्रस्तावना

नमस्कार, अतीत में मैंने पहले से ही ES6 में नवाचारों पर विचार किया था और अब ES8 को अलग करने का समय आ गया है क्योंकि यह बहुत सारी नई चीजें लेकर आया है। मैंने ईएस 7 (2016) को अलग से नहीं माना, क्योंकि यह रिलीज केवल 2 नवाचार लेकर आई। यह Array.prototype.includes () और घातांक ऑपरेटर है। लेकिन फिर भी, ES8 शुरू करने से पहले, आइए ES7 के नवाचारों को देखें।

ES7 अवलोकन

शामिल () विधि निर्धारित करती है कि क्या सरणी में एक विशिष्ट तत्व है, जो इस पर निर्भर करते हुए सही या गलत है।

Array.prototype.includes(searchElement[, fromIndex = 0]) : Boolean 

searchElement - खोज करने के लिए आइटम।

fromIndex - सरणी में वह स्थिति जहाँ से खोज तत्व को खोजना शुरू करना है। नकारात्मक मानों के लिए, खोज अनुक्रमणिका array.length + fromIndex आरोही के साथ शुरू की जाती है। डिफ़ॉल्ट मान 0 है।

उदाहरण

 [1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true 

शामिल हैं () अन्य प्रकार की वस्तुओं पर लागू किया जा सकता है (उदाहरण के लिए, सरणी जैसी वस्तुएं)। उदाहरण: किसी तर्क ऑब्जेक्ट पर शामिल () विधि का उपयोग करना।

 (function() { console.log([].includes.call(arguments, 'a')); // true console.log([].includes.call(arguments, 'd')); // false })('a','b','c'); 

प्रतिपादक ऑपरेटर (**) आधार के साथ एक शक्ति देता है और एक प्राकृतिक प्रतिपादक बी। B की शक्ति को बढ़ाते हुए।

 a ** b 

उदाहरण

 2 ** 3 // 8 3 ** 2 // 9 3 ** 2.5 // 15.588457268119896 10 ** -1 // 0.1 NaN ** 2 // NaN 2 ** 3 ** 2 // 512 2 ** (3 ** 2) // 512 (2 ** 3) ** 2 // 64 -(2 ** 2) // -4 (-2) ** 2 // 4 

1. वस्तु

Object.entries () एक सरणी देता है, जिसके तत्व एएमयू के संबंधित गुण [कुंजी, मान] जोड़े के सीधे ऑब्जेक्ट में पाए जाते हैं। गुणों का क्रम वही है जब आप किसी वस्तु के गुणों के माध्यम से मैन्युअल रूप से साइकिल चलाते हैं।

 Object.entries(obj) : Array 

obj - एक वस्तु जिसका गुण गुण एक सरणी [कुंजी, मान] के रूप में वापस आ जाएगा।

Object.entries () उसी क्रम में गुणों को वापस लौटाता है जैसे ... लूप में (अंतर यह है कि फॉर-इन भी प्रोटोटाइप श्रृंखला से गुणों को सूचीबद्ध करता है)। सरणी में तत्वों का क्रम जो Object.entries () रिटर्न से स्वतंत्र है कि ऑब्जेक्ट कैसे घोषित किया गया है। यदि एक विशिष्ट आदेश की आवश्यकता है, तो विधि को कॉल करने से पहले सरणी को क्रमबद्ध करना होगा।

उदाहरण

 var obj = { foo: "bar", baz: 42 }; console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ] //    var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ] //    c random   var an_obj = { 100: 'a', 2: 'b', 7: 'c' }; console.log(Object.entries(an_obj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ] // getFoo  ,    var my_obj = Object.create({}, { getFoo: { value: function() { return this.foo; } } }); my_obj.foo = "bar"; console.log(Object.entries(my_obj)); // [ ['foo', 'bar'] ] // non-object     object console.log(Object.entries("foo")); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ] let obj = { one: 1, two: 2 }; for (let [k,v] of Object.entries(obj)) console.log(`${JSON.stringify(k)}: ${JSON.stringify(v)}`) // "one": 1 // "two": 2 

ऑब्जेक्ट को मैप में कन्वर्ट करें

नया मैप () कंस्ट्रक्टर मानों की पुनरावृत्ति को स्वीकार करता है। Object.entries के साथ, आप आसानी से ऑब्जेक्ट को मैप में बदल सकते हैं। यह 2 तत्व सरणियों के एक सरणी का उपयोग करने की तुलना में अधिक संक्षिप्त है, लेकिन चाबियाँ केवल तार हो सकती हैं।

 var obj = { foo: "bar", baz: 42 }; var map = new Map(Object.entries(obj)); console.log(map); // Map {"foo" => "bar", "baz" => 42} 

क्यों Object.entries () एक सरणी और एक पुनरावृत्ति नहीं की वापसी मूल्य है?
इस मामले में संबंधित उपयोग मामला Object.keys () है, और उदाहरण के लिए, Map.prototype.entries ()।

क्यों Object.entries () स्ट्रिंग कुंजियों के साथ केवल एन्यूमरेटेड देशी गुण लौटाता है

फिर से, यह Object.keys () से मिलान करने के लिए किया जाता है। यह विधि उन गुणों को भी नजरअंदाज करती है जिनकी कुंजी वर्ण हैं। अंत में, एक Reflect.ownEntries () विधि हो सकती है जो अपने सभी गुणों को वापस करती है।

आधिकारिक विनिर्देश , साथ ही एमडीएन वेब डॉक्स में ऑब्जेक्ट देखें।

2. वस्तु

Object.values ​​() एक सरणी देता है जिसके तत्व ऑब्जेक्ट में पाए जाने वाले गुण के मान हैं। ऑर्डर वैसा ही है जैसे कि आप ऑब्जेक्ट के माध्यम से मैन्युअल रूप से साइकिल चलाते हैं।

 Object.values(obj) : Array 

obj - एक वस्तु जिसके प्रगणित गुणों का मान वापस आ जाएगा।

Object.values ​​() विधि लूप में ... के लिए उसी क्रम में ऑब्जेक्ट के एन्यूमरेटेड गुणों के मूल्यों की एक सरणी देता है। एक लूप और एक विधि के बीच का अंतर यह है कि लूप प्रोटोटाइप श्रृंखला से गुणों को सूचीबद्ध करता है।

उदाहरण

 var obj = { foo: "bar", baz: 42 }; console.log(Object.values(obj)); // ['bar', 42] //    var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.values(obj)); // ['a', 'b', 'c'] 

Object.entries और Object.values ​​() के बीच का अंतर यह है कि पहले संपत्ति के नाम और मूल्य वाले सरणियों की एक सरणी देता है, जबकि दूसरा केवल गुणों के मूल्य के साथ एक सरणी देता है।

Object.values ​​() और Object.entries () के बीच उदाहरण अंतर

 const object = { a: 'somestring', b: 42, c: false }; console.log(Object.values(object)); // ["somestring", 42, false] console.log(Object.entries(object)); // [ ["a", "somestring"], ["b", 42], ["c", false] ] 

आधिकारिक विनिर्देश , साथ ही MDN वेब डॉक्स में Object.values ​​() देखें।

3. String.prototyp.padEnd

पैडएंड () विधि वर्तमान लाइन को दिए गए स्ट्रिंग (अंततः दोहराते हुए) के साथ पूरा करती है ताकि परिणामस्वरूप स्ट्रिंग निर्दिष्ट लंबाई तक पहुंच जाए। वर्तमान लाइन के अंत (दाएं) में जोड़ लगाया जाता है।

 String.prototype.padEnd(maxLength [ , fillString ]) : String 

maxLength - वर्तमान पंक्ति के बाद परिणामी पंक्ति की लंबाई गद्देदार है। यदि यह पैरामीटर वर्तमान लाइन की लंबाई से कम है, तो वर्तमान लाइन उसी तरह वापस आ जाएगी।
fillString - वर्तमान लाइन को पूरक करने के लिए एक स्ट्रिंग। यदि यह रेखा बहुत लंबी है, तो इसे छोटा कर दिया जाएगा और इसके बाईं ओर सबसे अधिक लगाया जाएगा। "" (0x0020 स्पेस) इस पैरामीटर के लिए डिफ़ॉल्ट मान है।

उदाहरण

 'abc'.padEnd(10); // "abc " 'abc'.padEnd(10, "foo"); // "abcfoofoof" 'abc'.padEnd(6,"123456"); // "abc123" 

स्ट्रिंग्स को आबाद करने के लिए मामलों का उपयोग करें:

• फ़ाइल नाम या URL में एक काउंटर या पहचानकर्ता जोड़ना: 'फ़ाइल 001.txt'
• कंसोल आउटपुट संरेखण: "टेस्ट 001: ment"
• अंक की निश्चित संख्या के साथ हेक्साडेसिमल या बाइनरी नंबर प्रिंट करें: '0x00FF'

आधिकारिक विनिर्देश में , साथ ही साथ एमडीएन वेब डॉक्स में String.prototype.padEnd देखें।

4. String.prototype.padStart

पैडस्टार्ट () विधि वर्तमान लाइन को दूसरी पंक्ति (कई बार, यदि आवश्यक हो) से भरती है ताकि परिणामी लाइन निर्दिष्ट लंबाई तक पहुंच जाए। भरने को वर्तमान लाइन की शुरुआत (बाएं) पर किया जाता है।

 String.prototype.padStart(maxLength [, fillString]) : String 

maxLength - वर्तमान लाइन के पूरा होने के बाद सारांश रेखा की लंबाई। यदि मान वर्तमान लाइन की लंबाई से कम है, तो वर्तमान लाइन अपरिवर्तित वापस आ जाएगी।

fillString - वर्तमान लाइन को भरने के लिए एक स्ट्रिंग। यदि यह स्ट्रिंग दी गई लंबाई के लिए बहुत लंबा है, तो इसे छोटा कर दिया जाएगा। डिफ़ॉल्ट मान "" (0x0020 स्पेस) है।

उदाहरण

 'abc'.padStart(10); // " abc" 'abc'.padStart(10, "foo"); // "foofoofabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0"); // "00000abc" 'abc'.padStart(1); // "abc" 

पैडलिंग विधि को पैडलाइट और पैडलाइट क्यों नहीं कहा जाता है?

द्विदिश या दाएं-बाएं भाषाओं के लिए, "बाएं" और "दाएं" शब्द काम नहीं करते हैं। इसलिए, padStart और padEnd का नामकरण मौजूदा नामों से शुरू होता है, जो startWith और EndWith से शुरू होता है।

आधिकारिक विनिर्देश में String.prototyp.padStart, साथ ही MDN वेब डॉक्स देखें ।

5. Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor () विधि पास के ऑब्जेक्ट के लिए अपनी संपत्ति (यानी, ऑब्जेक्ट में सीधे स्थित है, और प्रोटोटाइप श्रृंखला के माध्यम से प्राप्त नहीं) के लिए एक संपत्ति विवरणक लौटाता है। यदि संपत्ति मौजूद नहीं है, तो अपरिभाषित रिटर्न।

 Object.getOwnPropertyDescriptor(obj, prop) : Object 

obj - वह वस्तु जिसमें संपत्ति खोजी जाती है।

प्रोप - संपत्ति का नाम जिसका विवरण लौटाया जाएगा।

यह विधि आपको संपत्ति का सटीक विवरण देखने की अनुमति देती है। जावास्क्रिप्ट में एक संपत्ति एक स्ट्रिंग नाम और एक संपत्ति विवरणक होती है।

एक संपत्ति विवरणक निम्नलिखित विशेषताओं में से कुछ के साथ एक रिकॉर्ड है:

• मूल्य - संपत्ति से जुड़ा मूल्य (केवल डेटा डिस्क्रिप्टर में)।
• लेखन योग्य - यदि संपत्ति से जुड़े मूल्य को बदला जा सकता है, तो सच है, अन्यथा गलत (केवल डेटा डिस्क्रिप्टर में)।
• get - ऐसा फ़ंक्शन जो संपत्ति का मूल्य लौटाता है, या अपरिभाषित होता है यदि ऐसा कोई फ़ंक्शन नहीं है (केवल एक्सेस डिस्क्रिप्टर में)।
• सेट - एक फ़ंक्शन जो किसी संपत्ति का मूल्य बदलता है, या अपरिभाषित होता है यदि ऐसा कोई फ़ंक्शन नहीं है (केवल एक्सेस डिस्क्रिप्टर में)।
• विन्यास करने योग्य - यदि इस संपत्ति के हैंडल प्रकार को बदला जा सकता है और यदि संपत्ति को उस वस्तु से हटाया जा सकता है, तो गलत है।
• enumerable - सही है अगर यह संपत्ति उपलब्ध वस्तु के गुणों को सूचीबद्ध करते समय उपलब्ध है, अन्यथा झूठे।

उदाहरण

 obj = { get foo() { return 10; } }; console.log(Object.getOwnPropertyDescriptor(obj, 'foo')); // {set: undefined, enumerable: true, configurable: true, get: ƒ} obj2 = { bar: 42 }; console.log(Object.getOwnPropertyDescriptor(obj2, 'bar')); // {value: 42, writable: true, enumerable: true, configurable: true} 

Object.getOwnPropertyDescriptor () के लिए मामलों का उपयोग करें

पहला उपयोग मामला: किसी ऑब्जेक्ट में गुण कॉपी करें
ES6 के साथ शुरू, जावास्क्रिप्ट में पहले से ही गुणों को कॉपी करने के लिए एक उपकरण विधि है: Object.assign ()। हालांकि, यह विधि एक संपत्ति की नकल करने के लिए सरल मिल और सेट ऑपरेशन का उपयोग करती है जिसकी कुंजी कुंजी है:

 const value = source[key]; // get target[key] = value; // set 

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

 const source = { set foo(value) { console.log(value); } }; console.log(Object.getOwnPropertyDescriptor(source, 'foo')); // { get: undefined, set: [Function: foo], enumerable: true, configurable: true } 

लक्ष्य ऑब्जेक्ट में foo प्रॉपर्टी की प्रतिलिपि बनाने के लिए Object.assign () का उपयोग करना विफल रहता है:

 const target1 = {}; Object.assign(target1, source); console.log(Object.getOwnPropertyDescriptor(target1, 'foo')); // { value: undefined, writable: true, enumerable: true, configurable: true } 

सौभाग्य से, Object.getOwnPropertyDescriptors () के साथ Object.defineProperties () का उपयोग कर:

 const target2 = {}; Object.defineProperties(target2, Object.getOwnPropertyDescriptors(source)); console.log(Object.getOwnPropertyDescriptor(target2, 'foo')); // { get: undefined, set: [Function: foo], enumerable: true, configurable: true } 

दूसरा उपयोग मामला: क्लोनिंग ऑब्जेक्ट्स
उथला क्लोनिंग गुणों की नकल करने के समान है, इसलिए Object.getOwnPropertyDescriptors () भी यहां एक अच्छा विकल्प है।

इस बार हम Object.create () का उपयोग करते हैं, जिसमें दो पैरामीटर हैं:
पहला पैरामीटर लौटे ऑब्जेक्ट का प्रोटोटाइप निर्दिष्ट करता है।

एक वैकल्पिक दूसरा पैरामीटर प्रॉपर्टी डिस्क्रिप्टर का एक संग्रह है, जो Object.getOwnPropertyDescriptors () द्वारा लौटाए गए लोगों के समान है।

 const clone = Object.create(Object.getPrototypeOf(obj), Object.getOwnPropertyDescriptors(obj)); 

तीसरा उपयोग मामला: मनमाने ढंग से प्रोटोटाइप के साथ क्रॉस-प्लेटफॉर्म ऑब्जेक्ट शाब्दिक।

किसी वस्तु को शाब्दिक रूप से उपयोग करने के लिए एक मनमाना प्रोटोटाइप के साथ वाक्य रचना का सबसे अच्छा तरीका विशेष __proto__ संपत्ति का उपयोग करना है:

 const obj = { __proto__: prot, foo: 123, }; 

काश, यह सुविधा केवल ब्राउज़रों में मौजूद रहने की गारंटी होती है। सामान्य समाधान है Object.create () और असाइनमेंट:

 const obj = Object.create(prot); obj.foo = 123; 

लेकिन आप Object.getOwnPropertyDescriptors () का भी उपयोग कर सकते हैं:

 const obj = Object.create( prot, Object.getOwnPropertyDescriptors({ foo: 123, }) ); 

एक अन्य विकल्प Object.assign () है:

 const obj = Object.assign( Object.create(prot), { foo: 123, } ); 

नुकसान: सुपर का उपयोग कर तरीकों की नकल।

वह विधि जो सुपर उपयोग करती है वह अपने घरेलू ऑब्जेक्ट (जिस वस्तु में संग्रहीत होती है) से कसकर बंधी होती है। वर्तमान में ऐसी विधि को किसी अन्य ऑब्जेक्ट में कॉपी या स्थानांतरित करने का कोई तरीका नहीं है।

आधिकारिक विनिर्देश , साथ ही MDN वेब डॉक्स में Object.getOwnPropertyDescriptor देखें।

6. अनुगामी अल्पविराम

हैंगिंग कॉमा (ट्रेलिंग कॉमा) - जावास्क्रिप्ट कोड में नए तत्वों, मापदंडों या गुणों को जोड़ते समय उपयोगी हो सकता है। यदि आप एक नई संपत्ति जोड़ना चाहते हैं, तो आप पिछले एक को बदलने के बिना बस एक नई लाइन जोड़ते हैं, अगर इसमें फांसी वाला अल्पविराम पहले से ही उपयोग किया जाता है। यह संस्करण नियंत्रण क्लीनर में अंतर बनाता है और कोड परिवर्तन कम परेशानी वाला हो सकता है।

शाब्दिक रूप से हैंगिंग कॉमा

सरणियों

जावास्क्रिप्ट arrays में फांसी अल्पविराम:

 var arr = [ 0, 1, 2, ]; console.log(arr); // [0, 1, 2] console.log(arr.length); // 3 var arr2 = [0, 1, 2,,,]; console.log(arr2.length); // 5 arr2.forEach((e) => console.log(e)); // 0 1 2 console.log(arr.map((e) => e)); // 0 1 2 

यदि एक से अधिक लटकने वाले बिंदु का उपयोग किया जाता है, तो छेद बनाए जाएंगे। "छेद" के साथ एक सरणी को विरल कहा जाता है (एक घने सरणी में "छेद" नहीं होता है)। जब एक सरणी का उपयोग करते हुए पुनरावृति होती है, उदाहरण के लिए, Array.prototyp.forEach () या Array.prototype.map (), छेद को छोड़ दिया जाएगा।

वस्तुएं

 var object = { foo: "bar", baz: "qwerty", age: 42, }; console.log(object); // {foo: "bar", baz: "qwerty", age: 42} 

कार्यों में हंगामा

पैरामीटर परिभाषा

फ़ंक्शन पैरामीटर्स की निम्नलिखित परिभाषाएँ एक-दूसरे के लिए मान्य और समान हैं। डैंग्लिंग कॉमा एक फ़ंक्शन या उनके तर्कों ऑब्जेक्ट की लंबाई संपत्ति को प्रभावित नहीं करते हैं।

 function f(p) {} function f(p,) {} (p) => {}; (p,) => {}; 

विधि की परिभाषा

हैंगिंग कॉमा कक्षाओं या वस्तुओं के लिए परिभाषित करने के तरीकों के साथ भी काम करता है।

 class C { one(a,) {}, two(a, b,) {}, } var obj = { one(a,) {}, two(a, b,) {}, }; 

फंक्शन कॉल

निम्न फ़ंक्शन कॉल मान्य और एक दूसरे के बराबर हैं।

 f(p); f(p,); Math.max(10, 20); Math.max(10, 20,); 

अमान्य हैंगिंग कॉमा

फ़ंक्शन मापदंडों को परिभाषित करना या केवल एक अल्पविराम वाले फ़ंक्शन को कॉल करना एक सिंटैक्सएरोर बढ़ाएगा। इसके अलावा, शेष मापदंडों का उपयोग करते समय, फांसी वाले अल्पविरामों की अनुमति नहीं है।

 function f(,) {} // SyntaxError: missing formal parameter (,) => {}; // SyntaxError: expected expression, got ',' f(,) // SyntaxError: expected expression, got ',' function f(...p,) {} // SyntaxError: parameter after rest parameter (...p,) => {} // SyntaxError: expected closing parenthesis, got ',' 

विनाश में हैंगिंग कॉमस

विनाशकारी असाइनमेंट का उपयोग करते समय हैंगिंग कॉमा को बाईं ओर भी इस्तेमाल किया जा सकता है।

 //      [a, b,] = [1, 2]; //      var o = { p: 42, q: true, }; var {p, q,} = o; 

एक बार फिर, शेष मापदंडों का उपयोग करते हुए, एक सिंटेक्सऑयर को फेंक दिया जाएगा।

 var [a, ...b,] = [1, 2, 3]; // Uncaught SyntaxError: Rest element must be last element 

JSON डैंगलिंग कॉमस

किसी ऑब्जेक्ट में हैंगिंग कॉमा केवल ECMAScript 5 में अनुमत हैं। चूंकि JSON ES5 से अधिक पुराने जावास्क्रिप्ट सिंटैक्स पर आधारित है, इसलिए JSON में हैंगिंग कॉमा की अनुमति नहीं है ।

दोनों पंक्तियाँ एक SyntaxError फेंकती हैं

 JSON.parse('[1, 2, 3, 4, ]'); JSON.parse('{"foo" : 1, }'); // Uncaught SyntaxError: Unexpected token ] in JSON // Uncaught SyntaxError: Unexpected token } in JSON 

हैंग कॉमा उपयोगी क्यों हैं?

इसके दो फायदे हैं।

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

दूसरे, यह संस्करण नियंत्रण प्रणालियों को ट्रैक करने में मदद करता है कि वास्तव में क्या बदल गया है। उदाहरण के लिए, से:

 [ 'Foo' ] : [ 'Foo', '' ] 

'फू' के साथ लाइन और 'बार' के साथ लाइन को परिवर्तित के रूप में चिह्नित करने का कारण बनता है, हालांकि अंतिम लाइन को जोड़ने के लिए एकमात्र वास्तविक परिवर्तन है।

एमडीएन वेब डॉक्स पर ट्रेलिंग कॉमा देखें।

7. शारदाअरेबफ़र

SharedArrayBuffer ऑब्जेक्ट का उपयोग ArrayBuffer ऑब्जेक्ट के समान, आदिम बाइनरी डेटा को संग्रहीत करने के लिए एक निश्चित-लंबाई विभाजन बफ़र बनाने के लिए किया जाता है, लेकिन इसके विपरीत, साझा मेमोरी पर व्यू बनाने के लिए SharedArrayBuffer इंस्टेंसेस का उपयोग किया जा सकता है। SharedArrayBuffer को डिस्कनेक्ट नहीं किया जा सकता है।

 new SharedArrayBuffer(length) : Object 

लंबाई - आकार, बाइट्स में, बफर सरणी बनाने के लिए।

वापसी - निर्दिष्ट लंबाई का एक नया शेयर्डएयरब्रेयर ऑब्जेक्ट। आरंभीकरण के बाद इसकी सामग्री 0 है।

क्लस्टर में एक एजेंट और दूसरे (एजेंट वेब पेज का मुख्य कार्यक्रम या वेब-वर्करों में से एक हो सकता है) के बीच साझा किए गए साझा किए गए मेमोरी ऑब्जेक्ट का उपयोग करके मेमोरी साझा करने के लिए, पोस्टमैसेज और संरचित क्लोनिंग का उपयोग किया जाता है।

संरचित क्लोनिंग एल्गोरिथ्म SharedArrayBuffers और TypedArrays को SharedArrayBuffers के लिए मैप करता है। दोनों मामलों में, SharedArrayBuffer ऑब्जेक्ट को रिसीवर को दिया जाता है, जो प्राप्त एजेंट (ArrayBuffer के समान) के अंदर एक नया निजी SharedArrayBuffer ऑब्जेक्ट बनाता है। हालाँकि, दोनों साझा किए गए डेटा ब्लॉक को SharedArrayBuffer ऑब्जेक्ट द्वारा संदर्भित किया जाता है, एक ही डेटा ब्लॉक है, और एक एजेंट में ब्लॉक में तीसरे पक्ष के प्रभाव अंततः दूसरे एजेंट में दिखाई देंगे।

 var sab = new SharedArrayBuffer(1024); worker.postMessage(sab); 

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

साझा ऐरे बफ़र्स उच्च स्तर की समानता के सार के लिए एक आदिम इमारत ब्लॉक है। वे आपको कई श्रमिकों और मुख्य धागे के बीच साझा किए गए एक शेयरड्रेअर बफ़र ऑब्जेक्ट के बाइट्स को साझा करने की अनुमति देते हैं (बाइट को एक्सेस करने के लिए साझा किया जाता है, इसे टाइप एरे में लपेटें)। इस प्रकार के विनिमय के दो फायदे हैं:
आप श्रमिकों के बीच डेटा का तेजी से आदान-प्रदान कर सकते हैं

श्रमिकों के बीच समन्वय आसान और तेज हो जाता है (पोस्टमेजेज () की तुलना में)।

कार्यकर्ता का कार्यान्वयन इस प्रकार है।

 // worker.js self.addEventListener ('message', function (event) { const {sharedBuffer} = event.data; const sharedArray = new Int32Array (sharedBuffer); // ··· }); 

सबसे पहले, हम हमारे द्वारा भेजे गए साझा सरणी के बफर को निकालते हैं, और फिर इसे टाइप किए गए सरणी में लपेटते हैं ताकि हम इसे स्थानीय रूप से उपयोग कर सकें।

SharedArrayBuffer के गुण और तरीके।

SharedArrayBuffer.length - SharedArrayBuffer कंस्ट्रक्टर की लंबाई जिसका मूल्य 1 है।
SharedArrayBuffer.prototype - सभी SharedArrayBuffer ऑब्जेक्ट के लिए अतिरिक्त गुण देता है।

शेअरएर्रेबफ़र इंस्टेंस
गुण

SharedArrayBuffer.prototype.constructor - एक फ़ंक्शन को परिभाषित करता है जो किसी ऑब्जेक्ट का प्रोटोटाइप बनाता है। प्रारंभिक मूल्य मानक निर्मित शेयर्डएयरब्रेयर कंस्ट्रक्टर है।

SharedArrayBuffer.prototype.byteLength (केवल पढ़ें) - बाइट्स में सरणी का आकार। यह तब सेट किया जाता है जब सरणी बनाई जाती है और उसे बदला नहीं जा सकता।

तरीकों

SharedArrayBuffer.prototyp.slice () - एक नया SharedArrayBuffer देता है, जिसकी सामग्री शुरुआत से लेकर अंत तक, इस SharedArrayBuffer के बाइट्स की एक प्रति है, अनन्य के लिए। यदि शुरुआत या अंत नकारात्मक है, तो यह शुरुआत से नहीं, बल्कि सरणी के अंत से सूचकांक को संदर्भित करता है। इस विधि में Array.prototype.slice () के समान एल्गोरिथ्म है।

 //  SharedArrayBuffer     const buffer = new SharedArrayBuffer(16); const int32View = new Int32Array(buffer); //  view // produces Int32Array [0, 0, 0, 0] int32View[1] = 42; const sliced = new Int32Array(buffer.slice(4,12)); console.log(sliced); // Int32Array [42, 0] 

 sab.slice([begin, end]) : Object 

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

उदाहरण के लिए, स्लाइस (1,4) चौथे तत्व (सूचकांक 1, 2, और 3 के साथ तत्व) के माध्यम से दूसरे तत्व को पुनः प्राप्त करता है। आप अनुक्रम के अंत से ऑफसेट को इंगित करते हुए एक नकारात्मक सूचकांक का उपयोग कर सकते हैं। स्लाइस (2, -1) अनुक्रम में दूसरे-अंतिम तत्व के माध्यम से तीसरे तत्व को पुनः प्राप्त करता है। यदि अंत छोड़ दिया जाता है, तो स्लाइस अनुक्रम के अंत के माध्यम से प्राप्त होता है (sab.byteLength)।

उदाहरण

 var sab = new SharedArrayBuffer(1024); sab.slice(); // SharedArrayBuffer { byteLength: 1024 } sab.slice(2); // SharedArrayBuffer { byteLength: 1022 } sab.slice(-2); // SharedArrayBuffer { byteLength: 2 } sab.slice(0, 1); // SharedArrayBuffer { byteLength: 1 } 

SharedArrayBuffer को आधिकारिक विनिर्देश , साथ ही MDN वेब डॉक्स में देखें ।

8. एटिक्स

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

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

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

गुण

एटोमिक्स [Symbol.toStringTag] - इस संपत्ति का मूल्य एटमिक्स है।

तरीकों

परमाणु संचालन

• Atomics.add () - प्रस्तुत मान को सरणी में निर्दिष्ट स्थान पर वर्तमान एक में जोड़ता है। इस स्थिति में पिछला मान लौटाता है।
• Atomics.and () - एक बिटवाइज़ और निर्दिष्ट एरे पोज़िशन पर गणना करता है। इस स्थिति में पिछला मान लौटाता है।
• Atomics.compareExchange () - प्रस्तुत मूल्य को सरणी की निर्दिष्ट स्थिति में सहेजता है, यदि यह प्रस्तुत मूल्य के बराबर है। पिछला मान लौटाता है।
• Atomics.exchange() — . .
• Atomics.load() — .
• Atomics.or() — OR . .
• Atomics.store() — . .
• Atomics.sub() — . .
• Atomics.xor() — XOR . .

Atomics.add() . , , .

 Atomics.add(typedArray, index, value) : mixed 

• typedArray — . Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array Uint32Array.
• index — typedArray value.
• value — .
• return — (typedArray[index]).

• TypeError, typedArray .
• TypeError, typedArray .
• RangeError, index typedArray.

 var sab = new SharedArrayBuffer(1024); var ta = new Uint8Array(sab); Atomics.add(ta, 0, 12); //  0,   Atomics.load(ta, 0); // 12 

Atomics.add() , MDN Web Docs .

Wait notify

wait() wake() futexes («fast user-space mutex» — mutex ) Linux , true, .

Atomics.wait()
, -. «ok», «not-equal» «timed-out». , ( wait() ).

• Atomics.wait() — , -. «ok», «not-equal» «timed-out». , ( wait() ).
• Atomics.wake() — , . , .
• Atomics.isLockFree(size) — , . true, ( ). .

workers. , .

, , :

 while (sharedArray [0] === 123); 

sharedArray [0] ( sharedArray — , - ). :

 const tmp = sharedArray [0]; while (tmp === 123); 

, .

— :

 // main.js sharedArray [1] = 11; sharedArray [2] = 22; 

, . , , :

 // worker.js while (sharedArray [2]! == 22); console.log (sharedArray [1]); // 0  11 

workers, .

Atomics, .

: .

Atomics workers. , :

 Atomics.load (TypedArray <T>, index) : T Atomics.store (TypedArray <T>, index, value: T) : T 

, , Atomics (, ) , . , , Atomics.

, , Atomics ( sharedArray):

 // main.js console.log ('notified...'); Atomics.store (sharedArray, 0, 123); // worker.js while (Atomics.load (sharedArray, 0)! == 123); console.log ('notified'); 

: .

while , Atomics , : Atomics.wait (Int32Array, index, value, timeout) Atomics.wake (Int32Array, index, count).

: atomic operations
Atomics , . उदाहरण के लिए:

 Atomics.add (TypedArray <T>, index, value) : T 

, : index += value;

c .

— (): — , .

«Tear-Free Reads» , , :

• , Typed Arrays ( DataViews).
• : sharedArray.byteOffset% sharedArray.BYTES_PER_ELEMENT === 0
• .

, , :

• DateViews;
• ;
• ;

, Atomics .

Shared Array Buffers

Shared Array Buffers JavaScript « ». JavaScript « »: , . , , , .

Shared Array Buffers (RTC): , , . , RTC: Shared Array Buffers, .

, RTC. await.

Shared Array Buffers emscripten pthreads asm.js. emscripten:

[En] [Shared Array Buffers allow] Emscripten applications to share the main memory heap between web workers. This along with primitives for low level atomics and futex support enables Emscripten to implement support for the Pthreads (POSIX threads) API.

[Ru] [Shared Array Buffers ] Emscripten -. futex Emscripten API Pthreads ( POSIX).

C C ++ asm.js.

, WebAssembly. , web workers , , WebAssembly . , WebAssembly.

,

( 32 ). , — . , , :

• TextEncoder TextDecoder: Uint8Array, .
• stringview.js: , . .
• FlatJS: JavaScript (, ) (ArrayBuffer SharedArrayBuffer). JavaScript + FlatJS JavaScript. JavaScript (TypeScript . .) .
• TurboScript: JavaScript- . asm.js WebAssembly.

, , — — . , .

, Shared Array?

. ( " A Taste of JavaScript's New Parallel Primitives ”», , web workers. 4 web workers , , , , 6,9 (1 web worker) 25,4 (4 web workers). web workers , .

, , .

Shared Array Buffers :

• Shared memory – a brief tutorial by Lars T. Hansen
• A Taste of JavaScript's New Parallel Primitives by Lars T. Hansen
• SharedArrayBuffer and Atomics Stage 2.95 to Stage 3 (PDF), slides by Shu-yu Guo and Lars T. Hansen (2016-11-30) [c, ES]
• The Basics of Web Workers by Eric Bidelman [ web workers].

JavaScript, :

• “ The Path to Parallel JavaScript ” by Dave Herman [ , JavaScript PJS]
• “ Write massively-parallel GPU code for the browser with WebGL ” by Steve Sanderson [ , , WebGL GPU].
• “ Concurrency is not parallelism ” by Rob Pike [Rob Pike «concurrency» «parallelism» ].
• " Using Web Workers " from MDN [ MDN, web workers].
• " Shared memory and atomics " by Axel Rauschmayer [ js Shared Array Buffers Atomics]

Atomics Object , MDN Web Docs .

9. Async functions

Async function AsyncFunction constructor

AsyncFunction async function. JavaScript AsyncFunction.

, AsyncFunction . , .

 Object.getPrototypeOf(async function(){}).constructor 

 new AsyncFunction([arg1[, arg2[, ...argN]],] functionBody) 

arg1, arg2,… argN — , . , JavaScript , ; , «x», «theValue», «a,b».

functionBody — , JavaScript.

async function, AsyncFunction constructor , . , async function expression , .

, , , .

AsyncFunction constructor ( new) , .

async functions AsyncFunction constructor, ; . , , AsyncFunction constructor. eval async function.

async function AsyncFunction constructor

 function resolveAfter2Seconds(x) { return new Promise(resolve => { setTimeout(() => { resolve(x); }, 2000); }); } var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor var a = new AsyncFunction('a', 'b', 'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);'); a(10, 20).then(v => { console.log(v); //  30  4  }); 

async function

async function , AsyncFunction. async-, async function.

 async function name([param[, param[, ... param]]]) { // body } 

name — .
param — , .
statements — , .

async Promise. , Promise , . async , Promise (throws) .

async await, async Promise, async .

await . SyntaxError.

async/await promises Promises. Promises callback-, async/await promises.

उदाहरण

 function resolveAfter2Seconds(x) { return new Promise(resolve => { setTimeout(() => { resolve(x); }, 2000); }); } async function add1(x) { const a = await resolveAfter2Seconds(20); const b = await resolveAfter2Seconds(30); return x + a + b; } add1(10).then(v => { console.log(v); //  60  4  }); async function add2(x) { const a = resolveAfter2Seconds(20); const b = resolveAfter2Seconds(30); return x + await a + await b; } add2(10).then(v => { console.log(v); //  60  2  }); 

?

JS- .js , . , . .

, JS — , . , , , , . , . (You-Dont-Know-JS/async & performance, Jake Archibald).

 // ajax(..)  Ajax-,   var data = ajax( "http://some.url.1" ); console.log( data );// !  `data`     Ajax- 

? console.log() , .

«» , :

 ajax( "http://some.url.1", function myCallbackFunction(data){ console.log( data ); // ,   ! } ); 

.

3 getUser, getPosts, getComments.

 const { getUser, getPosts, getComments } = require('./db'); getUser(1, (error, user) => { if(error) return console.error(error); getPosts(user.id, (error, posts) => { if(error) return console.error(error); getComments(posts[0].id, (error, comment) => { if(error) return console.error(error); console.log(comments); }); }); }); 

, . Callback Hell . , () , .

Promise ( , . . .

 getUser(1) .then(user => getPosts(user,id)) .then(posts => getComments(posts[0].id)) .then(comments => console.log(comments)) .catch(error => console.error(error)); 

Promise Generators ( . , Promise, — , . try...catch. — Promise , . , co . .

 co(function* () { try { let user = yield getUser(1); let posts = yield getPosts(user.id); let comments = yield getComments(posts[0].id); console.log(comments); } catch (error) { console.log(error); } }); function co(generator) { const iterator = generator(); return new Promise((resolve, reject) => { function run(prev) { const { value, done } = iterator.next(prev); if (done) resolve(value); else if (value instanceof Promise) value.then(run, reject); else run(value); } run(); }); } 

.
(Calback functions) — , .

(Promises) — , .

(Generators) — , , .

(Promises) (Generators), , .

, , :

 function getUser(id) { return { id: 1 }; } let user = getUser(1); console.log(user); // { id: 1 } 

( async), Promise id.

 async function getUser(id) { return { id: 1 }; } let user = getUser(1); console.log(user); // Promise { {id: 1} } 

, , Promis ( Promis ). , .

then().

 async function getUser(id) { return { id: 1 }; } getUser(1) .then(user => console.log(user)); // { id: 1 } 

await .

( HTTP .

 fetch(`https://jsonplaceholder.typicode.com/users/1`) .then(data => data.json()) .then(data => console.log(data)); 

Promise.
, .

 async function sendRequest() { let response= await fetch(`https://jsonplaceholder.typicode.com/users/1`); return response.json(); } async function main() { var a = await sendRequest(); console.log(a); } main(); 

async . main(). then(), .

 async function sendRequest() { let response= await fetch(`https://jsonplaceholder.typicode.com/users/1`); return response.json(); } sendRequest() .then((data) => console.log(data)); 

fetch(). await, : fetch() response. : fetch() .

Promise async function

 //  Promise function sendRequest() { return fetch(`https://jsonplaceholder.typicode.com/users/1`) .then(data => data.json()); } //  async function async function sendRequest() { let response = await fetch(`https://jsonplaceholder.typicode.com/users/1`); return response.json(); } 

await , .

try...catch.

 async function sendRequest() { let response = await fetch(`https://jsonplaceholder.typicode.com/users/1`); try { throw new Error("Unexpected error"); return response.json(); } catch(error) { console.log(error); // Error: Unexpected error at sendRequest } } 

…

  //    async; await; async; await; async; await; async; await; In the System(); The function.sleep()s tonight~ 

Async Function Definitions , MDN Web Docs .