Comment supprimer un élément d'un tableau en JavaScript?


340
var arr = [1,2,3,5,6];

Supprimer le premier élément

Je veux supprimer le premier élément du tableau pour qu'il devienne:

var arr = [2,3,5,6];

Supprimer le deuxième élément

Pour étendre cette question, que se passe-t-il si je veux supprimer le deuxième élément du tableau pour qu'il devienne:

var arr = [1,3,5,6];

1
slice(start, end)pas 'how_many_to_remove'
seanjacob

2
@Ped arr.unshift () ne supprime pas, mais "ajoute un ou plusieurs éléments au début d'un tableau"
psycho brm

@seanjacob ce n'est splicepas sliceje suppose.
Animesh Singh

Réponses:


346

Pour une solution plus flexible, utilisez la splice()fonction. Il vous permet de supprimer n'importe quel élément d'un tableau en fonction de la valeur d'index:

var indexToRemove = 0;
var numberToRemove = 1;

arr.splice(indexToRemove, numberToRemove);

12
Et la question suivante: arr.splice(1,1)pour le deuxième élément.
slebetman

1
Je préfère splice()plutôt shift()parce que c'est plus flexible. Je peux vouloir faire quelque chose de différent à l'avenir, et je ne veux pas toujours supprimer un seul élément, ou même le premier élément.
Gabriel McAdams

14
Si vous venez ici de Google: Gabriel préfère cette réponse, mais sachez qu'il y a aussi shift (), voir la réponse de Joseph.
SHernandez

668

shift()est idéal pour votre situation. shift()supprime le premier élément d'un tableau et renvoie cet élément. Cette méthode modifie la longueur du tableau.

array = [1, 2, 3, 4, 5];

array.shift(); // 1

array // [2, 3, 4, 5]

Cela fonctionne, mais ne supprimera que le premier élément du tableau.
Gabriel McAdams

53
@Gabriel: n'était-ce pas exactement la question? Je préfère shift()à splice(..., ...)car il est beaucoup plus explicite, directe.
Bruno Reis

6
Correction: il retourne le premier élément, pas un nouveau tableau moins le premier élément, selon le lien que vous avez fourni :)
DanH

Bien que l'exemple de code soit correct, la description est trompeuse: (a) comme le souligne @DanH, c'est le premier élément qui est renvoyé , et (b) le fait que le tableau d'entrée est modifié n'est pas précisé. Par conséquent, la réponse de Ped est supérieure.
mklement0

2
shiftest plus rapide, sauf si vous épissez de grandes listes jsperf.com/splice-vs-shift3 et jsperf.com/splice-vs-shift2
kcathode

61

La Array.prototype.shiftméthode supprime le premier élément d'un tableau et le renvoie. Il modifie le tableau d'origine.

var a = [1,2,3]
// [1,2,3]
a.shift()
// 1
a
//[2,3]

4
Une grande amélioration par rapport à la réponse de Joseph Silvashy - aucune incohérence entre la description et le code.
mklement0

48
arr.slice(begin[,end])

est non destructif, l'épissure et le décalage modifieront votre tableau d'origine


3
Oui pour ne pas muter. Cela devrait être plus visible.
utilisateur

16

A écrit un petit article sur l'insertion et la suppression d'éléments à des positions arbitraires dans les tableaux Javascript.

Voici le petit extrait pour supprimer un élément de n'importe quelle position. Cela étend la classe Array en Javascript et ajoute la méthode remove (index).

// Remove element at the given index
Array.prototype.remove = function(index) {
    this.splice(index, 1);
}

Donc, pour supprimer le premier élément de votre exemple, appelez arr.remove ():

var arr = [1,2,3,5,6];
arr.remove(0);

Pour supprimer le deuxième élément,

arr.remove(1);

Voici un petit article avec des méthodes d'insertion et de suppression pour la classe Array.

Essentiellement, cela n'est pas différent des autres réponses utilisant l'épissage, mais le nom splicen'est pas intuitif, et si vous avez cet appel dans toute votre application, cela rend le code plus difficile à lire.



7

Réponses Autres sont grands, je voulais juste ajouter une solution de rechange avec ES6fonction Array: filter.

filter() crée un nouveau tableau avec des éléments qui relèvent d'un critère donné à partir d'un tableau existant.

Vous pouvez donc facilement l'utiliser pour supprimer les éléments qui ne répondent pas aux critères. Les avantages de cette fonction sont que vous pouvez l'utiliser sur un tableau complexe et pas seulement sur des chaînes et des nombres.

Quelques exemples :

Supprimer le premier élément :

// Not very useful but it works
function removeFirst(element, index) {
  return index > 0;
}
var arr = [1,2,3,5,6].filter(removeFirst); // [2,3,4,5,6]

Supprimer le deuxième élément :

function removeSecond(element, index) {
  return index != 1;
}
var arr = [1,2,3,5,6].filter(removeSecond); // [1,3,4,5,6]

Supprimer l'élément impair :

function removeOdd(element, index) {
  return !(element % 2);
}
var arr = [1,2,3,5,6].filter(removeOdd); [2,4,6]

Supprimer les articles qui ne sont pas en stock

const inventory = [
  {name: 'Apple', qty: 2},
  {name: 'Banana', qty: 0},
  {name: 'Orange', qty: 5}
];

const res = inventory.find( product => product.qty > 0);


2

Vous pouvez utiliser la fonction ES6 Destructuring Assignment avec un opérateur de repos. Une virgule indique où vous souhaitez supprimer l'élément et l'opérateur reste (... arr) pour vous donner les éléments restants du tableau.

const source = [1,2,3,5,6];

function removeFirst(list) {
   var  [, ...arr] = list;
   return arr;
}
const arr = removeFirst(source);
console.log(arr); // [2, 3, 5, 6]
console.log(source); // [1, 2, 3, 5, 6]


1

Array.splice()a la propriété intéressante que l'on ne peut pas l'utiliser pour supprimer le premier élément. Nous devons donc recourir à

function removeAnElement( array, index ) {
    index--;

    if ( index === -1 ) {
        return array.shift();
    } else {
        return array.splice( index, 1 );
    }
}

3
Array.splice (0,1) supprime le premier élément. Selon toutes les autres réponses ici, et selon developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… . Aussi, pourquoi quelqu'un passerait -1 pour supprimer le premier élément? Ne passeraient-ils pas 0?
pierre

@skypecakes Je ne peux pas parler de la validité de l'épissure sur le 0ème index, mais ici l'index est décrémenté avant ce contrôle, il aurait donc été 0 lors de la transmission.
Jake T.

Oui, il peut définitivement supprimer le premier élément. Je l'ai testé ici: jsfiddle.net/sijpkes/d87rcLob/2
sijpkes

1

Solution dactylographiée qui ne mute pas le tableau d'origine

function removeElementAtIndex<T>(input: T[], index: number) {
  return input.slice(0, index).concat(input.slice(index + 1));
}

1

Il existe plusieurs façons de supprimer un élément d'un tableau. Permettez-moi de souligner les options les plus utilisées ci-dessous. J'écris cette réponse parce que je n'ai pas pu trouver une raison valable quant à quoi utiliser de toutes ces options. La réponse à la question est l'option 3 ( Splice () ).

1) SHIFT () - Supprimer le premier élément du tableau d'origine et renvoyer le premier élément

Voir la référence pour Array.prototype.shift () . Utilisez-le uniquement si vous souhaitez supprimer le premier élément et uniquement si vous êtes d'accord avec la modification du tableau d'origine.

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]

console.log(firstElement);
// expected output: 1

2) SLICE () - Renvoie une copie du tableau, séparée par un index de début et un index de fin

Voir la référence pour Array.prototype.slice () . Vous ne pouvez pas supprimer un élément spécifique de cette option. Vous pouvez uniquement prendre une tranche du tableau existant et obtenir une partie continue du tableau. C'est comme couper le tableau à partir des index que vous spécifiez. La baie d'origine n'est pas affectée.

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

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

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

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

3) SPLICE () - Modifier le contenu d'un tableau en supprimant ou en remplaçant des éléments à des index spécifiques.

Voir la référence pour Array.prototype.splice () . La méthode splice () modifie le contenu d'un tableau en supprimant ou en remplaçant des éléments existants et / ou en ajoutant de nouveaux éléments en place. Renvoie le tableau mis à jour. Le tableau d'origine est mis à jour.

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

0

Vous pouvez également le faire avec réduire:

let arr = [1, 2, 3]

arr.reduce((xs, x, index) => {
        if (index == 0) {
            return xs
        } else {
            return xs.concat(x)
        }
    }, Array())

// Or if you like a oneliner
arr.reduce((xs, x, index) => index == 0 ? xs : xs.concat(x), Array())
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.