JavaScript에서 Array.prototype 메서드 의 일부로 이 세 가지 메서드가 있지만 이들 간의 차이점은 무엇이며 정확히 어떤 역할을 합니까? 그럼 그들에게 뛰어 들어 봅시다!

1. 이제 filter() 메서드부터 시작하겠습니다.

filter() 메서드는 배열에 적용한 다음 새 배열을 만들고 새 배열에서 제공한 함수를 기반으로 첫 번째 배열을 필터링합니다. 예를 들어 몇 개의 요소를 포함하는 oldArray 라는 배열이 있고 일부 특정 멤버를 유지하고 newArray 라는 새 배열에 저장하여 filter() 메서드를 사용할 수 있다고 가정해 보겠습니다. 이 목적:

//ES5
var oldArray = [10, 20, 30, 40, 50];
var newArray = oldArray.filter(function(number){
    return number > 35
});
console.log(newArray) // [40, 50];

// ES6
const oldArray = [10, 20, 30, 40, 50];
const newArray = oldArray.filter(number=> number > 35);
console.log(newArray); // [40, 50]

필터 방법에는 두 가지 중요한 사항이 있습니다.

• 새 배열을 생성하므로 위 의 oldArray를 기록하면 여전히 원래 배열을 갖게 됩니다 .
• 필터 메서드에 전달하는 함수는 실제로 True/False를 던져 요소가 newArray의 일부가 될지 여부를 결정합니다.

2. map() 메서드:

이 메서드는 배열을 가져온 다음 해당 배열의 요소를 함수가 원하는 대로 변환한 다음 새 배열을 만들고 새 배열에 모두 저장합니다. 숫자 배열이 있고 어떤 이유로 모든 요소를 ​​두 배로 늘리고 싶다고 상상해 보십시오. forEach 루프를 사용하여 모든 요소를 ​​가져온 다음 두 배로 늘릴 수 있지만 map () 메서드 도 사용할 수 있습니다 .

따라서 oldArray를 다시 확인하고 map() 메서드로 작업하는 방법을 살펴보겠습니다.

//ES5
var oldArray = [10, 20, 30, 40, 50];
var newArray = oldArray.map(function(number){
    return number * 2
});
console.log(newArray) // [20, 40, 60, 80, 100];
//ES6
const oldArray = [10, 20, 30, 40, 50];
const newArray = oldArray.map(number => number * 2);
console.log(newArray) // [20, 40, 60, 80, 100];

3. reduce() 메서드:

reduce() 메서드는 배열을 가져와 단일 값으로 줄입니다 . 예를 들어, 숫자 배열이 있고 숫자의 총량을 구하고 싶다고 가정해 보겠습니다. 새 변수를 만들고 0으로 설정하고 for 루프를 사용하여 모든 단일 요소를 추가할 수 있습니다. 방금 생성한 변수에 대한 배열. 또는 다음과 같이 reduce() 메서드 에 감속기 함수를 제공할 수 있습니다 .

//ES5
var myArray = [1, 2, 3, 4];
var reducedAmount = myArray.reduce(function(total, currentValue){
    return total + currentValue
});
console.log(reducedAmount); // 10
//ES6
const myArray = [1, 2, 3, 4];
const reducedAmount = myArray.reduce(
  (accumulator, currentValue) => accumulator + currentValue);
console.log(reducedAmount); // 10
//here we have reduced myArray to a single number value

      
                

                    
                    
                
            

reduce()가 배열을 가져와 단일 값으로 줄인다고 언급했지만 이 값은 객체 또는 새 배열이 될 수도 있음을 명심하십시오 . 또한 이 값에 대한 초기 금액을 지정한 다음 배열을 축소하고 기본값과 함께 저장할 수 있습니다. 예를 들어 배열이 있다고 가정합니다. 우리는 그것을 새로운 배열로 줄이고 싶습니다 (앞서 언급했듯이 배열을 배열이 될 수 있는 값으로 줄일 수 있습니다).

우리는 또한 oldArray 에 없는 몇 가지 추가 요소를 새 배열에 추가하기를 원하므로 원하는 요소가 있는 배열을 전달한 다음 oldArray 를 그것으로 줄일 수 있습니다. 약간 불분명하게 들릴 수 있다는 것을 알고 있으므로 코드에서 살펴보겠습니다. 앞의 예에서는 배열 요소의 총량을 얻었지만 이제 원하는 초기 값 에 총량을 더하고 싶을 때입니다. 그때 가 시작점인 reduce() 메서드에 또 다른 인수를 전달할 수 있습니다. state of 아래 코드와 같이 두 번째 인수로 10을 지정했습니다.accumulator

const oldArray = [1, 2, 3, 4];
let sum = oldArray.reduce((accumulator,currentValue) => {
 return accumulator + currentValue;
},10); 
console.log(sum); // 20 ((1+2+3+4)+10)

• accumulator
• currentValue
• currentIndex
• array

const numArray = [10, 20, 30];
const average = numArray.reduce(
  (accumulator, currentValue, currentIndex, array) => {
    accumulator += currentValue;
    return currentIndex === array.length - 1 ? 
      accumulator / array.length : accumulator
  }
}); 
// we have not provided an initial value
console.log(average); // 20

그리고 마지막 팁으로 map( ) 메서드와 filter() 메서드를 모두 사용하는 대신 reduce() 메서드만 사용하여 작업을 수행할 수 있습니다 .

친구들과 공유하세요! 박수 최대 50회.

주저하지 마시고 여러분의 생각과 아이디어를 저와 공유해 주십시오. 내 포트폴리오를 방문하여 Twitter 에서 저에게 연락 하거나 다른 소셜 미디어에서 저를 찾을 수 있습니다.

나에게서 더 읽어보기:

Angular Husky 6 Lint(prettier + eslint) 및 JavaScript 프로젝트용 commitlint의 다중 인터셉터 Angular Material 및 Custom Validator를 포함한 Angular 양식(반응 양식)