79 Pytanie: Jak usunąć określony element z tablicy w JavaScript?

pytanie utworzone w Thu, Feb 14, 2019 12:00 AM

Mam tablicę liczb i używam metody .push(), aby dodać do niej elementy.

Czy istnieje prosty sposób na usunięcie określonego elementu z tablicy? Odpowiednik czegoś takiego jak array.remove(number);.

Muszę użyć core JavaScript - dozwolone są no .

    
7214
  1. Jeśli potrzebujesz obsługi < IE9 ( westchnienie ), sprawdź to pytanie SO dotyczące indexOf w IE.
    2013-09-13 07: 48: 49Z
  2. (lodash) array = ['a', 'b', 'c']; _.pull (tablica, „a”) //tablica = > ['pne']; Zobacz także stackoverflow.com/questions/5767325/…
    2015-08-25 20: 28: 43Z
  3. metoda filtrowania może robić to, co chcesz.
    2015-09-05 23: 43: 21Z
  4. Możesz użyć polecenia delete, ale nie zmieni on indeksu, ale ustawi ten slot na „undefined × 1”. Na przykład: var list = [1,2,3,4,5,6] - > usuń listę [1] - > [1, niezdefiniowany × 1, 3, 4, 5, 6].
    2016-05-24 23: 26: 45Z
  5. Oto benchmark wydajności dwóch głównych możliwości: jsben .ch /# /b4Ume
    2017-03-03 16: 46: 45Z
30 odpowiedzi                              30                         

Znajdź index elementu tablicy, który chcesz usunąć, a następnie usuń ten indeks za pomocą splice .

  

Metoda splice () zmienia zawartość tablicy, usuwając   istniejące elementy i /lub dodawanie nowych elementów.

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

Drugi parametr splice to liczba elementów do usunięcia. Zauważ, że splice modyfikuje tablicę w miejscu i zwraca nową tablicę zawierającą elementy, które zostały usunięte.

    
10357
2019-02-17 00: 02: 23Z
  1. @ Peter, tak, możesz mieć rację. Ten artykuł wyjaśnia więcej i ma obejście dla niekompatybilnych przeglądarek: developer.mozilla. org /pl /JavaScript /Reference /Global_Objects /…
    2011-04-23 22: 28: 10Z
  2. Niebezpieczne! Jeśli pracujesz z wartościami dynamicznymi (dodaj i usuń dynamiczne wartości z tablicy), a wartość nie istnieje w tablicy (indeks staje się -1), powyższy kod usunie ostatni element tablicy.
    2013-09-06 16: 44: 17Z
  3. @ AlexandreWiechersVaz Oczywiście zachowuje porządek, jeśli nie, to byłoby absolutnie bezwartościowe
    2013-12-11 19: 18: 02Z
  4. Możesz przezwyciężyć problem z obsługą przeglądarki IE, włączając kod podane tutaj
2014-06-08 10: 42: 27Z
  • @ AdrianP. array.indexOf(testValue) na pustej tablicy będzie wynosić -1, a jeśli testujesz to, to nie ma żadnego połączenia. Może odpowiedź zmieniła się od.
    2015-01-19 15: 47: 21Z
  • Nie wiem, jak się zachowujesz array.remove(int). Są trzy możliwości, o których myślę, że możesz chcieć.

    Aby usunąć element tablicy o indeksie i:

    array.splice(i, 1);
    

    Jeśli chcesz usunąć każdy element o wartości number z tablicy:

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

    Jeśli chcesz, aby element o indeksie i już nie istniał, ale nie chcesz, aby indeksy innych elementów uległy zmianie:

    delete array[i];
    
        
    1077
    2018-12-18 17: 42: 12Z
    1. delete nie jest właściwym sposobem usunięcia elementu z tablicy!
      2013-01-27 15: 30: 48Z
    2. @ FelixKling To zależy, to działa, jeśli chcesz, aby array.hasOwnProperty(i) zwracało false i zwracało element w tej pozycji undefined. Ale przyznam, że to nie jest to zbyt częsta rzecz do zrobienia.
      2013-01-27 15: 36: 52Z
    3. delete nie zaktualizuje długości tablicy ani nie wymaże elementu, tylko zastąpi go specjalną wartością undefined.
      2013-02-17 03: 44: 59Z
    4. @ diosney Nie wiem, co masz na myśli, mówiąc, że tak naprawdę nie usuwa elementu. Co więcej, robi to nie tylko zastępując wartość tego indeksu za pomocą undefined: usuwa zarówno indeks, jak i wartość z tablicy, tj. Po delete array[0], "0" in array zwróci wartość false.
      2013-04-15 19: 13: 42Z
    5. delete jest dobrym mechanizmem, jeśli masz do czynienia z nazwanymi właściwościami var array=[];array['red']=1;array['green']=2;array['blue']=3;delete array['green'];
      2014-10-21 23: 00: 59Z

    Edytowano w październiku 2016 r.

    • Zrób to prosto, intuicyjnie i wyraźnie ( https://en.wikipedia.org/wiki/Occam% 27s_razor )
    • Zrób to niezmiennie (oryginalna tablica pozostaje niezmieniona)
    • Zrób to za pomocą standardowych funkcji JS, jeśli Twoja przeglądarka ich nie obsługuje - użyj polyfill

    W tym przykładzie kodu używam funkcji "array.filter (...)" do usuwania niechcianych elementów z tablicy, ta funkcja nie zmienia oryginalnej tablicy i tworzy nową. Jeśli Twoja przeglądarka nie obsługuje tej funkcji (np. IE przed wersją 9 lub Firefox przed wersją 1.5), rozważ użycie wypełniacz filtru z Mozilli .

    Usuwanie elementu (kod ECMA-262 Edition 5 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 ]
    

    Usuwanie elementu (kod ES2015)

    let value = 3
    
    let arr = [1, 2, 3, 4, 5, 3]
    
    arr = arr.filter(item => item !== value)
    
    console.log(arr)
    // [ 1, 2, 4, 5 ]
    

    WAŻNE ES2015 "() = > {}" składnia funkcji strzałek nie jest obsługiwana w IE w ogóle, Chrome przed wersją 45, Firefox przed 22 wersją, Safari przed wersją 10. Aby użyć składni ES2015 wstare przeglądarki możesz użyć BabelJS


    Usuwanie wielu elementów (kod ES2016)

    Dodatkową zaletą tej metody jest możliwość usunięcia wielu elementów

    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 ]
    

    WAŻNE funkcja „array.includes (...)” w ogóle nie jest obsługiwana w przeglądarce IE, Chrome przed wersją 47, Firefox przed wersją 43, Safari przed wersją 9 i Edge przed wersją 14, więc tutaj jest polyfill od Mozilli

    Usuwanie wielu elementów (w przyszłości może)

    Jeśli propozycja „This-Binding Syntax” zostanie kiedykolwiek zaakceptowana, będziesz być w stanie to zrobić:

    // 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 ]
    

    Wypróbuj samemu w BabelJS :)

    Odniesienie

    906
    2019-06-23 08: 16: 58Z
    1. ale czasami chcemy usunąć element z oryginalnej tablicy (niezmienny), na przykład tablicę używaną w dyrektywie Angular 2 * ngFor
      2017-02-08 14: 06: 04Z
    2. Lepsze niż zaakceptowane rozwiązanie, ponieważ nie zakłada, że ​​preferowane jest tylko jedno wystąpienie dopasowania i niezmienności
      2017-03-06 16: 46: 21Z
    3. filter musi być znacznie wolniejszy dla dużej tablicy?
      2017-07-17 01: 02: 59Z
    4. Jaki jest punkt niezmienności, jeśli użyłeś przypisania tej samej zmiennej w swoich przykładach? :)
      2017-08-19 11: 36: 51Z
    5. To świetna odpowiedź. Splice to wyspecjalizowana funkcja do mutowania, a nie filtrowania. filter może mieć mniejszą wydajność, ale jest bezpieczniejszy i lepszy kod. Można także filtrować według indeksu, podając drugi argument w lambda: arr.filter((x,i)=>i!==2)
      2018-08-15 12: 50: 44Z

    Zależy od tego, czy chcesz zachować puste miejsce, czy nie.

    Jeśli chcesz pustego gniazda, usuń jest w porządku:

    delete array[ index ];
    

    Jeśli nie, powinieneś użyć metody splice :

    array.splice( index, 1 );
    

    A jeśli potrzebujesz wartości tego elementu, możesz po prostu zapisać zwrócony element tablicy:

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

    Jeśli chcesz to zrobić w jakiejś kolejności, możesz użyć array.pop() dla ostatniego lub array.shift() dla pierwszego (i oba również zwracają wartość przedmiotu).

    A jeśli nie znasz indeksu przedmiotu, możesz użyć array.indexOf( item ), aby go uzyskać (pod numerem if(), aby uzyskać jeden przedmiot lub while(), aby uzyskać wszystkie) array.indexOf( item ) zwraca indeks lub -1, jeśli nieuznany.

        
    401
    2014-07-10 22: 43: 25Z
    1. Warto zauważyć, że var value nie przechowuje usuniętej wartości, ale tablicę zawierającą usuniętą wartość.
      2013-07-10 09: 55: 45Z
    2. delete nie jest właściwym sposobem usunięcia elementu z tablicy !!
      2014-07-04 14: 20: 43Z
    3. Jeśli chcesz „opróżnić gniazdo”, użyj array[index] = undefined;. Użycie delete zniszczy optymalizację.
      2014-08-11 16: 40: 29Z
    4. @ Jakub bardzo dobry komentarz, ponieważ aby zrozumieć, że straciłem dużo czasu i pomyślałem, że mój kod aplikacji jest jakoś uszkodzony ...
      2014-12-14 19: 14: 58Z
    5. Ostatni akapit z wyjaśnieniem tego, co otrzymałeś od indexOf był naprawdę pomocny
      2019-02-05 16: 31: 34Z

    Przyjaciel miał problemy w Internet Explorer 8 i pokazał mi, co zrobił. Powiedziałem mu, że to źle, a on powiedział mi, że ma tutaj odpowiedź. Aktualna najlepsza odpowiedź nie będzie działać we wszystkich przeglądarkach (na przykład Internet Explorer 8) i usunie tylko pierwsze wystąpienie elementu.

    Usuń WSZYSTKIE instancje z tablicy

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

    Pętla przechodzi przez tablicę wstecz (ponieważ indeksy i długość zmieniają się wraz z usuwaniem elementów) i usuwa element, jeśli zostanie znaleziony. Działa we wszystkich przeglądarkach.

        
    255
    2018-06-08 08: 26: 59Z
    1. @ sroes nie powinno być, ponieważ pętla zaczyna się od i = arr.length -1 lub i--, co czyni ją tym samym co indeks maksymalny. arr.length jest tylko wartością początkową dla i. i-- zawsze będzie prawdą (i redukcją o 1 przy każdej operacji pętli), aż będzie równa 0 (wartość fałszowania), a pętla się zatrzyma.
      2014-01-29 20: 06: 34Z
    2. Druga funkcja jest raczej nieefektywna. Na każdej iteracji „indexOf” rozpocznie wyszukiwanie od początku tablicy.
      2015-02-25 13: 32: 12Z
    3. @ AmberdeBlack, w kolekcji z więcej niż 1 wystąpieniem elementu , o wiele lepiej jest wywołać filtr metoda zamiast arr.filter(function (el) { return el !== item }), unikając konieczności wielokrotnego mutowania tablicy. Zużywa to nieco więcej pamięci, ale działa znacznie wydajniej, ponieważ trzeba wykonać mniej pracy.
      2015-03-30 09: 37: 04Z
    4. @ AlJey, jest dostępny tylko z IE9 +. Nadal jest szansa, że ​​to nie zadziała.
      2015-03-30 16: 23: 56Z
    5. Ta odpowiedź zadziałała dla mnie, ponieważ potrzebowałem kilku elementów usuniętych, ale nie w określonej kolejności. Progresja wsteczna pętli for obsługuje tutaj usuwanie elementów z tablicy.
      2015-07-14 23: 39: 58Z

    Istnieją dwa główne podejścia:

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

    2. usuń : delete anArray[index];

    Bądź ostrożny, gdy używasz delete dla tablicy. Jest to dobre do usuwania atrybutów obiektów, ale nie tak dobre dla tablic. Lepiej jest użyć splice dla tablic.

    Pamiętaj, że jeśli użyjesz delete dla tablicy, możesz uzyskać błędne wyniki dla anArray.length. Innymi słowy, delete usunie element, ale nie zaktualizuje wartości właściwości length.

    Można również oczekiwać, że po użyciu polecenia delete będą występowały dziury w numerach indeksów, np. możesz mieć indeksy 1,3,4,8,9,11 i długość przed użyciem delete. W takim przypadku wszystkie indeksowane pętle for ulegną awarii, ponieważ indeksy nie są już sekwencyjne.

    Jeśli z jakiegoś powodu musisz używać delete, powinieneś użyć for each zapętla, gdy trzeba przechodzić przez tablice. W zasadzie zawsze unikaj używania indeksowanych pętli, jeśli to możliwe. W ten sposób kod będzie bardziej solidny i mniej podatny na problemy z indeksami.

        
    150
    2017-10-03 12: 04: 03Z
    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)
        
    125
    2017-09-25 04: 56: 18Z
    1. Nie jestem wielkim fanem tego podejścia. Jeśli skończysz wykorzystując różne biblioteki lub frameworki, mogą one ze sobą kolidować.
      2011-04-23 22: 30: 15Z
    2. To też zadziałało, zdecydowałem się jednak na funkcję indexOf. Dziękujemy za pomoc!
      2011-04-23 22: 35: 58Z
    3. 2012-07-09 22: 10: 08Z
    4. Jeśli robisz for in na tablicy, masz już problem.
      2014-05-14 13: 01: 58Z
    5. jeśli zrobisz for in na tablicach, masz już większe problemy.
      2018-08-01 06: 20: 21Z

    Nie ma potrzeby używania indexOf lub splice. Jednak działa lepiej, jeśli chcesz usunąć tylko jedno wystąpienie elementu.

    Znajdź i przenieś (przenieś):

    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;
    }
    

    Użyj indexOf i splice (indeks):

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

    Użyj tylko splice (połączenie):

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

    Czas pracy na nodejs dla tablicy z 1000 elementów (średnio ponad 10000 przebiegów):

    indexof jest około 10 razy wolniejszy niż przenieś . Nawet jeśli poprawi się, usuwając połączenie do indexOf w łączu , działa znacznie gorzej niż przenieś .

    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
    
        
    92
    2015-09-11 12: 47: 59Z
    1. Wygląda na to, że przedstawiona tutaj metoda „move” powinna działać we wszystkich przeglądarkach, a także unikać tworzenia dodatkowej tablicy; większość innych rozwiązań ma jeden lub oba z tych problemów. Myślę, że ten zasługuje na dużo więcej głosów, nawet jeśli nie wygląda to tak „ładnie”.
      2015-07-29 11: 50: 21Z

    Zbyt stary, aby odpowiedzieć, ale może komuś pomóc, dostarczając predykat zamiast wartości.

    UWAGA: zaktualizuje daną tablicę i zwróci zmienione wiersze

    Wykorzystanie

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

    Definicja

    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;
        }
    };
    
        
    62
    2016-12-26 10: 57: 02Z
    1. Nie wiem, czy potrzebujesz czeku -1 (i> -1). Ponadto uważam, że te funkcje działają bardziej jak filtr niż usuwają. Jeśli przekażesz row.id === 5, spowoduje to utworzenie tablicy o identyfikatorze 5, więc robi odwrotność do usuwania. Wyglądałoby to ładnie w ES2015: var result = ArrayHelper.remove (myArray, row = > row.id === 5);
      2015-09-20 19: 42: 45Z
    2. @ WhatWouldBeCool ta funkcja modyfikuje oryginalną tablicę i zwraca usunięty element zamiast kopiować wynik do nowej tablicy
      2015-09-21 07: 21: 13Z

    John Resig opublikował dobrą implementację :

    // 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);
    };
    

    Jeśli nie chcesz rozszerzać obiektu globalnego, możesz zamiast tego zrobić coś takiego:

    // 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);
    };
    

    Ale głównym powodem, dla którego to publikuję, jest ostrzeganie użytkowników przed alternatywną implementacją sugerowaną w komentarzach na tej stronie (14 grudnia 2007 r.):

    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;
    };
    

    Wydaje się, że na początku działa dobrze, ale dzięki bolesnemu procesowi odkryłem, że nie udaje mu się usunąć drugiego do ostatniego elementu w tablicy. Na przykład, jeśli masz 10-elementową tablicę i próbujesz usunąć dziewiąty element za pomocą:

    myArray.remove(8);
    

    Skończyło się na macierzy 8-elementowej. Nie wiem dlaczego, ale potwierdziłem, że oryginalna implementacja Johna nie ma tego problemu.

        
    58
    2015-02-16 12: 51: 30Z
    1. Właśnie dowiedziałem się, dlaczego warto używać Object.prototype.hasOwnProperty zawsze ¬¬
      2015-04-11 04: 58: 05Z

    Underscore.js może być używany do rozwiązywania problemów z wieloma przeglądarkami. Używa wbudowanych metod przeglądarki, jeśli są obecne. Jeśli są nieobecne, jak w przypadku starszych wersji Internet Explorera, używa własnych metod niestandardowych.

    Prosty przykład usuwania elementów z tablicy (ze strony internetowej):

    _.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]
    
        
    56
    2017-05-21 11: 29: 54Z

    Możesz to łatwo zrobić za pomocą filtru :

    function remove(arrOriginal, elementToRemove){
        return arrOriginal.filter(function(el){return el !== elementToRemove});
    }
    console.log( remove([1, 2, 1, 0, 3, 1, 4], 1) );
    

    Usuwa wszystkie elementy z tablicy, a także działa szybciej niż kombinacja plasterka i indexOf

        
    55
    2014-02-10 22: 06: 01Z
    1. Czy masz na to źródło szybsze?
      2017-07-28 18: 21: 57Z
    2. Ładne rozwiązanie. Ale jak zauważysz, ale ważne jest, aby bald, nie daje tego samego wyniku co slice i indexOf, ponieważ usunie wszystkie wystąpienia 1
      2017-07-28 18: 28: 36Z
    3. @ user3711421 to dlatego, że tylko wycinek i indexOf nie robi tego, co chce ", aby usunąć określony element". Usuwa element tylko raz, usuwa to określony element bez względu na to, ile ich masz
      2017-07-28 20: 05: 09Z

    Jeśli chcesz, aby nowa tablica z usuniętymi pozycjami została usunięta, zawsze możesz usunąć określony element i odfiltrować tablicę. Może być konieczne rozszerzenie obiektu tablicowego dla przeglądarek, które nie implementują metody filtrowania, ale w dłuższej perspektywie jest to łatwiejsze, ponieważ wszystko co robisz to:

    var my_array = [1,2,3,4,5,6];
    delete my_array[4];
    console.log(my_array.filter(function(a){return typeof a !== 'undefined';}));
    

    Powinien wyświetlić się [1, 2, 3, 4, 6]

        
    46
    2014-09-05 07: 59: 57Z

    Możesz użyć ES6.

    var array=['1','2','3','4','5','6']
    var index = array.filter((value)=>value!='3');
    

    Wyjście:

    ["1", "2", "4", "5", "6"]
    
        
    39
    2016-11-19 08: 59: 00Z
    1. Ta odpowiedź jest ładna, ponieważ tworzy kopię oryginalnej tablicy, zamiast bezpośrednio modyfikować oryginał.
      2017-03-16 15: 27: 40Z
    2. Uwaga: Array.prototype.filter to ECMAScript 5.1 (brak IE8). więcej konkretnych rozwiązań: stackoverflow.com/a/54390552/8958729
      2019-01-27 19: 45: 05Z

    Sprawdź ten kod. Działa w każdej głównej przeglądarce .

    remove_item = function (arr, value) {
        var b = '';
        for (b in arr) {
            if (arr[b] === value) {
                arr.splice(b, 1);
                break;
            }
        }
        return arr;
    }
    

    Wywołaj tę funkcję

    remove_item(array,value);
    
        
    36
    2014-05-24 07: 02: 53Z
    1. @ RolandIllig Z wyjątkiem użycia pętli for in i faktu, że skrypt mógł zatrzymać się wcześniej, zwracając wynik bezpośrednio z pętli. Komentarze są rozsądne;)
      2014-12-30 16: 13: 41Z
    2. To doskonałe podejście do małych tablic. Działa w każdej przeglądarce, używa minimalnego i intuicyjnego kodu oraz żadnych dodatkowych skomplikowanych ram, podkładek i wypełnień.
      2016-08-21 23: 12: 41Z
    3. Powinienem powtórzyć komentarz yckart, że for( i = 0; i < arr.length; i++ ) będzie lepszym podejściem, ponieważ zachowuje dokładne indeksy w stosunku do dowolnej kolejności, w jakiej przeglądarka zdecyduje się przechowywać przedmioty (z for in). W ten sposób możesz także uzyskać indeks wartości tablicy, jeśli jej potrzebujesz.
      2016-08-21 23: 20: 39Z

    Możesz użyć lodash _.pull (tablica mutacji), _. pullAt (zmutuj tablicę) lub _.without (nie mutuje tablicy),

    var array1 = ['a', 'b', 'c', 'd']
    _.pull(array1, 'c')
    console.log(array1) // ['a', 'b', 'd']
    
    var array2 = ['e', 'f', 'g', 'h']
    _.pullAt(array2, 0)
    console.log(array2) // ['f', 'g', 'h']
    
    var array3 = ['i', 'j', 'k', 'l']
    var newArray = _.without(array3, 'i') // ['j', 'k', 'l']
    console.log(array3) // ['i', 'j', 'k', 'l']
    
        
    34
    2015-08-25 21: 19: 16Z
    1. To nie jest podstawowy JS, jak wymagał OP, prawda?
      2015-09-24 21: 01: 50Z
    2. @ some-non-descript-user Masz rację. Ale wielu użytkowników takich jak ja przychodzi tutaj, szukając ogólnej odpowiedzi nie tylko dla OP.
      2015-10-01 03: 38: 30Z
    3. @ ChunYang Masz całkowitą rację. Już używam lodash, dlaczego nie po prostu go użyć, jeśli oszczędza czas.
      2018-06-08 21: 48: 30Z

    OK, na przykład masz tablicę poniżej:

    var num = [1, 2, 3, 4, 5];
    

    I chcemy usunąć numer 4, możesz po prostu wykonać poniższy kod:

    num.splice(num.indexOf(4), 1); //num will be [1, 2, 3, 5];
    

    Jeśli ponownie użyjesz tej funkcji, napiszesz funkcję wielokrotnego użytku, która zostanie dołączona do funkcji macierzy Native, jak poniżej:

    Array.prototype.remove = Array.prototype.remove || function(x) {
      const i = this.indexOf(x);
      if(i===-1) return;
      this.splice(i, 1); //num.remove(5) === [1, 2, 3];
    }
    

    Ale co powiesz na to, że zamiast tego masz tablicę poniżej z kilkoma [5] s w tablicy?

    var num = [5, 6, 5, 4, 5, 1, 5];
    

    Potrzebujemy pętli do sprawdzenia ich wszystkich, ale łatwiejszy i bardziej efektywny jest sposób korzystania z wbudowanych funkcji JavaScript, więc piszemy funkcję, która zamiast tego używa filtra, jak poniżej:

    const _removeValue = (arr, x) => arr.filter(n => n!==x);
    //_removeValue([1, 2, 3, 4, 5, 5, 6, 5], 5) //return [1, 2, 3, 4, 6]
    

    Istnieją również biblioteki stron trzecich, które pomagają ci to zrobić, np. Lodash lub Underscore, po więcej informacji zajrzyj do lodash _.pull, _.pullAt lub _.without.

        
    32
    2018-03-26 00: 23: 30Z
    1. Jest mała literówka. Proszę popraw. this.splice(num.indexOf(x), 1); = > this.splice(this.indexOf(x), 1);
      2017-05-11 12: 28: 30Z
    2. Nie rozszerzaj wbudowanych (dołącz funkcje do Array.prototype) w JavaScript. Jest to powszechnie uważane za złą praktykę.
      2017-05-24 03: 29: 54Z
    3. Zgadzam się, że nie jest to najlepsza rzecz na świecie, ale w tym przypadku, w jaki sposób możesz przekazać ją do funkcji?
      2017-05-25 08: 45: 07Z
    4. Powinieneś sprawdzić indeks. Jeśli index = -1, splice (-1,1) usuwają ostatni element
      2018-01-26 09: 38: 10Z

    Oto kilka sposobów na usunięcie elementu z tablicy za pomocą JavaScript .

    Cała metoda opisana nie powoduje mutacji oryginalnej tablicy i zamiast tego tworzy nową.

    Jeśli znasz indeks elementu

    Załóżmy, że masz tablicę i chcesz usunąć element na pozycji i.

    Jedną z metod jest użycie slice():

    const items = ['a', 'b', 'c', 'd', 'e', 'f']
    const i = 3
    const filteredItems = items.slice(0, i).concat(items.slice(i+1, items.length))
    
    console.log(filteredItems)

    slice() tworzy nową tablicę z indeksami, które otrzymuje. Po prostu tworzymy nową tablicę, od początku do indeksu, który chcemy usunąć, i łączymy inną tablicę z pierwszej pozycji następującej po tej, którą usunęliśmy na końcu tablicy.

    Jeśli znasz wartość

    W tym przypadku dobrą opcją jest użycie filter(), która oferuje bardziej deklaratywne podejście:

    const items = ['a', 'b', 'c', 'd', 'e', 'f']
    const valueToRemove = 'c'
    const filteredItems = items.filter(item => item !== valueToRemove)
    
    console.log(filteredItems)

    Wykorzystuje funkcje strzałek ES6. Możesz użyć tradycyjnych funkcji do obsługi starszych przeglądarek:

    const items = ['a', 'b', 'c', 'd', 'e', 'f']
    const valueToRemove = 'c'
    const filteredItems = items.filter(function(item) {
      return item !== valueToRemove
    })
    
    console.log(filteredItems)

    lub możesz użyć Babel i przetransponować kod ES6 z powrotem do ES5, aby uczynić go bardziej strawnym dla starych przeglądarek, a jednocześnie pisać nowoczesne JavaScript w kodzie.

    Usuwanie wielu elementów

    Co jeśli zamiast pojedynczego przedmiotu chcesz usunąć wiele przedmiotów?

    Znajdźmy najprostsze rozwiązanie.

    Według indeksu

    Możesz po prostu utworzyć funkcję i usunąć elementy w serii:

    const items = ['a', 'b', 'c', 'd', 'e', 'f']
    
    const removeItem = (items, i) =>
      items.slice(0, i-1).concat(items.slice(i, items.length))
    
    let filteredItems = removeItem(items, 3)
    filteredItems = removeItem(filteredItems, 5)
    //["a", "b", "c", "d"]
    
    console.log(filteredItems)

    Według wartości

    Możesz szukać włączenia do funkcji wywołania zwrotnego:

    const items = ['a', 'b', 'c', 'd', 'e', 'f']
    const valuesToRemove = ['c', 'd']
    const filteredItems = items.filter(item => !valuesToRemove.includes(item))
    // ["a", "b", "e", "f"]
    
    console.log(filteredItems)

    Unikaj mutowania oryginalnej tablicy

    splice() (nie mylić z slice()) mutuje oryginalną tablicę i należy go unikać.

    (pierwotnie opublikowane w https://flaviocopes.com/how-to -remove-item-from-array /)

        
    29
    2019-04-14 16: 39: 51Z
    1. Myślę, że w twoim przykładzie chcesz items.slice(0, i).concat(items.slice(i+1, items.length)), (0, i) zamiast (0, i-1), ponieważ element 'end' tablicy nie jest zawarty w wynik. Ponadto, i + 1 jest OK dla drugiej części, ponieważ zwraca pustą tablicę, jeśli wychodzi poza granice.
      2019-03-17 17: 02: 30Z
    2. Masz rację. Naprawiłem to na moim blogu jakiś czas temu, ale nigdy nie zmieniłem go w odpowiedzi! Dziękujemy za poinformowanie mnie
      2019-04-14 16: 40: 33Z

    Jestem całkiem nowy w JavaScript i potrzebowałem tej funkcjonalności. Po prostu to napisałem:

    function removeFromArray(array, item, index) {
      while((index = array.indexOf(item)) > -1) {
        array.splice(index, 1);
      }
    }
    

    Wtedy, gdy chcę go użyć:

    //Set-up some dummy data
    var dummyObj = {name:"meow"};
    var dummyArray = [dummyObj, "item1", "item1", "item2"];
    
    //Remove the dummy data
    removeFromArray(dummyArray, dummyObj);
    removeFromArray(dummyArray, "item2");
    

    Wyjście - zgodnie z oczekiwaniami. ["item1", "item1"]

    Możesz mieć inne potrzeby niż ja, więc możesz łatwo je zmodyfikować, aby im odpowiadało. Mam nadzieję, że to komuś pomoże.

        
    27
    2014-12-30 16: 17: 43Z
    1. To będzie straszne zachowanie, jeśli tablica jest naprawdę długa i istnieje kilka instancji tego elementu. Metoda indexOf tablicy zacznie się od początku za każdym razem, więc kosztem będzie O (n ^ 2).
      2019-05-24 18: 22: 30Z

    ES6 i bez mutacji: (październik 2016 r.)

    const removeByIndex = (list, index) =>
      [
        ...list.slice(0, index),
        ...list.slice(index + 1)
      ];
    

    Następnie:

    removeByIndex([33,22,11,44],1) //=> [33,11,44]
    
        
    25
    2016-10-07 19: 42: 51Z
    1. up up up up up uuuuuuuuuuuuup! jest to bardziej aktualne, powinno to dotyczyć 1 odpowiedzi nie N ° 20 !!!
      2018-09-14 09: 28: 18Z

    Aktualizacja: ta metoda jest zalecana tylko wtedy, gdy nie możesz użyć ECMAScript 2015 (wcześniej znanego jako ES6). Jeśli możesz go użyć, inne odpowiedzi tutaj dostarczają znacznie bardziej przejrzystych implementacji.


    Ten opis tutaj rozwiąże Twój problem, a także usunie wszystkie wystąpienia argumentu zamiast tylko 1 (lub określona wartość).

    Array.prototype.destroy = function(obj){
        // Return null if no objects were found and removed
        var destroyed = null;
    
        for(var i = 0; i < this.length; i++){
    
            // Use while-loop to find adjacent equal objects
            while(this[i] === obj){
    
                // Remove this[i] and store it within destroyed
                destroyed = this.splice(i, 1)[0];
            }
        }
    
        return destroyed;
    }
    

    Użycie:

    var x = [1, 2, 3, 3, true, false, undefined, false];
    
    x.destroy(3);         // => 3
    x.destroy(false);     // => false
    x;                    // => [1, 2, true, undefined]
    
    x.destroy(true);      // => true
    x.destroy(undefined); // => undefined
    x;                    // => [1, 2]
    
    x.destroy(3);         // => null
    x;                    // => [1, 2]
    
        
    23
    2017-09-01 22: 41: 13Z

    Jeśli masz złożone obiekty wmacierz, której możesz użyć filtrów? W sytuacjach, w których $.inArray lub array.splice nie jest tak łatwy w użyciu. Zwłaszcza jeśli obiekty są prawdopodobnie płytkie w tablicy.

    Np. jeśli masz obiekt z polem Id i chcesz, aby obiekt został usunięty z tablicy:

    this.array = this.array.filter(function(element, i) {
        return element.id !== idToRemove;
    });
    
        
    22
    2015-11-10 04: 20: 21Z
    1. Tak właśnie lubię to robić. Korzystając z funkcji strzałek, może to być jedna linia. Ciekawi mnie wydajność. Również nic nie warte, że zastępuje tablicę. Każdy kod z odniesieniem do starej tablicy nie zauważy zmiany.
      2016-07-29 08: 50: 36Z

    Chcę odpowiedzieć na podstawie ES6 . Załóżmy, że masz tablicę jak poniżej:

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

    Jeśli chcesz usunąć specjalny indeks, np. 2, napisz poniżej kod:

    arr.splice(2, 1); //=> arr became [1,2,4]
    

    Ale jeśli chcesz usunąć specjalny element, taki jak 3 i nie znasz jego indeksu, wykonaj poniższe czynności:

    arr = arr.filter(e => e !== 3); //=> arr became [1,2,4]
    

    Wskazówka : użyj funkcji strzałki do wywołania zwrotnego filtra, chyba że otrzymasz pustą tablicę.

        
    21
    2019-02-24 12: 06: 30Z
    1. ostatnia opcja zwróci pustą tablicę
      2018-12-18 09: 24: 36Z
    2. @ Dejan.S, zaskoczyłem, jaka jest twoja tablica i co chcesz pominąć w tablicy?
      2018-12-18 09: 35: 11Z
    3. Byłem zły, użyłem zwykłej funkcji i musiałem jawnie wykonać instrukcję return. Przepraszam za to :)
      2018-12-18 09: 39: 43Z
    4. @ Dejan.S, zredagowałem odpowiedź na niektóre błędy, takie jak twój błąd i dodałem podpowiedź, jeśli mnie pomniejszysz, możesz teraz głosować.
      2018-12-18 11: 50: 51Z

    Nigdy nie powinieneś mutować swojej tablicy w macierz. W przeciwieństwie do funkcjonalnego wzorca programowania. To, co możesz zrobić, to utworzyć nową tablicę bez odwoływania się do tablicy, w której chcesz zmienić dane przy użyciu metody es6 filter;

    var myArray = [1,2,3,4,5,6];
    

    Załóżmy, że chcesz usunąć 5 z tablicy, możesz to po prostu zrobić w ten sposób.

    myArray = myArray.filter(value => value !== 5);
    

    To da ci nową tablicę bez wartości, którą chcesz usunąć. Tak więc wynik będzie

     [1,2,3,4,6]; // 5 has been removed from this array
    

    W celu dalszego zrozumienia możesz przeczytać dokumentację MDN na Array.filter https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

        
    19
    2017-12-26 19: 32: 06Z

    Bardziej nowoczesne, podejście ECMAScript 2015 (wcześniej znane jako Harmony lub ES 6). Biorąc pod uwagę:

    const items = [1, 2, 3, 4];
    const index = 2;
    

    Następnie:

    items.filter((x, i) => i !== index);
    

    Plonowanie:

    [1, 2, 4]
    

    Możesz użyć Babel i polyfill usługa , aby upewnić się, że jest to dobrze obsługiwane we wszystkich przeglądarkach.

        
    18
    2016-06-25 13: 01: 46Z
      Zauważ, że .filter zwraca nową tablicę, która nie jest dokładnie taka sama jak usunięcie elementu z tej samej tablicy. Zaletą tego podejścia jest możliwość łączenia metod macierzowych. np .: [1,2,3].filter(n => n%2).map(n => n*n) === [ 1, 9 ]
      2016-05-06 18: 58: 02Z
    1. Świetnie, jeśli mam 600k elementów w tablicy i chcę usunąć pierwsze 50k, czy możesz sobie wyobrazić tę powolność? To nie jest rozwiązanie, potrzebna jest funkcja, która po prostu usuwa elementy i nic nie zwraca.
      2016-05-30 15: 11: 17Z
    2. @ Seraph W tym celu prawdopodobnie chciałbyś użyć splice lub slice.
      2016-05-31 22: 04: 28Z
    3. @ bjfletcher To jeszcze lepiej, w trakcie usuwania po prostu przydziel 50K elementów i wyrzuć je gdzieś. (z fragmentem 550K elementów, ale bez wyrzucania ich z okna).
      2016-05-31 23: 06: 07Z
    4. Wolałbym odpowiedź bjfletchera, która mogłaby być tak krótka, jak items= items.filter(x=>x!=3). Poza tym OP nie zawierał żadnego wymogu dla dużego zestawu danych.
      2016-08-27 01: 55: 25Z

    Wiem, że jest już wiele odpowiedzi, ale wiele z nich wydaje się nadmiernie komplikować problem. Oto prosty, rekurencyjny sposób usuwania wszystkich instancji klucza - wywołuje self, dopóki indeks nie zostanie znaleziony. Tak, działa tylko w przeglądarkach z indexOf, ale jest prosty i można go łatwo polifaktować.

    Funkcja samodzielna

    function removeAll(array, key){
        var index = array.indexOf(key);
    
        if(index === -1) return;
    
        array.splice(index, 1);
        removeAll(array,key);
    }
    

    Metoda prototypowa

    Array.prototype.removeAll = function(key){
        var index = this.indexOf(key);
    
        if(index === -1) return;
    
        this.splice(index, 1);
        this.removeAll(key);
    }
    
        
    16
    2014-02-19 22: 20: 53Z
    1. Tylko uwaga, 1 zastrzeżenie z tą metodą to możliwość przepełnienia stosu. Jeśli nie pracujesz z masowymi tablicami, nie powinieneś mieć problemu.
      2015-09-08 05: 57: 20Z

    Możesz wykonać pętlę wsteczną, aby nie zepsuć indeksów, jeśli istnieje wiele instancji elementu.

    var myElement = "chocolate";
    var myArray = ['chocolate', 'poptart', 'poptart', 'poptart', 'chocolate', 'poptart', 'poptart', 'chocolate'];
    
    /* Important code */
    for (var i = myArray.length - 1; i >= 0; i--) {
        if (myArray[i] == myElement) myArray.splice(i, 1);
    }
    

    Demo na żywo

        
    15
    2013-08-12 17: 56: 39Z

    Mam inne dobre rozwiązanie do usuwania z tablicy:

    var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
    
    const result = words.filter(word => word.length > 6);
    
    console.log(result);
    // expected output: Array ["exuberant", "destruction", "present"]
    

    https: //developer.mozilla. org /en-US /docs /Web /JavaScript /Reference /Global_Objects /Array /filter

        
    15
    2018-06-05 15: 51: 34Z

    Masz tablicę od 1 do 9 i chcesz usunąć 5 z kodu poniżej.

    var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    
    var newNumberArray = numberArray.filter(m => {
      return m !== 5;
    });
    
    console.log("new Array, 5 removed", newNumberArray);

    Jeśli chcesz wiele wartości ex: - 1,7,8 4,8

    var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    
    var newNumberArray = numberArray.filter(m => {
      return (m !== 1) && (m !== 7) && (m !== 8);
    });
    
    console.log("new Array, 5 removed", newNumberArray);

    Jeśli chcesz usunąć wartość tablicy w tablicy ex: - [3,4,5]

    var numberArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var removebleArray = [3,4,5];
    
    var newNumberArray = numberArray.filter(m => {
        return !removebleArray.includes(m);
    });
    
    console.log("new Array, [3,4,5] removed", newNumberArray);

    obejmuje obsługiwaną przeglądarkę to link

        
    15
    2018-08-21 04: 21: 54Z

    Na podstawie wszystkich poprawnych odpowiedzi i biorąc pod uwagę sugerowane najlepsze praktyki (zwłaszcza nie używając bezpośrednio Array.prototype), wymyśliłem poniższy kod:

    function arrayWithout(arr, values) {
      var isArray = function(canBeArray) {
        if (Array.isArray) {
          return Array.isArray(canBeArray);
        }
        return Object.prototype.toString.call(canBeArray) === '[object Array]';
      };
    
      var excludedValues = (isArray(values)) ? values : [].slice.call(arguments, 1);
      var arrCopy = arr.slice(0);
    
      for (var i = arrCopy.length - 1; i >= 0; i--) {
        if (excludedValues.indexOf(arrCopy[i]) > -1) {
          arrCopy.splice(i, 1);
        }
      }
    
      return arrCopy;
    }
    

    Przeglądając powyższą funkcję, mimo że działa dobrze, zdałem sobie sprawę, że może być pewna poprawa wydajności. Również użycie ES6 zamiast ES5 jest znacznie lepszym podejściem. W tym celu jest to ulepszony kod:

    const arrayWithoutFastest = (() => {
      const isArray = canBeArray => ('isArray' in Array) 
        ? Array.isArray(canBeArray) 
        : Object.prototype.toString.call(canBeArray) === '[object Array]';
    
      let mapIncludes = (map, key) => map.has(key);
      let objectIncludes = (obj, key) => key in obj;
      let includes;
    
      function arrayWithoutFastest(arr, ...thisArgs) {
        let withoutValues = isArray(thisArgs[0]) ? thisArgs[0] : thisArgs;
    
        if (typeof Map !== 'undefined') {
          withoutValues = withoutValues.reduce((map, value) => map.set(value, value), new Map());
          includes = mapIncludes;
        } else {
          withoutValues = withoutValues.reduce((map, value) => { map[value] = value; return map; } , {}); 
          includes = objectIncludes;
        }
    
        const arrCopy = [];
        const length = arr.length;
    
        for (let i = 0; i < length; i++) {
          // If value is not in exclude list
          if (!includes(withoutValues, arr[i])) {
            arrCopy.push(arr[i]);
          }
        }
    
        return arrCopy;
      }
    
      return arrayWithoutFastest;  
    })();
    

    Jak korzystać:

    const arr = [1,2,3,4,5,"name", false];
    
    arrayWithoutFastest(arr, 1); // will return array [2,3,4,5,"name", false]
    arrayWithoutFastest(arr, 'name'); // will return [2,3,4,5, false]
    arrayWithoutFastest(arr, false); // will return [2,3,4,5]
    arrayWithoutFastest(arr,[1,2]); // will return [3,4,5,"name", false];
    arrayWithoutFastest(arr, {bar: "foo"}); // will return the same array (new copy)
    

    Obecnie piszę post na blogu, w którym bez problemu przetestowałem kilka rozwiązań Array i porównałem czas potrzebny do uruchomienia. Po zakończeniu tego posta zaktualizuję tę odpowiedź linkiem. Aby dać ci znać, porównałem powyższe z Lodash bez, aw przypadku, gdy przeglądarka obsługuje Map, bije lodash! Zauważ, że nie używam Array.prototype.indexOf lub Array.prototype.includes, ponieważ zawijanie wartości exlcudeValues ​​w Map lub Object powoduje szybsze wysyłanie zapytań!

        
    15
    2018-11-19 23: 02: 58Z
    źródło umieszczone tutaj