Skip to content

Skróty Klawiszowe Metod Tablic JavaScript Cheat Sheet

Ta strona zawiera szczegółowy przewodnik po metodach tablic w JavaScript, w tym typowe operacje, nowe funkcje ES6, optymalizację wydajności i nie tylko.

Tworzenie tablic

JavaScript oferuje kilka sposobów tworzenia tablic:

Używanie literałów tablicowych 

let arr = [1, 2, 3];

Używanie konstruktora 

let arr = new Array(1, 2, 3);

Używanie metody Array.of 

let arr = Array.of(1, 2, 3);

Używanie metody Array.from 

let arr = Array.from('123'); // ['1', '2', '3']

Operacje na tablicach

Tablice oferują bogactwo metod służących do dodawania, usuwania, modyfikowania i odpytywania danych:

Dodawanie elementów

  • push: Dodaje jeden lub więcej elementów na końcu tablicy
  • unshift: Dodaje jeden lub więcej elementów na początku tablicy

Usuwanie elementów

  • pop: Usuwa ostatni element tablicy
  • shift: Usuwa pierwszy element tablicy
  • splice: Usuwa dowolną liczbę elementów na podstawie indeksu

Znajdowanie elementów

  • indexOf: Znajduje indeks elementu w tablicy
  • includes: Określa, czy tablica zawiera określony element

Iteracja po tablicach

  • forEach: Wykonuje funkcję callback raz dla każdego elementu tablicy
  • map: Tworzy nową tablicę z wynikami wywołania podanej funkcji dla każdego elementu w wywołującej tablicy
  • filter: Tworzy nową tablicę ze wszystkimi elementami, które przechodzą test zaimplementowany przez podaną funkcję

Transformacja tablicy

  • join: Łączy wszystkie elementy tablicy w ciąg znaków
  • slice: Zwraca płytką kopię fragmentu tablicy
  • concat: Łączy dwie lub więcej tablic

Nowe funkcje ES6

ES6 wprowadziło wiele ulepszeń w operacjach na tablicach:

Operator rozproszenia (Spread Operator) 

let arr = [1, 2, 3];
let arr2 = [...arr, 4, 5]; // [1, 2, 3, 4, 5]

Array.prototype.find 

let result = arr.find(item => item > 2); // 3

Array.prototype.findIndex 

let index = arr.findIndex(item => item > 2); // 2

Array.prototype.fill 

arr.fill(0); // [0, 0, 0]

Array.prototype.includes 

arr.includes(2); // true

Optymalizacja wydajności

Podczas pracy z dużymi tablicami optymalizacja wydajności jest szczególnie ważna:

  • Staraj się używać natywnych metod, takich jak map i filter, które są zazwyczaj implementowane w C++ i są szybsze niż pętle JavaScript.
  • W przypadku często modyfikowanych tablic rozważ użycie Typed Arrays (Tablice Typowane).
  • Unikaj operacji na DOM wewnątrz pętli; zamiast tego zbierz węzły DOM, na których mają zostać przeprowadzone operacje, i wykonaj operację za jednym razem.

Podsumowanie

Dzięki temu przewodnikowi powinieneś mieć głębsze zrozumienie operacji na tablicach w JavaScript. Więcej informacji można znaleźć w MDN Web Docs.