reduce 的初步认识

最新推荐文章于 2024-01-14 09:34:52 发布

ベ远行ミ

最新推荐文章于 2024-01-14 09:34:52 发布

阅读量376

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46463984/article/details/108671049

版权

reduce 的初步认识

参考文档：https://developer.mozilla.org

reduce 接受的四个参数

Accumulate (acc 累加器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)

语法

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

参数

callback
- 执行数组中的每一个值（未提供 initvalue 时）从数组下标为 1 的开始执行（数组第一个值作为 accumulator）
- accumulator （第一个参数）
  - 上一次函数执行完后的返回值
- currentValue （第二个参数）
  - 当前正在处理的元素的值
- index （第三个参数）
  - 当前正在处理的元素的索引值
- array （第四个参数）
  - 原数组（调用 reduce 的数组）
initialValue

作为第一次调用 callback 函数时的第一个参数的值。
如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用 reduce 将报错。

reduce 运行解析表

常用的写法

[0, 1, 2, 3, 4].reduce((prev, curr) => prev +curr;

没有 initialValue

    [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
     return accumulator + currentValue;
     });

callback	accumulater	currentValue	currentIndex	array	return value
1	0	1	1	[0, 1, 2, 3, 4]	1
2	1	2	2	[0, 1, 2, 3, 4]	3
3	3	3	3	[0, 1, 2, 3, 4]	6
5	6	4	4	[0, 1, 2, 3, 4]	10

let initialValue=10


[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue
}, 10)

callback	accumulater	currentValue	currentIndex	array	return value
1	10	0	0	[0, 1, 2, 3, 4]	10
2	10	1	1	[0, 1, 2, 3, 4]	11
3	11	2	2	[0, 1, 2, 3, 4]	13
4	13	3	3	[0, 1, 2, 3, 4]	16
5	16	4	4	[0, 1, 2, 3, 4]	20

reduce 的一些常用的小案例

求和

let  arr = [0, 1, 2, 3, 4];
let initialValue = 0;
let sum = [...arr].reduce((acc,cur)=> acc+cur,initialValue)
    //console.log(sum); 10

求最大值

let arr = [0, 1, 2, 30, 4];
let initialValue = 0;
    let max = [...arr].reduce((acc, cur) => (acc > cur ? acc : cur), initialValue);
     //console.log(max); 30

累加对象中的值

let arr = [{x:0}, {x:1}, {x:2}, {x:3}, {x:4}];
let initialValue = 0;
let sum = [...arr].reduce((acc,cur)=> acc+cur.x,initialValue)
 //console.log(sum); 10

自己写的一个小案例

效果图

reduce

实现步骤

获取容器标签
调用 reduce 方法将容器中的文字设为空，并为每一个字母创建一个 span 标签
将 span 放入容器中
为每一个 span 标签添加监听事件 mousemove 和一个 color 类（控制动画的类）
利用 animationend 的一个 API 函数（起到动画结束立即执行的作用）去除 color 类

源代码

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
        width: 100vw;
        height: 100vh;
        background: #fffa65;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    div {
        font-size: 4em;
        font-weight: bold;
        text-transform: uppercase;
        color: cornflowerblue;
    }

    div>span {
        position: relative;
        display: inline-block;
        margin-right: 15px;
    }

    .color {
        animation: move 1s linear 2 alternate;
    }

    @keyframes move {
        25% {
            color: darkgoldenrod;
            transform: scale(1.5);
        }

        50% {

            transform: scale(2);
        }

        75% {

            transform: scale(1.5);
        }

        100% {
            color: darkorange;
            transform: scale(1);
        }
    }
</style>

<body>
    <div>Helloworld</div>

</body>
<script>
    function skipText() {
        const div = document.querySelector('div');
        [...div.textContent].reduce(function (pre, cur, index) {
            pre == index && (div.innerHTML = '');
            let span = document.createElement('span');
            span.innerHTML = cur;
            div.appendChild(span);
            span.addEventListener("mousemove", function () {
                this.classList.add("color");
            })
            span.addEventListener("animationend", function () {
                this.classList.remove("color")
            })
        }, 0)
    }
    skipText();
</script>

</html>

ベ远行ミ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
reduce 的初步认识

reduce 的初步认识参考文档：https://developer.mozilla.org reduce 接受的四个参数Accumulate (acc 累加器)Current Value (cur) (当前值)Current Index (idx) (当前索引)Source Array (src) (源数组)语法arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])参数.
复制链接

扫一扫