RxJS:From演算子
Rx from 演算子は、反復可能なデータをオブザーバブルに変換するために使用されます。 これは、監視可能なシーケンスで渡され共有されるデータのタイプを正規化したい場合、または関数が監視可能なデータを受信して処理することを期待している場合に特に役立ちます。 元のデータ型では通常は使用できないRxJS演算子を使用する場合の別の使用法。
from を使用してオブザーバブルに変換できる反復可能な型の例は、配列、マップ、セット、promise、DOMノード、およびジェネレーター関数です。 以下に、これらのタイプのいくつかの例を示します。
配列
ほとんどの場合、 from 演算子は、配列をオブザーバブルに変換するために使用されます。
let myArr = ['🐦', '😺', '🐕', '🐊'];
Rx.Observable
.from(myArr)
.filter(x => x !== '🐦')
.map(x => `Hello ${x}!`)
.subscribe(console.log);
// Hello 😺!
// Hello 🐕!
// Hello 🐊!
同期vs非同期
デフォルトでは、from演算子は同期オブザーバブルを返します。
let myArr = ['😺', '🐕', '🐊'];
console.log('Before');
Rx.Observable
.from(myArr)
.map(x => `Hello ${x}!`)
.subscribe(console.log);
console.log('After');
// Before
// Hello 😺!
// Hello 🐕!
// Hello 🐊!
// After
ただし、必要に応じて、非同期スケジューラを使用して非同期にすることができます。
let myArr = ['😺', '🐕', '🐊'];
console.log('Before');
Rx.Observable
.from(myArr, Rx.Scheduler.async)
.map(x => `Hello ${x}!`)
.subscribe(console.log);
console.log('After');
// Before
// After
// Hello 😺!
// Hello 🐕!
// Hello 🐊!
ジェネレーター機能
ジェネレーター関数は反復可能なタイプであるため、from演算子を使用してオブザーバブルに変換することもできます。 簡単な例を次に示します。
function* generateUnique() {
let num = 0;
while (true) {
yield num++;
}
}
Rx.Observable.from(generateUnique())
.take(3)
.subscribe(console.log);
// 0
// 1
// 2
ここでは、 take 演算子を使用して、指定された数の値の後にオブザーバブルを完成させます。 それ以外の場合は、無限のオブザーバブルを作成し、サブスクライブ時にページをクラッシュさせます。
また、zip演算子を使用して複数のオブザーバブルの値を組み合わせるもう少し複雑な例を次に示します。
function* generateName() {
yield 'Cat';
yield 'Dog';
yield 'Bird';
return;
}
function* generateEmoji() {
yield '😺';
yield '🐕';
yield '🐦';
return;
}
function* generateSound() {
yield 'Meow';
yield 'Woof';
yield 'Tweet';
return;
}
const names = Rx.Observable.from(generateName());
const emojis = Rx.Observable.from(generateEmoji());
const sounds = Rx.Observable.from(generateSound());
const combined = Rx.Observable.zip(names, emojis, sounds, (name, emoji, sound) => {
return `The ${name} ${emoji} goes ${sound.toUpperCase()}`;
})
.subscribe(console.log);
// The Cat 😺 goes MEOW
// The Dog 🐕 goes WOOF
// The Bird 🐦 goes TWEET
spawn 演算子は、ジェネレーターとオブザーバブルを組み合わせるためにも使用されますが、この演算子は現在RxJS5+では使用できないことに注意してください。
約束
Promiseは、オブザーバブルに簡単に変換することもできます。オブザーバブルは非同期で、解決または拒否された値をラップします。
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello');
}, 2000);
});
Rx.Observable
.from(myPromise)
.subscribe(x => console.log(x, ' World!'));
// Hello World! (after 2 seconds)
DOMノード
これは、3つのDOMノードのコレクションがオブザーバブルに変換され、textContentのみを抽出するようにマッピングされる簡単な例です。
<h2>Hey,</h2>
<h2>Hello</h2>
<h2>Alligator!</h2>
<script>
const h2s = document.querySelectorAll('h2');
Rx.Observable.from(h2s)
.map(h2 => h2.textContent)
.subscribe(console.log);
// Hey,
// Hello
// Alligator!
</script>
文字列についての一言
文字列は繰り返し処理できるため、 from 演算子を使用できますが、文字列内のすべての文字は個別の値になります。
Rx.Observable
.from('Hi!')
.subscribe(console.log);
// H
// i
// !
代わりに、文字列を単一の値として変換するには、of演算子を使用する必要があります。
Rx.Observable
.of('Hi!')
.subscribe(console.log);
// Hi!