angular:observable_rxjs:observablescomparedtoothertechniques

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- angular:observable_rxjs:observablescomparedtoothertechniques [2019/03/02 14:24] – [Cheat sheet] taekgu
+++ angular:observable_rxjs:observablescomparedtoothertechniques [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
@@ 줄 85: / 줄 85: @@
   });</code>|
 |Unsubscribe |<code javascript>sub.unsubscribe();</code>|Implied by promise resolution.|
-| |||
+| | | |
 ===== Observables compared to events API =====
@@ 줄 95: / 줄 95: @@
 ^ ^ Observable ^ Events API ^
-|Creation & cancellation |||
+|Creation & cancellation |<code javascript>// Setup
-|Subscription |||
+let clicks$ = fromEvent(buttonEl, ‘click’);
-|Configuration |||
+// Begin listening
+let subscription = clicks$
+  .subscribe(e => console.log(‘Clicked’, e))
+// Stop listening
+subscription.unsubscribe();</code>|<code javascript>function handler(e) {
+  console.log(‘Clicked’, e);
+}
+// Setup & begin listening
+button.addEventListener(‘click’, handler);
+// Stop listening
+button.removeEventListener(‘click’, handler);</code>|
+|Subscription |<code javascript>observable.subscribe(() => {
+  // notification handlers here
+});</code>|<code javascript>element.addEventListener(eventName, (event) => {
+  // notification handler here
+});</code>|
+|Configuration |키 스트로크를 청취하지만 입력 값을 나타내는 스트림을 제공하십시오.<code javascript>
+fromEvent(inputEl, 'keydown').pipe(
+  map(e => e.target.value)
+);</code>|구성을 지원하지 않습니다.<code javascript>element.addEventListener(eventName, (event) => {
+  // Cannot change the passed Event into another
+  // value before it gets to the handler
+});</code>|
 | | | |
+===== Observables compared to arrays =====
+관측 대상은 시간이 지남에 따라 값을 산출합니다. 배열은 정적 인 값 집합으로 만들어집니다. 어떤 의미에서, observables는 배열이 동기적인 경우 비동기입니다. 다음 예에서 ➞ 비동기 값 전달을 의미합니다.
+^ ^ Observable ^ Array ^
+|Given |<code>obs: ➞1➞2➞3➞5➞7
+obsB: ➞'a'➞'b'➞'c'</code> |<code>arr: [1, 2, 3, 5, 7]
+arrB: ['a', 'b', 'c']</code> |
+|concat() |<code>obs.concat(obsB)
+➞1➞2➞3➞5➞7➞'a'➞'b'➞'c'</code> |<code>arr.concat(arrB)
+[1,2,3,5,7,'a','b','c']</code> |
+|filter() |<code>obs.filter((v) => v>3)
+➞5➞7</code> |<code>arr.filter((v) => v>3)
+[5, 7]</code> |
+|find() |<code>obs.find((v) => v>3)
+➞5</code> |<code>arr.find((v) => v>3)
+</code> |
+|findIndex() |<code>obs.findIndex((v) => v>3)
+➞3</code> |<code>arr.findIndex((v) => v>3)
+</code> |
+|forEach() |<code>obs.forEach((v) => {
+  console.log(v);
+})
+</code> |<code>arr.forEach((v) => {
+  console.log(v);
+})
+</code> |
+|map() |<code>obs.map((v) => -v)
+➞-1➞-2➞-3➞-5➞-7</code> |<code>arr.map((v) => -v)
+[-1, -2, -3, -5, -7]</code> |
+|reduce() |<code>obs.scan((s,v)=> s+v, 0)
+➞1➞3➞6➞11➞18</code> |<code>arr.reduce((s,v) => s+v, 0)
+</code> |

angular/observable_rxjs/observablescomparedtoothertechniques.1551536659.txt.gz · 마지막으로 수정됨: 2025/04/15 10:05 (바깥 편집)