5 nowości w JavaScript (ES10)

Page Title Shape 1
Page Title Shape 2
Page Title Shape 3

Dzisiaj chciałbym poruszyć temat zmian w JavaScript, które zostały zaprezentowane na Google I/O ’19. Zapowiada się całkiem ciekawie. Ilość frameworków, popularność oraz kierunek w którym idzie sam język, dają dowód na to, że warto uczyć się JavaScript’u. Spójrzmy w takim razie co zaprezentowali prelegenci podczas konferencji.

UWAGA! Pamiętaj, że opisane tutaj feature’s dostępne będą w standardzie ES10 (ECMAScript 2019). Na dzień pisania tego artykułu nie wszystkie przeglądarki zapewniają wsparcie dla tego standardu. Poczytaj też więcej na temat faz rozwoju feature’ów w standardzie ECMAScript.

1. Class fields

Oto w jaki sposób możemy zdefiniować prywatne właściwości obiektów w stary sposób i nowy sposób

Po staremu

class Building{
  constructor(){
    this._type = "house";
  }
  get type(){
    return this._type;
  }
}

let myHome = new Building();
console.log(myHome.type);

W ES10

class Building{
  #type = "house";
  get type(){
    return this.#type;
  }
}

let myHome = new Building();
console.log(`before change: ${myHome.type}`);
myHome.type = "xxx";
console.log(`after change: ${myHome.type}`);

Co się stało w obu przypadkach? Zdefiniowaliśmy klasę Building, która posiada jedną prywatną właściwość – type. Jak widać zapis w ES10 jest krótszy, bardziej przejrzysty i nie wymaga od nas definiowania na siłę konstruktora.

2. Numeric literals

Usprawnienie czytelności

Otrzymaliśmy możliwość tworzenia bardziej przejrzystych zapisów dla liczb składających się z wielu cyfr.

Po staremu

let bigNumber = 1000000000;
let biggerNumber = 10000000000.32;

Czy na pierwszy rzut oka nie wygląda to bardziej czytelnie? <3

W ES10

let bigNumber = 1_000_000_000;
let biggerNumber = 10_000_000_000.32;

BIG INT!

Czy wiesz jaki wynik zwróci JavaScript dla tej operacji? 1234567890123456789 * 3 = x … odpowiedź brzmi – nieprawidłowy 🙂 3703703670370370600, na pierwszy rzut oka widać, że mnożenie wykonane jest nieprawidłowo. 3*9 = 27, a pierwszą od prawej liczbą jest zero! JavaScript od zawsze ma problemy z operacjami na dużych liczbach. Teraz ma się to zmienić. Co więcej, aby uzyskać poprawny wynik musimy dodać jedynie jeden znak. Oto jak wygląda poprawna implementacja.

let resultOfMultiplication = 1234567890123456789n * 3n;
console.log(resultOfMultiplication);

Dodanie litery n bezpośrednio za liczbą zrobi z niej format bigInt

3. Tablice

W operacjach na tablicach pomogą nam teraz dwie nowe funkcje – .flat() oraz .flatMap().

.flat()

Funkcja ta pozwala nam na “spłaszczanie” naszej tablicy. Innymi słowy jeśli tablica jest dwuwymiarowa, to po użyciu na niej funkcji .flat() otrzymamy tablicę jednowymiarową.

let firstArray = [ 
  1, 2, [ 
    3 
  ] 
];
console.log(firstArray.flat()); // [1, 2, 3]

let secondArray = [ 
  1, 2, [ 
    3, [
      4, 5
    ] 
  ] 
];
console.log(secondArray.flat()); // [1, 2, 3, [4, 5]];
console.log(secondArray.flat().flat()); // [1, 2, 3, 4, 5];

//Flat dla n-wielowymiarowych tablic
let thirdArray = [ 
  1, 2, [ 
    3 , [
      4, 5, [
        6, 7, [
          8, 9
        ]
      ]
    ]
  ] 
];
console.log(thirdArray.flat(Infinity)); // [1, 2, 3, 4, 5, 6, 7, 8, 9];

.flatMap()

Funkcja .flatMap() to połączenie funkcji .flat() oraz .map(). Możemy więc jednocześnie zbudować nową tablicę, ale zawsze w wyniku otrzymamy tablicę jednowymiarową.

let myArray = [1, 2, 3, 4];

let duplicatedArray = myArray.map( element => [element, element] );
console.log(duplicatedArray); // [ [1,1], [2,2], [3,3], [4,4] ]

console.log(duplicatedArray.flat()); // [1, 1, 2, 2, 3, 3, 4, 4]

let flatMapArray = myArray.flatMap( element => [element, element] );
console.log(flatMapArray); // [1, 1, 2, 2, 3, 3, 4, 4]

4. Intl

Intl.RelativeTimeFormat()

Od zawsze wyświetlanie relatywnego czasu w JavaScript nie było tak proste jak np. w PHP. Jednak niebawem ulegnie to zmianie. W ES10 wprowadzona została metoda Intl.RelativeTimeFormat(), która pozwala na wyświetlanie relatywnego czasu.

let relativeTime = new Intl.RelativeTimeFormat('pl', {numeric: 'auto'});
console.log(relativeTime.format(-1, 'day')); //wczoraj

console.log(relativeTime.format(-14, 'day')); //4 dni temu

console.log(relativeTime.format(1, 'week')); //w przyszłym tygodniu

Intl.ListFormat()

Również listowanie elementów w tablicy do postaci string’a będzie teraz ułatwione. Wszystko dzięki metodzie Intl.ListFormat()

const polishList = new Intl.ListFormat("pl");
console.log(polishList.format(['Pies', 'Kot', 'Ryba'])); //Pies, Kot i Ryba

5. Promise

Aktualnie mamy do dyspozycji 2 metody, które pozwalają nam zarządzać Promise(). Są to Promise.all() oraz Promise.race(). W ES10 otrzymamy kolejne dwie.

.allSettled()

const promises = [
	fetch("/api-fn/1"),
	fetch("/api-fn/2")
];

await Promise.allSettled(promises);
//Idziemy dalej, gdy wszystkie Promise() zakończyły swoje wywołanie - nieważne, czy zwróciły błąd czy success
someOtherFunction();

.any()

const promises = [
	fetch("/api-fn/1"),
	fetch("/api-fn/2")
];

await Promise.any(promises);
//Idziemy dalej, gdy którykolwiek z Promise() zakończyły swoje wywołanie - nieważne, czy zwróciły błąd czy success
someOtherFunction();

Mam nadzieję, że podobają Ci się zmiany jakie niebawem nas czekają. Ja już nie mogę się doczekać

Previous Post
Newer Post

Brak produktów w koszyku.

X