szczecinski.eu

szczecinski.eu

  • Kurs React
  • Zaawansowany React
  • Kurs Redux
  • Kurs ES6
  • Blog
  • Kontakt

›Szybki kurs ES6

Szybki kurs ES6

  • Specyfikatory zasięgu - const, let
  • Template strings, tagged template strings
  • Arrow functions
  • Parametry domyślne, destructuring i rest
  • Skrócona notacja obiektowa, dynamiczne właściwości obiektu, spread
  • Klasy
  • Moduły
  • Kod asynchroniczny - Promise
  • Dekoratory

Skrócona notacja obiektowa, dynamiczne właściwości obiektu, spread

Praca z obiektami stała się także o wiele wygodniejsza - głównie za pośrednictwem wprowadzenia nowych notacji na istniejącą już funkcjonalność.

Skrócona notacja obiektowa

Jeżeli chcemy zadeklarować obiekt, który używać będzie zmiennych dla wartości kluczy, a nazwa tych kluczy powinna być taka sama jak nazwa zmiennych możemy pominąć ich wartość w czasie deklarowania.

const test = 42;
const obj = {
  test
};
console.log(obj.test); // 42

Dynamiczne właściwości obiektów

Często zdarza się również, że chcemy utworzyć klucze w oparciu o nazwy zmiennych - do tej pory mogliśmy wpierw utworzyć obiekt, a następnie używając dostępu tablicowego dodać wartość. Teraz możliwe jest bezpośrednie tworzenie takich kluczy.

const test = "myKey";
const obj = {
  [test]: 42
};
console.log(obj.myKey); // 42

Spread (Array i Object)

Pojawia się także nowa składnia pozwalająca na kopiowanie obiektów - zastępuje ona funkcjonalność taką jak splice czy concat.

ES6 obsługuję te notację jedynie w przypadku tablic, ale istnieje proposal dodający wsparcie również w przypadku obiektów. W świecie React jest on na tyle popularny, że warto o nim wspomnieć.

const source = [1, 2];
const copy = [...source]; // [1, 2];
const append = [...source, 3]; // [1, 2, 3];
const prepend = [0, ...source]; // [0, 1, 2];

const obj = { test: 1, test2: 2 };
const copyObj = { ...obj, test3: 3 }; // { test: 1, test2: 2, test3: 3 }
const copyWithOverwrite = { ...obj, test2: 3 }; // { test: 1, test2: 3 }

Uwaga

Kopie tego typu są kopiami płytkimi - w przypadku wielowymiarowych tablic, tablic obiektów etc. uzyskamy kopię referencji. Uważajmy więc, by nie mutować oryginalnych danych!

const source = [
  { test: 1 }
];
const copy = [...source];
copy[0].test = 2;
console.log(source[0].test); // 2
← Parametry domyślne, destructuring i restKlasy →
  • Skrócona notacja obiektowa
  • Dynamiczne właściwości obiektów
  • Spread (Array i Object)
Bartosz Szczeciński © 2019 Materiał dostępny na zasadach licencji MIT.