JavaScript에서 자신 만의 Reduce, Filter 및 Map 메서드를 작성하는 방법

JavaScript로 자신 만의 Reduce, Filter 및 Map 메서드 작성

Unsplash에 James Harrison의 사진

이 기사는 YouTube 의 JavaScript Mock 인터뷰 에서 영감을 받았습니다 .

질문은 :

) 가 배열에서 호출 될 때 1,2 print()[1, 2].print()출력 하는 함수를 작성하십시오 .print(

이 질문은 저에게 호기심을 불러 일으켰고 같은 유형의 유사한 질문을 조사했습니다.

이것이 제가이 기사에서 공유 할 내용입니다.

시작하기 전에 먼저 몇 가지 기본 사항을 살펴 보겠습니다.

필요한 기본 정보는 다음과 같습니다.

map(),filter()reduce() 방법은 배열에 호출하고 작성하는 배열 자바 스크립트 클래스입니다.

계속하기 전에 이것을 우리 마음 속에 간직합시다.

괜찮아. 한 번에 한 가지 방법.

나만의 방법 작성map()

방법을 살펴 보겠습니다 map().

var a=[5,2,6,8];
var r = a.map(item => item*2);          // map() is invoked here
console.log(r);

무엇을 않는 map()방법은 정확히 무엇입니까?

map()메서드는 작업을 수행 하고 출력을 배열로 반환합니다.

좋구나.

메소드의 구문을 보여줄 수 있습니까?

확실한.

다음은 MDNmap()메소드 구문입니다 .

let new_array = arr.map (function callback (currentValue [, index [, array]]) {
// new_array의 반환 요소
} [, thisArg])

구문에 따르면 메서드에 callback전달 된 함수가 map() 있습니다. 작업을 수행하기위한 매개 변수가 callback 함수에 전달됩니다 .

괜찮아.

우리 자신의 방법으로 어떻게 시작 map()합니까?

우리 자신의 myMap() 방법을 선언 합니다.

Array.prototype.myMap = function(callback){} // declaring map()method.

이것은 callback 함수에 전달되어 callback 나중에 함수 를 호출해야 함을 나타냅니다 . 원하는 이름이 될 수 있지만 이해의 편의를 위해 callback.

우리 자신의 방법을 작성하기위한 단계는 무엇입니까 map() ?

네 가지 간단한 단계는 다음과 같습니다.

  1. 결과를 저장하는 배열을 선언하십시오.
  2. 1에서 n까지 루프를 실행합니다. ( n 은 배열의 길이입니다).
  3. 단계 (1)에서 선언 한 배열에 결과를 푸시합니다.
  4. 결과 배열을 반환합니다.

Array.prototype.myMap=function(callback){
  
 var arr = [];                       // step 1   
 
 for(let i=0; i<this.length; i++)    // step 2
 {
  arr.push(callback(this[i]));       // step 3
 }
 
 return arr;                         // step 4
};

this JavaScript의 키워드입니다. 메서드 this 를 호출 한 배열을 제공합니다 myMap().

myMap()출력과 함께 우리의 방법을 보자 .

myMap () 메서드 호출시 출력

우리는 우리 자신의 map() 메서드를 성공적으로 만들고 호출했습니다 . myMap()똑같이 작동합니다.

무엇 향후 계획?

나만의 방법 작성filter()

우리만의 map()방법을 작성한 후 우리만의 방법을 시도 해보자 filter() .

방법은 무엇을 filter() 합니까?

방법을 살펴 보겠습니다 filter() .

var a=[5,21,61,8,1];
var result = a.filter(i => i>20);
console.log(result);

방법은 무엇을 filter() 합니까?

filter() 메서드는 테스트를 통과하고 결과를 배열로 반환합니다.

그리고 방법 의 구문은 무엇 filter() 입니까?

다음은 MDN 의 구문입니다 .

let newArray = arr.filter(callback(element[, index, [array]])[, thisArg])

여기서 수행 한 작업은 작업을 수행하는 것이며 filter() 메서드는 테스트를 통과 한 모든 요소를 ​​포함하는 배열을 반환합니다.

메서드의 골격은 다음과 같습니다.

Array.prototype.myFilter=function(callback){}
  1. 결과를 저장하는 배열을 선언하십시오.
  2. 작업을 수행하십시오.
  3. 결과를 저장하는 배열에 결과를 저장합니다.
  4. 결과 배열을 반환합니다.

Array.prototype.myFilter = function(callback){
 
 var arr = [];                         // step 1
 
 for(let i=0; i<this.length; i++)
 {
  if(callback(this[i]) == true)        // step 2
  {
   arr.push(this[i]);                  // step 3
  }
  
 }
 
 return arr;                           // step 4
}

여기있어

자신 만의 filter () 메서드 작성

this 배열을 제공하고 callback 나중에 호출되도록 전달되는 함수입니다.

사용 if 조건이 충족되는지 확인 합니다 . 테스트를 통과 한 배열의 요소 만 수집합니다.

자신 만의 reduce () 메서드 작성

방법을 살펴 보겠습니다 reduce() .

var arr=[5,21,61,8,1];
var result = arr.reduce((acc, item) => acc+item);
console.log(result);

reduce() 메서드는 배열의 모든 요소를 ​​추가하고 합계를 반환합니다.

MDN 의 구문을 살펴 보겠습니다 .

arr.reduce (callback (accumulator, currentValue, [, index [, array]]) [, initialValue])

감소 () 메소드는 두 된 파라미터 갖는 누산기 및 값 . 누산기는 배열에있는 모든 항목의 결과를 합산하고 누적합니다.

우리 자신의 방법으로 어떻게 시작 reduce()합니까?

우리의 기능을 선언하면 :

Array.prototype.myReduce = function(callback)(){}
  1. 누산기 선언
  2. 1에서 n까지 for 루프 실행
  3. 단계 (1)에서 누산기의 배열에있는 모든 요소의 합계를 누적합니다.
  4. 누산기 반환

Array.prototype.myReduce = function(callback){
var a =0;                              // Step 1
for(let i=0; i<this.length; i++)       // Step 2
     {
         callback(a = a+this[i])            // Step 3
}
      
     return a;                              // Step 4
}

이제 코드를 작성하여 실행도 확인합니다.

나만의 myReduce () 메서드 작성

이것은 myReduce()원래의 reduce()방법 처럼 작동합니다 . 그리고 우리에게 올바른 출력을 제공합니다.

나는 기본을 만지고 내가 이해하는 한이 기사를 작성했습니다. 오류 및 누락이 있으면 알려주세요. 읽어 주셔서 감사합니다.

Suggested posts

JavaScript : 사실, 부인 / 선생님 / 재판 ... 2 부

JavaScript : 사실, 부인 / 선생님 / 재판 ... 2 부

1 부에서는 기본적인 JavaScript 기본 사항을 다루기 시작했습니다. 이제 우리는 몇 가지 개념을 파헤 치고이 미친 일이 어떻게 작동하는지 더 잘 이해하려고 노력할 것입니다! 컬렉션은 데이터 컬렉션으로 구성된 객체 유형입니다. 배열,지도, 세트는 모두 객체에서 데이터를 수집하고 저장하는 다른 방법입니다.

성공적인 웹 프로젝트를 만드는 데 도움이 될 수있는 9 가지 팁

놓치고 싶지 않은 필수 팁.

성공적인 웹 프로젝트를 만드는 데 도움이 될 수있는 9 가지 팁

성공적인 웹 사이트를 구축하는 것은 매우 어렵습니다. 웹은 경쟁이 치열한 영역이며 통과해야합니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.