javascript

javascript-map_reduce_filter

map, reduce, filter

Array.prototype.map

구문

1
arr.map(callback[, thisArg])
  • callback 매개변수
    • currentValue: 현재 요소
    • index: 인덱스
    • array: 대상 Array
  • thisArg: callback시 this로 활용되는 값
    사용법1
    1
    [1, 2, 3, 4].map(function (value) { return value * 2; });
    2
    // [2, 4, 6, 8]
    3
    ["1", "2", "3", "4"].map(Number);
    4
    // [1, 2, 3, 4]
    사용법2
    1
    //Array.prototype.map;
    2
    [].map.call("Hello WOrld", function(x) { return x.charCodeAt(0) });
    3
    //[ 72, 101, 108, 108, 111, 32, 87, 79, 114, 108, 100 ]

    Array.prototype.reduce

    구문
    1
    arr.reduce(callback[, initialValue]);
  • callback 매개변수
    • accumulator :
      • initialValue이 존재하면 해당 값으로 초기화
      • 이후 callback의 return 값으로 대체
    • currentValue : 현재 값
    • currentIndex : 현재 값의 Index
    • array : 대상 Array

사용법1

  • initialValue 생략
  • currentIndex = 1 부터 시작
    1
    var arr = [0, 1, 2, 3, 4];
    2
    var res1 = arr.reduce(function (acc, curr, idx, arr) { return acc + curr; });
    3
    // sum of arr values : 10
    4
    var res2 = arr.reduce((acc, curr) => Math.max(acc, curr));
    5
    // max of arr values : 4
    사용법2
  • initialValue 활용
  • currentIndex = 0 부터 시작
  • accumulator = initialValue 로 초기화
    1
    var arr = [[0, 1], [2, 3], [4, 5]];
    2
    var res = arr.reduce((acc, curr) => acc.concat(curr), []);
    3
    // [0, 1, 2, 3, 4, 5]
    1
    var arr = [
    2
        { id: 0, name: "Adams" }, 
    3
        { id: 1, name: "Edwards" }, 
    4
        { id: 2, name: "Nelson" }
    5
    ];
    6
    var res = arr.reduce(function (acc, curr) {
    7
        acc[curr.id] = curr.name;
    8
        return acc;
    9
    }, {});
    10
    // { 0: "Adams", 1: "Edwards", 2: "Nelson" }

    Array.prototype.filter

    구문
    1
    var new_array = arr.filter(callback[, thisArg]);
  • callback:
    • element
    • index
    • array
  • thisArg: callback의 this로 사용하는 값

사용법

1
var result = [1, 2, 3, 4, 5].filter(function (value) { return value > 3; });
2
// [4, 5]
Share