개발/javascript

자바스크립트 배열 내장 함수(4)

희운1205 2021. 12. 7. 17:48
반응형

 1) reduce

:  배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결괏값을 반환

누적 값과 현재의 값을 이용하여 여러 기능을 구현할 수 있는 유용한 함수

* reduce는 callback 함수에 acc(누산기), cur(현재값), idx(현재 인덱스), src(원본 배열)의 네 개의 인자를 가지고 있음

구문

arr.reduce(callback[, initialValue])

예1) 합산
const array1 = [1, 2, 3, 4];
const reducer = (previousValue, currentValue) => previousValue + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
결과 : 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
결과: 15

예2) 값(value)이 동일한 것 개수 세기
var arr = ['a', 'a', 'a', 'c', 'c', 'd', 'e'];

var reducer = (acc, cur, index) => {
  // 누적된 값과 현재값이 일치하지 않으면
  if (!acc[cur]) {
    acc[cur] = 1;
  } else {
    // 누적된 값과 현재값이 일치하면
    acc[cur] = acc[cur] + 1;
  }

  return acc;
};

var sorting = arr.reduce(reducer, {});

console.log(sorting); 
결과 : { a: 3, c: 2, d: 1, e: 1 }

3) 배열의 숫자중 짝수의 값을 찾아서 * 2를 한후 새로운 배열에 넣어준다.

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 16, 20];

var reducer = (acc, cur, index) => {
  if (cur % 2 === 0) acc.push(cur * 2);
  return acc;
};

var double = arr.reduce(reducer, []);

console.log(arr); 
결과 : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 15, 16, 20]
console.log(double);
결과 : [4, 8, 12, 16, 20, 32, 40]


4) 배열의 일부 키값중에 중복된 데이타를 제외하여 가져옴
const input = [
  {
    title: '태극기휘날리며',
    year: '2005',
    cast: ['장동건', '원빈', '공형진', '김수로']
  },
  {
    title: '주유소습격사건',
    year: '2013',
    cast: ['차승원', '김수로', '유해진', '유오성']
  },
  {
    title: '하녀',
    year: '1997',
    cast: []
  }
];
const key = 'cast';

const flatReducer = (acc, cur) => {
  cur[key].reduce((acc2, cur2) => {
    if (acc2.indexOf(cur2) === -1) acc2.push(cur2);
    return acc2;
  }, acc);

  return acc;
  
};
const flatten = input.reduce(flatReducer, []);
console.log(flatten); // 배열의 일부값
결과 : ['장동건', '원빈', '공형진', '김수로', '차승원', '유해진', '유오성']
반응형