js 之reduce 方法实现数组去重原理分布解析

news/2024/4/29 6:43:06/文章来源:https://blog.csdn.net/qq_48046110/article/details/127632953

需求 :当有一个数组对象 我们需要根据数组对象的某个属性进行去重 此时我们用reduce最合适不过

let alin = [{id : 001 ,name : '小红'},{id : 002 ,name : '小黄'},{id : 001 ,name : '小红'},]function arrRemoveRepet(arr) {let newArr = [];  // 去重后得到的新数组const obj = {};  //  中间值 转换数据newArr = arr.reduce(function(prev, cur) {obj[cur.name] ? '' : (obj[cur.name] = true && prev.push(cur));return prev;}, []);return newArr;}

执行代码 我们会发现 中间值 obj 打印出来的结果为{小红: 1, 小黄: 2}
此时 有的小伙伴会疑惑了 为什么 obj 最后出来的值是 1 , 2 ?

下面我们对此问题展开解析
从上述代码 我们能知道 影响obj对象的操作其实就是一句话的代码

obj[cur.name] ? '' : (obj[cur.name] = true && prev.push(cur));

从中我们很直观的就能理解到 给obj中的键赋值的操作其实就是 true && prev.push(cur)
接下来我们就重点解释这段代码
第一个 true 是什么意思 ?
保险起见 为了让程序顺利执行 其取到 prev.push(cur)
让我们看一下 && 运算符的逻辑

只要“&&”前面是false,无论“&&”后面是true还是false,结果都将返“&&”前面的值;
只要“&&”前面是true,无论“&&”后面是true还是false,结果都将返“&&”后面的值;
总结:假前真后
在JS世界中,一共有这几种情况被认定为假:fase,undefined,'',null,0与神奇的NaN。
console.log(0&&1); 左边为假,不走了,打印结果为0;
console.log(undefined&&1);左边为假,程序不走了,弹出的结果为undefined;
console.log(true&&'');左边为真,程序继续,弹出的结果为'';
console.log(NaN&&true);左边为假,程序不走了,弹出NaN;

这样我们就理解了 obj[cur.name] = true && prev.push(cur)这就话其实就是变现等于 obj[cur.name] = prev.push(cur) 当然平时我们写的时候也可以这样写 也可以将true变成1、2等其实都是一个效果
那问题又来了 为什么 obj[cur.name] = prev.push(cur) 执行的结果为{小红: 1, 小黄: 2}呢?
这其实又是另个一知识点 我们不妨看一下这个结果
在这里插入图片描述
我们能发现 其实打印的结果就是数组的长度 那这样 obj[cur.name] = prev.push(cur) 执行的结果为{小红: 1, 小黄: 2} 就出来了~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_410456.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

生成新冠疫苗接种趋势图-技术和法律学习

生成新冠疫苗接种趋势图-技术和法律学习文档说明:只记录关键地方; 缘由:想看疫苗接种趋势图,我要去哪里找呢?奈何公开的渠道没有找到!自己做一个呗数据来源: http://www.nhc.gov.cn/xcs/xxgzbd/gzbd_index.shtml (信息来自国家卫生健康委员会官方网站) 我要怎么得到数据呢…

靶机20 driftingblues3

描述: __________ 获取标志 难度:简单 1、下载靶场 靶机名称:driftingblues 下载地址: DriftingBlues: 3 ~ VulnHub 2、安装靶场 以DC-1为例,将文件解压(一压缩包形式进行下载)。 打开虚拟机,选…

K8S二进制部署之定义CA证书与ETCD

文章目录CA证书制作K8S集群证书流程K8S 二进制集群部署K8S二进制部署ETCD集群部署1、docker部署(所有节点)ETCD集群部署master节点操作小结:查看etcd 启动脚本创建ca证书创建cfssl类型工具下载脚本到node节点修改CA证书 CA证书中包含密钥对 …

浅谈 web3

web3——互联网的未来? web3,很多人觉得是个骗局,是在割韭菜。因为大部分介绍 web3 的文章都离不开 NFT、数字货币、区块链、比特币、以太坊、元宇宙等概念,玄之又玄,脱离我们的生活,没解决我们的痛点。一般文章最后还教给我们怎么炒币,怎么买卖 NFT,妥妥的割韭菜套路,…

顺序结构综合练习

顺序结构综合练习 数学头文件#include<cmath> 幂函数 pow10(x)结果等于10^x pow()函数是cmath标头的库函数,用于查找幂的加数。计算x的y次方 pow()函数语法:pow(x,y); #include<cstdio>// main(){int a,b,c;scanf("%d%d",&a,&b);//格式化…

长时间久坐危害竟然这么大,这4项检查,男性朋友一定要定期查

对于男性而言&#xff0c;生殖系统健康尤为重要&#xff0c;但很多人却并不是那么重视&#xff0c;家住昆山的小王就是其中一员&#xff0c;作为一名程序员的他&#xff0c;上班坐着&#xff0c;上班路上坐着&#xff0c;下班路上也是坐着&#xff0c;回家更是坐着。小伙身体棒…

Bootstrap概述和Bootstrap快速入门

Bootstrap概述 1.概念:一个前端开发的框架,Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于HTML、CSS、JavaScript的,它简洁灵活,使用得Web开发更加快捷。框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。好处:1.定义了很多的…

css 居中

阅读目录水平居中垂直居中垂直居中: position 绝对定位演示垂直居中: flex 演示垂直居中: transform 演示水平&垂直居中flex 1flex 2position水平居中 1 行内块居中 设置父元素的 text-align: center 2 块级元素 设置当前块级元素(宽度) margin: 0 auto; 3 绝对定位 元素…

【微机接口】中断的基本概念

中断&#xff1a; CPU在执行程序的过程中&#xff0c;由于某种外部或内部事件的作用&#xff0c;使CPU停止当前正在执行的程序转去为该事件服务&#xff0c;待事件服务结束后&#xff0c;又能自动返回到被中止的程序继续执行。 主程序&#xff1a; 被中断的原程…

@DateTimeFormat和@JsonFormat介绍

文章目录1.DateTimeFormat注解1.1DateTimeFormat注解简介1.2DateTimeFormat注解的功能1.3DateTimeFormat注解的注意点1.4DateTimeFormat功能演示1.4.1类型转换异常情况测试1.4.2接收url路径传参格式测试1.4.3接收Form-Data数据格式测试1.4.4接收JSON数据格式测试2.JsonFormat注…

基于协同过滤推荐算法的在线教育平台(Vue+Node.js+SSM)

基于协同过滤推荐算法的在线教育平台&#xff08;前后端分离&#xff09;。 back为后端&#xff0c;front为前端&#xff0c;config-files为相关配置文件 摘要 随着科技的不断变迁&#xff0c;信息技术的不断迭代升级。人们对于互联网方方面面的需求都开始涌现了出来&#xf…

第9章实验作业

实验9:异常处理及程序调试 一、实验目的和要求 1、了解代码异常知识; 2、掌握异常处理的try…except语句、try…except…else语句、try…except…finally语句。raise语句; 3、掌握程序调试的方法。 二、实验环境 软件版本:Python 3.10 64_bit 三,实验过程 实验1 (1) def…

实战经验:如何根据系统的业务场景需求定制自己的线程池?

线程池有那么多的参数和类型&#xff0c;在实际的开发中&#xff0c;我们应该如何设置呢&#xff1f;是直接使用Executors提供的线程池实现&#xff0c;还是自定义线程池&#xff1f;这都是我们本篇文章要回答的问题&#xff0c;那么就请跟随笔者一起分析一下在实战中如何根据系…

uniapp开发微信小程序-用户授权登录和获取手机号码

小程序开放文档 uniapp开发的小程序配置&#xff0c;找到manifest.json&#xff0c;填入正确的小程序appId&#xff1b; hbuilderx>运行>运行到小程序模拟器(安装开发者工具)&#xff0c;编译完成之后会直接在微信开发者工具内打开&#xff1b; 登录流程解析&#xff1…

【SpringBoot】一文了解SpringBoot热部署

文章目录前言手动启动热部署热部署种类手动进行热部署自动启动热部署热部署范围配置热部署的关闭总结&#x1f315;博客x主页&#xff1a;己不由心王道长&#x1f315;! &#x1f30e;文章说明&#xff1a;一文彻底搞懂SpringBoot热部署&#x1f30e; ✅系列专栏&#xff1a;Sp…

程序人生:去了字节跳动,才知道年薪40W的测试有这么多?

今年大环境不好&#xff0c;内卷的厉害&#xff0c;薪资待遇好的工作机会更是难得。最近脉脉职言区有一条讨论火了&#xff1a; 哪家互联网公司薪资最‘厉害’&#xff1f; 下面的评论多为字节跳动&#xff0c;还炸出了很多年薪40W的测试工程师 我只想问一句&#xff0c;现在的…

【C#】async和await

大概理解 查了一个小时的资料&#xff1a;async和await 发现这个大神的解释一针见血&#xff0c;深得我心&#xff01;以最简单的例子&#xff0c;解释了async和await。妙~~~ 大多情况下&#xff0c;分开才能体现async和await的价值&#xff01; 但&#xff0c;await 并没有…

C#中的弃元

从C#7.0开始,推出了一种新的特性:弃元,这种思想可能来源于Golang。弃元,就是不想要了的元素变量,用单下划线(_)表示,弃元在编译时起作用,就是搞编译器:这个变量我不要,你可以优化处理。我们经常在下面几个过程中使用弃元:1、元组解构赋值在使用元组解构赋值时,我们…

Linux——进程间通信——管道(文件)通信

目录 前言 一、有名管道 1、用法 2、管道分类 3、有名管道的创建 4、思考&#xff1a;如何进程a要将键盘获取的数据传递给另一个进程b&#xff1f; 5、有名管道实现进程间通信 二、无名管道 1、无名管道的创建 2、管道操作分为以下步骤 3、无名管道实现进程间通信 前言…

string类详解

文章目录1:构造string类1.1:方法1.2:测试2:size和length2.1:用途2.2:测试3:capacity3.1:用途3.2:测试4:clear4.1:用途4.2:测试5:empty5.1:用途5.2:测试6:reserve6.1:用途6.2:测试7:resize7.1:用途7.2:测试8:string的三种遍历8.1:方法一 for循环和[]重载8.2:方法二 迭代器8.2.1:…