Tento článek byl původně napsán pro DigitalOcean .
Úvod
Pole v JavaScriptu je typ globálního objektu, který se používá k ukládání dat. Pole se skládají z uspořádané kolekce nebo seznamu obsahujícího nula nebo více datových typů a používají číslované indexy počínaje 0 pro přístup ke konkrétním položkám.
Pole jsou velmi užitečná, protože ukládají více hodnot do jedné proměnné, což může zhušťovat a organizovat náš kód, takže je čitelnější a udržovatelnější. Pole mohou obsahovat libovolný datový typ, včetně čísel, řetězců a objektů.
Chcete-li demonstrovat, jak může být pole užitečné, zvažte přiřazení pěti světových oceánů k jejich vlastním proměnným.
// Assign the five oceans to five variables
const ocean1 = 'Pacific'
const ocean2 = 'Atlantic'
const ocean3 = 'Indian'
const ocean4 = 'Arctic'
const ocean5 = 'Antarctic'Tato metoda je velmi podrobná a může být rychle obtížné ji udržovat a sledovat. Pomocí polí můžeme naše data zjednodušit.
// Assign the five oceans
let oceans = ['Pacific', 'Atlantic', 'Indian', 'Arctic', 'Antarctic']
Namísto vytváření pěti samostatných proměnných nyní máme jednu proměnnou, která obsahuje všech pět prvků. Použili jsme hranaté závorky ([] ) a vytvořte pole.
Přístup ke konkrétní položce je stejně snadný jako připojení indexu k proměnné.
// Print out the first item of the oceans array
oceans[0]PacificV tomto článku se naučíme, jak vytvářet pole, jak jsou indexována, jak přidávat, upravovat, odstraňovat nebo přistupovat k položkám v poli a jak procházet polemi.
Vytvoření pole
Existují dva způsoby, jak vytvořit pole v JavaScriptu. Literál pole, který používá hranaté závorky, a konstruktor pole, který používá new klíčové slovo.
Pojďme si ukázat, jak vytvořit pole druhů žraloků pomocí konstruktoru pole, který je inicializován new Array() .
// Initialize array of shark species with array constructor
let sharks = new Array('Hammerhead', 'Great White', 'Tiger')
Nyní jsou zde stejná data vytvořená pomocí literálu pole, který je inicializován pomocí [] .
// Initialize array of shark species with array literal
let sharks = ['Hammerhead', 'Great White', 'Tiger']
Obě metody vytvoří pole. Metoda maticového literálu (hranaté závorky) je však mnohem běžnější a preferovanější, jako je new Array() metoda konstruktoru může mít nekonzistence a neočekávané výsledky. Je užitečné znát konstruktor pole pro případ, že se s ním setkáte.
Můžeme vytisknout celé pole, které bude zobrazovat totéž jako náš vstup.
// Print out the entire sharks array
sharks;['Hammerhead', 'Great White', 'Tiger']Pole se často používají k seskupování seznamů podobných datových typů, ale technicky mohou obsahovat libovolnou hodnotu nebo kombinaci hodnot, včetně jiných polí.
// Initialize array of mixed datatypes
let mixedData = ['String', null, 7, ['another', 'array']]Po vytvoření pole s nimi můžeme manipulovat mnoha způsoby, ale nejprve musíme pochopit, jak jsou pole indexována.
Indexování polí
Pokud jste se dozvěděli o indexování a manipulaci s řetězci v JavaScriptu, možná jste již obeznámeni s konceptem indexování polí, protože řetězec je podobný poli.
Pole nemají páry název/hodnota. Místo toho jsou indexovány celočíselnými hodnotami začínajícími 0 . Zde je příklad pole přiřazeného k seaCreatures .
let seaCreatures = ['octopus', 'squid', 'shark', 'sea horse', 'starfish']
Zde je rozpis jednotlivých položek v seaCreatures pole je indexováno.
| chobotnice | chobotnice | žralok | mořský koník | hvězdice |
|---|---|---|---|---|
| 0 | 1 | 2 | 3 | 4 |
První položka v poli je octopus , který je indexován na 0 . Poslední položka je starfish , který je indexován na 4 . Počítání začíná 0 v indexech, což je v rozporu s naší přirozenou intuicí začít počítat od jedné, takže je třeba věnovat zvláštní pozornost tomu, abyste si to pamatovali, dokud se to nestane přirozeným.
Můžeme zjistit, kolik položek je v poli pomocí length vlastnost.
seaCreatures.length5
Ačkoli indexy seaCreatures sestávají z 0 na 4 , length property vypíše skutečné množství položek v poli, počínaje jedničkou.
Pokud chceme zjistit indexové číslo konkrétní položky v poli, například sea horse , můžeme použít indexOf() metoda.
seaCreatures.indexOf('sea horse')3
Pokud není číslo indexu nalezeno, například pro hodnotu, která neexistuje, konzole vrátí -1 .
Přístup k položkám v poli
K položce v poli JavaScript se přistupuje odkazem na číslo indexu položky v hranatých závorkách.
seaCreatures[1]squid
Známe 0 vždy vypíše první položku v poli. Můžeme také najít poslední položku v poli provedením operace na length vlastnost a použít ji jako nové číslo indexu.
const lastIndex = seaCreatures.length - 1
seaCreatures[lastIndex]starfish
Pokus o přístup k neexistující položce vrátí undefined .
seaCreatures[10]undefinedPro přístup k položkám ve vnořeném poli byste přidali další číslo indexu, které by odpovídalo vnitřnímu poli.
let nestedArray = [
['salmon', 'halibut'],
['coral', 'reef'],
]
nestedArray[1][0]coral
Ve výše uvedeném příkladu jsme přistupovali k poli na pozici 1 z nestedArray proměnnou a poté položku na pozici 0 ve vnitřním poli.
Přidání položky do pole
V našem seaCreatures měli jsme pět položek, které se skládaly z indexů z 0 na 4 . Pokud chceme do pole přidat novou položku, můžeme přiřadit hodnotu dalšímu indexu.
seaCreatures[5] = 'whale'
seaCreatures[ 'octopus',
'squid',
'shark',
'sea horse',
'starfish',
'whale' ]Pokud přidáme položku a omylem přeskočíme index, vytvoří se v poli nedefinovaná položka.
seaCreatures[7] = 'pufferfish'
seaCreatures[ 'octopus',
'squid',
'shark',
'sea horse',
'starfish',
,
'whale',
'pufferfish' ]
Pokus o přístup k další položce pole vrátí undefined .
seaCreatures[6]undefined
Podobným problémům se lze vyhnout pomocí push() metoda, která přidá položku na konec pole.
// Append lobster to the end of the seaCreatures array
seaCreatures.push('lobster')
seaCreatures[ 'octopus',
'squid',
'shark',
'sea horse',
'starfish',
,
'whale',
'pufferfish',
'lobster' ]
Na druhém konci spektra je unshift() metoda přidá položku na začátek pole.
// Append otter to the beginning of the seaCreatures array
seaCreatures.unshift('otter')
seaCreatures[ 'otter',
'octopus',
'squid',
'shark',
'sea horse',
'starfish',
,
'whale',
'pufferfish',
'lobster' ]
Mezi push() a unshift() budete moci přidávat položky na začátek a konec pole.
Odebrání položky z pole
Když chceme odstranit konkrétní položku z pole, použijeme splice() metoda. V seaCreatures pole, omylem jsme dříve vytvořili nedefinovanou položku pole, takže ji nyní odstraníme.
seaCreatures.splice(6, 1)
seaCreatures[ 'otter',
'octopus',
'squid',
'shark',
'sea horse',
'starfish',
'whale',
'pufferfish',
'lobster' ]
V splice() první parametr představuje číslo indexu, které má být odstraněno, a druhý parametr je počet položek, které se mají odstranit. Vložili jsme 1 , což znamená, že bude odstraněna pouze jedna položka.
splice() metoda změní původní proměnnou. Pokud chcete, aby původní proměnná zůstala nezměněna, použijte slice() a výsledek přiřaďte nové proměnné.
let newArray = slice(6, 1)
pop() metoda odstraní poslední položku v poli.
// Remove the last item from the seaCreatures array
seaCreatures.pop()
seaCreatures[ 'otter',
'octopus',
'squid',
'shark',
'sea horse',
'starfish',
'whale',
'pufferfish' ]
lobster byla odstraněna jako poslední položka pole. Abychom odstranili první položku pole, použijeme shift() metoda.
// Remove the first item from the seaCreatures array
seaCreatures.shift()
seaCreatures[ 'octopus',
'squid',
'shark',
'sea horse',
'starfish',
'whale',
'pufferfish' ]
Pomocí pop() a shift() , můžeme odstranit položky ze začátku a konce polí. Pomocí pop() je preferováno, kdekoli je to možné, protože zbytek položek v poli si ponechává stejné indexové číslo.
Úprava položek v polích
Jakoukoli hodnotu v poli můžeme přepsat přiřazením nové hodnoty pomocí operátoru přiřazení, stejně jako u běžné proměnné.
// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = 'manatee'
seaCreatures[ 'manatee',
'squid',
'shark',
'sea horse',
'starfish',
'whale',
'pufferfish' ]
Dalším způsobem, jak upravit hodnotu, je použití splice() metoda s novým parametrem. Pokud bychom chtěli změnit hodnotu sea horse , což je položka na indexu 3 , mohli bychom ji odstranit a na její místo přidat novou položku.
// Replace sea horse with sea lion using splice method
seaCreatures.splice(3, 1, 'sea lion')
seaCreatures()[ 'manatee',
'squid',
'shark',
'sea lion',
'starfish',
'whale',
'pufferfish' ]
Ve výše uvedeném příkladu jsme odstranili sea horse z pole a vložil novou hodnotu do indexu 3 .
Procházení polem
Můžeme procházet celým polem pomocí for klíčové slovo s využitím length vlastnictví. V tomto příkladu můžeme vytvořit pole shellfish a vytiskněte každé číslo indexu i každou hodnotu do konzole.
// Create an array of shellfish species
let shellfish = ['oyster', 'shrimp', 'clam', 'mussel']
// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
console.log(i, shellfish[i])
}0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'
Můžeme také použít for...of smyčka, novější funkce JavaScriptu.
// Create an array of aquatic mammals
let mammals = ['dolphin', 'whale', 'otter']
// Loop through each mammal
for (let mammal of mammals) {
console.log(mammal)
}dolphin
whale
otter
for...of loop nenačte indexové číslo prvků v poli, ale je to obecně jednodušší a výstižnější způsob, jak procházet polem. Použití smyček je mimořádně užitečné pro tisk celé hodnoty pole, například při zobrazování položek z databáze na webu.
Závěr
Pole jsou extrémně univerzální a základní součástí programování v JavaScriptu. V tomto článku jsme se naučili, jak vytvořit pole, jak jsou pole indexována a některé z nejběžnějších úkolů práce v polích, jako je vytváření, odebírání a úpravy položek. Také jsme se naučili dvě metody procházení polí, které se používají jako běžná metoda zobrazení dat.