Jak odstranit prvek z Array JavaScript a Craft Clean Code

Při programování v JavaScriptu se často pracuje s poli (Arrays). Jakým způsobem lze efektivně odstranit konkrétní prvek z takového pole?

V JavaScriptu je pole globálním objektem sloužícím k ukládání dat. Pole mohou představovat uspořádané kolekce prvků, obsahující nula nebo více datových typů. Pro přístup k jednotlivým prvkům pole se používají číselné indexy, které začínají od nuly.

V tomto článku si rozebereme syntaxi pro vytváření polí v JavaScriptu, důvody, proč může být nutné odebírat prvky, a různé metody pro odstranění prvků z polí, ať už s mutací, nebo bez mutace původního pole.

Syntaxe pro pole v JavaScriptu

Pole nám umožňují ukládat více hodnot do jedné proměnné. Například, pokud bychom chtěli reprezentovat sedm kontinentů, mohli bychom napsat:

const continent1 = "Asie";
const continent2 = "Afrika";
const continent3 = "Severní Amerika";
const continent4 = "Jižní Amerika";
const continent5 = "Antarktida";
const continent6 = "Evropa";
const continent7 = "Austrálie"

Tento kód lze ale zjednodušit a reprezentovat pomocí pole:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];

Místo sedmi proměnných máme pouze jednu a k reprezentaci našich hodnot používáme hranaté závorky.

Pro přístup k prvnímu kontinentu v seznamu bychom použili příkaz: console.log(continents[0]).

Pro testování svého kódu můžete využít online kompilátor JavaScriptu.

Získáme tak výstup:

Chcete-li získat přístup k poslední položce v poli, použijte příkaz: console.log(continents[6]).

Je důležité si uvědomit, že číslování indexů v JavaScriptu začíná od nuly.

Proč odstraňovat prvky z pole v JavaScriptu?

Pole v JavaScriptu mohou obsahovat řetězce, čísla a různé datové struktury. Někdy však může být nezbytné odstranit jeden nebo více prvků. Mezi důvody patří:

Zpracování dynamických dat: Pole mohou ukládat dynamické sady dat, ze kterých může být nutné odstraňovat prvky na základě aktuálních požadavků.
Zachování integrity dat: Odstraňováním zastaralých informací z polí zajistíte, že data zůstanou aktuální.
Správa paměti: Velikost kódu ovlivňuje výkon aplikace. Odstraňováním nepotřebných informací z polí lze kód optimalizovat.

Odstranění prvků bez změny původního pole

Pokud chcete odstranit prvek z pole, aniž byste měnili původní pole, je nejlepší vytvořit nové pole bez daného prvku. Tento přístup se hodí, pokud je pole předáváno jako parametr do funkce. Můžete použít následující metody:

#1. Odstranění prvku pomocí slice()

První prvek z našeho seznamu můžeme odstranit pomocí metody slice().

Náš původní kód:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];

Vytvoříme nové pole takto:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];
// Odstranění prvního prvku pomocí slice
let newContinents = continents.slice(1);
// Výpis nového pole
console.log(newContinents);

Výsledkem bude:

[
  'Afrika',
  'Severní Amerika',
  'Jižní Amerika',
  'Antarktida',
  'Evropa',
  'Austrálie'
]

#2. Odstranění prvního prvku pomocí filter()

Metoda filter() vytváří nové pole s prvky, které splňují určitou podmínku. Můžeme nastavit podmínku, která vyloučí první prvek z pole. Postup:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];
// Odstranění prvního prvku pomocí filter()
let newContinents = continents.filter((continent, index) => index !== 0);
console.log(newContinents);

Výstupem bude:

[
  'Afrika',
  'Severní Amerika',
  'Jižní Amerika',
  'Antarktida',
  'Evropa',
  'Austrálie'
]

#3. Použití slice() s concat() pro odstranění prvku z libovolné pozice

Předchozí příklad odstranil první prvek. Co když chceme odstranit například třetí nebo čtvrtý? Zkombinujeme metody slice() a concat(). V následujícím příkladu odstraníme čtvrtý prvek:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];

// Odstranění čtvrtého prvku pomocí slice a concat
let continentsWithoutFourth = continents.slice(0, 3).concat(continents.slice(4));
console.log(continentsWithoutFourth);

Výstup:

[
  'Asie',
  'Afrika',
  'Severní Amerika',
  'Antarktida',
  'Evropa',
  'Austrálie'
]

Metoda slice() vytvoří dvě nové části pole. Poté pomocí metody concat() tyto části spojíme, přičemž čtvrtý prvek vynecháme. Tento přístup můžeme použít pro odstranění libovolného prvku.

#4. Odstranění prvku pomocí cyklu for a push()

Pátý prvek můžeme vynechat pomocí cyklu for a metody push():

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];

// Odstranění pátého prvku pomocí cyklu for a push
let continentsWithoutFifth = [];
for (let i = 0; i < continents.length; i++) {
  if (i !== 4) {
    continentsWithoutFifth.push(continents[i]);
  }
}
console.log(continentsWithoutFifth);

Cyklus for iteruje přes každý prvek v poli. Podmínka if kontroluje, zda se aktuální index nerovná čtyřem. Pokud je podmínka splněna, prvek je vložen do nového pole.

Výstupem bude:

[
  'Asie',
  'Afrika',
  'Severní Amerika',
  'Jižní Amerika',
  'Evropa',
  'Austrálie'
]

Odstranění prvků změnou původního pole

Původní pole můžeme změnit odstraněním prvku. Mezi metody patří:

#1. Odstranění prvku pomocí pop()

Pro odstranění posledního prvku z pole kontinentů můžeme použít metodu pop(). Náš původní kód:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];

Odstranění posledního prvku:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];

// Odstranění posledního prvku pomocí pop
let lastContinent = continents.pop();

Po spuštění

console.log("Aktualizované pole kontinentů:", continents);

Aktualizované pole bude:

Aktualizované pole kontinentů: [
  'Asie',
  'Afrika',
  'Severní Amerika',
  'Jižní Amerika',
  'Antarktida',
  'Evropa'
]

Odstraněný prvek lze také zkontrolovat:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];
// Odstranění posledního prvku pomocí pop
let lastContinent = continents.pop();
console.log("Odstraněný kontinent:", lastContinent);

#2. Odstranění prvku pomocí splice()

Metoda splice() umožňuje odstranit prvky od určitého indexu. Následující kód odstraní prvek z indexu 2:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];
// Odstranění prvku z indexu 2 pomocí splice
let removedElement = continents.splice(2, 1);
console.log("Odstraněný prvek:", removedElement);
console.log("Aktualizované pole kontinentů:", continents);

Tento kód upraví původní pole a vrátí nové pole. Dva příkazy console.log slouží k zobrazení 'Odstraněný prvek' a 'Aktualizované pole kontinentů'.

Výstup:

Odstraněný prvek: [ 'Severní Amerika' ]
Aktualizované pole kontinentů: [
  'Asie',
  'Afrika',
  'Jižní Amerika',
  'Antarktida',
  'Evropa',
  'Austrálie'
]

#3. Odstranění prvního prvku pomocí shift()

Metoda shift() odstraní první prvek z pole. Tato metoda mění původní pole a vrací odstraněný prvek. Použijeme opět naše pole kontinentů.

Odstranění prvního prvku:

let continents = ['Asie', 'Afrika', 'Severní Amerika', 'Jižní Amerika', 'Antarktida', 'Evropa', 'Austrálie'];
// Odstranění prvního prvku pomocí shift
let removedContinent = continents.shift();
console.log("Odstraněný kontinent:", removedContinent);
console.log("Aktualizované pole kontinentů:", continents);

Máme zde dva příkazy console.log, jeden pro vrácení `Odstraněného kontinentu` a druhý pro `Aktualizované pole kontinentů`.

Výstup:

Odstraněný kontinent: Asie
Aktualizované pole kontinentů: [
  'Afrika',
  'Severní Amerika',
  'Jižní Amerika',
  'Antarktida',
  'Evropa',
  'Austrálie'
]

Přidání prvku do pole v JavaScriptu

Zatím jsme se zaměřili na odstraňování prvků. Někdy ale potřebujeme do pole přidat nový prvek. Zde jsou některé způsoby:

#1. Metoda push()

Pro následující příklady použijeme toto pole:

let colors = ['červená', 'modrá', 'zelená', 'žlutá', 'fialová'];

Novou barvu přidáme na konec pole pomocí push():

let colors = ['červená', 'modrá', 'zelená', 'žlutá', 'fialová'];

// Přidání nové barvy do pole
colors.push('oranžová');

Naše pole nyní bude mít šest barev.

#2. Metoda unshift()

Pomocí metody unshift() přidáme nový prvek na začátek pole. Opět použijeme pole barev.

let colors = ['červená', 'modrá', 'zelená', 'žlutá', 'fialová'];
// Přidání nové barvy na začátek pole
colors.unshift('oranžová');
console.log(colors);

Oranžová je nyní první barvou v poli:

Závěr

Nyní již rozumíte, jak odstraňovat prvky z polí v JavaScriptu a jak vytvářet efektivní kód. Volba metody záleží na cílech, dovednostech a preferencích.

Metoda slice() je vhodná, pokud hledáte jednoduché řešení bez mutace původního pole. Kombinace slice() a concat() je perfektní, pokud potřebujete odstranit libovolný prvek.

Doporučujeme také náš článek o cheat sheetech JavaScriptu pro vývojáře.