8 metod na tablicach wprowadzonych od ES6, które powinieneś znać

Przed wprowadzeniem ES6 na tablicach najczęściej korzystaliśmy z takich metod jak push(), pop(), shift(), unshift(), splice(), slice(), filter(), map(), reduce() .

ES6 (ECMAScript 2015) wprowadziła do tego zestawu wiele nowych ciekawych metod, które znacząco ułatwiają operowanie nimi. Wśród nich wymienić można:

  1. Array.from()

    Metoda tworzy nową tablicę na podstawie obiektu iterowalnego lub obiektu podobnego do tablicy (np. obiektu z właściwością length). Większość obiektów w JS jest iterowalna, jednak nie wszystkie mają wbudowany interfejs iteracji. Do takich nieiterowalnych obiektów zaliczymy m.in zwykłe obiekty (const obj = a: 1, b: 2, c: 3) lub  obiekt funkcyjny (const func = function() {return 1; })

    Dzięki metodzie Array.from() możemy utworzyć tablicę np. z obiektu typu String, w której każdy element będzie przechowywał po jednym znaku z danego tekstu (w poniższym przykładzie zmienna hello to typ prymitywny, który nie jest obiektem, jednak JS automatycznie opakowuje ten typ w obiekt typu String, który iterowalny już jest):

    console.log(Array.from("Hello World!")); //['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd', '!']
  2. Array.of()

    Za pomocą metody Array.of() tworzymy nową tablicę z elementów przekazanych w niej jako argumenty, niezależnie od liczby i typu tych argumentów

    console.log(Array.of('Hi', 3, {name: 'Marcin'}, 'Hello World!')) //['Hi', 3, {…}, 'Hello World!']console.log(Array.of("")); //[] console.log(Array.of(50)); //[50]
  3. [].find()

    Metoda find() służy do znalezienia pierwszego elementu w tablicy, który spełnia określone kryterium określone przez funkcję testującą. Zwraca wartość pierwszego znalezionego elementu lub undefined, jeśli żaden element nie spełnia warunku.

    const arr = [2, 15, 20, 4, 12];
    console.log(arr.find(el => el > 10)); //15
    console.log(arr.find(el => el < 2)); //undefined
  4. [].findIndex()

    Działa podobnie jak find(), z tą różnicą, że znajdujemy dzięki niej indeks pierwszego elementu w tablicy, który spełnia określone kryterium określone przez funkcję testującą, a nie jego wartość. Jeśli element został znaleziony to funkcja zwraca jego indeks, w przeciwnym razie zwracana jest wartość -1.

    const arr = [2, 15, 20, 4, 12];
    console.log(arr.findIndex(el => el > 10)); //1
    console.log(arr.findIndex(el => el < 2)); //-1
  5. [].fill()

    Metoda wypełnia wszystkie elementy tablicy określoną w pierwszym przekazanym argumencie wartością. W drugim argumencie przekazujemy indeks, od którego zmiana ma mieć zastosowanie, natomiast w trzecim argumencie wskazujemy indeks, przy którym zmiana ma się zakończyć. Tablica inicjalna jest modyfikowana.

    const arr = [2, 15, 20, 4, 12];
    const filled = arr.fill('*', 1,3); //metoda mówi - wstaw "*" do tablicy arr począwszy od wartości znajdującej się pod indeksem 1, kończąc na wartości z indeksem 3
    console.log(arr); //[2, '*', '*', 4, 12]
    console.log(filled);  //[2, '*', '*', 4, 12]

    W przypadku, gdyby początkowa tablica była jednoelementowa a zmiany chcielibyśmy zacząć od elementu z indeksem 1, tablica nie zostałaby zmieniona.

  6. [].includes()

    Metoda sprawdza, czy dana wartość występuje w tablicy. Zwraca true lub false zależności od tego, czy wartość została znaleziona. Wprowadzono ją w ES7.

    const arr = [2, 15, 20, 4, 12];
    console.log(arr.includes(4));//true
    console.log(arr.includes('4'));//false
  7. [].flat()

    Metoda flat() tworzy nową tablicę z elementami zagnieżdżonych tablic wypłaszczając je do określonej w parametrze głębokości, lub – przy zastosowaniu parametru Infinity – spłaszczając wszystkie zagnieżdżenia. Metoda wprowadzona w ES10.

    const arr = [2, [15, [20, [4, [12]]]]];
    console.log(arr.flat()); //[2, 15, [20, [4, [12]]]]
    console.log(arr.flat(2)); //[2, 15, 20, [4, [12]]]
    console.log(arr.flat(Infinity)); //[2, 15, 20, 4, 12]
  8. [].at()

    Metoda przyjmuje wartość całkowitą i zwraca element z tablicy o tym indeksie. W przypadku przekazania w argumencie liczby ujemnej (całkowitej) pozycję odliczamy wstecz od ostatniego elementu tablicy. Metoda wprowadzona w ES2022, działa również na ciągach znaków.

    const arr = [2, 15, 20, 4, 12];
    console.log(arr.at(2));//20
    console.log(arr.at(5));//undefined
    console.log(arr.at(-2));//20
    console.log(arr.at(-6));//undefined

Polecane

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *