Opérateurs spread et rest
Les trois points ... ont deux r?les : spread ?tend un it?rable en positions distinctes, rest recueille ce qui reste. Leur position fixe le sens.
Valeurs avec spread
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
console.log(menu.join(" / "));
La ligne affich?e est exactement tea / mint / lemon. Les ?l?ments de extras, et non le tableau comme unique ?l?ment, vont dans le nouveau tableau.
Copier des tableaux
const extras = ["mint", "lemon"];
const copy = [...extras];
copy[0] = "ginger";
console.log(extras[0]);
console.log(copy[0]);
copy est un nouveau tableau externe : sa modification ne change pas extras. C?est une copie superficielle ; objets et tableaux imbriqu?s restent partag?s.
Spread d?object
const order = { guest: "lida", drink: "tea" };
const withSize = { ...order, size: "regular" };
console.log(order.size);
console.log(withSize.size);
order n?a pas size, alors que withSize l?a. Le spread d?object est aussi superficiel : les valeurs imbriqu?es ne sont pas copi?es ind?pendamment.
Rest recueille le reste
const menu = ["tea", "mint", "lemon"];
const [first, ...remaining] = menu;
const order = { guest: "lida", drink: "tea" };
const { guest, ...details } = order;
console.log(first, remaining, details);
first vaut tea, remaining vaut ["mint", "lemon"] et details contient drink, pas guest. C?est seulement un contraste avec la le?on pr?c?dente.
Param?tres rest
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Spread and Rest</title></head>
<body>
<p id="result"></p>
<script>
const extras = ["mint", "lemon"];
const menu = ["tea", ...extras];
function list(first, ...others) {
return [first, ...others].join(" / ");
}
document.getElementById("result").textContent = list(...menu);
</script>
</body>
</html>
Dans list(...menu), la propagation a lieu ? l?appel. Dans function list(first, ...others), rest recueille les arguments suppl?mentaires dans un vrai tableau. Le r?sultat est tea / mint / lemon.
Le tableau rend la différence claire : les points sont identiques, mais leur position décide d’étendre les valeurs ou de recueillir le reste.
📊 M?mes points, deux directions
| Position | Sens | Exemple |
|---|---|---|
| Tableau, object ou appel | Spread ?tend | [..., extras], { ...order }, list(...menu) |
| Liaison ou param?tre | Rest recueille | const [first, ...remaining] = menu, function list(first, ...others) |
Exercice court
Modifiez copy[0], puis comparez-le ? extras[0]. Ajoutez un objet imbriqu? pour constater la copie superficielle.
Erreurs courantes
Ne placez pas rest au milieu, n?attendez pas de copie profonde et ne confondez pas spread et rest.
En r?sum?
Spread appara?t dans un tableau, un object ou un appel ; rest appara?t dans une liaison ou un param?tre. Les points sont identiques, pas le r?le.
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut