返回顶部
首页 > 资讯 > 精选 >JS优雅的写法有哪些
  • 753
分享到

JS优雅的写法有哪些

2023-07-05 18:07:32 753人浏览 安东尼
摘要

今天小编给大家分享一下js优雅的写法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。JS的一些优雅写法reduce可以使

今天小编给大家分享一下js优雅的写法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

JS的一些优雅写法

reduce

可以使用 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

可以使用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。

可以使用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属性。

以上就是“JS优雅的写法有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。

--结束END--

本文标题: JS优雅的写法有哪些

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

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

猜你喜欢
  • JS优雅的写法有哪些
    今天小编给大家分享一下JS优雅的写法有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。JS的一些优雅写法reduce可以使...
    99+
    2023-07-05
  • Python优雅的写法有哪些
    本篇内容介绍了“Python优雅的写法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!为多个变量赋值有时,有多个变量需要赋值,这时你会怎...
    99+
    2023-06-17
  • 分享JS的一些优雅写法(reduce/map)
    本篇文章给大家带来了关于JS的相关知识,其中主要给大家介绍了JS的一些优雅写法,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。JS的一些优雅写法reduce1、可以使用 reduce 方法来实现对象数组中根据某一key值求和例如,假设有...
    99+
    2023-05-14
    前端 JavaScript
  • JS中switch的写法有哪些
    在JavaScript中,switch语句的基本写法如下所示: switch(expression) { case value1...
    99+
    2024-03-08
    JS
  • JS编写优化的技巧有哪些
    本篇内容主要讲解“JS编写优化的技巧有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JS编写优化的技巧有哪些”吧!1. 按强类型风格写代码JS 是弱类型的,...
    99+
    2024-04-02
  • 如何写出优雅的JS 代码
    目录变量使用有意义和可发音的变量名对同一类型的变量使用相同的词汇使用可搜索的名字使用解释性变量避免费脑的猜测无需添加不必要的上下文使用默认参数代替逻辑或(与)运算函数函数参数(理想情...
    99+
    2024-04-02
  • 编写高质量JS变量的优秀做法有哪些
    本篇内容主要讲解“编写高质量JS变量的优秀做法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“编写高质量JS变量的优秀做法有哪些”吧!1.首选 const,...
    99+
    2024-04-02
  • JS扩展操作符写法有哪些
    这篇文章主要介绍“JS扩展操作符写法有哪些”,在日常操作中,相信很多人在JS扩展操作符写法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS扩展操作符写法有哪些”的疑惑...
    99+
    2024-04-02
  • js中书写位置有哪些
    本篇内容介绍了“js中书写位置有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1、将js代码写到标签的onclick属性中。js代码可以...
    99+
    2023-06-20
  • 优秀的Python编写有哪些
    这篇文章主要介绍“优秀的Python编写有哪些”,在日常操作中,相信很多人在优秀的Python编写有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”优秀的Python编写有哪些”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-02
  • 写优雅SQL原生语句的方法
    写优雅SQL原生语句的方法?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!前言:上一篇讲Mysql基本架构时,以"...
    99+
    2024-04-02
  • JavaScript中判断的优雅写法示例
    目录前言一、一元判断1.1 举个例子🌰1.2 放入 Object 中1.3 放入 Map 中二、多元判断2.1 举个例子🌰2.2 将判断条件拼成字符串...
    99+
    2024-04-02
  • JavaScript的简写写法有哪些
    JavaScript的简写写法有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1.三元操作符当想写if...else语句时,使用三元操作符...
    99+
    2024-04-02
  • JS的apply用法有哪些
    JS中apply()方法的使用有以下几种情况:1. 改变函数上下文对象:apply()方法可以改变函数的上下文对象,即在调用函数时可...
    99+
    2023-08-09
    JS apply
  • jquery相比js有哪些优势
    这篇文章主要讲解了“jquery相比js有哪些优势”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery相比js有哪些优势”吧! ...
    99+
    2024-04-02
  • 如何写出优雅的vue.js
    这篇文章主要为大家展示了“如何写出优雅的vue.js”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何写出优雅的vue.js”这篇文章吧。1. watch 与 ...
    99+
    2024-04-02
  • 如何编写优雅的Dockerfile
    导读Kubernetes要从容器化开始,而容器又需要从Dockerfile开始,本文将介绍如何写出一个优雅的Dockerfile文件。文章主要内容包括:Docker容器Dockerfile使用多阶构建感谢公司提供大量机器资源及时间让我们可以...
    99+
    2023-06-03
  • Dialog 按照顺序弹窗的优雅写法
    目录1. 使用方式2. API 设计思想3. API 参数介绍4. 原理浅析4.1 获取 Bitmap4.2 绘制波浪线4.3 波浪填充4.4 波浪动画我为 Compose 写了一个...
    99+
    2024-04-02
  • js算法题有哪些
    这篇文章给大家分享的是有关js算法题有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 冒泡排序 比较相邻的元素。如果第一个比第二个大,就交换他们两个。 对每一对相邻元素...
    99+
    2024-04-02
  • css有哪些写法
    这篇文章给大家分享的是有关css有哪些写法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 三种常用写法是:1、内联样式,语法“<标记名 styl...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作