Jak usunąć element z tablicy JavaScript i stworzyć czysty kod

Podczas pisania kodu JavaScript często natkniesz się na tablice. Jak usunąć element z tablicy w JavaScript?

W JavaScript tablica jest typem obiektu globalnego, którego można używać do przechowywania danych. Tablica w JavaScript może zawierać listę zawierającą zero lub więcej typów danych lub uporządkowaną kolekcję. Aby uzyskać dostęp do określonych elementów tablicy, używamy indeksów numerowanych zaczynających się od 0.

W tym artykule opiszę składnię tworzenia tablic w JavaScript, dlaczego należy usunąć element z tablicy w JavaScript oraz różne podejścia do usuwania elementów z tablic w JavaScript poprzez mutację lub bez mutacji oryginalnej tablicy.

Spis treści:

Składnia tablicy JavaScript

Tablice pozwalają nam przechowywać wiele wartościowych wartości w jednej zmiennej. Na przykład, jeśli chcemy reprezentować siedem kontynentów w JavaScript, możemy mieć ten kod:

const continent1 = "Asia";
const continent2 = "Africa";
const continent3 = "North America";
const continent4 = "South America";
const continent5 = "Antarctica";
const continent6 = "Europe";
const continent7 = "Australia"

Możemy jednak skondensować ten kod i przedstawić go w tablicy w następujący sposób;

 let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

Zamiast 7 zmiennych, mamy tylko jedną zmienną i używamy nawiasów kwadratowych do przedstawienia naszych obiektów.

Jeśli chcesz uzyskać dostęp do pierwszego kontynentu na naszej liście, możesz uruchomić to polecenie; konsola.log(kontynenty[0])

Możesz skorzystać z naszego bezpłatnego internetowy kompilator JavaScript aby przetestować swój kod.

Oto co otrzymasz:

Jeśli chcesz uzyskać dostęp do ostatniego elementu naszej tablicy, uruchomisz to polecenie; konsola.log(kontynenty[6]).

Należy pamiętać, że numeracja w JavaScript zaczyna się od 0.

Po co usuwać element z tablicy JavaScript?

Tablic JavaScript można używać z ciągami, liczbami i różnymi strukturami danych. Są jednak przypadki, w których może być konieczne usunięcie jednego lub kilku elementów z tablicy. Oto niektóre ze scenariuszy:

Obsługa danych dynamicznych: możesz przechowywać dynamiczne zestawy danych w tablicach. Może zaistnieć potrzeba usunięcia elementu/elementów z tablicy w zależności od zmieniających się wymagań.
Zachowaj integralność danych: możesz usuwać/usuwać nieaktualne informacje z tablic, aby mieć pewność, że struktury danych są aktualne.
Zarządzaj pamięcią: Rozmiar kodu wpływa na wydajność aplikacji. Możesz usunąć niepotrzebne informacje ze swoich tablic i zoptymalizować kod.

Usuń elementy bez mutowania oryginalnej tablicy

Jeśli chcesz usunąć element bez mutowania oryginalnej tablicy, najlepszą praktyką jest utworzenie nowej tablicy bez elementu, który chcesz usunąć. Takie podejście dopasowuje tablicę jak parametr funkcji. Możesz zastosować następujące podejścia:

#1. Usuń element za pomocą plasterka()

Możemy usunąć pierwszy kontynent z naszej listy za pomocą metody plasterek().

To jest nasz oryginalny kod:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

Nową tablicę utworzymy w następujący sposób:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the first element using slice
let newContinents = continents.slice(1);
If you now run:
console.log(newContinents);

Otrzymasz to jako wynik:

[
  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

#2. Usuń pierwszy element z tablicy za pomocą filter()

Metoda filter tworzy nową tablicę, w której elementy muszą spełnić określony warunek. Mogę utworzyć warunek, który wyklucza pierwszy element z naszej tablicy. Oto jak mogę to osiągnąć:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the first element using filter() method
let newContinents = continents.filter((continent, index) => index !== 0);
console.log(newContinents);

Jeśli uruchomię kod, otrzymam coś takiego:

[
  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

#3. Użyj plasterka() razem z concat(), aby usunąć element z dowolnej pozycji

Nasz pierwszy przykład usuwa pierwszy element z naszej listy. A co jeśli będziemy chcieli usunąć powiedzmy trzeci lub czwarty element z naszej tablicy? Aby tak się stało, musimy połączyć metodyslice() z metodami concat(). W poniższym przykładzie usunę czwarty element w następujący sposób:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// Remove the fourth element using slice and concat
let continentsWithoutFourth = continents.slice(0, 3).concat(continents.slice(4));
console.log(continentsWithoutFourth);

Jeśli uruchomię kod, otrzymamy następujący wynik:

[
  'Asia',
  'Africa',
  'North America',
  'Antarctica',
  'Europe',
  'Australia'
]

Metoda plasterek() tworzy dwa nowe plasterki. Następnie używamy metody concat(), aby połączyć dwa wycinki, ale pomijamy czwarty element. Możesz zastosować to podejście w przypadku dowolnego elementu tablicy.

#4. Usuń element za pomocą pętli for wraz z funkcją push()

Możemy pominąć piąty element z naszej listy, korzystając z pętli for i metody push(). Sprawdź ten kod:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// Remove the fifth element using a for loop and push
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i++) {
  if (i !== 4) {
    continentsWithoutFifth.push(continents[i]);
  }
}
console.log(continentsWithoutFifth);

Pętla for wykonuje iterację po każdym elemencie naszej tablicy kontynentów. Używamy instrukcji if, aby sprawdzić, czy bieżący indeks nie jest równy cztery. Jeśli warunek jest spełniony, elementy są umieszczane w nowej tablicy.

Oto co otrzymamy po uruchomieniu kodu:

[

  'Asia',
  'Africa',
  'North America',
  'South America',
  'Europe',
  'Australia'
]

Usuń elementy, mutując oryginalną tablicę

Możesz mutować lub zmieniać strukturę oryginalnej tablicy, usuwając element. Oto niektóre z podejść:

#1. Usuń element z tablicy za pomocą pop()

Możesz użyć metody pop(), aby usunąć ostatni element z naszej tablicy kontynentów. Nasz oryginalny kod to

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

Możemy mieć ten kod, aby usunąć ostatni element:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];

// Remove the last element using pop
let lastContinent = continents.pop();

Jeśli uruchomisz:

console.log("Updated Continents Array:", continents);

Zaktualizowana lista będzie następująca:

Updated Continents Array: [

  'Asia',
  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe'
]

Możesz także sprawdzić usunięty element za pomocą tego kodu:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the last element using pop
let lastContinent = continents.pop();
console.log("Removed Continent:", lastContinent);

#2. Usuń element z tablicy za pomocą splice()

Metoda splice() umożliwia usuwanie elementów z określonego indeksu w tablicy. Mogę usunąć element z indeksu 2, używając tego kodu:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the element at index 2 using splice
let removedElement = continents.splice(2, 1);
console.log("Removed Element:", removedElement);
console.log("Updated Continents Array:", continents);

Ten kod mutuje oryginalną tablicę, a następnie zwraca nową tablicę. Kod zawiera także dwie instrukcje console.log, które sprawdzają „Usunięte elementy” i „Zaktualizowaną tablicę kontynentów”.

Kiedy uruchomimy cały kod, będzie to wynik:

Removed Element: [ 'North America' ]
Updated Continents Array: [
  'Asia',
  'Africa',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

#3. Usuń pierwszy element z tablicy za pomocą shift()

Metoda shift() usuwa pierwszy element z tablicy JavaScript. Ta metoda modyfikuje/niszczy oryginalną tablicę, a także zwraca usunięty element. Nadal możemy używać naszej tablicy kontynentów do tej demonstracji.

Możemy usunąć pierwszy element w następujący sposób:

let continents = ['Asia', 'Africa', 'North America', 'South America', 'Antarctica', 'Europe', 'Australia'];
// Remove the first element using shift
let removedContinent = continents.shift();
console.log("Removed Continent:", removedContinent);
console.log("Updated Continents Array:", continents);

Mamy dwie instrukcje console.log, z których jedna zwraca „Usunięty kontynent”, a druga „Zaktualizowane kontynenty”.

Jeśli uruchomimy kod, otrzymamy następujący wynik:

Removed Continent: Asia
Updated Continents Array: [

  'Africa',
  'North America',
  'South America',
  'Antarctica',
  'Europe',
  'Australia'
]

Dodaj element do tablicy w JavaScript

Do tej pory omówiliśmy, jak usunąć element z tablicy. Istnieją jednak przypadki, w których możesz chcieć dodać nowy element do tablicy. Oto niektóre z podejść, które można zastosować:

#1. Metoda push().

Użyjemy tego kodu dla tych przykładów:

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];

Za pomocą metody push() możemy dodać nowy kolor na końcu tablicy.

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];

// Add a new color to the array
colors.push('orange');

Nasza tablica będzie teraz miała sześć kolorów.

#2. Metoda unshift().

Możesz dodać nowy element na początek tablicy, używając metody unshift(). Nadal możemy używać tablicy kolorów.

let colors = ['red', 'blue', 'green', 'yellow', 'purple'];
// Add a new color to the array
colors.unshift('orange');
console.log(colors);

Jak widać na poniższym zrzucie ekranu, pomarańczowy jest teraz pierwszym kolorem w naszej tablicy:

Wniosek

Teraz rozumiesz, jak usunąć element z tablicy JavaScript i utworzyć wydajny kod. Wybór podejścia będzie zależał od celów końcowych, umiejętności i preferencji.

Metoda plasterek() jest idealnym wyborem, gdy szukasz prostego podejścia i nie chcesz mutować oryginalnej tablicy. Z drugiej strony uważam, że kombinacja metod plasterek() i concat() jest idealnym wyborem, jeśli chcesz usunąć dowolny element.

Sprawdź nasz artykuł na temat ściągawek JavaScript dla programistów.