Rumah >hujung hadapan web >tutorial js >Pemahaman menyeluruh tentang kaedah Array.reduce dalam js dalam satu artikel
Pemahaman menyeluruh tentang kaedah Array.reduce dalam js dalam satu artikel
- 藏色散人ke hadapan
- 2023-02-28 16:07:182061semak imbas
Artikel ini membawakan anda pengetahuan yang berkaitan tentang js terutamanya tentang kaedah Array.reduce dalam js. Rakan-rakan yang berminat boleh lihat di bawah.
Kata Pengantar
Kami sering menggunakan kaedah pengurangan objek Array untuk melakukan beberapa pengiraan atau gabungan data saya mendapati bahawa selepas menggunakan pengurangan selama bertahun-tahun, saya tidak tahu ia baik dan baru-baru ini mendapati bahawa ia berfungsi dengan baik jika kita tidak melepasi nilai awal, dan tatasusunan juga boleh menjadi pelbagai fungsi untuk meningkatkan kod kita.
Artikel ini akan membawa anda kembali untuk memahami Array.reduce dan senario aplikasinya.
Pemahaman Semula Array.reduce
Mari kita lihat bagaimana MDN menerangkannya:
reduce()Kaedah memasangkan elemen dalam tatasusunan Setiap elemen secara berurutan melaksanakan fungsi reducer yang disediakan oleh anda Setiap kali reducer dijalankan, hasil pengiraan elemen sebelumnya akan dihantar sebagai parameter, dan akhirnya. keputusan akan diringkaskan menjadi satu nilai pulangan.
Mari kita lihat kod ini:
const arr = [1, 2, 3]
const initValue = 10;
function reducer(previousValue, currentValue, currentIndex, arrryTarget) {
return preValue + currentValue
}
arr.reduce(reducer, initValue) // res === 16
reduce akan merentasi tatasusunan arr, dan pengurang akan dilaksanakan seberapa banyak kali terdapat tatasusunan. Parameter untuk setiap pelaksanaan proses (arrryTarget adalah sama, jadi ia tidak bermakna, melainkan tatasusunan asal ditukar secara langsung semasa proses traversal, jadi ia tidak dipertimbangkan di sini) adalah seperti berikut:
reducer 重复执行 |
previousValue |
currentValue |
currentIndex |
return |
|---|---|---|---|---|
| 第一次执行 | 10 |
1 |
0 |
11 |
| 第二次执行 | 11 |
2 |
1 |
13 |
| 第三次执行 | 13 |
3 |
2 |
16 |
Proses ini menggunakan reduce Semua orang harus tahu bahawa perkataan asal pada MDN adalah seperti berikut:
Apabila fungsi panggil balik dilaksanakan buat kali pertama, tiada "hasil pengiraan terakhir". Jika anda memerlukan fungsi panggil balik untuk mula melaksanakan daripada elemen dengan indeks tatasusunan 0, anda perlu menghantar nilai awal. Jika tidak, elemen dengan indeks tatasusunan 0 akan digunakan sebagai nilai awal initialValue, dan iterator akan mula melaksanakan daripada elemen kedua (indeks 1 bukannya 0)
yang ialah Apabila fungsi pengurang dilaksanakan buat kali pertama, tiada "hasil pengiraan terakhir". Nilai awal diluluskan di sini, jadi fungsi reducer memulakan pelaksanaan daripada elemen dengan indeks tatasusunan 0, iaitu, arr.length bersamaan dengan bilangan reducer pelaksanaan.
Tetapi bagaimana jika nilai awal tidak diluluskan? Mari tukar kod:
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 === 6Pada masa ini, pengurang hanya akan melaksanakan arr.length - 1 kali. Parameter untuk setiap pelaksanaan adalah seperti berikut:
|
previousValue |
currentValue |
currentIndex |
return | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Pelaksanaan pertama | 1 |
2 |
1 |
3 |
|||||||||||||||
| Pelaksanaan kedua | 3 |
3 |
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视频教程》Atas ialah kandungan terperinci Pemahaman menyeluruh tentang kaedah Array.reduce dalam js dalam satu artikel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!