Vraag Hoe verwijder ik een bepaald element uit een array in JavaScript?


Ik heb een array van gehele getallen en ik gebruik de .push() methode om elementen aan toe te voegen.

Is er een eenvoudige manier om een ​​specifiek element uit een array te verwijderen? Het equivalent van zoiets array.remove(int);.

Ik moet gebruiken kern JavaScript - Nee kaders zijn toegestaan.


6102
2018-04-23 22:17


oorsprong


antwoorden:


Vind de index van het array-element dat u wilt verwijderen en verwijder die index met splice.

De methode splice () verandert de inhoud van een array door deze te verwijderen   bestaande elementen en / of nieuwe elementen toevoegen.

var array = [2, 5, 9];
var index = array.indexOf(5);
if (index > -1) {
  array.splice(index, 1);
}
// array = [2, 9]

De tweede parameter van splice is het aantal elementen dat moet worden verwijderd. Let daar op splice wijzigt de array op zijn plaats en retourneert een nieuwe array met de elementen die zijn verwijderd.


Notitie: browserondersteuning voor indexOf is gelimiteerd


8887
2018-04-23 22:23



Ik weet niet hoe je verwacht array.remove(int) zich gedragen. Er zijn drie mogelijkheden die ik kan bedenken die je misschien wilt.

Een element van een array verwijderen uit een index i:

array.splice(i, 1);

Als u elk element met waarde wilt verwijderen number uit de array:

for(var i = array.length - 1; i >= 0; i--) {
    if(array[i] === number) {
       array.splice(i, 1);
    }
}

Als u alleen het element op index wilt maken i bestaat niet meer, maar u wilt niet dat de indexen van de andere elementen veranderen:

delete array[i];

892
2018-04-23 22:20



Bewerkt op 2016 oktober

  • Doe het eenvoudig, intuïtief en expliciet (https://en.wikipedia.org/wiki/Occam%27s_razor)
  • Doe het onveranderlijk (oorspronkelijke array blijft ongewijzigd)
  • Doe het met standaard JS-functies, als uw browser ze niet ondersteunt - gebruik polyfill

In dit codevoorbeeld dat ik gebruik "Array.filter (...)" functie om ongewenste items uit de array te verwijderen, deze functie verandert de oorspronkelijke array niet en maakt een nieuwe array. Als uw browser deze functie niet ondersteunt (bijvoorbeeld IE voor versie 9 of Firefox voor versie 1.5), overweeg dan om deze te gebruiken de filterpolyfill van Mozilla.

Verwijderen van item (ECMA-262 Edition 5 code aka oldstyle JS)

var value = 3

var arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(function(item) { 
    return item !== value
})

console.log(arr)
// [ 1, 2, 4, 5 ]

Artikel verwijderen (ES2015-code)

let value = 3

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => item !== value)

console.log(arr)
// [ 1, 2, 4, 5 ]

BELANGRIJK ES2015 "() => {}" syntaxis van de pijlfunctie wordt in IE helemaal niet ondersteund, Chrome voor versie 45, Firefox voor versie 22, versie voor versie 10 van Safari. De ES2015-syntaxis gebruiken in oude browsers die u kunt gebruiken BabelJS


Meerdere items verwijderen (ES2016-code)

Een bijkomend voordeel van deze methode is dat u meerdere items kunt verwijderen

let forDeletion = [2, 3, 5]

let arr = [1, 2, 3, 4, 5, 3]

arr = arr.filter(item => !forDeletion.includes(item))
// !!! Read below about array.includes(...) support !!!

console.log(arr)
// [ 1, 4 ]

BELANGRIJK "array.includes (...)" functie wordt helemaal niet ondersteund in IE, Chrome voor versie 47, Firefox voor versie 43, versie Safari voor versie 9 en versie voor versie Edge voor hier is polyfill van Mozilla

Meerdere items verwijderen (geavanceerd experimenteel JavaScript ES2018?)

// array-lib.js

export function remove(...forDeletion) {
    return this.filter(item => !forDeletion.includes(item))
}

// main.js

import { remove } from './array-lib.js'

let arr = [1, 2, 3, 4, 5, 3]

// :: This-Binding Syntax Proposal
// using "remove" function as "virtual method"
// without extending Array.prototype
arr = arr::remove(2, 3, 5)

console.log(arr)
// [ 1, 4 ]

Probeer het zelf in BabelJS :)

Referentie


669
2017-12-19 19:54



Afhankelijk van of je een lege plek wilt behouden of niet.

Als je toch een lege slot wilt, verwijder dan is prima:

delete array[ index ];

Als u dat niet doet, moet u de verbinding methode:

array.splice( index, 1 );

En als u de waarde van dat artikel nodig hebt, kunt u het element van de geretourneerde array gewoon opslaan:

var value = array.splice( index, 1 )[0];

Als u het in een bepaalde volgorde wilt doen, kunt u gebruiken array.pop() voor de laatste of array.shift() voor de eerste (en beide keren ook de waarde van het item terug).

En als u de index van het artikel niet kent, kunt u gebruiken array.indexOf( item ) om het te krijgen (in a if() om een ​​item te krijgen of in een while() om ze allemaal te krijgen). array.indexOf( item ) retourneert de index of -1 als deze niet wordt gevonden.


357
2018-04-23 22:32



Er was een vriend in de problemen Internet Explorer 8, en liet me zien wat hij deed. Ik zei hem dat het verkeerd was, en hij vertelde me dat hij het antwoord hier had. Het huidige topantwoord werkt niet in alle browsers (bijvoorbeeld Internet Explorer 8) en het verwijdert alleen de eerste instantie van het item.

Verwijder alle instanties uit een array

function remove(arr, item) {
    for (var i = arr.length; i--;) {
        if (arr[i] === item) {
            arr.splice(i, 1);
        }
    }
}

Het loopt achterwaarts door de array (aangezien indices en lengte veranderen als items worden verwijderd) en het item wordt verwijderd als het wordt gevonden. Het werkt in alle browsers.


227
2017-08-10 19:21



Er zijn twee belangrijke benaderingen:

  1. splice (): anArray.splice(index, 1);

  2. verwijderen: delete anArray[index];

Wees voorzichtig wanneer u delete voor een array gebruikt. Het is goed voor het verwijderen van attributen van objecten, maar niet zo goed voor arrays. Het is beter om te gebruiken splice voor arrays.

Houd er rekening mee dat wanneer u gebruikt delete voor een array zou je verkeerde resultaten kunnen krijgen anArray.length. Met andere woorden, delete zou het element verwijderen maar zou de waarde van de lengte-eigenschap niet updaten.

Je kunt ook verwachten gaten in indexnummers te hebben na het gebruik van verwijderen, bijvoorbeeld je zou kunnen eindigen met indexen 1,3,4,8,9,11 en lengte zoals die was voordat je delete gebruikte. In dat geval allemaal geïndexeerd for loops zouden crashen, omdat indexen niet langer sequentieel zijn.

Als je gedwongen bent om te gebruiken delete om wat voor reden dan ook, zou je moeten gebruiken for each Loops wanneer u door arrays moet lopen. Vermijd in feite altijd geïndexeerde for-loops, indien mogelijk. Op die manier zou de code robuuster zijn en minder gevoelig voor problemen met indexen.


131
2017-12-21 11:32



Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}
//Call like
[1, 2, 3, 4].remByVal(3);

Array.prototype.remByVal = function(val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] === val) {
            this.splice(i, 1);
            i--;
        }
    }
    return this;
}

var rooms = ['hello', 'something']

rooms = rooms.remByVal('hello')

console.log(rooms)


103
2018-04-23 22:20



Het is niet nodig om te gebruiken indexOf of splice. Het presteert echter beter als u slechts één exemplaar van een element wilt verwijderen.

Zoeken en verplaatsen (verplaatsen):

function move(arr, val) {
  var j = 0;
  for (var i = 0, l = arr.length; i < l; i++) {
    if (arr[i] !== val) {
      arr[j++] = arr[i];
    }
  }
  arr.length = j;
}

Gebruik indexOf en splice (index van):

function indexof(arr, val) {
  var i;
  while ((i = arr.indexOf(val)) != -1) {
    arr.splice(i, 1);
  }
}

Gebruik alleen splice (Splice):

function splice(arr, val) {
  for (var i = arr.length; i--;) {
    if (arr[i] === val) {
      arr.splice(i, 1);
    }
  }
}

Looptijden op nodejs voor array met 1000 elementen (gemiddeld over 10000 runs):

index van is ongeveer 10x langzamer dan verhuizing. Zelfs als dit is verbeterd door de oproep te verwijderen indexOf in verbinding het presteert veel slechter dan verhuizing.

Remove all occurrences:
    move 0.0048 ms
    indexof 0.0463 ms
    splice 0.0359 ms

Remove first occurrence:
    move_one 0.0041 ms
    indexof_one 0.0021 ms

82
2017-09-19 01:53



Te oud om te antwoorden, maar misschien helpt het iemand door een predikaat op te geven in plaats van een waarde.

NOTITIE: het zal de gegeven array bijwerken en de betreffende rijen retourneren

Gebruik

var removed = helper.removeOne(arr, row => row.id === 5 );

var removed = helper.remove(arr, row => row.name.startsWith('BMW'));

Definitie

var helper = {

    // Remove and return the first occurrence     

    removeOne: function(array, predicate) {
        for (var i = 0; i < array.length; i++) {
            if (predicate(array[i])) {
                return array.splice(i, 1);
            }
        }
    },

    // Remove and return all occurrences  

    remove: function(array, predicate) {
        var removed = [];

        for (var i = 0; i < array.length;) {

            if (predicate(array[i])) {
                removed.push(array.splice(i, 1));
                continue;
            }

            i++;                
        }

        return removed;
    }
};

56
2018-05-02 12:00



John Resig heeft een goede implementatie gepost:

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

Als u een globaal object niet wilt uitbreiden, kunt u in plaats daarvan het volgende doen:

// Array Remove - By John Resig (MIT Licensed)
Array.remove = function(array, from, to) {
    var rest = array.slice((to || from) + 1 || array.length);
    array.length = from < 0 ? array.length + from : from;
    return array.push.apply(array, rest);
};

Maar de belangrijkste reden hiervoor is om gebruikers te waarschuwen voor de alternatieve implementatie die wordt voorgesteld in de opmerkingen op die pagina (14 december 2007):

Array.prototype.remove = function(from, to){
  this.splice(from, (to=[0,from||1,++to-from][arguments.length])<0?this.length+to:to);
  return this.length;
};

Het lijkt in eerste instantie goed te werken, maar door een pijnlijk proces ontdekte ik dat het faalt bij het verwijderen van het voorlaatste element in een array. Als u bijvoorbeeld een matrix met 10 elementen hebt en u probeert het 9de element hiermee te verwijderen:

myArray.remove(8);

Je krijgt een array met 8 elementen. Ik weet niet waarom, maar ik heb bevestigd dat de oorspronkelijke implementatie van John dit probleem niet heeft.


53
2017-08-30 19:07