Array reduce() 方法  ,无非就是 计算数组元素 相加后的总和 ,看网上给的Demo 全是  [1,2,3,4,6].reduce 这种基本用法,

本次我将使用 reduce 实现 数组对象中 具体属性 Price 累加   [{ name: 'apple',  price: 10 }, {  name: 'banana',   price: 9  } ];

方法  Chorme IE  Firefox   Safari Opera 
reduce() Yes 9.0 3.0 4 10.5
参数 描述
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
函数参数:

参数 描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值

普通 for 实现  和 reduce 实现对比

    let array = [
{
name: 'apple',
price: 10
}, {
name: 'banana',
price: 9
}
]; let sumprice = 0;
for (let index = 0; index < array.length; index++) {
const element = array[index];
sumprice += element.price;
}
console.log('for example sumprice',sumprice); /*
reduce 语法实现
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
*/
sumprice = array.reduce(function (total, currentValue, currentIndex, arr) {
return total + currentValue.price;
}, 0);
console.log('for reduce sumprice',sumprice);

JS Array.reduce 对象属性累加的更多相关文章

  1. js delete删除对象属性,delete删除不了变量及原型链中的变量

    js delete删除对象属性,delete删除不了变量及原型链中的变量 一.delete删除对象属性 function fun(){ this.name = 'gg'; } var obj = ne ...

  2. 【学习笔记】六:面向对象的程序设计——理解JS中的对象属性、创建对象、JS中的继承

    ES中没有类的概念,这也使其对象和其他语言中的对象有所不同,ES中定义对象为:“无序属性的集合,其属性包含基本值.对象或者函数”.现在常用的创建单个对象的方法为对象字面量形式.在常见多个对象时,使用工 ...

  3. 前端程序员的蜕变——JS的 event 对象属性、使用实例、兼容性处理(极大提高代码效率、减少代码量)

    下面讨论一下 js 中的 Event 对象,主要从以下三个方面详细的描述(点击标题可跳转到对应部分): 1.什么是event 2.怎么用event,用他该注意什么,几个简单实际应用 3.event在不 ...

  4. JS/jQuery 遍历对象属性

    Javascript For/In 循环: 循环遍历对象的属性 var person={fname:"John",lname:"Doe",age:25}; fo ...

  5. js Array数组对象常见方法总结

    Array对象一般用来存储数据. 其常用的方法包括: 1.concat()方法 concat() 方法用于合并两个或多个数组.它不会更改现有数组,而是返回一个新数组. 例如: var arr1=[1, ...

  6. js 内置对象属性及方法

    1.Date 属性(1): constructor      所建立对象的函数参考 prototype       能够为对象加入的属性和方法 方法(43): getDay()        返回一周 ...

  7. js 实现图片预加载 (js操作 Image对象属性complete ,事件onload 异步加载图片)

    通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识.看个例子:<input type="button" name=&qu ...

  8. js array数组对象操作方法汇总

    --------------------------更新自2018.6.11 js 数组对象操作方法如下: 1. 创建数组 var array1 = [1,2] //方法一 var array2 = ...

  9. js带“.”的对象属性名怎么使用

    问题:这样的json对象(event) { "title": "title", "alert":"ding", &quo ...

随机推荐

  1. Canvas:时钟

    这个时钟是将钟盘的圆心点移到了 canvas 画布中心点.以方便后面的方位计算 ctx.translate(width/2,height/2); 现定义一个圆盘来显出这个时钟的基本位置 ctx.sav ...

  2. H5的语义化标签(PS: 后续继续补充)

    头部信息 <header></header> 区块标签 <figure> <figcaption>123</figcaption> < ...

  3. Dynamics CRM日期字段查询使用时分秒的方法

    本人微信公众号:微软动态CRM专家罗勇 ,回复293或者20190110可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 我们 ...

  4. 常用weblogic搜索关键字

    NOTE:876004.1 - How to Apply WebLogic Server (WLS) Patches Using Smart Update [Video]NOTE:942815.1 - ...

  5. 查看系统cpu性能top和多核cpu使用性能

    1.使用top查看系统当前负载情况. 在显示过程 按P会按照cpu使用率排序,按M会按照内存占用率排序. 2.多核CPU上,每个核的使用率,使用 mpstat mpstat -P ALL 1 10 - ...

  6. 使用synchronized的几种场景

    1.修饰一个方法synchronized 修饰一个方法很简单,就是在方法的前面加synchronized,例如: public synchronized void method() { // todo ...

  7. 记一次与iframe之间的抗争

    iframe这个标签之前了解过这个东西,知道它可以引入外来的网页,但是实际开发中没有用到过.这一次有一个需求是说准备要在网页中嵌套另外一个网站,用iframe这个标签,让我测试一下这个可不可以在自己的 ...

  8. spring学习总结——装配Bean学习三(xml装配bean)

    通过XML装配bean Spring现在有了强大的自动化配置和基于Java的配置,XML不应该再是你的第一选择了.不过,鉴于已经存在那么多基于XML的Spring配置,所以理解如何在Spring中使用 ...

  9. echarts中legend如何换行

    lengend data数据中若存在'',则表示换行,用''切割.

  10. python3 多线程的使用

    示例1: import threadingfrom time import sleep class forThread(threading.Thread): def __init__(self, ev ...