Vue学习14_Vue高阶函数的使用

Vue高阶函数的使用

1. filter函数：filter函数的回调函数必须是一个boolean值，当返回一个true值时，函数内部会自动将这次回调的n加入到新的数组中，当返回一个false值时，回调函数会将这一次的n过滤掉，个人理解为filter函数相当于一个过滤器，只有满足条件的n才会被留下
   示例代码：从数组中筛选小于100的数，保留到新的数组中

    <script>
        // 定义一个数组
        const str = [12, 20, 100, 23, 67, 45, 233, 49]
        // filter函数的回调函数必须返回一个boolean值
        // 当返回一个true值时，函数内部会自动将这次回调的n加入到新的数组中，
        // 当返回一个false值时，函数内部会自动将这次回调的n过滤掉
        let newStr = str.filter(function (n) {
            return n < 100
        })
        console.log(newStr);
        // filter筛选数组数据
/script>

运行结果：

2. map函数：map函数对数组中所有函数进行操作，遍历数组中所有的元素
示例代码：对filter得到的新数组的每一个元素都+1：

    <script>
        // 定义一个数组
        const str = [12, 20, 100, 23, 67, 45, 233, 49]
        console.log("原始数组数据：", str);
        
        // map函数
        let newStr1 = newStr.map(function (n) {
            return n + 1
        })
        console.log("现在数组数据：", newStr1);
    </script>

运行结果：

3. reduce函数：reduce函数对数组元素进行汇总，有点类似于递归，reduce函数的回调函数有两个参数，第一个参数preValue就是函数返回的上一次结果的值，n就是遍历数组的值：
   示例代码：对map遍历过的新数组进行求和：

    <script>
        // 定义一个数组
        const str = [12, 20, 100, 23, 67, 45, 233, 49]
        //reduce对数组元素进行汇总
        // 对str数组数据进行求和
        let total = newStr1.reduce(function (preValue, n) {
            return preValue + n;

            //const str = [12, 20, 100, 23, 67, 45, 233, 49]
            // 过程：preValue就是上一个值，n就是数组遍历的值
            /*
              第一次 preValue=0,reduce第二个变量是0，所以上一个值是0，n=12
              第二次 preValue=12，12+0， n=20
              第三次 preValue=32， 12+20， n=100
              第三次 preValue=132 100+32 n=23
              ....
            */
        }, 0)

        console.log(total);
    </script>

运行结果：

4. 完整代码实现：

    <script>
        // 定义一个数组
        const str = [12, 20, 100, 23, 67, 45, 233, 49]
        // filter函数的回调函数必须返回一个boolean值
        // 当返回一个true值时，函数内部会自动将这次回调的n加入到新的数组中，
        // 当返回一个false值时，函数内部会自动将这次回调的n过滤掉
        let newStr = str.filter(function (n) {
            return n < 100
        })
        console.log(newStr);
        // filter筛选数组数据



        console.log("原始数组数据：", str);
        // map函数
        let newStr1 = newStr.map(function (n) {
            return n + 1
        })
        console.log("现在数组数据：", newStr1);

        // map对所有数组数据进行操作


        //reduce对数组元素进行汇总
        // 对str数组数据进行求和
        let total = newStr1.reduce(function (preValue, n) {
            return preValue + n;

            //const str = [12, 20, 100, 23, 67, 45, 233, 49]
            // 过程：preValue就是上一个值，n就是数组遍历的值
            /*
              第一次 preValue=0,reduce第二个变量是0，所以上一个值是0，n=12
              第二次 preValue=12，12+0， n=20
              第三次 preValue=32， 12+20， n=100
              第三次 preValue=132 100+32 n=23
              ....
            */
        }, 0)

        console.log(total);
    </script>

运行结果：

5. 上述代码也可以合起来写：
示例代码：

    <script>
        // 定义一个数组
        const str1 = [12, 20, 100, 23, 67, 45, 233, 49]
        let sum = str1.filter(function (n) {
            return n < 100
        }).map(function (n) {
            return n + 1
        }).reduce(function (preValue, n) {
            return preValue + n
        }, 0)

        console.log('高阶函数计算的值', sum)
    </script>

运行结果：