Jak odstranit prvek z Array JavaScript a Craft Clean Code

Při psaní JavaScript kódu se často setkáte s Arrays. Jak můžete odstranit prvek z pole v JavaScriptu?

V JavaScriptu je pole typ globálního objektu, který můžete použít k ukládání dat. Pole v JavaScriptu může obsahovat seznam obsahující nula nebo více datových typů nebo uspořádanou kolekci. Pro přístup ke konkrétním položkám z pole používáme číslované indexy začínající od 0.

V tomto článku popíšu syntaxi pro vytváření polí v JavaScriptu, proč byste měli odstranit prvek z pole v JavaScriptu a různé přístupy k odstranění prvků z polí v JavaScriptu mutací nebo bez mutace původního pole.

Table of Contents

Syntaxe pro pole JavaScriptu

Pole nám umožňují uložit více cenností do jedné proměnné. Například, pokud chceme reprezentovat sedm kontinentů v JavaScriptu, můžeme mít tento kód:

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

Tento kód však můžeme zhustit a reprezentovat v poli následovně;

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

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

Pokud chcete získat přístup na první kontinent na našem seznamu, můžete spustit tento příkaz; console.log(kontinenty[0])

Můžete použít náš bezplatný online kompilátor JavaScriptu otestovat svůj kód.

Toto získáte:

Pokud chcete získat přístup k poslední položce v našem poli, spustíte tento příkaz; console.log(kontinenty[6]).

Upozorňujeme, že číslování v JavaScriptu začíná od 0.

Jak posílat zprávy skupině v Mailu na iPhonu nebo iPadu

Proč odebrat prvek z pole JavaScript?

Pole JavaScriptu můžete použít s řetězci, čísly a různými datovými strukturami. Existují však případy, kdy může být nutné odstranit jeden nebo několik prvků z pole. Zde jsou některé ze scénářů:

Zpracování dynamických dat: Dynamické sady dat můžete ukládat do polí. Možná budete muset odstranit prvek/prvky z pole na základě měnících se požadavků.
Zachování integrity dat: Můžete odstranit/odebrat zastaralé informace ze svých polí, abyste zajistili, že vaše datové struktury budou aktuální.
Správa paměti: Velikost vašeho kódu ovlivňuje výkon vaší aplikace. Můžete odstranit nepotřebné informace ze svých polí a optimalizovat svůj kód.

Odstraňte prvky bez změny původního pole

Pokud chcete odstranit prvek bez mutace původního pole, nejlepším postupem je vytvořit nové pole bez prvku, který chcete odstranit. Takový přístup vyhovuje poli jako parametr funkce. Můžete použít následující přístupy:

#1. Odebrat prvek pomocí slice()

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

Toto je náš původní kód:

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

Vytvoříme nové pole takto:

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

Jako výstup dostanete toto:

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

#2. Odstraňte první prvek z pole pomocí filtru()

Metoda filtru vytvoří nové pole, kde prvky musí splnit určitou podmínku. Mohu vytvořit podmínku, která vyloučí první prvek z našeho pole. Takto toho mohu dosáhnout:

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

Pokud spustím kód, dostanu toto:

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

#3. Použijte slice() spolu s concat() k odstranění prvku z libovolné pozice

Náš první příklad odstraní první prvek z našeho seznamu. Co když chceme odstranit, řekněme, třetí nebo čtvrtý prvek z našeho pole? Aby k tomu došlo, musíme zkombinovat metody slice() s metodami concat(). V následujícím příkladu odeberu čtvrtý prvek následovně:

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

Pokud spustím kód, dostaneme toto jako výstup:

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

Metoda slice() vytvoří dva nové řezy. Poté použijeme metodu concat() ke spojení dvou řezů, ale vynecháme čtvrtý prvek. Tento přístup můžete použít s jakýmkoli prvkem v poli.

Maximální využití čísel s desetinnými místy

#4. Odstraňte prvek pomocí smyčky for spolu s push()

Pátý prvek můžeme z našeho seznamu vynechat pomocí cyklu for a metody push(). Podívejte se na tento kód:

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

Smyčka for iteruje přes každý prvek v našem poli kontinentů. Příkaz if používáme ke kontrole, zda aktuální index není roven čtyřem. Pokud je podmínka pravdivá, prvky se vloží do nového pole.

Toto dostaneme, když spustíte kód:

[

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

Odstraňte prvky změnou původního pole

Můžete mutovat nebo změnit strukturu původního pole odstraněním prvku. Toto jsou některé z přístupů:

#1. Odeberte prvek z pole pomocí pop()

K odstranění posledního prvku z našeho pole kontinentů můžete použít metodu pop(). Náš původní kód je

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

Můžeme mít tento kód k odstranění posledního prvku:

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

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

Pokud spustíte:

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

Aktualizovaný seznam bude:

Updated Continents Array: [

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

Odebraný prvek můžete také zkontrolovat pomocí tohoto kódu:

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. Odstraňte prvek z pole pomocí splice()

Metoda splice () umožňuje odstranit prvky z určitého indexu ve vašem poli. Pomocí tohoto kódu mohu odstranit prvek z indexu 2:

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

Tento kód zmutuje původní pole a poté vrátí pole nové. Kód má také dva příkazy console.log, které kontrolují ‚Removed Elements‘ a ‚Updated Continents Array‘.

Jak hackeři prodávají a obchodují s vašimi daty v Metaverse?

Když spustíme celý kód, bude to výstup:

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

#3. Odstraňte první prvek z pole pomocí shift()

Metoda shift () odstraní první prvek z pole JavaScriptu. Tato metoda upraví/zničí původní pole a také vrátí odstraněný prvek. Pro tuto demonstraci můžeme stále použít naše pole kontinentů.

První prvek můžeme odstranit následovně:

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

Máme dva příkazy console.log, kde jeden vrací `Odstraněný kontinent‘, zatímco druhý vrací ‚Aktualizované kontinenty‘.

Pokud spustíme kód, dostaneme tento výstup:

Removed Continent: Asia
Updated Continents Array: [

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

Přidejte prvek do pole v JavaScriptu

Dosud jsme diskutovali o tom, jak odstranit prvek z pole. Existují však případy, kdy můžete chtít přidat nový prvek do pole. Zde jsou některé z přístupů k použití:

#1. Metoda push().

Tento kód použijeme pro tyto příklady:

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

Na konec pole můžeme přidat novou barvu pomocí metody push().

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

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

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

#2. Metoda unshift().

Pomocí metody unshift() můžete přidat nový prvek na začátek pole. Stále můžeme použít pole barev.

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

Jak můžete vidět na následujícím snímku obrazovky, oranžová je nyní první barvou v našem poli:

Závěr

Nyní chápete, jak odstranit prvek v poli JavaScript a vytvořit efektivní kód. Výběr přístupu bude záviset na vašich konečných cílech, dovednostech a preferencích.

Metoda slice() je perfektní volbou, když hledáte jednoduchý přístup a nechcete mutovat původní pole. Na druhou stranu jsem zjistil, že kombinace metod slice() a concat() je perfektní volbou, pokud chcete odstranit jakýkoli prvek.

Podívejte se na náš článek o cheat sheetech JavaScriptu pro vývojáře.