Operator map z RxJS działa bardzo podobnie jak metoda map z klasy Array.

Służy do przekstałcenia wartości wysłanej z obiektu Observable do postaci nam pasującej.

Przykład:

Załóżmy że mamy taką opowiedź z serwera:

{
    success: true,
    items: [
        {
            title: 'Foo',
            value: 1
        },
        {
            title: 'Bar',
            value: 2
        }
    ]
}

Nas interesuje tylko zwartość z items. W takim przypadku możemy skorzystać z operatora map

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const fakeResponse =
{
    success: true,
    items: [
        {
            title: 'Foo',
            value: 1
        },
        {
            title: 'Bar',
            value: 2
        }
    ]
}

const observable = of(fakeResponse).pipe(
    map(value => value.items)
);

observable.subscribe(console.log);

Można to sprawdzić na kilka sposobów:

Sposób 1: Object.keys

const isObjectEmpty = (object) => {
  return !Object.keys(object).length;
}

const emptyObject = {};
console.log('isObjectEmpty: ', isObjectEmpty(emptyObject)); // isObjectEmpty: true

Metoda keys zwraca klucze obiektu, w postaci tablicy. Jeśli tablica nie ma elementów, oznacza to, że obiekt jest pusty

Sposób 2: Object.entries

const isObjectEmpty = (object) => {
  return !Object.entries(object).length;
}

const emptyObject = {};
console.log('isObjectEmpty: ', isObjectEmpty(emptyObject)); // isObjectEmpty: true

Praktycznie to samo, co poprzednio, ale wykorzystujemy tutaj metodę entries, która zwraca tablicę, której wartości są przechowywane w postaci: [klucz, wartość].

Sposób 3: Object.getOwnPropertyNames

Ostatni sposób różni się trochę od dwóch poprzednich. Metody keys i entries sprawdzają policzalne właściwości obiektu. Metoda getOwnPropertyNames zwraca zarówno policzalne i niepoliczalne właściwości obiektu.

Przykład:

const object = {
  price: 100
};
object.title = 'Foo';
Object.defineProperty(object, 'color', {
  value: 'red',
  enumerable: false
});

console.log(Object.keys(object)); // ['price', 'title']
console.log(Object.getOwnPropertyNames(object)); // ['price', 'title', 'color']

Za pomocą metody defineProperty tworzymy właściwość niepoliczalną o nazwie color. Jak widać jest różnica między keys (ale też entries) a getOwnPropertyNames.

Poniżej przykład z użyciem: getOwnPropertyNames:

const isObjectEmpty = (object) => {
  return !Object.getOwnPropertyNames(object).length;
}

const emptyObject = {};
console.log('isObjectEmpty: ', isObjectEmpty(emptyObject)); // isObjectEmpty: true

const object = {
  price: 100
};
object.title = 'Foo';
Object.defineProperty(object, 'color', {
  value: 'red',
  enumerable: false
});
console.log('isObjectEmpty: ', isObjectEmpty(object)); // isObjectEmpty: false

Przy drugiej próbie nasza funkcja zwróci false, ponieważ wykryje niepoliczalną właściwość color.

Praca z kodem bywa często uciążliwa, szczególnie gdy skaczemy pomiędzy dużą ilością plików.

Mając dużo zakładek, chcemy przeskoczyć do pliku, którego zakładka akurat nie jest w zasięgu naszego wzroku. Czujemy przytłoczenie.

Ten problem można obejść na kilka sposobów, jednym z nich jest szybki podgląd na listę plików, które były ostatnio edytowane.

W Webstorm mamy taki skrót klawiszowy:

CTRL + E

Lub z menu:

View -> Recent files

Wyświetli się okno z listą plików.

Jedna rzecz, na którą warto zwrócić uwagę: na liście znajdą się pliki zarówno edytowane jak i te ostatnio otwarte. Na przykład jeśli otworzysz sobie jakiś plik, ale go nie edytujesz, to wskoczy on na samą górę listy.

Jeśli chcemy mieć podgląd tylko zmienionych plików, klikamy jeszcze raz skrót klawiszowy: CTRL + E.

Na samej liście może się znajdować duża liczba plików. Żeby szybko znaleźć interesujący nas plik, możemy skorzystać z filtra: po prostu piszemy na klawiaturze nazwę pliku i sama lista zostanie skrócona.

Operator from

Operator from zamienia podaną, w parametrze wartość w obiekt typu Observable.

Za pomocą tego operatora możesz stworzyć Observable z tablicy, Promise lub iterowalnego obiektu.

Przykłady

Przykład 1

import { from } from 'rxjs';

const observable = from([1, 2, 3]);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: 1
// value: 2
// value: 3

Przykład 2

W przypadku gdy jako parametr przekażemy ciąg znaków operator from potraktuje to jako tablicę znaków. Oznacza to, że każdy znak zostanie wysłany jako pojedyncza wartość.

import { from } from 'rxjs';

const observable = from('Hello');
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: H
// value: e
// value: l
// value: l
// value: o

Jeśli przekażemy łańcuch znaków za pomocą tablicy, ten tekst zostanie przesłany jako jedna wartość:

import { from } from 'rxjs';

const observable = from(['Hello']);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: Hello

Przykład 3

Za pomocą tego operator możemy zmienić Promise w Observable:

import { from } from 'rxjs';

const promise = new Promise(resolve => resolve('Some value'));

const observable = from(promise);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: Some value

Przykład 4

Załóżmy, że mamy dokument HTML, który zawiera taką strukturę:

<h2>Some header 1<h2>

...

<h2>Some header 2<h2>

...

<h2>Some header 3<h2>

I chcemy pobrać treść z nagłówków h2. Przykład:

import { from } from 'rxjs';

const allH2 = document.querySelectorAll('h2');

const observable = from(allH2);
observable.subscribe(value => console.log('value: ', value.innerText));

// Wynik:
// value: Some header 1
// value: Some header 2
// value: Some header 3