javascript에서 자체 Array.map() 메서드 구현
7701 단어 reactfrontendmapjavascript
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 then
undefined
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]을 생성합니다.mymap()
의 정의가 있어야 합니다.Array.prototype.mymap = function(){
}
이제 우리는
[1,2,3].mymap();
를 실행할 수 있고 undefined
를 반환할 것입니다.2 단계:
map
는 function 내부의 인수로 호출됩니다. (예: [1,2].map(function(val, index, arr){})
). 따라서 우리의 mymap
함수는 함수를 인수로 받아들여야 합니다. 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;
}
산출:
그게 다야 :) 우리는 우리 자신의지도 방법을 구현했습니다.
도움이 되셨다면 공유해주세요 :)
다음 단계: 유사한 접근 방식을 사용하여 개체에 대한 사용자 지정 맵을 만듭니다.
Reference
이 문제에 관하여(javascript에서 자체 Array.map() 메서드 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dhilipkmr/implementing-our-own-array-map-method-in-javascript-553m텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)