Dnešní vydání JavaScriptu 101 bude celé o polích. Pokud čtete příspěvek o datových typech pokrývajících pole, měli byste již znát alespoň základy. Pokud ne, nemějte obavy. Procvičíme si tvorbu jedno a n-tých dimenzionálních polí na začátku jen pro zahřátí. Poté se přesuneme k metodám, které lze aplikovat na pole a jak je používat. Začněme.
Vytváření polí
První věc, kterou uděláme, je procvičit si jednoduché vytváření polí. Pole můžete vytvořit třemi způsoby. První je prostřednictvím konstruktoru Array, který vám doporučuji nepoužívat, dále je deklarace prázdného pole a přidání položek později. Poslední cestou je projít druhou cestou, ale udělejte to všechno ve stejnou dobu. Níže jsou uvedeny příklady všech tří způsobů.
JavaScript:
// Array constructor – don't use this var arr1 = new Array(); arr1[0] = “first item”; arr1[1] = “second item”; arr1[2] = 3; console.log(arr1); // result - [“first item”, “second item”, 3] var arr2 = new Array(“first item”, “second item”, 3); console.log(arr2); // result - [“first item”, “second item”, 3] // Empty array first var arr3 = []; arr3[0] = true; arr3[1] = 1483; arr3[2] = “dodecahedron”; console.log(arr3); // result - [true, 1483, “dodecahedron”] // All at once var arr4 = [“front”, “HTML”,”back”,”PHP”, false]; console.log(arr4); // result - [“front”, “HTML”,”back”,”PHP”, false];
Přístup k položkám
Když jsme u kódování, procvičme si také přístup k jednotlivým položkám uvnitř pole. V tomto cvičení také vytvoříme několik vícerozměrných polí. Pamatujte, že položky uvnitř pole začínají indexem 0. V případě vícerozměrných polí přistupujete k položkám pomocí více indexů v oddělených hranatých závorkách. Například ve dvourozměrném poli první index označuje pole a druhý položku.
JavaScript:
var multiArr1 = [[“don't”,”make”, “me”, true], [14, 15, 92, 65, 35]]; console.log(multiArr1[1][3]); // result – 65 var multiArr2 = [[“Monday”, 51],[“Tuesday”, 895],[“Friday”, 13]]; console.log(multiArr2[2][0]); // result - “Friday” console.log(multiArr2[0]); // result - [“Moday”, 51] // creating empty array first var multiArr3 = []; multiArr3[0] = []; // create the first nested array to populate it later multiArr3[0][0] = "Session"; multiArr3[0][1] = 5986; multiArr3[0][2] = false; multiArr3[1] = []; // create the second nested array multiArr3[1][0] = false; multiArr3[1][1] = true; multiArr3[2] = []; // create the third nested array multiArr3[2][0] = "end"; console.log(multiArr3[0]); // result - ["Session", 5986, false] console.log(multiArr3[1]); // result - [false, true] console.log(multiArr3[2]); // result - [“end”]
Pokud chcete „vytisknout“ obsah celého pole do konzole namísto této metody po řádcích, můžete použít smyčku „for“. Ještě jsme nepokryli smyčky, takže vás s tím teď nebudu obtěžovat. Měli byste však alespoň vidět příklad, abyste se připravili na budoucí lekce.
JavaScript:
// create multidimensional array on one line
var multiArr3 = [["Session", 5986, “game”], [false, true], [“end”]];
// loop through the array and print individual items into console
for (var i = 0, j = multiArr3.length; i < j; i++) {
for (var k = 0, l = multiArr3[i].length; k < l; k++) {
console.log(multiArr3[i][k]);
}
}
// result:
"Session", 5986, “game”, false, true, “end” – poznámka:Každá položka bude na samostatném řádku. Použil jsem jednu vložku, abych ušetřil místo.
Metody
Co si myslíte o smyčce? Rozuměl jsi tomu? V každém případě pojďme vpřed k našemu hlavnímu tématu … Metody!
pop() a push()
První dvě metody, o kterých budeme mluvit, jsou pop() a push(). metoda pop() odstraní poslední položku v poli a také ji vrátí, takže pokud použijete console.log() nebo jiný příkaz, uvidíte odstraněnou položku. Tato metoda nebere žádný parametr. Jen pro zmínku, všechny metody, kterými se dnes budeme zabývat, mění původní pole.
JavaScript:
// pop() example var arr = [“end”, true, “scissors”, 159, “game”]; console.log(arr.pop()); // result - “game” console.log(arr); // result - [“end”, true, “scissors”, 159]; console.log(arr.pop()); // result - 159 console.log(arr); // result - [“end”, true, “scissors”];
Metoda push() vezme tolik parametrů, kolik chcete, a poté přidá tyto položky na konec pole. Vrátí délku nového pole.
JavaScript:
// push() example var arr = [“end”, true, “scissors”, 159]; console.log(arr.push(“Daidal”, 45)); // result - 7 //console.log(arr); // result - ["end", true, "scissors", 159, "game", "Daidal", 45] console.log(arr.push(892)); // result - 8 //console.log(arr); // result - ["end", true, "scissors", 159, "game", "Daidal", 45, 892]
shift() a unshift()
Metody shift() a unshift() fungují podobně jako pop() a push() až na jednu věc. Tyto dva začínají na začátku pole. shift() odstraní a vrátí první prvek v poli. unshift() přidá nový prvek na index nula (první pozici) v poli a vrátí novou délku. Když je do pole přidána nová položka, indexy předchozích položek se posunou o jednu (nebo o více v případě více přidaných položek).
JavaScript:
// shift() example var arr1 = [false, “fruit”, “Gecko”]; console.log(arr1.shift()); // result - false console.log(arr1); // result - [“fruit”, “Gecko”] // unshift() example var arr2 = [false, “fruit”, “Gecko”]; console.log(arr2.unshift(“object”)); // result - 4 console.log(arr2); // result - [“object”, false, “fruit”, “Gecko”];
Změna položek
Pokud chcete změnit nějakou položku v poli, vše, co musíte udělat, je použít název a index jako při přístupu k této položce, poté použít rovnítko a napsat novou hodnotu.
JavaScript:
var arr3 = [“Internet”, “thing”, “Carpenter”, “ghost”]; arr3[1] = 0; arr3[0] = “box”; console.log(arr3); // result - ["box", 0, "Carpenter", "ghost"]
smazat
Smazání použijte trochu jinou syntaxi než předchozí metody. Pro smazání položky použijete klíčové slovo „delete“ a název pole následovaný hranatými závorkami obsahujícími index dané položky. Není použita žádná tečka.
JavaScript:
var arr3 = ["Internet", "thing", "Carpenter", "ghost"]; delete arr3[0]; console.log(arr3); result - [undefined, "thing", "Carpenter", "ghost"]
– poznámka:Příkaz Delete ve skutečnosti položku nesmaže, pouze ji změní na nedefinovanou. Lepší praxí je použít metodu pop() výše nebo splice() níže.
splice()
Tuto metodu lze použít k přidání položek do pole nebo k jejich odstranění. Pro odstranění položky musíte použít dva parametry. První říká, na které pozici (indexu) by mělo odstraňování začít, a druhé kolik prvků chcete odstranit.
JavaScript:
// removing items var arr4 = [“gremlin”, “rock”, “paper”, “baron”]; arr4.splice(1, 1); // this will remove second item console.log(arr4); // result - ["gremlin", "paper", "baron"] var arr4 = [“gremlin”, “rock”, “paper”, “baron”]; arr4.splice(1, 3); // this will remove 3 items, beginning on index 1 console.log(arr4); // result - [“gremlin”]
– poznámka:Jak vidíte, položky jsou zcela odstraněny. Nic není nastaveno na „undefined“.
Na druhou stranu, pokud chcete přidat položky, použijete stejnou syntaxi plus položky, které chcete přidat. Stejně jako u unshift(), když přidáte položku do pole, zbytek pouze přesune další index.
JavaScript:
// adding items var arr5 = [2, “wins”]; arr5.splice(1, 0, “thrown”, 65, 23); // start on index 1, remove 0 items and add “thrown”, 65, 23 console.log(arr5); // result - [2, "thrown", 65, 23, "wins"] // you can also replace item by changing the second parameter var arr5 = [2, “wins”]; arr5.splice(1, 1, “thrown”, 65, 23); // start on index 1, remove 1 item (“wins”) and add “thrown”, 65, 23 console.log(arr5); // result - [2, "thrown", 65, 23] var arr6 = [false, 65, 89, “alf”, “house”]; arr6.splice(2,3, “get”, true, “ball”); // start on index 2, remove 3 items and add “get”, true, “ball” console.log(arr6); // result - [false, 65, "get", true, "ball"]
Shrnutí
To je pro dnešek vše. První část pole je za námi a stačila jen mírná bolest hlavy a bolavé prsty. V další části skončíme tím, že se seznámíme s několika zbývajícími metodami. Doufám, že jsi vše dobře pochopil. V případě jakýchkoli problémů jsem tu, abych vám pomohl. AD