本篇文章给大家带来了关于JS的相关知识,其中主要给大家介绍了JS的一些优雅写法,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。
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属性。
以上就是分享JS的一些优雅写法(reduce/map)的详细内容,更多请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容- Java House 有哪些具体的方法?(Java House的方法有哪些)
- Java 如何读取 txt 文件内容并进行处理?(java怎么读取txt文件内容并处理)
- JavaEx 的性能表现究竟如何?(javaex的性能表现如何)
- 如何高效进行PHP数据类型转换的测试?
- 如何用 Java 保证 qqwry 数据的完整性?(qqwry java怎样保证数据完整)
- PHP数据类型转换:在编程中的关键应用
- 在 Java 中如何实现打印输出?(java怎么打印输出)
- Java OGNL 注入攻击的预防措施有哪些?(java ognl注入攻击如何预防 )
- Java 中如何实现 double 类型转 BigDecimal 类型?(java double转bigdecimal怎么实现)
- 在 Java 中如何利用 Map 构建表格?(java中怎么使用map做表格)