javascript에서 매핑, 필터링 및 축소 - 쉬운 방법

JavaScript에는 map, reduce 및 filter의 세 가지 배열 메서드가 있습니다. 이러한 모든 기능은 배열을 반복하고 기능을 수행합니다. 각각은 함수의 출력에 대한 응답으로 새 배열을 만듭니다. 이 기사에서 각각의 용도에 대한 이론적 근거를 발견하게 될 것입니다.

지도()
map 메서드는 모든 배열 요소에 대해 함수를 호출한 결과로 새 배열을 만듭니다.

const output = arr.map(function)
this function tells about the transformation I want on each element of the array.

예를 들어 보겠습니다.

const arr = [6, 3, 5, 9, 2];
//if we want to double each element in the arr, we can use map
const doubleArr = arr.map(double);
//creating the function double
function double(x){
  return 2 * x;
}

//the map will run double function for each element in the arr, and create a new array and returns it.
console.log(doubleArr); //[12, 6, 10, 18, 4];

그래서 기본적으로 map 함수는 모든 값을 매핑하고 주어진 조건에 따라 변환하는 것입니다.

필터()
필터 기능은 배열 내부의 값을 필터링하는 데 사용됩니다. 이 메소드는 또한 인수 메소드에 의해 설정된 조건을 만족하는 주어진 배열의 요소만으로 구성된 주어진 배열에서 새 배열을 만듭니다.

예를 들어 보겠습니다.
배열을 제공했고 arr에 있는 값에 대해 4보다 큰 모든 요소를 ​​포함하는 새 배열을 원한다고 가정합니다.
따라서 ans는 [5, 6, 9, 8]과 같이 표시됩니다.

const arr = [5, 6, 1, 4, 9, 8];
//filter values > 4
function isGreaterThan4(x){
  return x > 4;
}
const arr2 = arr.filter(isGreaterThan4);

//we can also use arrow function to rewrite the same code as :
const arr2 = arr.filter((x) => x > 4);

console.log(arr2); //[5, 6, 9, 8]

줄이다()
배열의 모든 값을 가져와 단일 출력으로 제공하는 함수입니다. 단일 출력을 제공하도록 배열을 줄입니다.
예를 들어 보겠습니다.

먼저 루프를 사용하여 주어진 배열의 합을 찾은 다음 이를 더 잘 이해하기 위해 reduce를 사용하도록 이동합니다.

const array = [5, 1, 3, 2, 6];
// Let's calculate sum of elements of array - Non functional programming way
function findSum(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum = sum + arr[i];
    }
return sum; }
console.log(findSum(array)); // 17

// reduce function way
const sumOfElem = arr.reduce(function (accumulator, current) {
    // current represent the value of array
    // accumulator is used the result from element of array.
    // In comparison to previous code snippet, *sum* variable is
*accumulator* and *arr[i]* is *current*
    accumulator = accumulator + current;
    return accumulator;
}, 0); //In above example sum was initialized with 0, so over here
accumulator also needs to be initialized, so the second argument to reduce
function represent the initialization value.
console.log(sumOfElem); // 17

이 트윗은 전체 기사를 요약합니다.





스티븐 루셔


@steveluscher






트윗에서 매핑/필터/축소:map([🌽, 🐮, 🐔], cook)=> [🍿, 🍔, 🍳]filter([🍿, 🍔, 🍳], isVegetarian)=> [🍿, 🍳]reduce ([🍿, 🍳], 먹다)=> 💩


오전 02:08 - 2016년 6월 10일











또한 자세한 설명을 원하시면 확인하십시오.