>웹 프론트엔드 >JS 튜토리얼 >Fluent Streams: 풍부한 반복 가능 조작을 위한 라이브러리

Fluent Streams: 풍부한 반복 가능 조작을 위한 라이브러리

Susan Sarandon
Susan Sarandon원래의
2024-12-15 16:24:16208검색

Fluent Streams: A Library for Rich Iterables Manipulation

작품: https://code-art.pictures/

다음과 같은 도서관을 상상해 보세요.

  • Ramda와 마찬가지로 반복 가능한 조작에 유용한 많은 기능을 제공합니다
  • 표준 배열 반복 방법과 같이 친숙하게 읽습니다.
  • Array, Set 또는 반복 프로토콜과 같은 JavaScript 내장 기능을 대체하려고 시도하지 않습니다.
  • Java Streams와 마찬가지로 "값 없음"과 "값으로 정의되지 않음"을 명확하게 구분하기 위해 Optional을 포함합니다
  • 번들 크기가 컴팩트합니다

이 모든 요구 사항에 맞는 라이브러리를 찾을 수 없어서 작은 라이브러리인 Fluent-Streams를 만들었습니다.

토크는 저렴합니다. 코드를 보여주세요

텍스트의 상위 3개 단어

const words = ['Lorem', 'ipsum', /* ... */]
stream(words)
  .groupBy(word => word.toLowerCase())
  .map(([word, list]) => [word, list.length])
  .sortBy(([, length])  => -length)
  .take(3)
  .toArray()

// => ['ut', 3], ['in', 3], ['dolor', 2]

서로소 정수

// Endless stream of 2..999 integers
const randomInts = continually(() => 
  2 + Math.floor(Math.random() * 998)
)

randomInts
  .zip(randomInts)
  .filter(([a, b]) => gcd(a, b) === 1)
  .distinctBy(pair => stream(pair).sortBy(i => i).join())
  .take(10)

// => [804, 835], [589, 642], [96, 145], ...
  • 표시된 것처럼 스트림은 끝이 없을 수 있지만 take(n) 메서드를 사용하여 처음 n개 항목으로 제한할 수 있습니다
  • 스트림은 병렬로라도 여러 번 재사용할 수 있습니다. 이는 스트림이 상태 비저장이고 입력에 대한 참조만 저장하기 때문입니다. 상태는 스트림이 반복자를 생성할 때만 생성됩니다.

카드 덱 생성

const deck = streamOf('♠', '♥', '♣', '♦')
  .flatMap(suit =>
    streamOf<string | number>(
      'A',
      ...range(2, 11),
      'J',
      'Q',
      'K'
    ).map(rank => `${rank}${suit}`)
  )

// => 'A♠', '2♠', '3♠', ...

그리고 홀덤 포커를 즐겨보세요!

  const playersNum = 2
  const [flop, turn, river, ...hands] = deck
    .takeRandom(3 + 1 + 1 + playersNum * 2)
    .zipWithIndex()
    .splitWhen((_, [, j]) =>
      j === 3            // flop
      || j === 4         // turn
      || j >= 5          // river
         && j % 2 === 1  // ...players' hands
    )
    .map(chunk =>
      // Unzip index
      chunk.map(([card]) => card)
    )

// flop = ['3♦', '9♣', 'J♦']
// turn = ['4♣']
// river = ['7♦']
// hands = ['J♠', '4♥'], ['10♠', '8♥']

첫 번째 플레이어는 플랍에 잭 한 쌍을 가지고 있고 두 번째 플레이어는 스트레이트를 가지고 있지만 리버에서만 가능합니다. 누가 이길까요?

이건 싸야 해

위의 모든 것은 기본 데이터 구조만으로 달성할 수 있습니다. 그러나 Fluent Streams로 작성된 코드는 읽기가 더 좋습니다. 코드를 더 읽기 쉽게 만드는 것은 완벽하게 유효한 목표이지만 이를 달성하는 데 드는 비용은 인지 부하, 번들 크기 및 성능 측면에서 낮아야 합니다.

Fluent Streams가 바로 그런 경우입니다! 이유는 다음과 같습니다.

  • 학습 곡선 없음: API는 표준 Array 메서드와 유사하여 친숙한 느낌을 줍니다. 추가도 쉽고 제거도 쉽습니다.
  • 재창조 없음: 라이브러리는 새로운 데이터 구조나 프로토콜을 만들지 않으며 이미 강력한 JavaScript 기능을 기반으로 구축됩니다.
  • 번들에 미치는 영향 최소화: 8.5kB로 축소되어 가볍습니다. 프로젝트에 수백 킬로바이트에 달하는 React와 해당 위성 라이브러리가 이미 포함되어 있다면 이러한 추가 사항은 거의 눈에 띄지 않습니다.
  • 지연 처리: 라이브러리는 항목을 느리게 처리하므로 불필요한 중간 데이터 복사를 방지하여 메모리 사용량을 줄이고 긴 파이프라인의 효율성을 높일 수 있습니다.

주의사항

라이브러리는 변환되지 않은 ES5로 배송됩니다. 이 결정은 매우 간결한 코드, 특히 생성기로 반복을 가능하게 하는 ES6 기능을 활용하여 달성되는 작은 번들 크기를 유지하려는 욕구에 의해 이루어졌습니다. 그러나 널리 지원되는 언어 기능만 활용됩니다.

아직 ES5로 트랜스파일하는 중이라면 직접 트랜스파일하고 폴리필을 추가하여 라이브러리를 사용할 수 있습니다. 하지만 이렇게 하면 번들 크기가 늘어나므로 권장되지 않습니다. 대신, 이는 빌드 구성을 다시 검토하고 최신 JavaScript 기능을 수용할 수 있는 완벽한 기회일 수 있습니다.

즐거운 코딩을 즐겨보세요!

위 내용은 Fluent Streams: 풍부한 반복 가능 조작을 위한 라이브러리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.