2020-09-18

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])

参数

  1. callback
    • 执行数组中的每一个值(未提供 initvalue 时)从数组下标为 1 的开始执行(数组第一个值作为 accumulator)
    • accumulator (第一个参数)
      • 上一次函数执行完后的返回值
    • currentValue (第二个参数)
      • 当前正在处理的元素的值
    • index (第三个参数)
      • 当前正在处理的元素的索引值
    • array (第四个参数)
      • 原数组(调用 reduce 的数组)
  2. initialValue
  • 作为第一次调用 callback 函数时的第一个参数的值。
    如果没有提供初始值,则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

reduce 运行解析表

常用的写法

[0, 1, 2, 3, 4].reduce((prev, curr) => prev +curr;
  1. 没有 initialValue
    [0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
     return accumulator + currentValue;
     });
callbackaccumulatercurrentValuecurrentIndexarrayreturn value
1011[0, 1, 2, 3, 4]1
2122[0, 1, 2, 3, 4]3
3333[0, 1, 2, 3, 4]6
5644[0, 1, 2, 3, 4]10
  1. let initialValue=10

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

callbackaccumulatercurrentValuecurrentIndexarrayreturn value
11000[0, 1, 2, 3, 4]10
21011[0, 1, 2, 3, 4]11
31122[0, 1, 2, 3, 4]13
41333[0, 1, 2, 3, 4]16
51644[0, 1, 2, 3, 4]20

reduce 的一些常用的小案例

  1. 求和
let  arr = [0, 1, 2, 3, 4];
let initialValue = 0;
let sum = [...arr].reduce((acc,cur)=> acc+cur,initialValue)
    //console.log(sum); 10
  1. 求最大值
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
  1. 累加对象中的值
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>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页