JavaScript Array.shift(): पहला तत्व हटाएं

Array.prototype.shift() मेथड एरे से पहला तत्व हटाता है, उस तत्व को लौटाता है, और शेष सभी तत्वों के इंडेक्स को 1 से घटा देता है। यह एरे की लंबाई बदल देता है।

उदाहरण

<!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: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; } 
</style> </head> <body> 
<h1>JavaScript Array.shift() मेथड</h1> 
<div class="sample"></div> 
<button class="Btn">पहला तत्व हटाएं</button> 
<h3>ऊपर दिए गए बटन पर क्लिक करके एरे से पहला तत्व हटाएं</h3> 
<script> 
    const fillEle = document.querySelector(".sample"); 
    let arr = ["H", "E", "L", "L", "O"]; 
    fillEle.innerHTML = "मूल: " + arr.join(", "); 
    
    document.querySelector(".Btn").addEventListener("click", () => { 
        const removed = arr.shift(); 
        fillEle.innerHTML = `हटाया गया: "${removed}"<br>शेष: ` + arr.join(", "); 
    }); 
</script> </body> </html>

आउटपुट

मूल: H, E, L, L, O

क्लिक के बाद: हटाया गया: "H", शेष: E, L, L, O

एरे म्यूटेशन मेथड्स तुलना

मेथड	स्थिति	लौटाता है	मूल एरे
`shift()`	शुरुआत	हटाया गया तत्व	बदल जाता है
`pop()`	अंत	हटाया गया तत्व	बदल जाता है
`unshift(...)`	शुरुआत	नई लंबाई	बदल जाता है
`push(...)`	अंत	नई लंबाई	बदल जाता है
`splice(i, n)`	कहीं भी	हटाए गए तत्व	बदल जाता है

प्रदर्शन नोट

shift() और unshift() O(n) हैं क्योंकि सभी तत्वों को शिफ्ट करना पड़ता है। बड़े एरे पर बार-बार उपयोग के लिए:

दूसरे छोर पर ऑपरेशन करें (push/pop - O(1))
या Deque पैटर्न उपयोग करें (दो एरे: फ्रंट और बैक)
या लिंक्ड लिस्ट डेटा स्ट्रक्चर पर विचार करें

कतार (Queue) पैटर्न

class Queue {
    constructor() { this.items = []; }
    enqueue(item) { this.items.push(item); }  // O(1)
    dequeue() { return this.items.shift(); }  // O(n) - लेकिन सरल
    peek() { return this.items[0]; }
    get length() { return this.items.length; }
}

const q = new Queue();
q.enqueue("पहला"); q.enqueue("दूसरा");
q.dequeue(); // "पहला"