JavaScript 中 reduce () 方法的使用

javascript tytrock ⋅ 于 2024-08-17 08:38:58 ⋅ 819 阅读

reduce()方法用于对数组进行累积操作,它可以用来求和、求积、统计元素出现次数、数组去重等。通过提供一个回调函数和可选的初始值,reduce会对数组的每个元素执行回调,将结果汇总为单个返回值。需要注意的是,如果数组为空且未提供初始值,reduce会抛出错误;提供初始值则从索引0开始计算。


1、语法:

array.reduce((prev, cur, index, arr)=> {
/***/
}, initialValue)

 参数一: callback 函数(执行数组中每个值的函数,包含四个参数):

    prev 必需 (上一次调用回调返回的值,或者是提供的初始值(initialValue))

    cur 必需(数组中当前被处理的元素)

    index 可选 (当前元素在数组中的索引)

    arr 可选 (调用 reduce 的数组)


参数二:initialValue 可选 (表示初始值,作为第一次调用 callback 的第一个参数。)

  提供初始值,cur 从数组第一项开始,若不提供初始值,则 cur 从第二项开始执行,对应的第一次 prev 是数组第一项的值 


2、使用示例:

1)、简单数组求和、乘积

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x,y)=>x+y)
let mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和,10
console.log( mul ); //求乘积,24

2)、对象数组里属性求和乘积

let arr = [
    { name:'张三', score:88 },
    { name:'李四', score:90 },
    { name:'王五', score:80 },
];
let sum = arr.reduce((prev,cur)=>prev+cur.score,0);
console.log(sum); //258

3)、数组去重

let arr = [1, 2, 3, 4, 4, 1]
let newArr = arr.reduce((pre, cur) => {
    if (!pre.includes(cur)) {
        return pre.concat(cur)
    } else {
        return pre
    }
}, [])
console.log(newArr);// [1, 2, 3, 4]

4)、计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre, cur) => {
    if (cur in pre) {
        pre[cur]++
    } else {
        pre[cur] = 1
    }
    return pre
}, {})
console.log(nameNum); //{Alice: 2, Bob: 1, Bruce: 1, Tiff: 1}

5)、将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre, cur) => {
    return pre.concat(cur)
}, [])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

6)、将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4, [5, 6, 7]]]
const newArr = function (arr) {
    return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur), [])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

7)、获取对象数组中某个属性值组成新数组

let arr = [
    { name:'张三', score:88 },
    { name:'李四', score:90 },
    { name:'王五', score:80 },
];
let newarr = arr.reduce((pre, cur) => {return pre.concat(cur.score)},[]);;
console.log(newarr); //[88,90,80]






本帖已被设为精华帖!
回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter