JavaScript数组reduce()方法使用实例详解

目录
  • 前言
  • 1、累加和累积乘法
  • 2、获取一个数组的最大值和最小值
  • 3、计算数组中元素出现的频率
  • 4、多个数组的展平
  • 总结

前言

今天请让我详细介绍一下这个方法,希望对你有帮助。

这是 reduce 的基本用法:

var arr = [1, 2, 3];
function reducer(parmar1, parmar2){
}
arr.reduce(reducer)

reduce是数组原型对象上的一个方法,可以帮助我们操作数组。它将另一个函数作为其参数,可以称为reducer。

reducer 有两个参数。第一个参数 param1 是最后一次 reducer 运行的结果。如果这是第一次运行 reducer,则 param1 的默认值是数组第一个元素的值。

reduce 方法循环遍历数组中的每个元素,就像在 for 循环中一样。并将循环中的当前值作为参数2。

遍历完数组,reduce会返回最后一个reducer计算的结果。

我们来看一个详细的例子。

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
 return x + y;
}
arr.reduce(add)

接下来,我们来探索一下上面的代码是如何执行的。

在这段代码中,reducer 是 add 。

首先,因为我们是第一次执行add,所以数组中的第一个元素'a'会被当作add的第一个参数,然后循环会从数组的第二个元素'b'开始。这一次,'b' 是 add 的第二个参数。

第一次计算后,我们得到结果'ab'。此结果将被缓存并在下一次添加计算中用作 param1。同时,数组中的第三个参数'c'将用作add的param2。

同样,reduce 会继续遍历数组中的元素,运行 'abc' 和 'd' 作为 add 的参数。

最后,遍历数组中最后一个元素后,返回计算结果。

现在我们有了结果:'abcde'。

所以,我们可以看到reduce也是一种遍历数组的方式!它依次取数组中每个元素的值并执行reducer函数。

但我们可以看到,上面的循环并没有那种和谐的美感。因为我们把数组的第一个元素,也就是'a'作为初始的param1,然后从数组的第二个元素循环得到param2。

实际上,我们可以将reduce中的第二个参数指定为reducer函数的param1的初始值,这样param2就会从数组的第一个元素开始循环获取。

代码如下:

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
 return x + y;
}
arr.reduce(add, 's')

这一次,我们第一次调用reducer时将's'作为param1,然后从第一个元素开始依次遍历数组。

所以我们可以使用这个语法来重写我们的第一个代码片段。

var arr = ['a', 'b', 'c', 'd', 'e'];
function add(x, y) {
   return x + y;
}
arr.reduce(add, '')

接下来,我们将进入实际编程章节,体验reduce的强大威力。

1、累加和累积乘法

如果我们想得到数组中所有元素的总和,你会怎么做?

一般来说,你可能会这样写:

function accumulation(arr) {
 let sum = 0;
 for (let i = 0; i < arr.length; i++) {
   sum = sum + arr[i];
 }
 return sum;
}

当然,你可能还有其他的写法,但是只要使用for循环,代码就会显得多余。

那我们看看上面的累加函数是做什么的:

  • 将初始总和设置为零
  • 取出数组中的第一个元素并求和
  • 在 sum 中缓存上一步的结果
  • 依次取出数组中的其他元素,进行上述操作
  • 返回最终结果

我们可以看到,当我们用文字描述上述步骤时,很明显它符合reduce的使用。所以我们可以使用reduce来重写上面的代码:

function accumulation(arr) {
 function reducer(x, y) {
   return x + y
 }
 return arr.reduce(reducer, 0);
}

如果你习惯使用箭头函数,上面的代码看起来会更简洁:

function accumulation(arr) {
 return arr.reduce((x, y) => x + y, 0);
}

一行代码搞定!

当然,累积乘法和累加是完全一样的:

function multiplication(arr) {
   return arr.reduce((x, y) => x * y, 1);
}

很多时候,我们在求和的时候需要加上一个权重,这样更能体现reduce的优雅。

const scores = [
 { score: 90, subject: "HTML", weight: 0.2 },
 { score: 95, subject: "CSS", weight: 0.3 },
 { score: 85, subject: "JavaScript", weight: 0.5 }
];
const result = scores.reduce((x, y) => x + y.score * y.weight, 0); // 89

2、获取一个数组的最大值和最小值

如果要获取数组的最大值和最小值,可以这样写:

function max(arr){
 let max = arr[0];
 for (let ele of arr) {
   if(ele > max) {
     max = ele;
   }
 }
 return max;
}

这和以前一样,如果我们使用reduce,我们可以在一行代码中完成。

let arr = [3.24, 2.78, 999];
arr.reduce((x, y) => Math.max(x, y));
arr.reduce((x, y) => Math.min(x, y));

3、计算数组中元素出现的频率

我们经常需要统计数组中每个元素出现的次数。reduce 方法可以帮助我们实现这一点。

function countFrequency(arr) {
 return arr.reduce(function(result, ele){
   // Judge whether this element has been counted before
   if (result.get(ele) != undefined) {
     /**
       * If this element has been counted before,
       * increase the frequency of its occurrence by 1
       */
     result.set(ele, result.get(ele) + 1)
   } else {
     /**
       * If this element has not been counted before,
       * set the frequency of its occurrence to 1
       */
     result.set(ele, 1);
   }
   return result;
 }, new Map());
}

注意,我们使用map对象而不是对象来存储统计后的频率,因为数组中的元素可能是对象类型,而对象的key只能是字符串或符号类型。

这里有两个例子:

同样,如果要统计字符串中每个字符出现的频率,可以先将字符串转换为字符数组,然后按照上面的方法。

let str = 'helloworld';
str.split('').reduce((result, currentChar) => {
   result[currentChar] ? result[currentChar] ++ : result[currentChar] = 1;
    return result;
}, {})

因为字符类型可以用作对象的键,所以我们这里不使用 Map。

4、多个数组的展平

function Flat(arr = []) {
   return arr.reduce((t, v) => t.concat(Array.isArray(v) ? Flat(v) : v), [])
}

通过reduce依次访问数组中的每个元素。如果我们发现元素还是一个数组,就递归调用 flat 方法。

总结

这就是我今天跟你分享的4个关于数组reduce的用法,希望有所帮助。

到此这篇关于JavaScript数组reduce()方法使用实例详解的文章就介绍到这了,更多相关JavaScript 数组reduce方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript数组reduce常见实例方法

    目录 前言 一. reduce定义和用法 语法: 二.reduce浏览器支持情况 三.reduce累加 带初始值 不带初始值 四.reduce数组去重 五.reduce求数组项最大值 六.reduce将二维数组转为一维数组 七.reduce对象里的属性求和 八.reduce计算数组中每个元素出现的个数 九.reduce按属性给数组分类 十.reduce实现map 十一.reduce实现forEach 十二.reduce实现filter 十三.reduce实现find 总结 前言 对比map. f

  • JavaScript中array.reduce()数组方法的四种使用实例

    目录 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平 总结 Array.prototype.reduce() 是数组中最强大的方法之一,也是 JavaScript 函数式编程中一个吸引人的特性.但不幸的是,我发现很多朋友不习惯使用它 今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.

  • JavaScript数组方法实例详解

    目录 简介 创建数组 创建方法 详解 方法大全 join() push()和 pop() shift() 和 unshift() sort() reverse() concat() slice() splice() indexOf()和 lastIndexOf() forEach() map() filter() fill()  (ES6 新增) every() some() includes() (ES7) reduce()和 reduceRight() toLocaleString() 和

  • js判断两个数组相等的5种方法实例

    目录 前言 一. toString() 二.join() 三. JSON.stringify() 四.sort() 五.filter() 总结 前言 在 js 中是不能直接用 == 或者 === 来比较两个数组是否相等,那就需要对数组的值进行比较. 下面各种方法,要根据具体情况来使用. 一. toString() 当两个数组元素类型相同,顺序相同时,直接判断是否相等,结果不相等:转化为字符串后,结果相等 [1,2,3].toString() === [1, 2, 3].toString(); /

  • JS数组Array常用方法汇总+实例

    一.JavaScript中创建数组的方式 (1)使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(15); // 创建一个长度为15的数组 var a = new Array([15]); //指创建一个数组,长度为1,并且第一位是15 var arr3 = new Array("sf","zs","zsf"); // 创建一个包含3个字符串的数组 (2)使

  • JavaScript数组实例的9个方法

    目录 前言 map filter some every reduce forEach find和findIndex join 总结 前言 手写JS原生API在面试中很常见,今天努力工作之余(摸鱼的时候)翻到了MDN文章中关于数组实例方法这部分,正好无聊就手写几个实例方法玩玩,复习一下基础内容,并记录一下. 如果你还不知道数组实例中迭代方法有什么区别,可以看下面这张图: map 这个方法会返回一个新的数组,数组中的每一项都是执行过map提供的回调函数结果. 实现代码如下: const map =

  • JavaScript数组常用方法实例讲解总结

    目录 数组常用方法 concat() 方法 join() 方法 pop() 方法 push() 方法 reverse() 方法 shift() 方法 slice() 方法 sort() 方法 splice() 方法 toSource() 方法 toString() 方法 toLocaleString() 方法 unshift() 方法 valueOf() 方法 导读:在实际开发中,前端工程师除了写页面布局及样式还要对后端返回的数据进行处理,返回的数据大多数是json格式,一般都是返回一个对象或者

  • 梳理总结25JavaScript数组操作方法实例

    目录 1.删除数组重复项 2. 获取数组的片段 3.Array.from 达到 .map 的效果 4.置空数组 5. 将数组转换为对象 6. 用数据填充数组 7. 数组合并 8.求两个数组的交集 9.从数组中删除虚值 10. 从数组中获取随机值 11.反转数组 12 lastIndexOf() 方法与indexOf()方法 13.对数组中的所有值求和 14.数组的遍历 15.数组的映射 16.数组的拷贝 17.数组元素的查找 18.查询数组 19.数组的过滤 20.数组的插入 21.删除数组元素

  • JavaScript数组reduce()方法使用实例详解

    目录 前言 1.累加和累积乘法 2.获取一个数组的最大值和最小值 3.计算数组中元素出现的频率 4.多个数组的展平 总结 前言 今天请让我详细介绍一下这个方法,希望对你有帮助. 这是 reduce 的基本用法: var arr = [1, 2, 3]; function reducer(parmar1, parmar2){ } arr.reduce(reducer) reduce是数组原型对象上的一个方法,可以帮助我们操作数组.它将另一个函数作为其参数,可以称为reducer. reducer

  • JavaScript中reduce()方法的使用详解

    JavaScript 数组reduce()方法同时应用一个函数针对数组的两个值(从左到右),以减至一个值. 语法 array.reduce(callback[, initialValue]); 下面是参数的详细信息: callback : 函数执行在数组中每个值 initialValue : 对象作为第一个参数回调的第一次调用使用 返回值: 返回数组的减少单一个值 兼容性: 这种方法是一个JavaScript扩展到ECMA-262标准; 因此它可能不存在在标准的其他实现.为了使它工作,你需要添加

  • JavaScript中自带的 reduce()方法使用示例详解

    1.方法说明 , Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算,其效果就是: [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4) 2. 使用示例 'use strict'; function string2int(s){ if(!s){ alert('the params empty'); return; } if

  • JavaScript数组reduce()方法的语法与实例解析

    前言 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. Javascript数组方法中,相比map.filter.forEach等常用的迭代方法,reduce常常被我们所忽略,今天一起来探究一下reduce在我们实战开发当中,能有哪

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • C/C++ 动态数组的创建的实例详解

    C/C++ 动态数组的创建的实例详解 在C++语言中,二维动态数组主要使用指针的方法建立,以建立一个整数二维数组为例: #include<iostream> #include<string> #include<malloc.h> using namespace std; int main(int argc,char **argv) { ///*int a[2][3]={{1,2,3},{4,5,6}}; //cout<<sizeof(a+1)<<

  • JavaScript“尽快失败”的原则实例详解

    我第一次听说编码原则中有"尽快失败"这一条时,觉得很奇怪,为什么代码要失败?应该成功才对呀.但事实上,当代码在遇到错误的时候应该尽快的终止.为了检测各种状态,我们需要频繁的创建if语句与条件分支,而这些条件检测的结果不是成功就是失败(true&&false).之所以会有这么多的条件检测语句,是因为如果不在构建过程中植入这些监测点(checkpoint),那么浏览器内核会执行很多无用的代码,并占用许多宝贵的CPU性能和处理时间,拖慢网站加载速度. 根据那些判断结果为fal

  • PHP的重载使用魔术方法代码实例详解

    摘录PHP官网对PHP重载的解释: PHP所提供的"重载"(overloading)是指动态地"创建"类属性和方法.我们是通过魔术方法(magic methods)来实现的. 当调用当前环境下未定义或不可见的类属性或方法时,重载方法会被调用.本节后面将使用"不可访问属性(inaccessible properties)"和"不可访问方法(inaccessible methods)"来称呼这些未定义或不可见的类属性或方法. 所有

  • IOS 避免self循环引用的方法的实例详解

    IOS 避免self循环引用的方法的实例详解 示例代码: // - weak & strong #define myWeakify(VAR) \ try {} @finally {} \ __weak __typeof__(VAR) VAR##_myWeak_ = (VAR) #define myStrongify(VAR) \ try {} @finally {} \ __strong __typeof__(VAR) VAR = VAR##_myWeak_ #define myStrongif

  • java 中createStatement()方法的实例详解

    java 中createStatement()方法的实例详解 用缺省设置创建时,ResultSet 是一种只能访问一次(one-time-through).只能向前访问(forward-only)和只读的对象.您只能访问数据一次,如果再次需要该 数据,必须重新查询数据库. 然而,并不只有这一种方式.通过设置 Statement 对象上的参数,您可以控制它产生的 ResultSet.例如: ... Class.forName(driverName); db = DriverManager.getC

随机推荐