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

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

语法：

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

参数配置：

参数名	描述
callback	执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数
accumulator	累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或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 排序（降序）

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

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

运行后结果如下图：

1.7 求平均值

求平均值方法，则是先求和，当迭代到最后一位数值时，求出总和并除以数组长度，则得出了该数组的平均值，代码如下：

const avg = [10, 20, 5, 8, 120, 89].reduce(
    (total, value, index, arr) => {
        // 当非最后一位数值，返回其和，若是最的一位则求和后除以数组长度 求出平均值
        return index == arr.length - 1 ? (total + value) / arr.length : total + value
    }, 0)
console.log('avg:', avg)

运行后结果如下图：

二、字符串类型

2.1 拼接字符串

数组中对于字符串拼接处理，可以通过Array.join()方法来实现，但是reduce()方法也可以实现字符串拼接，代码如下：

const conctStr = ['apple', 'banner', 'pear', 'orange'].reduce(
    (total, value, index, arr) => {
        return index === 0 ? total + value : total + ',' + value
    }, '')
console.log('string: ', conctStr)

运行结果如下图：

三、数组类型

3.1 扁平化

在JavaScript中对数组的扁平化处理，可以通过Array.flat()方法处理，这里将通过reduce()来实现对二维数组的扁平化处理。

3.1.1 二维数组

先将默认值传入一个空数组，在每次迭代执行回调函数的时候，判断其value为数组还是正常数值，进行归类处理。代码如下：

const newArr = [[1, 3], 50, [80, 100, 23], [32, 15], 39, 23, 1].reduce(
    (newArr, value) => {
        // 如果为数组，则拼接数组并返回
        if(Array.isArray(value)) return newArr.concat(value)
        // 其他则追加到数组中即可
        newArr.push(value)
        return newArr
    }, [])
console.log('arr: ', newArr)

运行后代码如下图：

3.1.2 多维数组

上面是对二维数组进行扁平化处理，但是如果遇到更深层次的多维数组，则需要通过递归方法来实现。代码如下：

// 递归处理 多维数组
function flat(arr, prev){
    arr.forEach(item => {
        if(Array.isArray(item)) prev = flat(item, prev)
        else prev.push(item)
    })
    return prev
}

const newArr = [[1, 3], 50, [80, 100, 23, [83, 53]], [32, 15], 39, 23, 1].reduce(
    (newArr, value) => {
        // 如果为数组，则拼接数组并返回
        if(Array.isArray(value)) return flat(value, newArr)
        // 其他则追加到数组中即可
        newArr.push(value)
        return newArr
    }, [])
console.log('arr: ', newArr)

运行结果如下图：

3.1.3 多维数组扁平化并去重

如上结果可见，数组中存在重复项，当然在扁平化过程中，也可以做去重处理。代码如下：

// 递归处理 多维数组
function flat(arr, prev){
    arr.forEach(item => {
        if(Array.isArray(item)) prev = flat(item, prev)
        else if(prev.indexOf(item) === -1) prev.push(item)
    })
    return prev
}

const newArr = [[1, 3], 50, [80, 100, 23, [83, 53]], [32, 15], 39, 23, 1].reduce(
    (newArr, value) => {
        // 如果为数组，则拼接数组并返回
        if(Array.isArray(value)) return flat(value, newArr)
        // 其他则追加到数组中即可
        if(newArr.indexOf(value) === -1) newArr.push(value)
        return newArr
    }, [])
console.log('arr: ', newArr)

运行结果中重复项则不存在了，如下图：

3.2 筛选数据

在数组对象中，可以通过Array.filter()方法来筛选出需要的数据，但通过reduce()方法也可以实现这一功能。代码如下：

const result = [
        {name: "Tom", age: 12},
        {name: "John", age: 15},
        {name: "Olivia", age: 14},
        {name: "Amelia", age: 12},
        {name: "Corneia", age: 13},
        {name: "Lily", age: 12},
    ].reduce((nArr, item) => {
        item['age'] == 12 && nArr.push(item)
        return nArr
    }, [])
console.log('result', result)

运行结果如下：

3.3 模拟map()方法

在javascript中，数组对象的map()方法，是通过指定函数处理数组的每个元素，并返回处理后的新数组。在这通过reduce()方法也可以实现，代码如下：

// 数据
const arr = [
    {
        id: 10023,
        name: "John",
        age: 20,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10024,
        name: "Amerlia",
        age: 23,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10025,
        name: "Lily",
        age: 21,
        address: "北京市中南海",
        gender: '女'
    }
]
// 返回新数组
const result = arr.reduce((arr, item) => arr.concat([item]), [])
console.log('result', result)

运行结果如下：

[
  { id: 10023, name: 'John', age: 20, address: '北京市中南海', gender: '男' },
  {
    id: 10024,
    name: 'Amerlia',
    age: 23,
    address: '北京市中南海',
    gender: '男'
  },
  { id: 10025, name: 'Lily', age: 21, address: '北京市中南海', gender: '女' }
]

四、对象类型

4.1 数组转换对象

将二维数组中的值，通过对象的键值对的形式展示出来，代码如下：

const result = [
        ["Tom", 12],
        ["John", 15],
        ["Olivia", 14],
        ["Amelia", 12],
        ["Corneia", 13],
        ["Lily", 12]
    ].reduce((obj, item) => {
        if(Array.isArray(item) && item.length == 2) obj[item[0]] = item[1] 
        return obj
    }, {})
console.log('result', result)

运行结果如下图：

4.2 通过key值提取数据

例如在表格中，当用户点击“修改按钮”时，要从行数据中提取修改所需要的初始参数，如每个单独取出不仅麻烦，还容易出错。这里则可以通过reduce()方法，统一提出并组装成Object返回。代码如下：

// 表格中 行数据
const rowData = {
    id: 10023,
    name: "John",
    age: 20,
    address: "北京市中南海",
    gender: '男',
    originAddress: "山东威海",
    status: 1,
    birthday: "1988/10/30",
    wage: 3000
}
// 要提取的 编辑数据
const editData = ["id", "name", "age"].reduce((obj, key) => {
                    if(rowData[key]) obj[key] = rowData[key]
                    return obj
                }, {})
console.log('result', editData)

运行结果如下图：

4.3 对象与对象合并

在某些需求中，要将数组中每个对象元素，合并成一个Object再进行业务处理，这也可以使用reduce()方法来实现。代码如下：

// 数据
const arrList = [
    {
        id: 10023,
        name: "John",
        age: 20,
        gender: '男'
    },
    {
        address: "北京市中南海",
        originAddress: "山东威海"
    }
]
// 将每个元素合并到一个对象中
const result = arrList.reduce((obj, item) => Object.assign(obj, item), {})
console.log('result', result)

运行结果如上图：

4.4 模拟find()方法

在javascript中，数组对象的find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

这里则通过reduce()方法实现查询数组第一个满足条件的元素，否则返回null。代码如下：

// 数据
const arr = [
    {
        id: 10023,
        name: "John",
        age: 20,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10024,
        name: "Amerlia",
        age: 23,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10025,
        name: "Lily",
        age: 21,
        address: "北京市中南海",
        gender: '女'
    },
]
// 查询数组中第一个为 name为Amerlia数据
const result = arr.reduce((obj, item) => {
    if(null === obj && item.name == 'Amerlia') obj = item
    return obj
}, null)
console.log('result', result)

运行结果如下图：

通过reduce()方法实现查询数组最后一个满足条件的元素，否则返回null。代码如下：

// 数据
const arr = [
    {
        id: 10023,
        name: "John",
        age: 20,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10024,
        name: "Amerlia",
        age: 23,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10025,
        name: "Lily",
        age: 21,
        address: "北京市中南海",
        gender: '女'
    },
    {
        id: 10026,
        name: "Amerlia",
        age: 19,
        address: "北京市中南海",
        gender: '男'
    }
]
// 查询数组中最后一个为 name为Amerlia数据
const result = arr.reduce((obj, item) => {
    if(item.name == 'Amerlia') obj = item
    return obj
}, null)
console.log('result', result)

运行结果如下图：

获取第一个满足条件的元素，和获取最后一个满足条件的元素，实是只在obj上的区别。

获取一个满足条件元素，当obj值不为null时，则后期元素都不判断了，直接返回第一次匹配上的元素即可。
获取最后一个满足条件元素，不管obj值是否为null，都将判断到最后一个元素为止。

4.5 归类处理

当一个数组中，出现多个name重名的元素，则可以通过reduce()将其归类处理。代码如下：

// 数据
const arr = [
    {
        id: 10023,
        name: "John",
        age: 20,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10024,
        name: "Amerlia",
        age: 23,
        address: "北京市中南海",
        gender: '男'
    },
    {
        id: 10025,
        name: "Lily",
        age: 21,
        address: "北京市中南海",
        gender: '女'
    },
    {
        id: 10026,
        name: "Amerlia",
        age: 19,
        address: "北京市中南海",
        gender: '男'
    }
]
// 归类数据
const result = arr.reduce((arr, item) => {
    // 当新name对应字段为undefined时，为对创建一个并赋值空数组
    if('undefined' === typeof arr[item.name]) arr[item.name] = []
    // 追加到对应分类中
    arr[item.name].push(item)
    return arr
}, [])
console.log('result', result)

运行结果如下：

[
  John: [
    {
      id: 10023,
      name: 'John',
      age: 20,
      address: '北京市中南海',
      gender: '男'
    }
  ],
  Amerlia: [
    {
      id: 10024,
      name: 'Amerlia',
      age: 23,
      address: '北京市中南海',
      gender: '男'
    },
    {
      id: 10026,
      name: 'Amerlia',
      age: 19,
      address: '北京市中南海',
      gender: '男'
    }
  ],
  Lily: [
    {
      id: 10025,
      name: 'Lily',
      age: 21,
      address: '北京市中南海',
      gender: '女'
    }
  ]
]

五、布尔类型

5.1 模拟every()方法

在javascript中，数组对象的every()方法，是用来检测数值元素的每个元素是否都符合条件。其实使用reduce()方法，也可以实现其结果。

判断数组中，是否子元素都为数组类型。代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2]
]
// 如果flag为true，并且item为数组类型，则返回true。如果其中一个不是数组，则返回false
const result = numbers.reduce((flag, item) => flag && Array.isArray(item), true)
console.log('result', result)

运行结果如下图：

将numbers数组中添加一个非数组类型数据，再查看下结果。代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2],
    10
]
// 如果flag为true，并且item为数组类型，则返回true。如果其中一个不是数组，则返回false
const result = numbers.reduce((flag, item) => flag && Array.isArray(item), true)
console.log('result', result)

运行结果如下图：

5.2 模拟some()方法

在javascipt中，数组对象的some()方法，是用来检测数组元素中是否有元素符合指定条件。在这也可以通过reduce()方法，来实现这一结果。

判断数组中，子元素是否存在非数组类型元素。（注意：默认值传false）代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    10,
    [1,6, 8, 5, 4, 2]
]
// 如是有一个元素为非数组，则返回true。
// 当flag被赋值为true后，则后续不会执行到!(Array.isArray(item))，直接返回flag结果
const result = numbers.reduce((flag, item) => flag || !(Array.isArray(item)), false)
console.log('result', result)

运行结果如下：

此时将数组中全部改为数组类型，再查看下结果。代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2]
]
// 如是有一个元素为非数组，则返回true
const result = numbers.reduce((flag, item) => flag || !(Array.isArray(item)), false)
console.log('result', result)

运行结果如下图：

5.3 模拟includes()方法

在javascript中，数组对象的includes()方法，是用来判断一个数组是否包含一个指定的值。这里也可以通过reduce()方法实现这一结果，代码如下：

// 数据
const numbers = [
    [32, 12, 8, 20],
    [3, 4, 19, 12, 88, 6, 9, 45],
    [100, 21, 59, 23, 33, 150, 39, 52],
    [1,6, 8, 5, 4, 2]
]
// 判断数组中是否存在100
const result = numbers.reduce((flag, item) => flag || item.indexOf(100) !== -1, false)
console.log('result', result)

结果如下图：

此判断逻辑，则和模拟some()方法是相似的。都是将默认值先置为false，当其中一项为true时，后续都为true，最终返回true结果。

六、自定义reduce()方法

由此可见，reduce()方法可以使用在多种场景中，其灵活性较强，能实现千变化化的结果。而且这些丰富的api方法，是在ES6版本基础之上新增的，如果一些老项目中也希望拥有reduce()方法，则可以自行实现。代码如下：

// 实现reduce()方法
Array.prototype.myReduce = function(callback, preValue){
    for(var i = 0; i < this.length; i++) {
        // 如果上个值未定义，则默认取第一个
        if('undefined' === typeof preValue) {
            // 第一个值为默认值，从第二个值开始迭代
            preValue = callback(this[i], this[i + 1], i + 1, this)
            i++ // 迭代到下一个
        } else {
            preValue = callback(preValue, this[i], i, this)
        }
    }
    return preValue
}
// 求和
const result = [1, 2, 3, 4, 5].myReduce(function(total, value){
    return total + value
}, 0)
console.log('result', result)

运行结果如下图：