Jak mogę usunąć określony element z tablicy?

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?

Szukam odpowiednika czegoś w rodzaju:

array.remove(number);

Muszę użyć core JavaScript. Ramy nie są dozwolone.

Author: Melanie, 2011-04-23

30 answers

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

Metoda splice() zmienia zawartość tablicy poprzez usunięcie istniejące elementy i / lub dodawanie nowych elementów.

const array = [2, 5, 9];

console.log(array);

const 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ę i zwraca nową tablicę zawierającą elementy, które zostały usunięte.


Ze względu na kompletność, oto funkcje. Pierwsza funkcja usuwa tylko jedno wystąpienie (tzn. usuwa pierwsze dopasowanie 5 z [2,5,9,1,5,8,5]), podczas gdy druga funkcja usuwa wszystkie wystąpienia:

function removeItemOnce(arr, value) {
  var index = arr.indexOf(value);
  if (index > -1) {
    arr.splice(index, 1);
  }
  return arr;
}

function removeItemAll(arr, value) {
  var i = 0;
  while (i < arr.length) {
    if (arr[i] === value) {
      arr.splice(i, 1);
    } else {
      ++i;
    }
  }
  return arr;
}
//Usage
console.log(removeItemOnce([2,5,9,1,5,8,5], 5))
console.log(removeItemAll([2,5,9,1,5,8,5], 5))
 13143
Author: Tom Wadley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-09 22:26:17

Data wydania: 2016 Październik

    Czy to proste, intuicyjne i wyraźne (brzytwa Occama )
  • Do It immutable (oryginalna tablica pozostaje bez zmian)
  • zrób to ze standardowymi funkcjami JavaScript, jeśli twoja przeglądarka ich nie obsługuje - użyj polyfill

W tym przykładzie kodu używam "array.filtr(...) " funkcja do usuwania niechcianych elementów z tablicy. Ta funkcja nie zmienia oryginalnej tablicy i tworzy nową. Jeśli przeglądarka nie obsługuje tej funkcji (np. Internet Explorer przed wersją 9 lub Firefox przed wersją 1.5), rozważ użycie Filtr polyfill od Mozilli.

[[28]}usuwanie elementu (ECMA-262 Edition 5 code aka Oldstyle JavaScript)
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 ECMAScript 6)

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 ECMAScript 6 "() = > {} " składnia funkcji strzałki nie jest w ogóle obsługiwana w przeglądarce Internet Explorer, Chrome przed wersją 45, Firefox przed wersją 22 i Safari przed wersją 10. Aby używać składni ECMAScript 6 w starych przeglądarkach można użyć BabelJS.


Usuwanie wielu elementów (Kod ECMAScript 7)

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 ]

IMPORTANT " array.obejmuje(...) "funkcja nie jest obsługiwana w Internet Explorer w ogóle, Chrome przed wersją 47, Firefox przed wersją 43, Safari przed wersją 9 i Edge przed wersją 14, więc Oto polyfill od Mozilli.

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

Jeśli propozycja "składnia wiążąca" zostanie kiedykolwiek zaakceptowana, będziesz mógł 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 ]

Spróbuj sam w BabelJS :)

Odniesienie

 1493
Author: ujeenator,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-18 22:58:18

Nie wiem, jak oczekujesz zachowania. Są trzy możliwości, które możesz chcieć.

Aby usunąć element tablicy o indeksie i:

array.splice(i, 1);

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

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 przestał istnieć, ale nie chcesz, aby indeksy innych elementów zmieniały się:

delete array[i];
 1422
Author: Peter Olson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-24 14:33:02

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

If you do want a empty slot:

array[index] = undefined;

If you don ' t want a empty slot:

//To keep the original:
//oldArray = [...array];

//This modifies the array.
array.splice(index, 1);

I jeśli potrzebujesz wartości tego elementu, możesz po prostu zapisać zwracany element tablicy:

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

Jeśli chcesz usunąć na końcu tablicy, możesz użyć array.pop() dla ostatniej lub array.shift() dla pierwszej (obie zwracają również wartość elementu).

Jeśli nie znasz indeksu elementu, możesz użyć array.indexOf(item), aby go pobrać (w if(), aby uzyskać jeden element lub w while(), aby uzyskać wszystkie). array.indexOf(item) zwraca indeks lub -1, Jeśli nie został znaleziony. 

 513
Author: xavierm02,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-16 04:51:21

Przyjaciel miał problemy w Internet Explorer 8 i pokazał mi, co zrobił. Powiedziałam mu, że to złe, a on powiedział, że ma odpowiedź tutaj. Bieżąca odpowiedź top 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 array_remove_index_by_value(arr, item)
{
 for (var i = arr.length; i--;)
 {
  if (arr[i] === item) {arr.splice(i, 1);}
 }
}

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

 305
Author: Ben Lesh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-07 11:01:31

Istnieją dwa główne podejścia:

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

  2. Usunąć: delete anArray[index];

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

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

Możesz również spodziewać się dziur w numerach indeksów po użyciu delete, np. możesz skończyć z indeksami 1, 3, 4, 8, 9, i 11 i długość jak przed użyciem delete. W takim przypadku wszystkie zindeksowane pętle for ulegną awarii, ponieważ indeksy nie są już sekwencyjne.

Jeśli jesteś zmuszony do użycia delete z jakiegoś powodu, powinieneś użyć for each pętle, gdy trzeba zapętlić tablice. W rzeczywistości, zawsze unikać użycie indeksowanych pętli for, jeśli to możliwe. W ten sposób Kod byłby bardziej wytrzymały i mniej podatny na problemy z indeksami.

 201
Author: Saša,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-26 08:49:45
Array.prototype.remove_by_value = 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)
].remove_by_value(3);

Array.prototype.remove_by_value = 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.remove_by_value('hello')

console.log(rooms)
 172
Author: Zirak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-24 14:35:18

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

Znajdź i przenieś (move):

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

Use indexOf and splice (indexof):

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

Use only splice (splice):

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

Czasy uruchomienia na nodejs dla tablicy z 1000 elementami (średnio ponad 10000 uruchomień):

indexof jest około 10x wolniejszy niż ruch. Parzyste jeśli zostało to poprawione przez usunięcie wywołania indexOf w splice to działa znacznie gorzej niż move.

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
 125
Author: slosd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-11 12:47:59

Daje predykat zamiast wartości.

Notatka: zaktualizuje podaną tablicę i zwróci uszkodzone wiersze.

Użycie

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;
 },
};
 94
Author: amd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-02-03 13:45:53

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

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 i działa szybciej niż kombinacja slice i indexOf.

 88
Author: Salvador Dali,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-31 11:47:30

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 publikuję to jest ostrzeżenie użytkowników przed alternatywną implementacją sugerowaną w komentarzach na tej stronie (14 grudnia 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;
};

Wydaje się działać dobrze na początku, ale poprzez bolesny proces odkryłem, że nie udaje się podczas próby usunięcia przedostatniego elementu w / align = "left" / Na przykład, jeśli masz 10-elementową tablicę i próbujesz usunąć 9 element za pomocą tego:

myArray.remove(8);

Kończy się tablica 8-elementowa. Nie wiem dlaczego, ale potwierdziłem, że oryginalna implementacja Johna nie ma tego problemu.

 85
Author: Roger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-16 12:51:30

Podkreślam.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 ich nie ma, jak w przypadku starszych wersji Internet Explorera, używa on własnych, niestandardowych metod.

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

_.without([1, 2, 1, 0, 3, 1, 4], 0, 1); // => [2, 3, 4]
 83
Author: vatsal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-21 11:29:54

Możesz użyć ES6. Na przykład, aby usunąć wartość " 3 " w tym przypadku:

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

Wyjście:

["1", "2", "4", "5", "6"]
 82
Author: rajat44,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-01 22:13:41

Jeśli chcesz usunąć nową tablicę z usuniętymi pozycjami, zawsze możesz usunąć określony element i odfiltrować tablicę. Może wymagać rozszerzenia obiektu array dla przeglądarek, które nie implementują metody filtrowania, ale na dłuższą metę 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świetlać [1, 2, 3, 4, 6].

 72
Author: Loupax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-01 20:30:50

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

Wszystkie opisane metody nie mutują oryginalnej tablicy, a zamiast tego tworzą 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ą tablica, od początku do indeksu chcemy usunąć i połączyć inną tablicę z pierwszej pozycji po tej, którą usunęliśmy na koniec tablicy.

Jeśli znasz wartość

W tym przypadku dobrym rozwiązaniem jest użycie filter(), które 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)

Używa funkcji strzałek ES6. Można używać 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)

Albo możesz użyj Babel i przenieś kod ES6 z powrotem do ES5, aby stał się bardziej strawny dla starych przeglądarek, a jednocześnie napisz nowoczesny JavaScript w swoim kodzie.

Usuwanie wielu elementów

Co zrobić, jeśli zamiast jednego elementu chcesz usunąć wiele elementów?

Znajdźmy najprostsze rozwiązanie.

Według indeksu

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

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żna wyszukać włączenie wewnątrz callback funkcja:

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 mutacji oryginalnej Tablicy

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

(originally posted on my site https://flaviocopes.com/how-to-remove-item-from-array/)

 69
Author: Flavio Copes,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-26 09:45:06

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

var array = [1,3,5,6,5,9,5,3,55]
var res = remove_item(array,5);
console.log(res)
 65
Author: Ekramul Hoque,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-02-02 23:45:10

ES6 & bez mutacji: (październik 2016)

const removeByIndex = (list, index) =>
      [
        ...list.slice(0, index),
        ...list.slice(index + 1)
      ];
         
output = removeByIndex([33,22,11,44],1) //=> [33,11,44]
      
console.log(output)
 57
Author: Abdennour TOUMI,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-02-10 07:37:29

Możesz użyć lodash _.pull (mutate array), _.pullAt (mutate array) lub _.Bez (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']
 55
Author: Chun Yang,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-25 21:19:16

Usunięcie określonego elementu / łańcucha z tablicy może być wykonane w jednej linijce:

theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);

Gdzie:

theArray : tablica, z której chcesz usunąć coś konkretnego z

stringToRemoveFromArray: łańcuch, który chcesz usunąć, a 1 to liczba elementów, które chcesz usunąć.

notatka: Jeśli "stringToRemoveFromArray" nie znajduje się w tablicy, spowoduje to usunięcie ostatniego elementu tablicy.

To zawsze dobra praktyka, aby sprawdzić, czy element istnieje w tablicy, przed usunięciem go.

if (theArray.indexOf("stringToRemoveFromArray") >= 0){
   theArray.splice(theArray.indexOf("stringToRemoveFromArray"), 1);
}

W zależności od tego, czy masz nowszą lub starszą wersję Ecmascript działającą na komputerach Twojego klienta:

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

Lub

var array = ['1','2','3','4','5','6'];
var newArray = array.filter(function(item){ return item !== '3' });

Gdzie '3' jest wartością, którą chcesz usunąć z tablicy. Tablica będzie wtedy : ['1','2','4','5','6']

 54
Author: Max Alexander Hanna,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-29 21:55:45

Wydajność

Dzisiaj (2019-12-09) przeprowadzam testy wydajności na macOS v10.13.6 (High Sierra) dla wybranych rozwiązań. Pokazuję delete (A), ale nie używam jej w porównaniu z innymi metodami, ponieważ pozostawiła pustą przestrzeń w tablicy.

Wnioski

  • najszybszym rozwiązaniem jestarray.splice (C) (z wyjątkiem Safari dla małych tablic, gdzie ma drugi raz)
  • dla dużych tablic, array.slice+splice (H) jest najszybszym niezmiennym rozwiązaniem dla Firefoksa i Safari; Array.from (B) jest najszybszy w Chrome
  • zmienne rozwiązania są zwykle 1,5 x-6x szybsze niż niezmienne
  • W przypadku małych tabel na Safari, zaskakująco zmienny roztwór (C) jest wolniejszy niż niezmienny roztwór (G){[21]]}

Szczegóły

W testach usuwam środkowy element z tablicy na różne sposoby. Rozwiązania A, C są na miejscu. Rozwiązania B, D, E, F, G, H są niezmienne.

Wyniki dla tablic z 10 elementy

Tutaj wpisz opis obrazka

W chromie array.splice (C) jest najszybszym rozwiązaniem na miejscu. array.filter (D) jest najszybszym niezmiennym rozwiązaniem. Najwolniejszym jest array.slice (F). Możesz wykonać test na swojej maszynie tutaj .

Wyniki dla tablicy z 1.000.000 elementów

Tutaj wpisz opis obrazka

W Chrome array.splice (C) jest najszybszym rozwiązaniem w miejscu (delete (C) jest podobny szybko - ale zostawił puste miejsce w tablicy (więc to nie wykonuje "pełnego usunięcia")). array.slice-splice (H) jest najszybszym niezmiennym rozwiązaniem. Najwolniejszym jest array.filter (D i E). Możesz wykonać test na swojej maszynie tutaj .

var a = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var log = (letter,array) => console.log(letter, array.join `,`);

function A(array) {
  var index = array.indexOf(5);
  delete array[index];
  log('A', array);
}

function B(array) {
  var index = array.indexOf(5);
  var arr = Array.from(array);
  arr.splice(index, 1)
  log('B', arr);
}

function C(array) {
  var index = array.indexOf(5);
  array.splice(index, 1);
  log('C', array);
}

function D(array) {
  var arr = array.filter(item => item !== 5)
  log('D', arr);
}

function E(array) {
  var index = array.indexOf(5);
  var arr = array.filter((item, i) => i !== index)
  log('E', arr);
}

function F(array) {
  var index = array.indexOf(5);
  var arr = array.slice(0, index).concat(array.slice(index + 1))
  log('F', arr);
}

function G(array) {
  var index = array.indexOf(5);
  var arr = [...array.slice(0, index), ...array.slice(index + 1)]
  log('G', arr);
}

function H(array) {
  var index = array.indexOf(5);
  var arr = array.slice(0);
  arr.splice(index, 1);
  log('H', arr);
}

A([...a]);
B([...a]);
C([...a]);
D([...a]);
E([...a]);
F([...a]);
G([...a]);
H([...a]);
This snippet only presents code used in performance tests - it does not perform tests itself.
W 2007 roku firma została założona przez firmę FireFox, która od 2007 roku zajmuje się produkcją i dystrybucją sprzętu komputerowego.]}

Tutaj wpisz opis obrazka

 46
Author: Kamil Kiełczewski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-26 09:12:06

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

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

I chcemy usunąć numer 4. Możesz po prostu użyć poniższego kodu:

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

Jeśli używasz tej funkcji ponownie, piszesz funkcję wielokrotnego użytku, która zostanie dołączona do natywnej funkcji tablicy 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, jeśli zamiast tego masz poniższą tablicę z kilkoma [5] s w tablicy?

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

Potrzebujemy pętli, aby sprawdzić je wszystkie, ale łatwiejszym i skuteczniejszym sposobem jest użycie wbudowane funkcje 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 innych firm, które pomagają ci to zrobić, jak Lodash lub Underscore. Więcej informacji można znaleźć na stronie lodash _.ciągnij,_.pullAt lub _.bez.

 42
Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-01 22:33:20

Jestem całkiem nowy w JavaScript i potrzebowałem tej funkcjonalności. Ja tylko 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 je łatwo zmodyfikować. Mam nadzieję, że to komuś pomoże.
 37
Author: sofiax,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-30 16:17:43

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

Np. jeśli masz obiekt z polem Id i chcesz go usunąć z tablicy:

this.array = this.array.filter(function(element, i) {
    return element.id !== idToRemove;
});
 34
Author: flurdy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-10 04:20:21

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

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

Jeśli chcesz usunąć w specjalnym indeksie jak 2, Napisz poniższy 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 jak poniżej:

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

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

 34
Author: AmerllicA,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-01 22:59:22

ES10 Update

Ten post podsumowuje wspólne podejścia do usuwania elementów z tablicy od ECMAScript 2019 (ES10).

1. Przypadki ogólne

1.1. Usuwanie elementu tablicy przez wartość za pomocą .splice()

| In-place: tak /
/ usuwa duplikaty : Yes (loop), No (indexOf) /
| By value / index : By index /

Jeśli znasz wartość, którą chcesz usunąć z tablicy, możesz użyć metody splice. Najpierw musisz określ indeks pozycji docelowej. Następnie użyjesz indeksu jako elementu startowego i usuniesz tylko jeden element.

// With a 'for' loop
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
for( let i = 0; i < arr.length; i++){
  if ( arr[i] === 5) {
    arr.splice(i, 1);
  }
} // => [1, 2, 3, 4, 6, 7, 8, 9, 0]

// With the .indexOf() method
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
const i = arr.indexOf(5);
arr.splice(i, 1); // => [1, 2, 3, 4, 6, 7, 8, 9, 0]

1.2. Usunięcie elementu tablicy przy użyciu metody .filter()

| In-place: No /
/ usuwa duplikaty : tak |
| według wartości / index : według wartości /

Konkretny element może być / align = "left" / Z Tablicy, zapewniając funkcję filtrowania. Funkcja taka jest wtedy wywoływana dla każdego element w tablicy.

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

1.3. Usuwanie elementu tablicy przez rozszerzenie Array.prototype

| In-place: tak / nie | zależy od implementacji) /
/ usuwa duplikaty: tak / nie | zależy od implementacji) /
| według wartości / index : według indeksu / według wartości |zależy od implementacji) /

Prototyp tablicy można rozszerzyć o dodatkowe metody. Takie metody będą wtedy dostępne do użycia na utworzonych tablicach.

Uwaga: Rozszerzanie prototypów obiektów ze standardowej biblioteki JavaScript (np. Array) jest przez niektórych traktowane jako antypattern.

// In-place, removes all, by value implementation
Array.prototype.remove = function(item) {
    for (let i = 0; i < this.length; i++) {
        if (this[i] === item) {
            this.splice(i, 1);
        }
    }
}
const arr1 = [1,2,3,1];
arr1.remove(1) // arr1 equals [2,3]

// Non-stationary, removes first, by value implementation
Array.prototype.remove = function(item) {
    const arr = this.slice();
    for (let i = 0; i < this.length; i++) {
        if (arr[i] === item) {
            arr.splice(i, 1);
            return arr;
        }
    }
    return arr;
}
let arr2 = [1,2,3,1];
arr2 = arr2.remove(1) // arr2 equals [2,3,1]

1.4. Usunięcie elementu tablicy za pomocą operatora delete

| In-place: tak /
/ usuwa duplikaty : Nie /
| By value / index : By index /

Użycie operatora delete nie wpływa na właściwość length. Nie wpływa również na indeksy kolejnych elementów. Tablica staje się rzadka, co jest fantazyjnym sposobem na powiedzenie, że usunięty element nie jest usuwany, ale staje się niezdefiniowany.

const arr = [1, 2, 3, 4, 5, 6];
delete arr[4]; // Delete element with index 4
console.log( arr ); // [1, 2, 3, 4, undefined, 6]

Operator delete jest przeznaczony do usuwania właściwości z obiektów JavaScript, których tablicami są obiekty.

1.5. Usuwanie elementu tablicy za pomocą Object utilities (>=ES10)

| In-place: No /
/ usuwa duplikaty : tak |
| według wartości / index : według wartości /

ES10 wprowadził Object.fromEntries, który może być użyty do utworzenia żądanej tablicy z dowolnego obiektu podobnego do tablicy i filtruje niechciane elementy podczas procesu.

const object = [1,2,3,4];
const valueToRemove = 3;
const arr = Object.values(Object.fromEntries(
  Object.entries(object)
  .filter(([ key, val ]) => val !== valueToRemove)
));
console.log(arr); // [1,2,4]

2. Przypadki szczególne

2.1 usuwanie elementu, jeśli znajduje się na końcu tablicy

2.1.1. Zmiana Tablicy length

| In-place: tak /
/ usuwa duplikaty : Nie /
| według wartości / index : N / A /

Elementy tablicy JavaScript można usunąć z końca tablicy, ustawiając właściwość length na wartość mniejszą niż bieżąca wartość. Każdy element, którego indeks jest większy lub równy nowej długości, zostanie usunięty.

const arr = [1, 2, 3, 4, 5, 6];
arr.length = 5; // Set length to remove element
console.log( arr ); // [1, 2, 3, 4, 5]
2.1.2. Używając metody .pop()

| In-place: tak /
/ usuwa duplikaty : Nie /
| według wartości / index : N / A /

Metoda pop usuwa ostatni element tablicy, zwraca ten element i aktualizuje właściwość length. Metoda pop modyfikuje tablicę, na której jest wywoływana, oznacza to, że w przeciwieństwie do delete ostatni element jest usunięto całkowicie i zmniejszono długość tablicy.

const arr = [1, 2, 3, 4, 5, 6];
arr.pop(); // returns 6
console.log( arr ); // [1, 2, 3, 4, 5]

2.2. Usunięcie elementu, jeśli znajduje się na początku tablicy

| In-place: tak /
/ usuwa duplikaty : Nie /
| według wartości / index : N / A /

Metoda .shift() działa podobnie do metody pop, z tym że usuwa pierwszy element tablicy JavaScript zamiast ostatniego. Po usunięciu elementu pozostałe elementy są przesuwane w dół.

const arr = [1, 2, 3, 4];
arr.shift(); // returns 1
console.log( arr ); // [2, 3, 4]

2.3. Usunięcie elementu, jeśli jest to jedyny element w tablicy

| In-place: tak /
/ usuwa duplikaty : N / A /
| według wartości / index : N / A /

Najszybszą techniką jest ustawienie zmiennej tablicy na pustą tablicę.

let arr = [1];
arr = []; //empty array

Alternatywnie można zastosować technikę z 2.1.1, ustawiając długość na 0.

 33
Author: M. Twarog,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2021-01-26 07:17:45

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


Ten gist tutaj rozwiąże twój problem, a także usunie wszystkie wystąpienia argumentu zamiast tylko 1 (lub określonej wartości).

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]
 32
Author: zykadelic,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-01 22:41:13

Nigdy nie powinieneś mutować swojej tablicy. Ponieważ jest to sprzeczne z funkcjonalnym wzorcem programowania. Możesz utworzyć nową tablicę bez odwoływania się do tablicy, którą chcesz zmienić za pomocą metody ECMAScript 6 filter;

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

Załóżmy, że chcesz usunąć 5 z tablicy, możesz to zrobić w następujący sposób:

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

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

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

Dla dalszego zrozumienia można przeczytać MDN dokumentacja na tablicy .filtr .

 29
Author: Adeel Imran,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-01 22:41:58

[[3]}bardziej nowoczesne, ECMAScript 2015 (wcześniej znane jako Harmony lub ES 6) podejście.

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

Wtedy:

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

:

[1, 2, 4]

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

 27
Author: bjfletcher,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-25 13:01:46

Możesz wykonać pętlę wsteczną, aby upewnić się, że indeksy nie są przekręcane, 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);
}
console.log(myArray);

Live Demo

 27
Author: Jeff Noel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-07-10 12:53:39

Masz od 1 do 9 w tablicy, a chcesz usunąć 5. Użyj poniższego kodu:

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 mieć wiele wartości. Przykład: - 1,7,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, 1,7 and 8 removed", newNumberArray);

Jeśli chcesz usunąć wartość tablicy w tablicy. Przykład: [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);

Zawiera obsługiwaną przeglądarkę link.

 25
Author: Thilina Sampath,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-02 04:01:31