Vícerozměrná/vnořená pole v JavaScriptu [Průvodce]

Tato příručka vám chce stručně ukázat, jak lze vytvářet a používat vícerozměrná pole v programovacím jazyce JavaScript.

Co jsou pole?

Pole jsou klíčovou součástí v jakékoli aplikaci, kterou si můžete chtít vytvořit – pole vám umožňují uložit uspořádaný seznam proměnných nebo hodnot libovolné délky do jediné proměnné – připravené k iteraci, zobrazení nebo jinému zpracování.

Pole může například obsahovat seznam kontaktů pro aplikaci pro rychlé zasílání zpráv nebo může obsahovat seznam položek, které hráč shromáždil ve videohře.

Pole tvoří páteř téměř každého programu, který můžete napsat v PHP nebo jakémkoli jiném programovacím jazyce.

Pole jsou typem proměnné, která obsahuje uspořádaný seznam hodnot. Tyto hodnoty mohou být libovolného typu a označují se jako elementy nebo položky v poli.

Indexy pole

Jak jsou pole uspořádána, má každý prvek v poli číselnou pozici, která určuje, kde se v poli objeví.

Říká se tomu index . Indexy začněte počítat na pozici 0 , takže první položka v poli je na indexu 0 , druhá položka je na indexu 1 a tak dále.

Co jsou vícerozměrná pole?

Pole jsou jednorozměrná. Jedná se o seznam hodnot srovnatelný s jedním sloupcem v tabulce nebo tabulce

Pole však mohou obsahovat další pole. To přidává druhý rozměr, jako je přidání řádků do tabulky kromě sloupce.

To je pravděpodobně lépe znázorněno vizuálně:

var oneDimensionalArray = ['a', 'b', 'c', 'd];

var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'a4'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3', 'c4']
];

Proměnná oneDimensionalArray je jednorozměrné pole – pole obsahující seznam písmen.

twoDimensionalARarray je však pole obsahující jiná pole . Lze s tím zacházet jako s tabulkou s řádky a sloupci – dvourozměrné. Naformátoval jsem deklaraci polí do řádků a sloupců, takže můžete vidět účinek. Hodnota b1 se nachází v prvním sloupci druhého řádku.

Počet polí, které lze vnořit, není omezen. Počet vnořených polí se označuje jako hloubka vícerozměrného pole. Vícerozměrné pole, které má pole, uvnitř pole, uvnitř pole má hloubku 3, je trojrozměrné pole (bohužel, po dvourozměrných polích je trochu těžké je ilustrovat ).

K čemu se multidimenzionální pole používají v JavaScriptu?

Jak je ukázáno výše, k reprezentaci tabelovaných dat se nejčastěji používají vícerozměrná pole. Každý prvek pole obsahující data pro jeden řádek nebo záznam.

Vícerozměrná pole se také běžně používají při vývoji videoher. Mřížková povaha dvourozměrných polí je perfektní pro budování dvourozměrných herních oblastí, přičemž každý prvek pole obsahuje informace o tom, co by mělo být umístěno v daném bodě mřížky (strom, hráč, tráva atd.). Tyto mřížky by také mohly být naskládány tak, aby se herní prvky mohly objevovat na sobě a vytvářet tak ještě složitější vícerozměrná pole.

Zní to složitě, ale protože jsou všechna pole indexována, je snadné spravovat, co v nich je podle jejich pozice.

Pole lze také vyhledávat, přeskupovat, klonovat a jinak zpracovávat.

Deklarování vícerozměrných polí

Již dříve v tomto článku jste viděli, jak jsou vícerozměrná pole deklarována v JavaScriptu. Níže je deklarováno dvourozměrné pole:

var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'a4'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3', 'c4']
];

Opět se jedná o pole obsahující několik dílčích polí. Vnější pole obsahující řádky a podpole obsahující hodnoty sloupců.

Všimněte si, že dílčí pole ve vícerozměrném poli ne musí mít stejnou velikost! Níže uvedený text tedy dokonale platí:

var twoDimensionalArray = [
    ['a1', 'a2'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3']
];

To, zda pole různých délek bude či nebude představovat problém, bude záviset na tom, čeho se snažíte programově dosáhnout.

Přístup k hodnotám ve vícerozměrných polích

Všechna pole v JavaScriptu jsou indexována. Všechny indexy jsou naplněny, takže pokud je prvek z pole odstraněn, je znovu indexován, takže v seznamu indexů pro toto pole nejsou přeskočena žádná čísla.

V jednorozměrném poli byste pro přístup k hodnotě podle jejího indexu udělali následující:

oneDimensionalArray[1] // Access the second value in a single dimensional array

Hranaté závorky se používají za názvem proměnné pole k určení indexu prvku, který má být načten.

Vícerozměrná pole fungují přesně stejným způsobem – stačí zadat index prvního pole, následovaný indexem všech dílčích polí, ke kterým chcete přistupovat, dokud nedosáhnete hloubky hodnoty, kterou chcete získat.

twoDimensionalArray[1][0] // Access the value on the second row (index 1), first column (index 0) from a two dimensional array

Výše jsou definovány dva indexy, první pro nejvzdálenější pole ve dvourozměrném poli zobrazeném výše a druhý pro pole na druhé úrovni pole. Tím se načte hodnota b1 .

Pokud by vaše pole mělo tři úrovně, jednoduše byste nadále určovali indexy:

threeDimensionalArray[1][0][2] // Access the value of a three dimensional array

Opakování/procházení vícerozměrných polí

JavaScript foreach() smyčka se používá k iteraci přes pole.

Vícerozměrná pole, která jsou vnořenými poli, lze iterovat vnořením více foreach() smyčky. To je nejlépe demonstrováno na příkladu kódu:

// Declare a multidimensional array
var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'a4'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3', 'c4']
];

// Loop through the outermost array
twoDimensionalArray.forEach(function(rowValue, rowIndex){

    // Loop through each of the sub-arrays
    rowValue.forEach(function(columnValue, columnIndex){

        // Print the index of the outer and inner arrays
        console.log('row: ' + rowIndex + ', column: ' + columnIndex); 

        // Print the value stored at the current row, column position
        console.log(columnValue);

    });
    
});

Výše uvedený kód vypíše:

row: 0, column: 0 
a1
row: 0, column: 1 
a2
row: 0, column: 2 
a3
row: 0, column: 3 
a4
row: 1, column: 0 
b1
row: 1, column: 1 
b2
row: 1, column: 2 
b3
row: 1, column: 3 
b4
row: 2, column: 0 
c1
row: 2, column: 1 
c2
row: 2, column: 2 
c3
row: 2, column: 3 
c4

Každé z dílčích polí prochází prvním foreach() smyčka v pořadí, přičemž každý prvek v těchto polích prochází druhým foreach() smyčka před první smyčkou foreach přecházející na další dílčí pole.

Vyhledávání vícerozměrných polí

Je také možné prohledávat vnořená/multidimenzionální pole pomocí kombinace vnořených smyček a vestavěných metod vyhledávání polí JavaScriptu.

Nalezení první odpovídající hodnoty pomocí find() Metoda

// Declare a multidimensional array
var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'a4'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'c3', 'c4']
];

// Declare a variable to hold the search result when it is found
var found;

// Loop through the outermost array
for (const [rowIndex, rowValue] of twoDimensionalArray.entries()) {

    // Use the find() method to find the first matching value in the sub-array and assign it to the found variable
    found = rowValue.find(function(columnValue, columnIndex){
        
        if(columnValue == 'b3') {
            console.log('Found! row: ' + rowIndex + ', column: ' + columnIndex); 
            return true;
        } else {
            return false;
        }

    }); 

    // If a result has been found we can break out of the for loop as the job is done
    if(typeof found !== 'undefined') break;
    
};

console.log(found); // Confirm the result

Výsledkem bude:

Found! row: 1, column: 2 
b3

Existují způsoby, jak toho dosáhnout, které vyžadují méně řádků kódu, ale to ilustruje, co se děje pod kapotou a jak se pole procházejí.

Nalezení všech odpovídajících hodnot pomocí filtr() Metoda

// Declare a multidimensional array - note there are some duplicate 'b2' values in this one!
var twoDimensionalArray = [
    ['a1', 'a2', 'a3', 'b2'],
    ['b1', 'b2', 'b3', 'b4'],
    ['c1', 'c2', 'b2', 'c4']
];

// Declare a variable to hold the search results when it is found - there may be multiple results, so it is an array
var results = [];

// Loop through the outermost array
for (const [rowIndex, rowValue] of twoDimensionalArray.entries()) {

    // Find all matching values in the sub array using the filter() function
    var found = rowValue.filter(function(columnValue, columnIndex){
        
        if(columnValue == 'b2') {
            console.log('Found! row: ' + rowIndex + ', column: ' + columnIndex); 
            return true;
        } else {
            return false;
        }

    }); 

    // Merge what was found in this iteration with the final results
    results = results.concat(found);
    
};

console.log(results); // Confirm the results

Výsledkem bude:

Found! row: 0, column: 3
Found! row: 1, column: 1
Found! row: 2, column: 2
Array(3) [ "b2", "b2", "b2" ]

Což potvrzuje, že tři prvky pole s hodnotou b2 z vícerozměrného pole.

Klonování/kopírování vícerozměrných polí

Klonování a kopírování polí, zejména vícerozměrných polí, vyžaduje trochu pozornosti – není to tak jednoduché, jak se v JavaScriptu zdá!

Doporučuji přečíst si výše odkazovaný článek a zjistit proč Pole JavaScriptu nelze jednoduše zkopírovat přiřazením jejich hodnoty nové proměnné, ale pokud chcete vidět, jak to udělat, zde je:

var multiDimensionalArrayCopy = JSON.parse(JSON.stringify(multiDimensionalArray));

Tím vytvoříte novou proměnnou multiDimensionalArrayCopy , což bude úplný klon/kopie proměnné s názvem multiDimensionalArray .


No