javascript에서 자체 Array.map() 메서드 구현

Array.map()가 어떻게 작동하는지 알면 here을 직접 점프할 수 있습니다.

javascript에서 Array.map이란 무엇입니까?

A map is a built-in function of Arrays in javascript which helps us iterate over each individual element of the array and returns a brand new array.

먼저 지도가 어떻게 작동하는지 이해하겠습니다.

예를 들어:

const sample = [1,2,3];
const mapResult = sample.map(function(val, index, array) {
    console.log('val :', val, 'index :', index, 'array :', array);
    return (val * 2);
});

위 스니펫의 출력은 다음과 같습니다.


따라서 배열의 각 값에 대해 함수가 실행된다는 결론을 내릴 수 있습니다. 그리고 이 함수는 3개의 인수에 액세스할 수 있습니다.

처리 중인 현재 요소

현재 요소의 인덱스

전체 어레이

우리는 모든 반복에서 val*2를 반환하고 mapResult에 저장됩니다.
따라서 mapResult에는 [2,4,6]이 있고 이것은 원래 배열sample을 수정하지 않습니다.

따라서 각 반복 중에 map에 의해 반환되는 것은 무엇이든 완전히 새로운 배열 내부에 저장되고 원래 배열은 그대로 유지됩니다.

Note: If nothing is returned from the function thenundefined gets stored in the output array.And this array's length will be same as that of the array on which map is done.

이전 예제에서 아무 것도 반환하지 않았다면


map는 항상 배열을 반환합니다. 따라서 Array.map 함수에서 명시적인 반환을 작성할 필요가 없기 때문에 대부분의 경우 맵을 사용하여 React에서 목록을 반복합니다.

나만의 지도 방법[mymap]을 만들 수 있습니다.

1 단계:

Array.mymap()를 사용할 수 있는 새 방법[mymap]을 생성합니다.

Array.mymap()을 사용하려면 Array.prototype에 mymap() 의 정의가 있어야 합니다.

Array.prototype.mymap = function(){

}

이제 우리는 [1,2,3].mymap();를 실행할 수 있고 undefined를 반환할 것입니다.

2 단계:

map는 function 내부의 인수로 호출됩니다. (예: [1,2].map(function(val, index, arr){}) ). 따라서 우리의 mymap 함수는 함수를 인수로 받아들여야 합니다.

인수가 3개인 배열의 각 값에 대해 인수의 함수를 호출해야 합니다.

현재 요소

현재 요소의 인덱스

전체 어레이

this는 mymap가 완료된 어레이를 나타냅니다. this는 배열 자체입니다.

Array.prototype.mymap = function(callback) {
    for (let index = 0; index < this.length; index++) {
        callback(this[index], index, this);
    }
}

3단계:

마지막으로 결과를 새 배열로 출력하고 반환합니다.

Array.prototype.mymap = function(callback) {
    const resultArray = [];
    for (let index = 0; index < this.length; index++) {
        resultArray.push(callback(this[index], index, this));
    }
    return resultArray;
}

산출:

그게 다야 :) 우리는 우리 자신의지도 방법을 구현했습니다.

도움이 되셨다면 공유해주세요 :)



다음 단계: 유사한 접근 방식을 사용하여 개체에 대한 사용자 지정 맵을 만듭니다.