Do czego służy forkJoin?

Operator forkJoin pozwala na pobranie danych z kilku źródeł. Wynik zwraca, dopiero gdy dane zostaną pobrane ze wszystkich strumieni danych.

Przykłady użycia forkJoin

Przykład 1

Do forkJoin przekazany jest obiekt ze strumieniami danych:

import { forkJoin, of } from 'rxjs';

const numbers$ = of([1, 2, 3]);
const letters$ = of (['a', 'b', 'c']);

forkJoin({
    numbers: numbers$,
    letters: letters$.pipe(delay(2000))
}).subscribe(console.log); 
// Wynik:
// { numbers: [1, 2, 3], letters: ['a', 'b', 'c'] }

Zauważ, że wynik zostanie zwrócony po dwóch sekundach. Dopiero gdy dane z letters$ zostaną dostarczone.

Przykład 2

Do forkJoin przekazany jest tablica ze strumieniami danych:

import { forkJoin, of } from 'rxjs';

const numbers$ = of(1, 2, 3);
const letters$ = of ('a', 'b', 'c');

forkJoin([
    numbers$,
    letters$.pipe(delay(2000))
]).subscribe(console.log); 
// Wynik:
// [3, 'c']

Podobny przykład co poprzedni, ale są dwie różnice. Do forkJoin przekazujemy tablicę, a nie obiekt. W wyniku dostaniemy też tablicę. Dlaczego zwróciło nam: [3, 'c'] ? Zauważ, jak tworzone są strumienie danych: numbers$ i letters$. Przekazujemy tam listę ciąg liczb i znaków, a nie jak poprzednio tablicę liczb i znaków. Operator forkJoin zwraca po prostu ostatnie wysłane dane z podanego źródła.

Iterowanie n-razy jak?

Iteracja kojarzy się z użyciem pętli na przykład: for. Można to też ogarnąć bez użycia pętli. Oto przykład:

const generateArrayOfNumbers = (n) => {
	const result = [...Array(n)].reduce((total) => {
		const number = Math.round(Math.random()*100);
		return [
			...total,
			number
		]
	}, []);

  return result;
}

generateArrayOfNumbers(3); // [ 16, 27, 48 ]

Prosta funkcja do generowania tablicy liczb w podanym zakresie.

Po pierwsze zapis:

[...Array(n)]

Pozwala nam na stworzenie tablicy o n elementach. Konkretnie ta linijka kodu tworzy tablicę wypełnioną n-razy za pomocą undefined. Skoro mamy tablicę, to możemy po niej iterować! W tym przykładzie korzystamy z funkcji reduce.

W listopadize opublikowałem 5 wpisów:

RxJS:

1. Operator exhaustMap

NodeJS:

1. Jak testować MongoDB za pomocą MongoMemoryServer?

JavaScript:

1. Jak wypełnić tablicę danymi?
2. Jak pobrać niektóre elementy obiektu?

Narysowałem jeden komiks:

1. I am your father!

Przeczytałem dwie książki:

1. Ziarno i krew - Dariusz Rosiak
2. Chciwość - Marc Elsberg

Przesłuchałem jeden audiobook:

1. Przetaina - Andrzej Pilipiuk

Pobieranie danych z obiektu

Mamy prosty obiekt:

const product = {
	name: 'Some product',
	price: 100,
	currency: 'PLN',
	weight: 1.5,
	size: 'L'
}

I chcemy pobrać na przykład tylko elementy: name i price. Można to zrobić tak:

const { name, price } = product;
console.log(name); // Some product
console.log(price); // 100

A co jeśli potrzebujemy pobrać te same dane, ale chcemy użyć innych nazw na przykład: productName i productPrice ?

Wystarczy napisać:

const { name: productName, price: productPrice } = product;
console.log(productName); // Some product
console.log(productPrice); // 100

Pod tym linkiem dowiesz się jak pominąć niektóre właściwości obiektu

Inicjacja tablicy

Potrzebujesz stworzyć tablicę wypełnioną danymi? Można to zrobić na kilka sposobów:

Sposób 1: Metoda fill

Klasa Array udostępnia nam metodę fill:

const n = 5;
const array = Array(n).fill(0);
console.log(array); // [0, 0, 0, 0, 0]

Możemy też stworzyć tablicę obiektów:

const n = 3;
const array = Array(n).fill({ value: 0 });
console.log(array); // [{ value: 0 }, { value: 0 }, { value: 0 }]

Tylko tutaj mamy mały problem:

array[1].value = 7;
console.log(array); // [{ value: 7 }, { value: 7 }, { value: 7 }]

Została zmieniona wartość drugiego elementu, ale jak widać druga linijka, pokazuje nam, że zmieniła się wartość dla wszystkich elementów tablicy!

Dlaczego tak się dzieje? Metoda fill tworzy jedną instancję obiektu i wypełnia nią tablicę n-razy.

Sposób 2: Metoda from

Powyższy problem możemy rozwiązać za pomocą metody from również z klasy Array:

const n = 3;
const array = Array.from(Array(n), () => ({ value: 0 }));
console.log(array); // [{ value: 0 }, { value: 0 }, { value: 0 }]

array[1].value = 7;

console.log(array); // [{ value: 0 }, { value: 7 }, { value: 0 }]

Sposób 3: Metoda map

Ale nie tak:

const n = 3;
const array = Array(n).map(() => ({ value: 0 }));
console.log(array); // [3 empty slots]

Hmm nie to chcieliśmy osiągnąć. Pusta tablica?!

Zapis:

Array(n)

Tworzy pustą tablicę. Druga rzecz to metoda map nie iteruje po pustej tablicy.

Ten problem możemy rozwiązać za pomocą operatora spread:

[...Array(3)] // [undefined, undefined, undefined]

Taki zapis stworzy tablicę wypełnioną n-razy za pomocą undefined

Ostateczny przykład:

const n = 3;
const array = [...Array(n)].map(() => ({ value: 0 }));
console.log(array); // [{ value: 0 }, { value: 0 }, { value: 0 }]

array[1].value = 7;

console.log(array); // [{ value: 0 }, { value: 7 }, { value: 0 }]