자바스크립트에서 Reduce 메소드를 사용하는 방법

醉折花枝作酒筹

풀어 주다： 2021-06-10 13:47:53

원래의

2886명이 탐색했습니다.

JavaScript에서 Reduce는 병합 방식이고 구문 형식은 "array.reduce(function(이전 값, 현재 값, 인덱스, 배열 객체){}, 초기 값)"입니다. Reduce 메소드는 누산기 역할을 하는 함수를 받으며, 배열의 각 값은 단일 값으로 감소됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

이전 두 글의 반복 방식(map() 구현, filter() 구현)과는 달리, Reduce()는 병합 방식입니다.

reduce는 두 개의 매개변수를 받습니다:

첫 번째 매개변수는 각 항목에 대해 호출되는 함수입니다.

이 함수는 4개의 매개변수를 받습니다:

이전 값 prev
현재 값 cur
항목 색인
배열 객체 배열

두 번째 선택적 매개변수 초기이다 병합의 기준이 되는 값입니다. Reduce 메서드는 최종 값을 반환합니다.

코드 표현:

arr.reduce(function(prev, cur, index, arr){}, initialValue)

로그인 후 복사

Merge

이전 반복과 달리 병합은 각 항목에 대한 목적 함수를 실행하지 않지만 다음 두 단계로 요약할 수 있습니다.

배열 [1, 2, 3]의 병합 실행 (prev, cur) = > prev + cur, 과정은 다음과 같습니다:

[1, 2, 3] // 取出 1 + 2 ，填回 3
[3, 3] // 取出 3 + 3 ，填回 6
[6] // 最终结果为 6

로그인 후 복사

그래서 6을 얻습니다.

Implementation

첫 번째 버전

이 아이디어에 따르면 코드의 첫 번째 버전은 다음과 같습니다

// 第一版
Array.prototype.fakeReduce = function fakeReduce(fn, base) {
  // let arr = base ? this.unshift(base) : this;// 首进,返回新数组的长度，影响原数组 故不能这么写
  let initialArr = this;
  let arr = initialArr.concat(); //得到副本

  if (base) arr.unshift(base); // 当存在归并基础值的参数时，将其从数组首部推入
  let index;

  while (arr.length > 2) {
    index = initialArr.length - arr.length + 1;
    let newValue = fn.call(null, arr[0], arr[1], index, initialArr);
    arr.splice(0, 2); // 删除前两项，影响原数组
    arr.unshift(newValue);// 把 fn(arr[0],arr[1]) 的结果从数组首部推入
  }
  index += 1;
  let result = fn.call(null, arr[0], arr[1], index, initialArr);
  return result;
};

로그인 후 복사

참고:

queue 메서드 unshift()

배열 헤드에서 항목을 원하는 만큼 추가할 수 있습니다. , 반환 값은 새로운 배열 길이이며 원래 배열에 영향을 미칩니다

splice() 메서드는 Height Three에서 가장 강력한 배열 메서드로 환영받습니다

항목 수에 상관없이 삭제

2개의 매개변수 지정: (시작 삭제 위치, 항목 번호 삭제)

항목 개수에 상관없이 삽입

3개의 매개변수 지정: (시작 위치, 0, 삽입할 항목)

두 번째 매개변수 0은 삭제할 번호입니다

교체, 즉 삭제 원하는 개수의 항목 동시에 원하는 개수의 항목을 삽입하세요

3개의 매개변수 지정: (시작 위치, 삭제할 개수, 삽입할 항목 개수)

반환 값은 항상 항목에서 삭제된 항목을 포함하는 배열입니다. 원래 배열 항목. 항목이 삭제되지 않으면 빈 배열이 반환되어 원래 배열에 영향을 미칩니다

개선된 버전

위 요약에서 볼 수 있듯이 splice() 메서드는 unshift() 메서드를 완전히 대체할 수 있습니다.

또한 첫 번째 버전에는 중복된 코드가 일부 있는데, 이 부분도 개선할 수 있습니다.

두 번째 버전의 코드는 다음에서 얻습니다.

// 第二版
Array.prototype.fakeReduce = function fakeReduce(fn, base) {

  let initialArr = this;
  let arr = initialArr.concat();

  if (base) arr.unshift(base);
  let index, newValue;

  while (arr.length > 1) {
    index = initialArr.length - arr.length + 1;
    newValue = fn.call(null, arr[0], arr[1], index, initialArr);

    arr.splice(0, 2, newValue); // 直接用 splice 实现替换
  }

  return newValue;
};

로그인 후 복사

Detection:

let arr = [1, 2, 3, 4, 5];
let sum = arr.fakeReduce((prev, cur, index, arr) => {
  console.log(prev, cur, index, arr);
  return prev * cur;
}, 100);

console.log(sum);

로그인 후 복사

Output:

100 1 0 [ 1, 2, 3, 4, 5 ]
 100 2 1 [ 1, 2, 3, 4, 5 ]
 200 3 2 [ 1, 2, 3, 4, 5 ]
 600 4 3 [ 1, 2, 3, 4, 5 ]
 2400 5 4 [ 1, 2, 3, 4, 5 ]
 12000

로그인 후 복사

Finally plus type detector, etc.

// 第三版
Array.prototype.fakeReduce = function fakeReduce(fn, base) {
  if (typeof fn !== "function") {
    throw new TypeError("arguments[0] is not a function");
  }
  let initialArr = this;
  let arr = initialArr.concat();

  if (base) arr.unshift(base);
  let index, newValue;

  while (arr.length > 1) {
    index = initialArr.length - arr.length + 1;
    newValue = fn.call(null, arr[0], arr[1], index, initialArr);

    arr.splice(0, 2, newValue); // 直接用 splice 实现替换
  }

  return newValue;
};

로그인 후 복사

[권장 학습:

javascript 고급 튜토리얼

]

위 내용은 자바스크립트에서 Reduce 메소드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!