---
title: Array.prototype.shift()
slug: Web/JavaScript/Reference/Global_Objects/Array/shift
tags:
  - Array
  - JavaScript
  - Méthode
  - Prototype
  - Reference
translation_of: Web/JavaScript/Reference/Global_Objects/Array/shift
original_slug: Web/JavaScript/Reference/Objets_globaux/Array/shift
---
<div>{{JSRef}}</div>

<p>La méthode <strong><code>shift()</code></strong> permet de retirer le <strong>premier</strong> élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau.</p>

<div>{{EmbedInteractiveExample("pages/js/array-shift.html")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox"><var>arr</var>.shift()</pre>

<h3 id="Valeur_de_retour">Valeur de retour</h3>

<p>L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide.</p>

<h2 id="Description">Description</h2>

<p>La méthode <code>shift</code> retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné.</p>

<p>Cette méthode est générique et peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets similaires à des tableaux. </p>

<p>Cette méthode n'est pas exploitable pour les objets dont la propriété <code>length</code> ne reflète pas la taille du contenu, ou pour lesquels la propriété <code>length</code> n'est pas définie.</p>

<div class="blockIndicator note">
<p><strong>Note :</strong> La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier).</p>
</div>

<h2 id="Exemples">Exemples</h2>

<h3 id="Supprimer_un_élément_d'un_tableau">Supprimer un élément d'un tableau</h3>

<p>Le code suivant affiche le tableau <code>mesPoissons</code> avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé :</p>

<pre class="brush:js">var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"];

console.log("mesPoissons avant : " + JSON.stringify(mesPoissons));
// mesPoissons avant : ["ange","clown","mandarin","chirurgien"]

var premierÉlément = mesPoissons.shift();

console.log("mesPoissons après :", mesPoissons);
// mesPoissons après : ["clown", "mandarin", "chirurgien"]

console.log("Cet élément a été enlevé :", premierÉlément);
// "Cet élément a été enlevé : ange"
</pre>

<h3 id="Utiliser_shift()_dans_une_boucle_while">Utiliser <code>shift()</code> dans une boucle <code>while</code></h3>

<p>La méthode <code>shift()</code> peut être utilisée dans une boucle <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/while">while</a></code>. Dans l'exemple suivant, chaque itération de la boucle retire un élément du tableau et l'affiche dans la console, jusqu'à ce que ce dernier soit vide.</p>

<pre class="brush: js">var noms = ["André", "Édouard", "Paul", "Christophe", "Jean"];
while ( (i = noms.shift()) !== undefined ) {
  console.log(i);
}
// André, Édouard, Paul, Christophe, Jean
</pre>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
  <tr>
   <td>{{SpecName('ES3')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td>Définition initiale. Implémentée avec JavaScript 1.2.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.4.4.9', 'Array.prototype.shift')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.shift', 'Array.prototype.shift')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<p>{{Compat("javascript.builtins.Array.shift")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>{{jsxref("Array.prototype.push()")}}</li>
 <li>{{jsxref("Array.prototype.pop()")}}</li>
 <li>{{jsxref("Array.prototype.unshift()")}}</li>
 <li>{{jsxref("Array.prototype.concat()")}}</li>
</ul>