JS的一些优雅写法

住儿
• 阅读 144

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

JS的一些优雅写法

其中,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]

JS的一些优雅写法

其中,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
}

JS的一些优雅写法

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

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

点赞
收藏
评论区
推荐文章
LinMeng LinMeng
3年前
js 的 forEach,map,filter,some,every,find(es6),reduce详解
forEach()定义和用法forEach()方法用于调用数组的每个元素,并将元素传递给回调函数注意:forEach()对于空数组是不会执行回调函数的。语法array.forEach(function(currentValue,index,arr),thisValue)参数function(currentValue,index,a
Chase620 Chase620
3年前
Promise从入门到拿Offer之手写Promise
1、Promise构造函数的实现Promise构造函数用来声明示例对象,需要传入一个执行器函数。其中包括resolve函数和reject函数,以及几个重要的属性:状态属性、结果属性和回调函数队列。构造函数的基本框架resolve函数用于异步处理成功后调用的函数。其中包括验证对象状态修改次数,修改promise实例对象状态,异步调用成功的回调函数
菜园前端 菜园前端
11个月前
什么是回调函数?
原文链接:什么是回调函数?简单的来说,一个函数作为另外一个函数的参数,可以称为回调函数。这个理解其实不完全对,回调的意义根本没有体现出来,何为回调?也就是说一个函数你定义了,你没有马上的去调用它,而是交给了另外一个函数去调用,这才属于回调函数。缺点直接使用
Wesley13 Wesley13
2年前
mysql中时间比较的实现
MySql中时间比较的实现unix\_timestamp()unix\_timestamp函数可以接受一个参数,也可以不使用参数。它的返回值是一个无符号的整数。不使用参数,它返回自1970年1月1日0时0分0秒到现在所经过的秒数,如果使用参数,参数的类型为时间类型或者时间类型的字符串表示,则是从1970010100:00:0
Stella981 Stella981
2年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
2年前
AVIOInterruptCB结构体分析
1AVIOInterruptCB结构体定义在/usr/include/libavformat/avio.h中有如下的结构体定义,根据头文件中的注释:这是一个回调函数和参数的结构体。有些函数是在阻塞的,用这个回调函数来检查是否中断这个阻塞函数,如果回调函数返回1,那么这个正在阻塞的操作将被中止。那么就用这个结构体里的参数opaque来回调其中的callb
Stella981 Stella981
2年前
JavaScript回调函数的高手指南
摘要:本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步。回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步。1.回调函数首先写一个向人打招呼的函数。只需要创建一个接受name参数的函数gree
Stella981 Stella981
2年前
ES6 Promise 对象扯谈
newPromise(/executor/function(resolve,reject){...});Promise的构造函数接收一个函数作为参数,函数里面传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来
Stella981 Stella981
2年前
26 函数形参值回传问题——C++解决多个return的一般方法
0引言在使用数组和vector作为函数的参数进行参数传递并希望得到值的回传时,由于不知道怎么写数组函数形参的引用形式,一直采用vector的引用形式。但是,刚刚测试了一下,发现数组作为参数本身就是指针,根本不需要采用引用形式把值回传啊,把测试结果写下来。1 关于数组作为函数参数的值传递问题——数组和容器的对比  数组直接作为
Stella981 Stella981
2年前
Extjs校验配置项
Extjsform组件1、Ext.form.Action配置项:success:执行成功后回调的函数,包括两个参数:form和actionfailure:执行失败后回调的函数,包括两个参数:form和actionmethod:表单的提交方式,有效值包括GET、POSTparams:传递到请求中的参数url:动作
住儿
住儿
Lv1
明月却多情,随人处处行。
文章
3
粉丝
3
获赞
5