JavaScript 수동 배열의 일반 함수 요약

앞말

개발 과정에서 우리는 자주 수조의api 관련 조작을 사용하는데 그 중에서 forEach,filter,find,findIndex,map,some,every,reduce,reduceRight 등 함수 방법을 포함한다.
오늘 우리는 이 함수들을 손으로 써서 수조의 이 함수들을 실현하는 방법을 시험해 보았다.편의를 위해 그룹 원형 대상prototype에서 직접 확장합니다.
이 글은 Githab에 업로드되었고, 더 많은 이전 글은 분류 정리되었다.
본문

매개변수 설명

callbackFn 콜백 함수
thisArg에서 callbackFn을 실행할 때 사용하는 this 값
currentValue 배열에서 처리 중인 요소
인덱스 현재 인덱스
array 소스 그룹
accumulator 누적기
initialValue reduce reduceRight callbackFn 함수를 처음 호출할 때 첫 번째 매개 변수의 값 기본값
element가 스스로 실현하는this 대상

forEach 함수

문법:arr.forEach(callbackFn(currentValue [, index [, array]])[, thisArg]) 방법 기능: 수조의 모든 요소에 대해 주어진 함수를 한 번 실행합니다.
반환: undefined.
사용자 정의 함수: myForEach.

Array.prototype.myForEach = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn ');
 let element = this,
 len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 callbackFn.call(thisArg, element[index], index, element);
 }
};

filter 함수

문법:var newArray = arr.filter(callbackFn(currentValue[, index[, array]])[, thisArg])방법 기능: 제공된 함수를 통해 실행된 모든 요소를 포함하는 새 그룹을 만듭니다.
반환: 테스트를 통과한 원소로 구성된 새로운 수조입니다. 테스트를 통과한 원소가 없으면 빈 수조로 돌아갑니다.
사용자 정의 함수: myFilter.

Array.prototype.myFilter = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn ');
 let element = this,
 len = element && element.length || 0,
 result = [];
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg, element[index], index, element)) result.push(element[index]);
 }
 return result;
};

find 함수

문법:arr.find(callbackFn[, thisArg])방법 기능: 수조에서 제공한 테스트 함수를 만족시키는 첫 번째 요소의 값을 되돌려줍니다.그렇지 않으면 undefined로 돌아갑니다.
반환: 그룹 중 첫 번째로 테스트 함수를 제공하는 요소의 값을 만족시킵니다. 그렇지 않으면 undefined를 되돌려줍니다.
사용자 정의 함수: myFind.

Array.prototype.myFind = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn ');
 let element = this,
 len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg, element[index], index, element)) {
  return element[index];
 }
 }
 return
}

findIndex 함수

문법:arr.findIndex(callbackFn[, thisArg])방법 기능: 수조에서 제공한 테스트 함수를 만족시키는 첫 번째 요소의 값을 되돌려줍니다.그렇지 않으면 undefined로 돌아갑니다.
되돌아오기: 테스트 함수를 제공하는 첫 번째 요소의 인덱스를 제공합니다.그렇지 않으면 -1로 돌아갑니다.
사용자 정의 함수: myFindIndex

Array.prototype.myFindIndex = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn ');
 let element = this,
 len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg, element[index], index, element)) return index;
 }
 return -1;
}

fill 함수

문법:arr.fill(value[, start[, end]])방법 기능: 시작 색인에서 종료 색인까지의 모든 요소를 고정 값으로 채웁니다.종료 인덱스는 포함되지 않습니다.
반환: 교체된 값을 반환합니다. 원수 그룹이 변경됩니다.
사용자 정의 함수: myFill.

Array.prototype.myFill = function(value, start = 0, end) {
 let element = this,
 len = element && element.length || 0;
 end = end || len;
 let loopStart = start < 0 ? 0 : start, //  
 loopEnd = end >= len ? len : end; //  

 for (; loopStart < loopEnd; loopStart++) {
 element[loopStart] = value;
 }
 return element;
}

맵 함수

문법:var new_array = arr.map(function callbackFn(currentValue[, index[, array]]) {// Return element for new_array }[, thisArg])방법 기능: 새 그룹을 만듭니다. 그 결과 이 그룹의 모든 요소는 제공된 함수를 한 번 호출한 후 되돌아오는 값입니다.
반환: 테스트 그룹 중 최소한 1개의 요소가 제공된 함수 테스트를 통과했는지 확인합니다.이 값은 Boolean 유형의 값을 반환합니다.원수 그룹의 모든 요소가 리셋 함수를 실행한 결과로 구성된 새 그룹
사용자 정의 함수: myMap.

Array.prototype.myMap = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn ');
 let element = this,
 len = element && element.length || 0,
 result = [];
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 result[index] = callbackFn.call(thisArg, element[index], index, element);
 }
 return result;
}

some 함수

문법:arr.some(callbackFn(currentValue[, index[, array]])[, thisArg])방법 기능: 테스트 그룹 중 최소한 1개의 요소가 제공된 함수 테스트를 통과했는지 여부.이 값은 Boolean 유형의 값을 반환합니다.
반환: 그룹에 최소한 하나의 요소가 리셋 함수 테스트를 통과하면true로 되돌아옵니다.모든 요소가 리셋 함수의 테스트를 통과하지 않아false가 됩니다.
사용자 정의 함수: mySome.

Array.prototype.mySome = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn ');
 let element = this,
 len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for (let index = 0; index < len; index++) {
 if (callbackFn.call(thisArg, element[index], index, element)) return true;
 }
 return false;
}

every 함수

문법:arr.every(callbackFn(currentValue[, index[, array]])[, thisArg])방법 기능: 한 수조 내의 모든 원소가 특정한 함수를 통과할 수 있는지 테스트합니다.그것은 부울 값을 되돌려줍니다.
반환: 리셋 함수의 매번 반환이true 값이면true를 반환합니다. 그렇지 않으면false를 반환합니다.
사용자 정의 함수: myEvery.

Array.prototype.myEvery = function(callbackFn, thisArg) {
 if (typeof callbackFn !== 'function') throw ('callbackFn ');
 let element = this,
  len = element && element.length || 0;
 if (!thisArg) thisArg = element;
 for(let index = 0; index < len; index++) {
  if (!callbackFn.call(thisArg, element[index], index, element)) return false;
 }
 return true;
}

reduce 함수

문법:arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])방법 기능: 수조의 모든 요소에 대해 사용자가 제공하는reducer 함수 (승차 실행) 를 실행하고 그 결과를 하나의 반환값으로 요약합니다.
반환: 함수 누적 처리 결과.
사용자 정의 함수: myReduce.

Array.prototype.myReduce = function(callbackFn, initialValue) {
 if (typeof callbackFn !== 'function') throw ('callbackFn ');
 let element = this,
  len = element.length || 0,
  index = 0,
  result;
 if (arguments.length >= 2) {
  result = arguments[1];
 } else {
  while (index < len && !(index in element)) index++;
  if (index >= len) throw new TypeError('Reduce of empty array ' + 'with no initial value');
  result = element[index++];
 }

 while (index < len) {
  if (index in element) result = callbackFn(result, element[index], index, element);
  index++;
 }
 return result;
}

reduceRight 함수

문법:arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])방법 기능: 함수를 누적기 (accumulator) 와 수조의 모든 값 (오른쪽에서 왼쪽) 으로 받아들여 단일 값으로 줄인다.
반환: 실행 후 반환 값입니다.
사용자 정의 함수: myReduceRight.

Array.prototype.myReduceRight = function(callbackFn, initialValue) {
 if (typeof callbackFn !== 'function') throw ('callbackFn ');
 let element = this,
  len = element.length || 0,
  index = len - 1,
  result;
 if (arguments.length >= 2) {
  result = arguments[1];
 } else {
  while (index >= 0 && !(index in element)) {
   index--;
  }
  if (index < 0) {
   throw new TypeError('reduceRight of empty array with no initial value');
  }
  result = element[index--];
 }
 for (; index >= 0; index--) {
  if (index in element) {
   result = callbackFn(result, element[index], index, element);
  }
 }
 return result;
}

마지막

자바스크립트 핸드폰 그룹 상용 함수에 대한 이 글은 여기까지 소개합니다. JS 핸드폰 그룹 상용 함수에 대한 더 많은 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!