【面试题】JS的一些优雅写法 reduce和map

 大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

JS的一些优雅写法

reduce

1、可以使用 reduce 方法来实现对象数组中根据某一key值求和

例如,假设有以下对象数组:

const arr = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'orange', price: 4 },
];
复制代码

如果要根据price属性求和,可以使用以下代码:

const sum = arr.reduce((acc, cur) => acc + cur.price, 0);
console.log(sum); // 9
复制代码

其中,reduce方法的第一个参数是一个回调函数,它接收两个参数:累加器(acc)和当前元素(cur)。回调函数的返回值会作为下一次调用回调函数时的累加器的值。reduce方法的第二个参数是累加器的初始值,这里设置为0。

在回调函数中,我们将累加器和当前元素的price属性相加,最终得到了所有元素的price属性的总和。

map

1、可以使用map方法来实现对象数组中根据某一key值,取得另外一个key的值。

例如,假设有以下对象数组:

const arr = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'orange', price: 4 },
];
复制代码

如果要根据name属性获取price属性,可以使用以下代码:

const prices = arr.map(item => item.name === 'banana' ? item.price : null);
console.log(prices); // [null, 3, null]
复制代码

其中,map方法的参数是一个回调函数,它接收一个参数:当前元素(item)。回调函数的返回值会作为新数组的元素。在回调函数中,我们判断当前元素的name属性是否等于'banana',如果是,则返回当前元素的price属性,否则返回null。最终得到了一个新数组,其中只有name属性为'banana'的元素的price属性有值,其他元素的price属性为null。

2、可以使用map方法来获取对象数组中根据某一key值得到的元素的price属性,可以使用find方法来实现。

例如,假设有以下对象数组:

const arr = [
  { name: 'apple', price: 2 },
  { name: 'banana', price: 3 },
  { name: 'orange', price: 4 },
];
复制代码

如果要根据name属性获取price属性,可以使用以下代码:

const banana = arr.find(item => item.name === 'banana');
if (banana) {
  console.log(banana.price); // 3
}
复制代码

其中,find方法的参数是一个回调函数,它接收一个参数:当前元素(item)。回调函数需要返回一个布尔值,表示当前元素是否符合条件。find方法会返回符合条件的第一个元素,如果没有符合条件的元素,则返回undefined。

在回调函数中,我们判断当前元素是否banana,如果是,则返回当前元素。最终得到了一个对象,其中只有name属性为'banana'的元素的price属性有值,其他元素price属性为undefined。我们可以使用if语句来判断是否找到了符合条件的元素,如果找到了,则输出它的price属性。

 大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

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

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

相关文章

LFM雷达实现及USRP验证【章节3:连续雷达测距测速】

第一章介绍了在相对速度为0时候的雷达测距原理 目录 1. LFM测速 1.1 雷达测速原理 1.2 Chrip信号测速 2. LFM测速代码实现 参数设置 仿真图像 matlab源码 代码分析 第一章介绍了在相对速度为0时候的雷达测距原理,第二章介绍了基于LFM的雷达测距原理及其实现…

数据结构第十一期——线段树的原理和应用

目录 一、前言 二、线段树的概念 1、区间最值问题RMQ (Range Minimum/Maximum Query) (1)暴力法 (2)高效的办法:线段树 (3)把数列放在二叉树上 (4)查询最小值的复…

43-二叉树练习-LeetCode236二叉树的最近公共祖先

题目 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个节点 p、q,最近公共祖先表示为一个节点 x,满足 x 是 p、q 的祖先且 x 的深度尽可能大(一个节点也可以是它…

一款全新的基于GPT4的Python神器,关键还免费

chartgpt大火之后,随之而来的就是一大类衍生物了。 然后,今天要给大家介绍的是一款基于GPT4的新一代辅助编程神器——Cursor。 它最值得介绍的地方在于它免费,我们可以直接利用它来辅助我们编程,真正做到事半功倍。 注意&#…

k8s实践 | configmapsecretpvpvc

文章目录configmap&secret&pv&pvc一、configMap1、应用场景2、创建configMap2.1、help文档2.2、使用目录创建2.3、根据文件创建2.4、文字创建2.5、直接方法2.6、pod中应用2.7、热更新二、secret1、Service Account2、opaque Secret2.1、创建示例2.2、使用方式三、k…

eNSP 本地AAA配置实验

关于本实验本实验要求将路由器AR1配置为AAA服务器,以本地认证方式对尝试登录AR1的用户进行身份认证和授权。路由器AR2作为登录用户(AAA客户端),以Telnet的方式登录AR1.读者需要在AR1中创建一个名为datacom的管理员域,并…

【Unity游戏开发教程】零基础带你从小白到超神22——旧动画和新动画组件的使用

制作一个动画 创建动画 添加变化属性 实现方块向右移动10 添加关键帧 实现先慢后快的效果 录制动画 旧动画组件(Animation组件) 如果想让一个游

PMP项管2023年5月的备考准备攻略!

2023年共有4次PMP考试,分别是3月、5月、8月、11月,由于3月份考试不开放新报名,所以第一次备考PMP的同学可以选择参加5月份考试。那么,现在备考5月份PMP考试还来得及吗? 现在开始备考5月PMP考试,时间是非常…

GEE:克里金 Kriging 插值(以陕西省2013年生物量为例)

本文记录了在Google Earth Engine(GEE)平台上进行 Kriging 插值的介绍和代码案例。本文通过选取的2013年陕西省生物量样本点数据为例,利用 Kriging 插值对未知区域做了插值计算。 Google Earth Engine(GEE)是一个用于分析地理空间数据的云平台,其中包含了许多地理空间分…

Office E5 OneDrive API使用指南:注册+密钥获取+获取临时上传链接+分片

异想之旅:本人原创博客完全手敲,绝对非搬运,全网不可能有重复;本人无团队,仅为技术爱好者进行分享,所有内容不牵扯广告。本人所有文章仅在CSDN、掘金和个人博客(一定是异想之旅域名)…

Java 各种锁的理解与实现

1. volatile 是轻量级锁: 只能修饰在变量上,使得 cpu 每次对于该变量的修改和读取都从内存中操作,而不是从CPU cache 中操作,保证共享变量对所有线程的可见性,但是并不能保证原子性 2. synchronized 悲观锁&#xff…

Mybatis的CRUD使用详解

文章目录一.Mybatis的CRUD使用详解1.1 select1.2 insert1.3 update1.3 delete二.常见错误一.Mybatis的CRUD使用详解 注意&#xff1a;增删改需要提交事务。 namespace&#xff08;UserMapper.xml&#xff09; namespace中的包名需要和Dao/mapper接口的包名一致。 <!--na…

论文阅读 10 | Instance Credibility Inference for Few-Shot Learning

小样本学习的实例可信度推理作者摘要1. Introduction2. Related Work作者 摘要 小样本学习&#xff08;FSL&#xff09;旨在识别每个类别极其有限的训练数据的新对象。以前的努力是通过利用元学习范式或数据增强中的新原理来缓解这个极其缺乏数据的问题。相比之下&#xff0c;本…

taro--之使用nutui组件库

安装 Taro 脚手架# 使用 npm 安装 CLI npm install -g tarojs/cli# 使用 yarn 安装 CLI yarn global add tarojs/cli# 使用 cnpm 安装 CLI cnpm install -g tarojs/cli使用 NutUI 模板创建项目1、使用命令创建 Taro 项目&#xff1a;taro init myApp2、按照下方图片依次选择&am…

ChatGPT如何批量撰写最新的热点自媒体文章

如何用ChatGPT创作高质量的自媒体文章 自媒体已成为互联网上的一个重要组成部分&#xff0c;无论您是想在社交媒体、博客中发布内容&#xff0c;高质量的文章都是自媒体成功的重要组成部分。ChatGPT是一个智能文章生成器&#xff0c;能够帮助创作者快速、高效地生成高质量的自…

数据结构——二叉搜索树

一、二叉搜索树概念 二叉搜索树又叫二叉排序树&#xff0c;它或是空树&#xff0c;或是具有以下性质的二叉树&#xff1a; &#xff08;1&#xff09;若它的左子树不为空&#xff0c;则左子树上的所有节点的值都小于根节点的值&#xff1b; &#xff08;2&#xff09;若它的…

LeetCode-718. 最长重复子数组

目录题目思路动态规划遇到的坑动态规划(优化)题目来源 718. 最长重复子数组 题目思路 用二维数组可以记录两个字符串的所有比较情况&#xff0c;这样就比较好推递推公式了。 动态规划 1.确定dp数组&#xff08;dp table&#xff09;以及下标的含义 dp[i][j]的定义也就决定…

【云原生】我将ChatGPT变成Kubernetes 和Helm 终端

{kubectl get po&#xff0c;deploy&#xff0c;svc}{kubectl run --imagenginx nginx-app --port80 --env“DOMAINcluster”}{kubectl expose deployment nginx-app --port80 --namenginx-http}{kubectl get po&#xff0c;svc&#xff0c;deploy}{curl 10.100.67.94:80}{helm…

Spring事务

目录 手动操作 声明式提交 注解的属性 事务隔离级别 事务传播机制 事务可以将一组操作封装成为一个单元&#xff0c;一组操作要么全部成功&#xff0c;要么全部失败 Mysql中操作事务&#xff0c;有三个步骤&#xff1b; 1、start transaction &#xff1b;开启事务 2、com…

springboot 整合Mybatis-Plus分页、自动填充功能

springboot 整合Mybatis-Plus分页、自动填充功能功能 此次分页、自动填充功能的实现是在Spring Boot整合 druid、Mybatis-plus实现的基础上完成的&#xff0c;包括数据源配置、各种依赖添加、mapper和service的实现。不在重复记录。 Java开发手册要求数据表必须要有三个字段&am…
最新文章