广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于reduce的介绍及用法说明
  • 236
分享到

关于reduce的介绍及用法说明

2024-04-02 19:04:59 236人浏览 独家记忆
摘要

目录参数介绍举例说明1.把数组合并为一个对象2.去重3.求和4.求最大值和最小值5.扁平数组6.求字符串中各个字符出现的次数 reduce总的来说用的不多,但最近看一些文章

reduce总的来说用的不多,但最近看一些文章上的reduce的用法真的是骚气,其实reduce跟常用的map,forEach一样,也是用于遍历循环,只不过它可以设置初始值,这样可以大大增强代码的可读性。 

参数介绍

array.reduce((pre, cur, index, arr)=>{
	...
}, init);
  • pre: 必需。初始值, 或者计算结束后的返回值。
  • cur: 必需。当前元素。
  • index: 可选。当前元素的索引
  • arr: 可选。当前元素所属的数组对象。
  • init: 可选。传递给函数的初始值,相当于pre的初始值。

reduce里面有一定要return,return出去的值也要注意

 const b = [1, 2, 3, 4]
 b.reduce((x, y) => console.log(x, y), 0)

如果有初始值,先取初始值为0,然后取数组第一个值,再取它们(x,y)的返回值为undefined,然后再取数组的第二个值,依次类推

举例说明

1.把数组合并为一个对象

//正常使用forEach循环
let arr = [{ a: 1, b: 10 }, { a: 2, b: 20 }, { a: 3, b: 30 }]
let obj = {}
arr.forEach((item, index) => {
    Object.keys(item).forEach(each => {
        obj[`${each}${index + 1}`] = item[each]
    })
})
console.log(obj);    //{a1:1,a2:2,a3:3,b1:10,b2:20,b3:30}

//使用reduce遍历,可以看出区别在于初始值,以及reduce中必须要return你想要的值
let a = arr.reduce((pre, cur, index) => {
    Object.keys(cur).forEach((item) => {
        pre[`${item}${index + 1}`] = cur[item]
    })
    return pre
}, {})
console.log(a);     //{a1:1,a2:2,a3:3,b1:10,b2:20,b3:30}

2.去重

2.1.基本数据类型去重

let arr2 = [9, 4, 3, 6, 9];
//基本类型去重
let set = arr2.reduce((pre, cur) => {
    !pre.includes(cur) && pre.push(cur)
    return pre
}, [])
console.log(set);  //[9,4,3,6]

2.2.引用数据类型去重

let list = [
    {
        subject: "数学",
        marks: 80
    },
    {
        subject: "语文",
        marks: 90
    },
    {
        subject: "英语",
        marks: 80
    },
]
function arrSet(value,arr) {
    let obj = {}
    let res = arr.reduce((pre, cur) => {
        if (!obj[cur[value]]) {
            obj[cur[value]] = true
            pre.push(cur)
        }
        return pre
    }, [])
    return res
}
let result = arrSet("marks",list);
console.log(result);  //[{subject:"数学",marks:80},{subject:"语文":90}]

3.求和

3.1.基本数据类型求和

let arr2 = [9, 4, 3, 6, 9];
let sum = arr2.reduce((pre, cur) => {
    return pre + cur
},0)
console.log(sum)   //31

3.2.引用数据类型求和

let arr = [
  {
    value: 45,
  },
  {
    value: 88,
  },
  {
    value: 101,
  },
];
let newArr = arr.reduce((pre, cur) => {
  return pre + cur.value;
}, 0);
console.log(newArr);   //234

4.求最大值和最小值

let arr2 = [9, 4, 3, 6, 9];
let max = arr2.reduce((prev, cur)=> {
    return Math.max(prev, cur);
})
let min= arr2.reduce((prev, cur)=> {
    return Math.min(prev, cur);
})
console.log(max,min);   //9,3

5.扁平数组

5.1 二维数组转化为一维

let arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];
let res = arr.reduce((pre, cur) => {
    return pre.concat(cur)
},[]);
console.log(res)  //[1, 2, 8, 3, 4, 9, 5, 6, 10]

5.2 多维数组转化为一维

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

6.求字符串中各个字符出现的次数 

const str = 'jordanbryantjamescurrydurant';
const res1 = str.split('').reduce((pre, cur) => {
    pre[cur] ? pre[cur]++ : pre[cur] = 1;
    return pre;
}, {});
console.log(res1);  //{j:2,o:1,r:5,d:2,...}
let arr = []
let num = Math.max(...new Set(Object.values(res1)))
let value;
for (let keys in res1) {
    if (res1[keys] == num) {
        value = keys
        break
    }
}
console.log(`出现最多的字母为${value},出现的次数为${num}次`); //出现最多的字母为r,出现的次数为5次

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 关于reduce的介绍及用法说明

本文链接: https://www.lsjlt.com/news/165492.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作