JavaScript에서 map (), reduce () 및 filter ()를 사용하여 코드베이스를 단순화하는 방법

Array.reduce 에 대해 읽고 얼마나 멋진 지 읽었을 때 처음 발견 한 유일한 예는 숫자의 합입니다. 이것은 '유용함'에 대한 우리의 정의가 아닙니다. ?

게다가 실제 코드베이스에서는 본 적이 없습니다. 그러나 내가 많이 본 것은 Array.reduce 가 한 줄로 할 수 있는 정규 작업을 해결하기위한 7-8 줄의 for-loop 문입니다 .

최근에 이러한 훌륭한 기능을 사용하여 몇 가지 모듈을 다시 작성했습니다. 코드베이스가 얼마나 단순 해 졌는지 놀랐습니다. 그래서, 아래는 좋은 목록입니다.

지도 또는 축소 방법 을 사용하는 좋은 예가 있다면 댓글 섹션에 게시하세요. ?

시작하자!

1. 숫자 / 문자열 배열에서 중복 제거

글쎄, 이것은 map / reduce / filter 에 관한 것이 아닌 유일한 것이지만 너무 작아서 목록에 넣지 않기가 어려웠습니다. 또한 몇 가지 예에서도 사용할 것입니다.

const values = [3, 1, 3, 5, 2, 4, 4, 4]; const uniqueValues = [...new Set(values)]; // uniqueValues is [3, 1, 5, 2, 4]

2. 간단한 검색 (대소 문자 구분)

필터 () 메소드는 제공된 기능에 의해 구현 된 시험을 통과하는 모든 요소와 새로운 배열을 생성한다.

const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; let res = users.filter(it => it.name.includes('oli')); // res is []

3. 간단한 검색 (대소 문자 구분 안함)

let res = users.filter(it => new RegExp('oli', "i").test(it.name)); // res is [ { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]

4. 관리자 권한이있는 사용자가 있는지 확인

일부 () 어레이의 적어도 하나 개의 원소 제공된 기능에 의해 구현되는 테스트를 통과 여부 검사 방법.

const hasAdmin = users.some(user => user.group === 'admin'); // hasAdmin is true

5. 배열의 평면화

첫 번째 반복의 결과는 다음과 같습니다. [… [],… [1, 2, 3]]은 [1, 2, 3]으로 변환됨을 의미합니다.이 값 은 두 번째 반복에서 'acc' 로 제공되며 곧.

const nested = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]; let flat = nested.reduce((acc, it) => [...acc, ...it], []); // flat is [1, 2, 3, 4, 5, 6, 7, 8, 9]

reduce ()[] 의 두 번째 인수로 빈 배열 을 생략하여이 코드를 약간 개선 할 수 있습니다 . 그런 다음 중첩 의 첫 번째 값이 초기 acc 값 으로 사용됩니다 . Vladimir Efanov에게 감사드립니다.

let flat = nested.reduce((acc, it) => [...acc, ...it]); // flat is [1, 2, 3, 4, 5, 6, 7, 8, 9]

감소 내에서 스프레드 연산자를 사용하는 것은 성능에 좋지 않습니다. 이 예제는 성능 측정이 유스 케이스에 적합한 경우입니다. ☝️

Paweł Wolak 덕분에 Array.reduce 가없는 더 짧은 방법이 있습니다 .

let flat = [].concat.apply([], nested);

또한 Array.flat 이 출시 될 예정이지만 아직 실험적인 기능입니다.

6. 지정된 키의 빈도를 포함하는 개체를 만듭니다.

배열의 각 항목에 대한 'age'속성을 그룹화하고 계산해 보겠습니다.

const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; const groupByAge = users.reduce((acc, it) => , {}); // groupByAge is {23: 1, 28: 2, 34: 1}

이것을 제안한 sai krishna에게 감사드립니다!

7. 개체 배열 인덱싱 (조회 테이블)

ID로 사용자를 찾기 위해 전체 배열을 처리하는 대신 사용자의 ID가 키를 나타내는 객체를 구성 할 수 있습니다 (일정한 검색 시간 포함).

const uTable = users.reduce((acc, it) => (acc[it.id] = it, acc), {}) // uTable equals: { 11: { id: 11, name: 'Adam', age: 23, group: 'editor' }, 47: { id: 47, name: 'John', age: 28, group: 'admin' }, 85: { id: 85, name: 'William', age: 34, group: 'editor' }, 97: { id: 97, name: 'Oliver', age: 28, group: 'admin' } }

ID로 데이터에 uTable[85].name많이 접근해야 할 때 유용합니다 .

8. 배열에있는 각 항목의 주어진 키에 대해 고유 한 값을 추출합니다.

기존 사용자 그룹 목록을 만들어 보겠습니다. 맵 () 메소드 호출 어레이의 모든 요소에 대해 제공되는 함수 호출의 결과로 새로운 배열을 생성한다.

const listOfUserGroups = [...new Set(users.map(it => it.group))]; // listOfUserGroups is ['editor', 'admin'];

9. 객체 키-값 맵 반전

const cities = { Lyon: 'France', Berlin: 'Germany', Paris: 'France' }; let countries = Object.keys(cities).reduce( (acc, k) => (acc[cities[k]] = [...(acc[cities[k]] || []), k], acc) , {}); // countries is { France: ["Lyon", "Paris"], Germany: ["Berlin"] }

이 한 줄짜리는 꽤 까다로워 보입니다. 여기서 쉼표 연산자를 사용합니다. 즉, 괄호 안에 마지막 값인 —을 반환합니다 acc. 이 예제를보다 생산 준비가되고 성능이 뛰어난 방식으로 다시 작성해 보겠습니다.

let countries = Object.keys(cities).reduce((acc, k) =>  []; acc[country].push(k); return acc; , {});

여기서는 스프레드 연산자를 사용하지 않습니다. 각 reduce () 호출 에 대해 새 배열을 생성하므로 성능이 크게 저하됩니다. O (n²). 대신 오래된 좋은 push () 메서드 .

10. 섭씨 값 배열에서 화씨 값 배열 만들기

주어진 공식으로 각 요소를 처리하는 것으로 생각하십니까?

const celsius = [-15, -5, 0, 10, 16, 20, 24, 32] const fahrenheit = celsius.map(t => t * 1.8 + 32); // fahrenheit is [5, 23, 32, 50, 60.8, 68, 75.2, 89.6]

11. 개체를 쿼리 문자열로 인코딩

const params = {lat: 45, lng: 6, alt: 1000}; const queryString = Object.entries(params).map(p => encodeURIComponent(p[0]) + '=' + encodeURIComponent(p[1])).join('&') // queryString is "lat=45&lng=6&alt=1000"

12. 사용자 테이블을 지정된 키로 만 읽을 수있는 문자열로 인쇄합니다.

Sometimes you want to print your array of objects with selected keys as a string, but you realize that JSON.stringify is not that great ?

const users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; users.map(({id, age, group}) => `\n${id} ${age} ${group}`).join('') // it returns: " 11 23 editor 47 28 admin 85 34 editor 97 28 admin"

JSON.stringify can make the string output more readable, but not as a table:

JSON.stringify(users, ['id', 'name', 'group'], 2); // it returns: "[ { "id": 11, "name": "Adam", "group": "editor" }, { "id": 47, "name": "John", "group": "admin" }, { "id": 85, "name": "William", "group": "editor" }, { "id": 97, "name": "Oliver", "group": "admin" } ]"

13. Find and replace a key-value pair in an array of objects

Let’s say we want to change John’s age. If you know the index, you can write this line: users[1].age = 29. However, let’s take a look at another way of doing it:

const updatedUsers = users.map( p => p.id !== 47 ? p : {...p, age: p.age + 1} ); // John is turning 29 now

Here instead of changing the single item in our array, we create a new one with only one element different. Now we can compare our arrays just by reference like updatedUsers == users which is super quick! React.js uses this approach to speed up the reconciliation process. Here is an explanation.

14. Union (A ∪ B) of arrays

Less code than importing and calling the lodash method union.

const arrA = [1, 4, 3, 2]; const arrB = [5, 2, 6, 7, 1]; [...new Set([...arrA, ...arrB])]; // returns [1, 4, 3, 2, 5, 6, 7]

15. Intersection (A ∩ B) of arrays

The last one!

const arrA = [1, 4, 3, 2]; const arrB = [5, 2, 6, 7, 1]; arrA.filter(it => arrB.includes(it)); // returns [1, 2]

As an exercise try to implement difference (A \ B) of the arrays. Hint: use an exclamation mark.

Thanks to Asmor and incarnatethegreat for their comments about #9.

That’s it!

If you have any questions or feedback, let me know in the comments down below or ping me on Twitter.

If this was useful, please click the clap ? button down below a few times to show your support! ⬇⬇ ??

Here are more articles I’ve written:

How to get started with internationalization in JavaScript

By adapting our app for different languages and countries, we provide a better user experience. It’s simpler for users…

Production ready Node.js REST APIs Setup using TypeScript, PostgreSQL and Redis.

A month ago I was given a task to build a simple Search API. All It had to do is to grab some data from 3rd party…

Thanks for reading ❤️