Array : mthode slice()

Exemple interactif

const animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(animals.slice(2));
// Rsultat attendu : Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Rsultat attendu : Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Rsultat attendu : Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Rsultat attendu : Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Rsultat attendu : Array ["camel", "duck"]

console.log(animals.slice());
// Rsultat attendu : Array ["ant", "bison", "camel", "duck", "elephant"]

Syntaxe

slice()
slice(start)
slice(start, end)

Paramtres

start Facultatif

L'indice (compt partir de zro) partir duquel commencer l'extraction, converti en entier.

• Un indice ngatif compte depuis la fin du tableau si -array.length <= start < 0, on utilise start + array.length.
• Si start < -array.length ou si start est omis, 0 est utilis.
• Si start >= array.length, un tableau vide est retourn.

end Facultatif

L'indice (compt partir de zro) jusqu'auquel extraire le fragment, converti en entier. slice() extrait jusqu', mais sans inclure, end.

• Un indice ngatif compte depuis la fin du tableau si -array.length <= end < 0, on utilise end + array.length.
• Si end < -array.length, 0 est utilis.
• Si end >= array.length ou si end est omis ou vaut undefined, array.length est utilis, ce qui entrane l'extraction de tous les lments jusqu' la fin.
• Si end implique une position antrieure ou gale celle que start implique, un tableau vide est retourn.

Valeur de retour

Un nouveau tableau contenant les lments extraits.

Description

La mthode slice() est une mthode de copie. Elle n'altre pas this mais retourne plutt une copie superficielle contenant certains des mmes lments que le tableau d'origine.

La mthode slice() prserve les emplacements vides. Si la portion dcoupe constitue un tableau creux (tableau creux), le tableau retourn est galement creux.

La mthode slice() est gnrique. Elle suppose uniquement que la valeur de this possde une proprit length et des proprits dont les cls sont des entiers.

Exemples

Retourner un fragment d'un tableau existant

var fruits = ["Banane", "Orange", "Citron", "Pomme", "Mangue"];
var agrumes = fruits.slice(1, 3);

// fruits vaut --> ["Banane", "Orange", "Citron", "Pomme", "Mangue"]
// agrumes vaut --> ["Orange", "Citron"]

Dans cet exemple, slice(1, 3) extrait les lments partir de l'indice 1 jusqu', mais sans inclure, l'indice 3, ce qui donne un nouveau tableau ['Orange', 'Citron'].

Omettre le paramtre end

const fruits = ["Pomme", "Banane", "Orange", "Mangue", "Ananas"];

const tropical = fruits.slice(2);
console.log(tropical); // ['Orange', 'Mangue', 'Ananas']

Dans cet exemple, slice(2) extrait les lments partir de l'indice 2 jusqu' la fin du tableau.

Utiliser des indices ngatifs

const fruits = ["Pomme", "Banane", "Orange", "Mangue", "Ananas"];

const lastTwo = fruits.slice(-2);
console.log(lastTwo); // ['Mangue', 'Ananas']

Dans cet exemple, slice(-2) extrait les deux derniers lments du tableau. Lorsqu'on utilise un indice ngatif avec la mthode slice, les indices ngatifs sont compts depuis la fin du tableau : -1 dsigne le dernier lment, -2 le prcdent, etc. L'indice ngatif -2 est inclus car il reprsente le point de dpart de l'extraction.

|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1

<--- lecture depuis la fin

Utiliser un indice de dpart positif et un indice de fin ngatif

const fruits = ["Pomme", "Banane", "Orange", "Mangue", "Ananas"];

// Utiliser un indice de dpart positif et un indice de fin ngatif
const sliceExample = fruits.slice(1, -1);
console.log(sliceExample); // ['Banane', 'Orange', 'Mangue']

Dans cet exemple, slice(1, -1) commence l'extraction l'indice 1 et s'arrte avant l'lment situ l'indice -1 (le dernier lment). Cela donne un nouveau tableau ['Banana', 'Orange', 'Mango']. La mthode slice exclut toujours l'lment situ l'indice final spcifi, qu'il soit positif ou ngatif.

lecture depuis le dbut --->

   0     1     2     3     4
|     |     |     |     |     |
|  S  |  L  |  I  |  C  |  E  |
|     |     |     |     |     |
  -5    -4    -3    -2    -1

<--- lecture depuis la fin

Utiliser slice() avec des tableaux d'objets

Dans l'exemple suivant, slice cre un nouveau tableau, newCar, partir de myCar. Les deux contiennent une rfrence l'objet myHonda. Lorsque la couleur de myHonda est change en "purple", les deux tableaux refltent cette modification.

// Avec slice, crer newCar depuis myCar
const myHonda = {
  color: "rouge",
  wheels: 4,
  engine: { cylinders: 4, size: 2.2 },
};
const myCar = [myHonda, 2, "excellente condition", "achete en 1997"];
const newCar = myCar.slice(0, 2);

console.log("myCar =", myCar);
console.log("newCar =", newCar);
console.log("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);

// Changer la couleur de myHonda.
myHonda.color = "bordeaux";
console.log("La nouvelle couleur de ma Honda est", myHonda.color);

console.log("myCar[0].color =", myCar[0].color);
console.log("newCar[0].color =", newCar[0].color);

Ce script affichera :

myCar = [
  { color: 'rouge', wheels: 4, engine: { cylinders: 4, size: 2.2 } },
  2,
  'excellente condition',
  'achete en 1997'
]
newCar = [ { color: 'rouge', wheels: 4, engine: { cylinders: 4, size: 2.2 } }, 2 ]
myCar[0].color = rouge
newCar[0].color = rouge
La nouvelle couleur de ma Honda est bordeaux
myCar[0].color = bordeaux
newCar[0].color = bordeaux

Appeler slice() sur des objets qui ne sont pas des tableaux

La mthode slice() lit la proprit length de this. Elle lit ensuite les proprits dont les cls sont des entiers de start end et les dfinit sur un nouveau tableau cr.

const objetSimilaireTableau = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
  3: 33, // ignor par slice() car length vaut 3
};
console.log(Array.prototype.slice.call(objetSimilaireTableau, 1, 3));
// [ 3, 4 ]

Utiliser slice() pour convertir des objets semblables des tableaux en tableaux

La mthode slice() est souvent utilise avec bind() et call() pour crer une mthode utilitaire qui convertit un objet semblable un tableau en un tableau.

// slice() est appel en passant `this` comme premier argument
const slice = Function.prototype.call.bind(Array.prototype.slice);

function list() {
  return slice(arguments);
}

const listResult = list(1, 2, 3); // [1, 2, 3]

Utiliser slice() sur des tableaux creux

Le tableau retourn par slice() peut tre creux si le tableau source est creux.

console.log([1, 2, , 4, 5].slice(1, 4)); // [2, vide, 4]

Spcifications

Compatibilit des navigateurs

Voir aussi

• Guide des collections indexes
• L'objet global Array
• La mthode Array.prototype.pop()
• La mthode Array.prototype.shift()
• La mthode Array.prototype.concat()
• La mthode Array.prototype.splice()
• La mthode TypedArray.prototype.slice()
• La mthode String.prototype.slice()
• Prothse d'mulation de Array.prototype.slice dans core-js (angl.)
• Prothse d'mulation es-shims de Array.prototype.slice (angl.)