Úvod
Při práci s jakýmkoli programovacím jazykem budete pravděpodobně potřebovat nějakou funkcionalitu, která není do tohoto jazyka nativně integrována. Buď je tedy implementujete sami, nebo se obrátíte na použití různých modulů či knihoven.
To přímo ovlivňuje efektivitu vaší aplikace (vyšší využití paměti, více požadavků HTTP atd.). Aby tomu zabránili, vývojáři pracující na vyspělých programovacích jazycích integrovali funkce do jazyků, aby nemuseli používat externí knihovny pro běžné úkoly.
Seznámení s těmito vestavěnými funkcemi je považováno za základní znalost jazyka a stále se můžete dostat docela daleko pouze s vestavěnými funkcemi. Samozřejmě budete s největší pravděpodobností nakonec používat některé moduly/knihovny pro určité úkoly.
Datové typy, struktury a objekty JavaScriptu s vestavěnými funkcemi
V JavaScriptu existuje osm datových typů :
- Řetězec
- Číslo
- Booleovská hodnota
- Null
- Nedefinováno
- Symbol
- BigInt
- Objekt
Ne každý datový typ má však vestavěnou funkci. Jsou definovány pouze pro:String, Number a Boolean .
Pokud jde o Datové struktury v JavaScriptu, sedm nejpoužívanějších struktur jsou:
- Pole
- Zásobník
- Fronta
- Propojený seznam
- Strom
- Graf
- Hashtable
Podobně jako u datových typů jsou v datových strukturách vestavěné funkce definovány pouze na Poli . Nakonec Objekty v JavaScriptu mají také vestavěné funkce, jako je Date, RegExp a Math .
V této příručce se zaměříme konkrétně na pole.
Vestavěné funkce řetězců v JavaScriptu
Pole v JavaScriptu je globální objekt podobný seznamu. Slouží k ukládání dat různého typu. Elementy pole JavaScriptu nemusí být stejného typu, mohou být libovolné. Tato vlastnost datových struktur podobných seznamu je známá také jako heterogenita - pole jsou heterogenní .
Pole jsou založena na indexu a začínají na 0 , což je standardní implementace v různých programovacích jazycích:
let myArray1 = [x1, x2, ... , xN];
let myArray2 = new Array(x1, x2, ... , xN);
let myArray3 = Array(x1, x2, ... , xN);
Vzhledem k tomu, jak běžně se pole používají v každodenní práci, je seznámení se s funkcemi používanými k přidávání, odebírání a jinému zpracování nebo manipulaci s prvky v nich považováno za základní znalost.
push()
push(element) funkce přidá nový element na konec pole:
let array = [1, 2, 3, 4];
array.push(5);
console.log(array); // Output: [1, 2, 3, 4, 5]
Obvykle push() akce je spojena se zásobníky a frontami – nikoli s poli v implementaci JavaScriptu – tato operace se nazývá push() .
Pole mají být co nejobecnější a ve skutečnosti můžete pole použít k implementaci Queue nebo Stack v JavaScriptu, protože se nejedná o vestavěné typy a budete je muset implementovat sami nebo použijte externí knihovnu.
Sloučení polí pomocí push()
Navíc pomocí push() funkce vedle operátoru spread, můžete sloučit více polí dohromady:
let array1 = [1, 2, 3, 4];
let array2 = [5, 6, 7, 8]
array1.push(...array2);
console.log(array1); // Output: [ 1, 2, 3, 4, 5, 6, 7, 8 ]
pop()
pop() lze použít k odstranění posledního prvku pole. Vedle push() , pop() je jednou ze tří integrálních metod používaných k implementaci front a zásobníků a lze ji použít i mimo tento kontext:
let array = [1, 2, 3, 4];
let x = array.pop();
console.log(x); // Output: 4
console.log(array); // Output: [1, 2, 3]
pop() funkce vrací vyskakovaný prvek, takže jej můžete znovu použít pro jakýkoli jiný účel. Můžete například pop() prvky přímo do nového pole nebo jiné datové struktury, nebo je uložte do databáze.
shift()
shift() odstraní první prvek z pole a vrátí jej - v podstatě opak pop() . Pomocí těchto tří můžete implementovat FIFO (First-In-First-Out) a LIFO (Last-In-First-Out) struktury:
let array = [1, 2, 3];
let x = array.shift();
console.log(x); // Output: 1
console.log(array); // Output: [2, 3]
sort()
sort() Funkce třídí prvky pole na základě jejich přirozeného vzestupného pořadí.
V závislosti na typu dat - přirozený řád má různé významy. Pro Number instance, lze je porovnat pomocí < , > a podobné srovnávací operátory. Řetězce se porovnávají abecedně .
Stojí za zmínku, že sort() seřadí pole na místě , změnou původního pole, takže pokud chcete zachovat i originál - musíte provést hloubkovou kopii a nejen zachovat odkaz, protože odkaz bude také ukazovat na změněné pole:
let array1 = [1, 3, 2, 0];
let array2 = ["JavaScript", "Java", "Python"];
let array3 = ["b", 3, 1, "c", "a"];
let originalArray1 = [...array1];
console.log('Sorted array1:', array1.sort());
console.log('Sorted array2:', array2.sort());
console.log('Sorted array3:', array3.sort());
console.log('Original array1:', originalArray1);
Výsledkem je:
Sorted array1: [ 0, 1, 2, 3 ]
Sorted array2: [ 'Java', 'JavaScript', 'Python' ]
Sorted array3: [ 1, 3, 'a', 'b', 'c' ]
Original array1: [ 1, 3, 2, 0 ]
Můžete také dodat třídicí funkci s vlastní implementací do sort() funkce, která přepíše výchozí chování. Funkce by měla přijmout dva argumenty a vrátit 1 , 0 nebo -1 na základě jejich srovnání.
Pokud je první hodnota menší než druhá, 1 je vráceno. Pokud je první hodnota větší než druhá -1 je vráceno. Pokud jsou euqal 0 je vráceno.
Na základě tohoto L
- Pokud funkce vrátí hodnotu větší 0 – druhý prvek je seřazen před první.
- Pokud funkce vrátí hodnotu menší než 0 – první prvek je seřazen před druhý.
- Pokud funkce vrátí 0 – jsou stejné a zachovávají si relativní pořadí.
Pojďme implementovat vlastní funkci, která třídí řetězce v obráceném pořadí, místo abecedně. Abychom toho dosáhli – přejdeme vrácené hodnoty tak, že 1 je vráceno, pokud první hodnota je větší než druhá , místo naopak:
let array = ["JavaScript", "Java", "Python"];
console.log('Custom sort:', array.sort(customSort));
console.log('Default sort:', array.sort());
function customSort(a, b) {
if (a < b) {
return 1;
}
if (a > b) {
return -1;
}
return 0;
}
Výsledkem je:
Custom sort: [ 'Python', 'JavaScript', 'Java' ]
Default sort: [ 'Java', 'JavaScript', 'Python' ]
slice()
slice(start, end) funkce vrací část pole mezi hodnotou indexu start a hodnotu indexu end-1 . V každém případě krájí pole a vrátí nové, skládající se z prvků.
Původní pole zůstane nedotčené :
let array = [10, 20, 30, 40, 50];
let subarray = array.slice(2, 4);
console.log(array); // Output: [ 10, 20, 30, 40, 50 ]
console.log(subarray); // Output: [30, 40]
slice() do polí je to, co substring() je na řetězce – a je to opravdu běžně používaná funkce ke zkrácení nebo podřazení určitých sekvencí.
splice()
splice(start, deleteCount, item) Funkce se používá k nahrazení a odstranění prvků v poli a také k jejich vložení. Jeho hranice začínají na start a odstraňte deleteCount prvky, které lze volitelně nahradit item nebo více prvků, pokud jsou dodány.
Navíc se vrací odstraněné prvky, které pak můžete uložit, pokud chcete:
let array = [10, 20, 30, 40, 50];
let splicedArray = array.splice(3, 2, 'newElement');
console.log('Spliced elements: ', splicedArray);
console.log('Changed array: ', array);
Zde je splice() funkce začíná na 3. prvku (indexování založené na 0) a odstraňuje následující dva prvky a nahradí je jedním newElement . Odebrané prvky se uloží do splicedArray pole:
Spliced elements: [ 40, 50 ]
Changed array: [ 10, 20, 30, 'newElement' ]
Bez volitelného item nebo více položek, můžete ve skutečnosti použít splice() poněkud podobně jako slice() , ale zároveň ve skutečnosti odebírá prvky z pole:
let array = [10, 20, 30, 40, 50];
let splicedArray = array.splice(3, 2);
console.log('Spliced elements: ', splicedArray);
console.log('Changed array: ', array);
Zdarma e-kniha:Git Essentials
Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!
Výsledkem je:
Spliced elements: [ 40, 50 ]
Changed array: [ 10, 20, 30 ]
reverse()
reverse() , jak název napovídá, obrátí pořadí prvků v poli:
let array = [1, 2, 3];
console.log(array.reverse()) // Output: [3, 2, 1]
Poznámka: Metoda reverse() obrátí pole na místě. To znamená, že původní num_array a string_array jsou obráceny a původní sekvence je ztracena.
I když se to provádí přímo na místě, je stále běžné „přiřadit“ výsledek operace nové proměnné, alespoň označovat obrácené pole:
let array = [1, 2, 3];
let arrayReversed = array.reverse();
console.log(arrayReversed ) // Output: [3, 2, 1]
map()
map(f) funkce použije funkci f do kopie každého prvku pole. Tato funkce je opravdu užitečná, když chcete namapovat prvky do jiné kolekce, například uživatele na jejich ID nebo prvky do kategorie:
let array = ["Java", "Python", "JavaScript"];
let langLengths = array.map(function(x){
return x.length;
});
console.log(langLengths);
V tomto fragmentu kódu mapujeme délku každého řetězce v seznamu a vytváříme:
[ 4, 6, 10 ]
Pokud chcete zahrnout názvy jazyků vedle jejich délek, budete chtít uložit výsledky do slovníku, který pojme páry klíč–hodnota:
let array = ["Java", "Python", "JavaScript"];
let mapping = Object.assign({}, ...array.map((x) => ({[x]: x.length})));
console.log(mapping);
Výsledkem je:
{ Java: 4, Python: 6, JavaScript: 10 }
forEach()
forEach(f) použije funkci f pro každého prvek pole. Rozdíl mezi map a forEach je to map vytvoří nové pole a nemění to původní, zatímco forEach změní originál.
let languageArray = ["Java", "JavaScript", "Python"];
console.log("Printing each element: \n______");
// Print each element
languageArray.forEach(element => console.log(element));
console.log("\nPrinting each element in uppercase: \n______");
// Print uppercase version of each element, while keeping original strings intact
languageArray.forEach(element => console.log(element.toUpperCase()));
// Change the original array, changing all elements to lowercase
languageArray.forEach(function(element, index, array){
array[index] = array[index].toLowerCase();
});
console.log("\nEach element converted to lowercase: \n______");
console.log(languageArray);
element musí být definován, i když jej nepoužíváte, jako v posledním příkladu. Výsledkem je:
Printing each element:
______
Java
JavaScript
Python
Printing each element in uppercase:
______
JAVA
JAVASCRIPT
PYTHON
Each element converted to lowercase:
______
[ 'java', 'javascript', 'python' ]
join()
join() metoda spojuje všechny prvky pole do řetězce a převádí prvky na reprezentace řetězců v závislosti na jejich typu. Čísla lze snadno převést na řetězce, ale pro vlastní objekty je to toString() metoda je volána, aby vrátila reprezentaci řetězce.
Navíc při spojování - výchozím oddělovačem je čárka, která vytváří formát podobný CSV. Místo toho však můžete definovat jakýkoli znak jako oddělovač pouhým předáním do funkce.
Začněme jednoduššími typy:
let array = [1, 2, "hello"];
let str1 = array.join();
let str2 = array.join('');
let str3 = array.join('_');
console.log('Result: ', str1);
console.log('Result: ', str2);
console.log('Result: ', str3);
console.log('Type of result: ', typeof(str1));
Čísla se snadno převádějí na řetězce a spojují se na základě oddělovače, který jsme definovali:
Result: 1,2,hello
Result: 12hello
Result: 1_2_hello
Type of result: string
Při práci s vlastními objekty však převod na řetězec povede k odkazu na objekt, pokud není platný toString() je definována metoda, která vrací řetězcovou reprezentaci. V tomto případě definujeme User třídy s toString() který vrací jméno uživatele:
class User {
/** @access private */
#name;
constructor(name){
this.#name = name;
}
getName() {
return this.#name;
}
setName(name) {
this.#name = name;
}
toString() {
return this.#name;
}
}
let john = new User("John");
let maria = new User("Maria");
let array = [john, maria, "hello"];
let str = array.join();
console.log('Result: ', str);
console.log(typeof('Type of result: ', str));
Výsledkem je:
Result: John,Maria,hello
Type of result: string
každý()
every(p) vrátí true pokud každý prvek pole splňuje předaný predikát p .
Za tímto účelem můžete snadno vytvořit anonymní funkce (nebo dokonce explicitní), které vracejí booleovskou hodnotu na základě vámi zadané proměnné. Můžete například zkontrolovat, zda every() prvek v seznamu je větší než 0 nebo obsahuje nějakou hodnotu:
let simpleArray = [1, 2, 3];
console.log(simpleArray.every(x => x > 0)); // Output: true
let objectArray = [new User('John'), new User('Maria')];
console.log(objectArray.every(x => x.age > 21));
some()
some(p) vrátí true, pokud any prvek splňuje předaný predikát p :
let a = [1, 2, 3];
console.log(a.some(x => x == 2)); // Output: true
filtr()
filter(p) vrátí nové pole složené z prvků splňujících předaný predikát p . Prvky, které ji neprojdou (funkce vrací false ) nejsou po filtrování zahrnuty:
let a = [1, 2, 3];
console.log(a.every(x => x > 1)); // Output: [2, 3]
indexOf() a lastIndexOf()
indexOf() a lastIndexOf() funkce přijímají prvek, a pokud je v poli přítomen, vracejí jeho index v sekvenci. Pokud není přítomen - -1 je vráceno.
Pokud existuje více prvků odpovídajících zadanému, vrátí se pouze index prvního z nich:
let simpleArray = [1, 4, 5, 4, 5, 6, 5, 8];
console.log(simpleArray.indexOf(5));
console.log(simpleArray.indexOf(10));
Výsledkem je:
2
-1
Podobně lastIndexOf() metoda iteruje pozpátku a vrací poslední výskyt, namísto prvního výskytu shodného prvku:
let simpleArray = [1, 4, 5, 4, 5, 6, 5, 8];
console.log(simpleArray.lastIndexOf(5));
console.log(simpleArray.lastIndexOf(10));
Výsledkem je:
6
-1
Navíc můžete zadat volitelný výchozí bod pro lastIndexOf() a indexOf() funkce, které jsou obě založené na 0:
let simpleArray = [1, 4, 5, 4, 5, 6, 5, 8];
console.log(simpleArray.lastIndexOf(5, 3));
console.log(simpleArray.indexOf(5, 5));
lastIndexOf() nezačíná na konci pole – na prvku 8 . Začíná u prvku s indexem 3 , což je druhý prvek 4 v tomto poli. indexOf() nezačíná na začátku pole, ale na prvku na indexu 5 :
// ↓ lastIndexOf() start
let simpleArray = [1, 4, 5, 4, 5, 6, 5, 8];
// ↑ indexOf() start
Vzhledem k výchozím bodům změn to má za následek:
2
6
Závěr
V této příručce jsme se podívali na některé z nejčastěji používaných vestavěných funkcí týkajících se Arrays v JavaScriptu. Vzhledem k tomu, jak převládají pole Array v každodenní práci, je seznámení se s těmito funkcemi nutností pro každého nového vývojáře.