당신이 필요로하는 유일한 것은 ... 감소

이 기사에서는 필요한 유일한 수집 방법이 Array.prototype.reduce 임을 보여줍니다.

이것은 다른 모든 메소드가 reduce 의 특수한 경우임을 보여주기 위한 것일 뿐입니다.

원래 배열을 변경하지 않는 배열 메서드만 데모됩니다.

Array.prototype.reduce는 무엇입니까

reduce 메서드는 요소의 컬렉션(배열)을 단일 값으로 변환하는 함수입니다.

단일 값은 다른 컬렉션이 될 수도 있습니다.
reduce의 적용을 3개의 동등한 클래스로 나눌 수 있습니다.

컬렉션을 다른 유형으로 줄이는 단일 개체/숫자/문자열을 반환하는 유형 1 감소

동일한 수의 요소가 있는 다른 컬렉션을 반환하는 유형 2 감소

다른 수의 요소가 있는 다른 컬렉션을 반환하는 유형 3 reduce

// Type 1: the sum of the elements of an array
const sum = [1, 2, 3].reduce((acc, value) => acc + value, 0)

// Type 2: convert an array of number to an array of strings
const strings = [1, 2, 3].reduce((acc, value) => [...acc, String(1)], [])

// Type 3: remove even elements
const randoms = [1, 2, 4].reduce((acc, value) => {
  if (value%2 === 0) return acc
  return [...acc, value] 
}, [])

구현

map

filter

some

every

join

flat

Array.prototype.map

map 메서드는 모든 배열 요소에 대해 함수를 호출한 결과로 새 배열을 만듭니다.
배열의 모든 요소를 ​​변환하는 것이 유용합니다.

예시

// calculate the spare root of all the elements of the array
const result = [4, 9, 16].map((value) => Math.sqrt(value)) // => [2, 3, 4]

항상 같은 수의 요소를 반환하는 유형 2 감소입니다.

감소를 사용한 구현:

const map = (array, callbackfn) => array
   .reduce((acc, value, i, thisArg) => [...acc, callbackfn(value, i, thisArg)], [])

Array.prototype.filter

filter 메서드는 테스트(함수로 제공)를 통과하는 모든 배열 요소로 채워진 배열을 생성합니다.

예시

// return all the even elements
const result = [1, 2, 3].filter((value) => value % 2 === 0) // => [2]

다른 수의 요소가 있는 배열을 반환할 수 있는 유형 3 축소입니다.

감소를 사용한 구현:

const map = (array, predicate) => array
   .reduce((acc, value, i, thisArg) => {
  if (predicate(value, i, thisArg)) return [...acc, value];
  return acc;
}, [])

Array.prototype.some

some 메서드는 배열의 요소 중 하나라도 테스트(함수로 제공)를 통과하는지 확인합니다.

예시

// check if the array contains an even number
const containsAnEven = [1, 2, 3].some((value) => value % 2 === 0) // => true

단일 값(이 경우 부울)을 반환하는 유형 1 감소입니다.

감소를 사용한 구현:

const some = (array, predicate) => array
   .reduce((acc, value, i, thisArg) => (acc || predicate(value, i, thisArg)), false)

Array.prototype.ever

every 메서드는 배열의 모든 요소가 테스트(함수로 제공)를 통과하는지 확인합니다.

예시

// check if all the elementens of the array are even number
const allEven = [1, 2, 3].some((value) => value % 2 === 0) // => false

단일 값(이 경우 부울)을 반환하는 유형 1 감소입니다.

감소를 사용한 구현:

const every = (array, predicate) => array
   .reduce((acc, value, i, thisArg) => (acc && predicate(value, i, thisArg)), true)

Array.prototype.join

join 메서드는 배열을 구분 기호를 사용하여 요소를 연결하는 문자열로 반환합니다.

예시

// join all strings using a space 
const helloDevs = ['Hello', 'Devs'].join(' ') // => "Hello Devs"

단일 값(이 경우 문자열)을 반환하는 유형 1 감소입니다.

감소를 사용한 구현:

const join = (array, separator) => array
   .reduce((acc, value, i, thisArg) => (acc + separator + value), '')

Array.prototype.flat

flat 메서드는 하위 배열의 요소가 연결된 새 배열을 만듭니다.

예시

const results = [1, [2, 3]].flat() // => [1, 2, 3]

원본보다 더 많은 요소가 포함된 배열을 반환할 수 있는 유형 3 축소입니다.

감소를 사용한 구현:

const flat = (array, level = 1) => array
   .reduce((acc, value, i, thisArg) => {
    if (!level) return [...acc, value]
    if (Array.isArray(value)) return [...acc, ...flat(value, level - 1)]
    return [...acc, value]
   }, '')

🙏 댓글로 많은 피드백 부탁드립니다🙏