数组求和vue reduce（vue reduce函数的使用）

本文目录

• vue reduce函数的使用
• vue js对象数组求和
• 浅谈JS中 reduce（） 的用法
• JS数组reduce（）方法详解及高级技巧
• 分享JS数组求和与求最大值的方法

vue reduce函数的使用

callback （执行数组中每个值的函数，包含四个参数）
initialValue （作为第一次调用 callback 的第一个参数。）

第一种写法

运行

①设置了初始值，所以pre初始为{}
②item为数组（即字符串）第一项 j
③pre在该元素第一次出现时记录为，1所以执行 ++，变为2；以此类推

第二种写法

vue js对象数组求和

let lists = [
{ year: "2021", name: "服务费", price:3000,
tablelist: [{
price:3000
}]
},
{ year: "2020", name: "服务费", price:6000,
tablelist: [{
price:3000
},{
price:2000
},{
price:1000
}]
},
]
const sum = (acc, cur) =》 acc + cur
for (let i = 0; i 《 lists.length; i++) {
const prices = lists.tablelist.map(item =》 item.price);
console.log(lists.price))
}

浅谈JS中 reduce（） 的用法

过去有很长一段时间，我一直很难理解 reduce() 这个方法的具体用法，平时也很少用到它。事实上，如果你能真正了解它的话，其实在很多地方我们都可以用得上，那么今天我们就来简单聊聊JS中 reduce() 的用法。

其中，
arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init;
cur 表示当前正在处理的数组元素；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。

看上去是不是感觉很复杂？没关系，只是看起来而已，其实常用的参数只有两个： prev 和 cur 。接下来我们跟着实例来看看具体用法吧~

先提供一个原始数组：

实现以下需求的方式有很多，其中就包含使用reduce()的求解方式，也算是实现起来比较简洁的一种吧。

由于传入了初始值0，所以开始时prev的值为0，cur的值为数组第一项3，相加之后返回值为3作为下一轮回调的prev值，然后再继续与下一个数组项相加，以此类推，直至完成所有数组项的和并返回。

由于未传入初始值，所以开始时prev的值为数组第一项3，cur的值为数组第二项9，取两值最大值后继续进入下一轮回调。

实现的基本原理如下：

该方法用法与reduce()其实是相同的，只是遍历的顺序相反，它是从数组的最后一项开始，向前遍历到第一项。

详情请戳→ 简述forEach()、map()、every()、some()和filter()的用法

JS数组reduce（）方法详解及高级技巧

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

先看第一个例子：

这里可以看出，上面的例子index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。

再看第二个例子：

这个例子index是从0开始的，第一次的prev的值是我们设置的初始值0，数组长度是4，reduce函数循环4次。

结论： 如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

注意：如果这个数组为空，运用reduce是什么情况？

但是要是我们设置了初始值就不会报错，如下：

所以一般来说我们提供初始值通常更安全

当然最简单的就是我们常用的数组求和，求乘积了。

（1）计算数组中每个元素出现的次数

（2）数组去重

（3）将二维数组转化为一维

（3）将多维数组转化为一维

（4）、对象里的属性求和

分享JS数组求和与求最大值的方法

前言
面试遇到一个问题：JS数组求和函数。我第一想到的就是数组循环。然而我觉得面试官问这个问题一定不是想考这个人人皆知的方法。当时机智的我竟然想到了递归函数不断加和数组的项，然而折腾了好久都没调好方法，事实证明这并不是最优解。最后面试官问我有没有见过reduce()，真木有哇。所以回来查资料，Array.reduce()是ES5新增的新属性，相似的还有Array.reduceRight()。
下文来总结一下数组求和的方法。
最粗暴的方法：循环获取
通过for循环一项项地加和。看代码：
Array.prototype.sum
=
function
(){
var
result
=
0;
for(var
i
=
0;
i
《
this.length;
i++)
{
result
+=
this;
}
return
result;
};
.sum();
//
24
使用reduce方法
利用reduce方法，可以写一个数组求和的sum方法。
reduce()方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终为一个值。
reduce的语法：
array.reduce(callback[,
initialValue]);
callback函数接受4个参数：previousValue(上次调用回调返回的值)、currentValue(当前被处理的元素)、index(索引)以及数组本身(第一次调用
callback的第一个参数)，执行数组中每个值的函数。
initialValue参数可选，表示初始值；initialValue参数若指定，则当作最初使用的previous值，如果缺省，则使用数组的第一个元素作为previous初始值，同时current往后排一位。
Array.prototype.sum
=
function
(){
return
this.reduce(function
(partial,
value){
return
partial
+
value;
})
};
.sum();
//
24
相比第一种方法，使用reduce()方法的效率更高。
这两种方法的效率比较可以直接在函数运行前后分别调用new
Date()获取即时时间，从而通过时间差比较执行时间。这里就不比较了，因为每个人的执行环境差异较大。测试结果是reduce()方法的执行时间更短。
JS数组求和函数，并求出数组中的最大值
实例代码
《!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
***隐藏网址***
《html
***隐藏网址***
《head》
《meta
***隐藏网址***
content="text/html;
charset=gb2312"
/》
《title》脚本之家_js数组求和和最大值方法_脚本之家网《/title》
《meta
name="keywords"
content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,jb51.net,www.jb51.net,脚本之家网"
/》
《meta
name="description"
content="www.jb51.net,脚本之家网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在脚本之家网"
/》
《/head》
《body》
《a
***隐藏网址***
《script
type="text/javascript"》
//求和
Array.prototype.sum
=
function
()
{
for
(var
sum
=
i
=
0;
i
《
this.length;
i++)sum
+=
parseInt(this);
return
sum
;
};
//求最大值
Array.prototype.maxima
=
function
()
{
for
(var
i
=
0,
maxValue
=
Number.MIN_VALUE;
i
《
this.length;
i++)parseInt(this)
》
maxValue
&&
(maxValue
=
this);
return
maxValue;
};
//应用
var
arr
=
;
alert(arr.join("+")
+
"="
+
arr.sum());
alert(arr.join("|")
+
"中,
最大的数是:"
+
arr.maxima());
《/script》
《/body》
《/html》
以上就是本文的全部内容，希望对大家使用JavaScript有所帮助哦，如果有疑问的话欢迎留言讨论，小编会及时回复大家的。