JavaScript Array.from(): एरे-लाइक से एरे बनाएं

Array.from() एक स्थिर मेथड है जो एरे-लाइक या इटरेटर ऑब्जेक्ट्स से एक नया, शैलो-कॉपीड एरे इंस्टेंस बनाता है। यह arguments, NodeList, Set, Map, स्ट्रिंग्स, आदि को एरे में बदलने का मानक तरीका है।

उदाहरण

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; } 
    .sample { font-size: 20px; font-weight: 500; } 
    button { padding: 10px 20px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; } 
</style> </head> <body> 
<h1>JavaScript Array.from() उदाहरण</h1> 
<div class="sample"></div> 
<button class="Btn">स्ट्रिंग से एरे बनाएं</button> 
<h3>ऊपर दिए गए बटन पर क्लिक करके दी गई स्ट्रिंग से एरे बनाएं</h3> 
<script> 
    const fillEle = document.querySelector(".sample"); 
    const str = "HelloWorld"; 
    fillEle.innerHTML = "स्ट्रिंग: " + str; 
    
    document.querySelector(".Btn").addEventListener("click", () => { 
        const arr = Array.from(str); 
        fillEle.innerHTML = "एरे: " + arr.join(", "); 
    }); 
</script> </body> </html>

आउटपुट

स्ट्रिंग: HelloWorld

क्लिक के बाद एरे: H, e, l, l, o, W, o, r, l, d

सिंटैक्स

Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike - एरे-लाइक या इटरेटर ऑब्जेक्ट
• mapFn (वैकल्पिक) - प्रत्येक तत्व पर कॉल करने वाला मैप फंक्शन
• thisArg (वैकल्पिक) - mapFn के लिए this मान

उन्नत उदाहरण

1. मैप फंक्शन के साथ

Array.from([1, 2, 3], x => x * 2); // [2, 4, 6]

// thisArg के साथ
const multiplier = { factor: 3 };
Array.from([1, 2, 3], function(x) { return x * this.factor; }, multiplier); // [3, 6, 9]

2. विभिन्न स्रोतों से

// NodeList (DOM)
Array.from(document.querySelectorAll("div"));

// Set (डुप्लिकेट हटाता है)
Array.from(new Set([1, 2, 2, 3])); // [1, 2, 3]

// Map
Array.from(new Map([[1, "a"], [2, "b"]])); // [[1, "a"], [2, "b"]]

// Arguments ऑब्जेक्ट
function args() { return Array.from(arguments); }
args(1, 2, 3); // [1, 2, 3]

// जेनरेटर
function* gen() { yield 1; yield 2; }
Array.from(gen()); // [1, 2]

3. एरे जैसी लंबाई वाले ऑब्जेक्ट

Array.from({length: 5}, (_, i) => i); // [0, 1, 2, 3, 4]
Array.from({length: 3}, () => Math.random()); // 3 रैंडम संख्याएं

Array.from() vs स्प्रेड ऑपरेटर