Rxjs Scan with so many comas inside its function body?

问题

I have been looking at this code. https://www.learnrxjs.io/recipes/alphabet-invasion-game.html

const game$ = combineLatest(keys$, letters$).pipe(
  scan < [string, Letters],
  State >
    ((state, [key, letters]) => (
      letters.ltrs[letters.ltrs.length - 1] &&
      letters.ltrs[letters.ltrs.length - 1].letter === key
        ? ((state.score = state.score + 1), letters.ltrs.pop())
        : noop,
      state.score > 0 && state.score % levelChangeThreshold === 0
        ? ((letters.ltrs = []),
          (state.level = state.level + 1),
          (state.score = state.score + 1),
          intervalSubject.next(letters.intrvl - speedAdjust))
        : noop,
      { score: state.score, letters: letters.ltrs, level: state.level }
    ),
    { score: 0, letters: [], level: 1 }),
  takeWhile(state => state.letters.length < endThreshold)
);

this is another code I have seen that also uses so many comas

const game$ = combineLatest(state$, player$)
  .pipe(
    scan<[State, [number[][], Key]], [State, [number[][], Key]]>(
      ([state, [brick, key]]) => (
        handleKeyPress(state, brick, key),
        brick = rotate(state, brick, key),
        brick = collide(state, brick),
        score(state),
        resetKey(key),
        [state, [brick, key]]
      )),
    tap(([state, [brick, key]]) => render(state, brick)),
    takeWhile(([state, [brick, key]]) => !state.game[1].some(c => c === brck)),
    finalize(renderGameOver)
  );

I just doesn't understand why there are so many comas inside the function body of the scan. There are two here noop,. In my other example there is a comma in every line.

Also, I don't get why would we pass [key, letters] as an array in here. (state, [key, letters])

I have looked throught the old Scan questions that has been asked but none of them address this comma.

回答1:

This is just fancy/clever/overcomplicated usage of javascript syntax/features. First, all this comas: there is a comma operator that evaluates each of its operands (from left to right) and returns the value of the last operand. (doc: coma operator).

Simple example:

c = (
 a = 1, // assigns value 1 to variable a
 b = 2, // assigns value 2 to variable b
 console.log(a, b), // log values to console
 "c"
)

will output:

1 2 // console log
"c" // value of last operand

...and c variable will have "c" value:

console.log(c) // prints "c"

The other one is another js feature - destructuring assignment

const myFn = ([a, [b, c]]) => console.log(a, b, c);
const arrayOfThatShape = [1, [2, 3]];
myFn(arrayOfThatShape) // prints 1 2 3

So basically all this is not related with RxJS at all, nor with Functional Reactive Programming. IMO such examples are overcomplicated and introduces unnecessary noise for RxJS newcomers.

来源：https://stackoverflow.com/questions/56700639/rxjs-scan-with-so-many-comas-inside-its-function-body

标签

javascript

rxjs