JavaScript - 数组对象中实用好玩的reduce方法

JavaScript - 数组对象中实用好玩的reduce方法

         JavaScript中reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行),将其结果汇总为单个返回值。

        语法:

arr.reduce(callback(a***umulator, currentValue[, index[, array]])[, initialValue])

        参数配置:

参数名 描述
callback 执行数组中每个值 (如果没有提供  initialValue则第一个值除外)的函数,包含四个参数 
        a***umulator 累计器累计回调的返回值; 它是上一次调用回调时返回的累积值,或initialValue(见于下方)。
        currentValue 数组中正在处理的元素。
        index 数组中正在处理的当前元素的索引。 如果提供了 initialValue,则起始索引号为0,否则从索引1起始。(可选)
        array 调用 reduce()的数组(可选)
initialValue 可选。传递给函数的初始值

        对于reduce()方法,很多人不太了解,其实熟悉之后会发现它可以应用在很多场景中。

一、数值类型

1.1 求和

         最常见的则是通过reduce()方法进行求和处理,将每次求的和,传递给下一个迭代函数中继续处理。代码如下:

const total = [10, 20, 5, 8, 10, 120, 89].reduce((total, value) => total + value, 0)
console.log('total:', total)

        运行结果如下图:

1.2 求最小值

        结合Math.min()获取数组中最小值,默认值为数组第一位数值,将每次获取的最小值返回,传递给下一个迭代的回调函数中继续处理。代码如下:

const minValue = [10, 20, 5, 8, 10, 120, 89].reduce((minVal, value) => Math.min(minVal, value), 10)
console.log('min:', minValue)

        运行结果如下较:

1.3 求最大值

        结合Math.max()获取数组中最大值,默认值为数组第一位数值,将每次获取的最大值返回,传递给下一个迭代的回调函数中继续处理。代码如下:

const maxValue = [10, 20, 5, 8, 10, 120, 89].reduce((maxVal, value) => Math.max(maxVal, value), 10)
console.log('max:', maxValue)

        结果如下图:

1.4 数组去重

        可以通过reduce()方法,对数组进行去重处理。默认传入空数组,每次回调函数执行判断空数组中是否存在该值,不存在则追加,并返回newArr到下个迭代的回调函数中继续处理。代码如下:

const arr = [10, 20, 5, 8, 10, 20, 10, 120, 89].reduce(
    (newArr, value) => {
        newArr.indexOf(value) === -1 && newArr.push(value)
        return newArr
    }, [])
console.log('arr:', arr)

        运行结果如下图:

1.5 排序(升序)

        对数组升序排序,结合Array.filter方法过滤出还未参与判断最小值的数据,再使用Math.min获取过滤出来数组中最小值即可,代码如下:

const arr = [10, 20, 5, 8, 120, 89].reduce(
    (newArr, value, index, arr) => {
        // 过滤年上次处理过的数据
        const filter = arr.filter(item => !newArr.includes(item))
        // 获取过滤后数组中最小值
        const minValue = filter.reduce((min, val) => Math.min(min, val), filter[0])
        // 追加到新数组中
        newArr.push(minValue)
        return newArr
    }, [])
console.log('arr:', arr)

        运行后结果如下图:

1.6 排序(降序)

        降序的处理和升序方法一致,只是将求最小值换成求最大值即可,代码如下:

转载请说明出处内容投诉
CSS教程网 » JavaScript - 数组对象中实用好玩的reduce方法

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买