한 기사에서 js의 Array.reduce 메소드에 대한 철저한 이해-JS 튜토리얼-php.cn

이 기사는 js에 대한 관련 지식을 제공합니다. 주로 js의 Array.reduce 메서드에 대해 설명합니다. 관심 있는 친구들이 이 글을 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.

머리말

우리는 계산이나 데이터 조합을 위해 배열 개체의 축소 메서드를 자주 사용합니다. 저는 오랫동안 축소를 사용해 왔지만 최근에야 잘 이해하지 못합니다. 초기 값이 전달되지 않으면 정상적으로 수행될 수도 있고, 배열이 함수의 배열이 되어 코드를 향상시킬 수도 있다는 것을 발견했습니다.

이 기사에서는 Array.reduce 및 애플리케이션 시나리오를 다시 이해할 수 있도록 안내합니다.

Array.reduce를 다시 이해하세요

MDN이 어떻게 설명하는지 살펴보겠습니다.

reduce() 이 메서드는 Array.reduce의 각 요소에 대해 일련의 작업을 수행합니다. 제공하는 reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

我们来看一下这段代码：

const arr = [1, 2, 3]
const initValue = 10;
function reducer(previousValue, currentValue, currentIndex, arrryTarget) {
    return preValue + currentValue
}
arr.reduce(reducer, initValue) // res === 16

로그인 후 복사

reduce 会遍历 arr 数组，数组有多少个，reducer 就会执行多少次。执行过程每一次的参数（arrryTarget都是一样的，因此没有意义，除非在遍历过程中直接改变了原数组，因此这里不考虑）如下：

`reducer` 重复执行	`previousValue`	`currentValue`	`currentIndex`	return
第一次执行	`10`	`1`	`0`	`11`
第二次执行	`11`	`2`	`1`	`13`
第三次执行	`13`	`3`	`2`	`16`

这个过程用过 reduce 的应该都知道，MDN 上原话是这样的：

第一次执行回调函数时，不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行，则需要传递初始值。否则，数组索引为 0 的元素将被作为初始值 initialValue，迭代器将从第二个元素开始执行（索引为 1 而不是 0）

也就是第一次执行 reducer 函数时，不存在“上一次的计算结果”。这里传递了初始值，因此 reducer 函数才从数组索引为 0 的元素开始执行，也就是 arr.length 等于 reducer 执行次数。

但如果不传递初始值呢？我们改动一下代码：

const arr = [1, 2, 3]
- const initValue = 10;
function reducer(previousValue, currentValue, currentIndex, arrryTarget) {
    return preValue + currentValue
}
- arr.reduce(reducer, initValue) // res === 16
+ arr.reduce(reducer) // res === 6

로그인 후 복사

这时候 reducer 只会执行 arr.length - 1 次。执行过程每一次的参数如下：

이 코드를 살펴보겠습니다.

const orders = [{ id: 1, amount: 10 }, { id: 2, amount: 12 }, { id: 3, amount: 5 }]
const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0); // 27

로그인 후 복사

`reducer` 重复执行	`previousValue`	`currentValue`	`currentIndex`	return
第一次执行	`1`	`2`	`1`	`3`
第二次执行	`3`	`3`	`2`	`6`reducer 함수는 실행될 때마다 이전 요소의 계산 결과를 매개변수로 전달하고 최종적으로 결과를 단일 반환 값으로 요약합니다.

reduce는 arr 배열을 순회합니다. 감속기는 배열 수만큼 실행됩니다. 각 실행 프로세스의 매개변수(arrryTarget은 동일하므로 의미가 없으며, 순회 프로세스 중에 원본 배열이 직접 변경되지 않는 한 여기서는 고려되지 않습니다)는 다음과 같습니다. 🎜🎜

reducer 반복 실행 previousValue currentValue currentIndex return

첫 실행🎜 10< /code> 🎜<td><code>1🎜 0🎜 11🎜🎜

두 번째 실행🎜 < td>11🎜

2🎜

1🎜

13🎜🎜< tr >

세 번째 실행🎜

13🎜

3🎜

2🎜

16🎜🎜🎜🎜🎜이 과정에서 Reduce를 사용해 본 사람이라면 MDN의 원래 단어가 다음과 같다는 것을 알아야 합니다. 🎜🎜🎜콜백 함수가 처음 실행될 때 "last"가 없습니다. 계산 결과". 배열 인덱스가 0인 요소에서 실행을 시작하기 위해 콜백 함수가 필요한 경우 초기 값을 전달해야 합니다. 그렇지 않으면 배열 인덱스가 0인 요소가 초기 값 initialValue로 사용되고 반복자는 두 번째 요소(0 대신 인덱스 1)부터 실행을 시작합니다🎜🎜즉, 첫 번째 감속기 기능을 처음 실행하면 "마지막 계산 결과"가 없습니다. 여기에 초기값이 전달되므로 reducer 함수는 배열 인덱스가 0인 요소부터 실행을 시작합니다. 즉, arr.length는 <의 실행 횟수와 같습니다. 코드>감속기 . 🎜🎜그런데 초기값이 전달되지 않으면 어떻게 될까요? 코드를 변경해 보겠습니다. 🎜

[true, true, false, true].reduce((a, b) => a & b); // 有false，按照与逻辑，一定会是false

로그인 후 복사

🎜 이때 리듀서는 arr.length - 1회만 실행합니다. 각 실행 프로세스에 대한 매개변수는 다음과 같습니다. 🎜🎜

reducer 반복 실행 previousValue< /code ></th><th><code>currentValue currentIndex return

첫 번째 실행🎜 1🎜 2🎜 1🎜 3🎜🎜

두 번째 실행🎜

3🎜

< code >2🎜

6🎜🎜🎜🎜

因为没有传递初始值，因此 reducer 函数从数组索引为 1 的元素开始执行，首次执行的时候 arr[0] 被作为了 previousValue ，currentValue 为是 arr[1]。

现在了 reduce 的基本用法，那么它的运用场景有哪些呢？

reduce 的运用场景

用于计算数据

因为 reducer 函数会重复执行 array.length 或者 array.length - 1，因此特别适合做一些计算。

比如累加，计算订单总金额等案例：

const orders = [{ id: 1, amount: 10 }, { id: 2, amount: 12 }, { id: 3, amount: 5 }]
const totalAmount = orders.reduce((sum, order) => sum + order.amount, 0); // 27

로그인 후 복사

累加可以，那么 加减乘除 中其他三个的原理是一样的，这里不用多说，肯定是可以的，甚至加上 与 、非的计算也是可以的，比如

[true, true, false, true].reduce((a, b) => a & b); // 有false，按照与逻辑，一定会是false

로그인 후 복사

将多维数组转为一维数组

reduce 可以很轻松的将二维数组转为一维数组。示例：

[[1,2], [3, 4]].reduce((arrA, arrB) => [...arrA, ...arrB])

로그인 후 복사

那是不是封装一下就可以把多维数组组转为一维数组了？当然可以：

function flaten(arr) {
    if(!Array.isArray(arr)) {
        return arr;
    }
    return arr.reduce((result, item) => {
        // 不是数组，则直接放在数组末尾
        if(!Array.isArray(item)) {
            result.push(item);
            return result;
        }
        return result.concat(flaten(item))
    }, [])
}
flaten([1,2, [3, 4], [6, [7, 8]]]) // [1, 2, 3, 4, 6, 7, 8]

로그인 후 복사

这样就很简单的实现一个深层次的 flaten 。

将函数作为参数

将函数作为参数的话，运用场景在哪里？比如：

[func1, func2. func3, func4].reduce((value, funcN) => funcN(value), value)，

로그인 후 복사

执行顺序： func1 => func2 => func3 => func4，

这个效果就和 pipe 很像了是不是？这样封装一下就可以让函数执行扁平化。而不是 func1(func2(func3(func4(value)))) 这样看着难受。有一篇详细的描述了将函数作为参数来实现 pipe 和 compose 函数的过程，有兴趣可以点击去看看。

其他场景

MDN 其实还描述了很多使用场景，大家都可以去探索一下，总之 reduce 的功能很强大，俗称“万金油”不是没有道理的。

这里就简单列一下：

计算数组中每个元素出现的次数（如果元素是对象，也可以计算某个值出现的次数）
按属性对 object 分类
使用扩展运算符和 initialValue 绑定包含在对象数组中的数组
数组去重
使用 .reduce() 替换 .filter() 或者 .map()，可以替换当然也可以实现。
按顺序运行 Promise
.....

最后

js中其实有很多函数功能都很强大，这些函数的强大其实还是因为js本身的机制带来的，函数在js中是一等公民，注定会逐渐影响我们的编码风格，因此大家可以去了解和学习函数式编程，它能让你的代码写的更轻松。

推荐学习：《JavaScript视频教程》

위 내용은 한 기사에서 js의 Array.reduce 메소드에 대한 철저한 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

한 기사에서 js의 Array.reduce 메소드에 대한 철저한 이해

머리말

Array.reduce를 다시 이해하세요

reduce 的运用场景

用于计算数据

将多维数组转为一维数组

将函数作为参数

其他场景

最后