जावास्क्रिप्ट में ऐरे डीस्ट्रक्चरिंग

परिचय

डीस्ट्रक्चरिंग असाइनमेंट (ES2015) ऐरे से मानों को अलग-अलग वेरिएबल्स में अनपैक करने का एक संक्षिप्त सिंटैक्स है। यह पठनीयता में सुधार करता है और मैन्युअल इंडेक्स एक्सेस की आवश्यकता को कम करता है।

उदाहरण

निम्न कोड जावास्क्रिप्ट में ऐरे डीस्ट्रक्चरिंग के लिए है:

<!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ऐरे डीस्ट्रक्चरिंग</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result, .sample { font-size: 20px; font-weight: 500; } </style> </head> <body> <h1>जावास्क्रिप्ट में ऐरे डीस्ट्रक्चरिंग</h1> <div class="sample"></div> <div style="color: green;" class="result"></div> <button class="Btn">यहाँ क्लिक करें</button> <h3> उपरोक्त ऐरे को डीस्ट्रक्चर करने के लिए ऊपर दिए गए बटन पर क्लिक करें </h3> <script> const sampleEle = document.querySelector(".sample"); const resEle = document.querySelector(".result"); const arr = ['F', 'G', 22, 44]; sampleEle.innerHTML = 'arr = ' + arr; let a, b, c, d; document.querySelector(".Btn").addEventListener("click", () => { [a, b, c, d] = arr; resEle.innerHTML = 'ऐरे डीस्ट्रक्चरिंग के बाद:<br>'; resEle.innerHTML += `a=${a} b=${b} c=${c} d=${d}`; }); </script> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:

'यहाँ क्लिक करें' बटन पर क्लिक करने पर:

उन्नत डीस्ट्रक्चरिंग पैटर्न्स

// डिफ़ॉल्ट मान
const [a = 1, b = 2] = []; // a=1, b=2

// एलिमेंट्स स्किप करें
const [first, , third] = [1, 2, 3]; // first=1, third=3

// रेस्ट पैटर्न
const [head, ...tail] = [1, 2, 3, 4]; // head=1, tail=[2,3,4]

// नेस्टेड डीस्ट्रक्चरिंग
const [a, [b, c]] = [1, [2, 3]]; // a=1, b=2, c=3

// स्वैपिंग (बिना टेम्प वेरिएबल)
[a, b] = [b, a];

// फ़ंक्शन पैरामीटर्स में
function greet([first, last]) { console.log(first, last); }
greet(['रोहन', 'शर्मा']);