Javascript面试经典套路reduce函数查重

今天在偶然间查看到了一段代码，代码使用了很短的篇幅完成了字符串统计相同字符次数这个经典面试题，其中用到了reduce这个方法，网上查了查，没有查到什么有价值的东西，导致浪费了我一些时间才看懂，现将我的思路整理如下：

原代码：

var arr="qweqrq"
var info= arr.split('').reduce((a,b)=>
 (a[b]++ || (a[b]=1),a)
,{})
console.log(info)

代码思路是这样的，先将字符串arr通过split方法切割成数组,然后使用reduce，这个方法干了什么呢，分为这几步：

1.首先reduce会接收一个callback来对数组里的每一个元素执行，如果有第二个参数如上例：{}。，那么callback将会使用这个{}作为参数来和数组中的第一个元素一同传入callback；

2.传入参数之后，会进行一个与门短路操作，也可以叫默认值操作，当a[b]++成真，则返回a[b]。而这里的a为{}，b为"q",很明显a中并没有b，执行a[b]=1，那么就会给a[b]赋值为1，后面是一个逗号表达式，所以会返回有了a[b]:1这样属性的a对象；

与门短路操作:如果第一个操作数的值为true，进行短路操作，直接产生第一个操作数的值。如果为false，则产生第二个操作数的值。

逗号表达式:逗号表达式的一般形式是：表达式1，表达式2，表达式3……表达式n。逗号表达式的求解过程是：先计算表达式1的值，再计算表达式2的值，……一直计算到表达式n的值。最后整个逗号表达式的值是表达式n的值。

3.之后要说下reduce函数，它可以将之前一次执行后返回的结果作为参数继续和之后的元素一同传入callback执行，相当于fn(fn(fn(fn(a,b),c),d),e)，fn即为callback；

4.在本例中，因为有第二个参数{}传入，所以callback执行了6次。相当于对数组中每一个元素都进行了录入和查重操作，比如当callback运行到第四次，这时的a是{q:1,w:1,e:1}，执行callback，a[b]即a['q']存在，执行a['q']++，a['q']值为2，以此类推，最后得到的就是一个以数组每个元素为属性名，出现次数为属性值的对象。

需要注意的是，reduce是es5推出的方法，ie8及以下都不兼容。

以上所述是小编给大家介绍的Javascript面试经典套路reduce函数查重，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解JavaScript中数组的reduce方法

    详解JavaScript中数组的reduce方法

    介绍 我们先来看看这个方法的官方概述:reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. 你一定也和我一样看的有点迷糊,其实reduce接收的就是一个回调函数,去调用数组里的每一项,直到数组结束. 我们来举个例子大家就很明白了. 假设我有一串数组,数组里放的全是数字,我要算出这些数字的总和是多少.正常情况下我们会循环,然后一个个加,有了reduce就不用那么麻烦了,只用一行代码. var total = [0,1,2,3,4

  • JavaScript mapreduce工作原理简析

    JavaScript mapreduce工作原理简析

    谷歌在2003到2006年间连续发表了三篇非常有影响力的文章,分别是2003年在SOSP上发布的GFS,2004年在OSDI上发布的MapReduce,以及2006年在OSDI上发布的BigTable.GFS是文件系统相关的,其对后来的分布式文件系统设计具有指导意义:MapReduce是一种并行计算的编程模型,用于作业调度:BigTable是一个用于管理结构化数据的分布式存储系统,构建在GFS.Chubby.SSTable等Google技术之上.相当多的Google应用使用了这三种技术,比如Go

  • JavaScript reduce和reduceRight详解

    reduce 方法(升序) 语法: array1.reduce(callbackfn[, initialValue]) 参数 定义 array1 必需.一个数组对象. callbackfn 必需.一个接受最多四个参数的函数.对于数组中的每个元素,reduce 方法都会调用 callbackfn 函数一次. initialValue 可选.如果指定 initialValue,则它将用作初始值来启动累积.第一次调用 callbackfn 函数会将此值作为参数而非数组值提供 返回值: 通过最后一次调用

  • 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这个方法,网上查了查,没有查到什么有价值的东西,导致浪费了我一些时间才看懂,现将我的思路整理如下: 原代码: var arr="qweqrq" var info= arr.split('').reduce((a,b)=> (a[b]++ || (a[b]=1),a) ,{}) console.log(info) 代码思路是这样的,先将字符串arr通过split方法切

  • JavaScript函数调用经典实例代码

    目录 JavaScript函数调用经典例题 JS函数的定义与调用方法 总结 JavaScript函数调用经典例题 1.输入框判断是不是闰年 2.随机数判断是不是闰年 3.输入框判断是不是质数 4.随机数判断是不是质数 5.封装函数,判断日期是否合法 思考:首先我们采用函数调用的方法,将需要调用的函数都写在 js 文件夹里面,调用的时候会更方便.需要注意的是不要忘记在html中引入js. html代码: <body> <span>是否为闰年</span> <inpu

  • JavaScript高阶API数组reduce函数使用示例

    目录 正文 1.求数组中所有对象的年龄和 2.按照年龄分组 3.将数组对象转化为对象 4.参数打印 总结 正文 前面我们讲了数组的一些基本方法,今天给大家讲一下数组的reduce(),它是数组里面非常重要也是比较难的函数,那么这篇文章就好好给大家介绍下reduce函数. 还是老样子,我们直接在应用中学习,直接上例子.让我们先定义一个包含几个对象的数组,注意观察下这个数组,可以看到里面有两个对象的age都是30.(下面会用到) // 一个包含几个人物对象的数组. const people = [

  • JavaScript数组对象高阶函数reduce的妙用详解

    目录 reduce 是 JavaScript 数组对象上的一个高阶函数 计算数组的平均数 求数组的最大值 求数组的最小值 数组去重 计算数组中每个元素出现的次数 实现数组分组 计算数组中连续递增数字的长度 计算对象数组的属性总和 将对象数组转换为键值对对象 计算数组中出现次数最多的元素 实现 Promise 串行执行 对象属性值求和 按属性对数组分组 扁平化数组 合并对象 reduce 是 JavaScript 数组对象上的一个高阶函数 它可以用来迭代数组中的所有元素,并返回一个单一的值. 其常

  • JavaScript中变量提升与函数提升经典实例分析

    本文实例讲述了JavaScript中变量提升与函数提升.分享给大家供大家参考,具体如下: 从两个实例说起: eg1: var i; console.log(i); // 2 eg2: console.log(i); // undefined var i = 2; 1.提升 变量和函数声明从它们在代码中出现的位置被提升到了最上面. 注意: 只有声明本身会被提升,而赋值操作不会被提升. 变量会提升到其所在函数的最上面,而不是整个程序的最上面. 函数声明会被提升,但函数表达式不会被提升: func1(

  • 从柯里化分析JavaScript重要的高阶函数实例

    目录 前情回顾 百变柯里化 缓存传参 缓存判断 缓存计算 缓存函数 防抖与节流 lodash 高阶函数 结语 前情回顾 我们在前篇 <从历史讲起,JavaScript 基因里写着函数式编程> 讲到了 JavaScript 的函数式基因最早可追溯到 1930 年的 lambda 运算,这个时间比第一台计算机诞生的时间都还要早十几年.JavaScript 闭包的概念也来源于 lambda 运算中变量的被绑定关系. 因为在 lambda 演算的设定中,参数只能是一个,所以通过柯里化的天才想法来实现接

  • JavaScript设计模式经典之命令模式

    一.命令模式概念 命令模式(Command)的定义是:用来对方法调用进行参数化处理和传送,经过这样处理过的方法调用可以在任何需要的时候执行.也就是说该模式旨在将函数的调用.请求和操作封装成一个单一的对象,然后对这个对象进行一些列的处理.他也可以用来消除调用操作的对象和实现操作的对象之间的耦合.这为各种具体的类的更换带来了极大的灵活性. 二.命令模式的作用和注意事项 模式作用: 1.将函数的封装.请求.调用结合为一体 2.调用具体的函数解耦命令对象与接收对象 3.提高程序模块化的灵活性 注意事项:

  • 只需五句话搞定JavaScript作用域(经典)

    JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走遍天下都不怕... 一."JavaScript中无块级作用域" 在Java或C#中存在块级作用域,即:大括号也是一个作用域. public static void main () { if(1==1){ String name = "seven"; } System.out.println(name); }// 报错 public static v

  • javascript js 操作数组 增删改查的简单实现

    函数定义 Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }

  • 基于javascript制作经典传统的拼图游戏

    基于javascript制作经典传统的拼图游戏

    本文实例为大家分享了javascript制作经典传统的拼图游戏的关键代码,供大家参考,具体内容如下 效果图: 拼出你喜欢的白雪公主和七个小矮人 实现代码: <!DOCTYPE html> <html> <head> <title>pingtu.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

随机推荐