// map
console.log([1, 2, 3, 4, 5].reduce((a, v) => {
a.push(v * v);
return a
},[]));
//filter
console.log([1, 2, 3, 3, 4, 5].reduce((a, v) => {
if (v > 3) {
a.push(v)
}
return a
}, []));
//max
console.log([1, 2, 3, 4, 5, 6].reduce((a, v) => {
return Math.max(a, v)
}, []));
//扁平化
console.log([1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5].reduce((a, v) => {
!a.includes(v) && a.push(v)
return a
}, []));
//数组扁平化

多个数组交换位置

[1, 2], ['a', 'b']
// [[1, 'a'], [1, 'b'], [2, 'a'], [2, 'b']] const xProd = (a,b)=>{
return a.reduce((acc,x)=>{
return acc.concat(b.map(y=>[x,y]))
},[])
}; 注意为了防止报错 return记得一些要写,第二个就是reduce返回的类型[]

一道比较复杂的题目

# 30s   unzipWith

reduce 对于二维数组的操作
console.log([[1, 10, 100], [2, 20, 200]].reduce(
(acc, val) => (val.forEach((v, i) => acc[i].push(v)), acc)
,[[],[],[]]
));
其实比较难理解的点有两点
* (acc,val)=(fn,acc)
我们因为知道 let a=(1,3) //3
* reduce 第二个参数 是返回参数的类型, 如果你要返回的类型是
{},{{},{}},[],[[],[]]都是可以的, 这样就好理解啦
const unzipWith = (arr, fn) =>
arr
.reduce(
(acc, val) => (val.forEach((v, i) => acc[i].push(v)), acc),
Array.from({
length: Math.max(...arr.map(x => x.length))
}).map(x => [])
)
.map(val => fn(...val)); // 这里不写就会报错,所有注意起始值要写 unzipWith([[1, 10, 100], [2, 20, 200]], (...args) => args.reduce((acc, v) => acc + v, 0)); // [3, 30, 300]
关于Array.from不好理解看下面的

Array.from

[['a', 'b'], [1, 2], [true, false]]
变成
[['a', 1, true], ['b', 2, false]] //////////////////////////////////
const arrays = [['a', 'b'], [1,3, 2], [true, false]];
//先算生成的数组有几项
const a=Array.from({length: Math.max(...arrays.map(v => v.length))});
console.log(a); //[ undefined, undefined, undefined ]
const b=a.map((_,i)=>{
return Array.from({length:arrays.length},(_,k)=>{
// k 是array 数组的0,1,2 三次
return arrays[k][i]
})
});
console.log(b);

关于reduce很烦的报错

错误实例(直接报错)
arr.reduce((acc,item)=>{
return acc.push(item.id)
},[]) 正确实例
arr.reduce((acc,item)=>{
return (acc.push(item.id),acc)
},[])
或者
arr.reduce((acc,item)=>{
acc.push(item.id)
return acc
},[])

.......................................................................................................................................................##############.........................................................................................................................................................................................

reduce深入理解的更多相关文章

  1. 数组中的reduce 函数理解

    第一次见到reduce 是在js 的高级程序设计中,它的意思是把一个数组减少为一个数,举的例子是数组中元素的求和.它接受一个函数作为参数,函数又有两个参数,一个是prev, 前一个值,一个是next, ...

  2. Array.prototype.reduce 的理解与实现

    Array.prototype.reduce 是 JavaScript 中比较实用的一个函数,但是很多人都没有使用过它,因为 reduce 能做的事情其实 forEach 或者 map 函数也能做,而 ...

  3. 关于Array.reduce的理解与拓展

    2018年1月6日 首先我要感谢我的同事徒步上山看日出在我第一份实习的时候对我的指导,现在我也开始跟他一样开始养成写博客的习惯 现在开始讨论我遇到的第一个问题,这是我在看javascript高级程序设 ...

  4. 关于reduce的理解

    什么是reduce reduce这个词字面上来讲,大多称作“归约”,但这个词太专业了,以至于第一眼看不出来意思.我更倾向于解释为“塌缩”,这样就形象多了.对一个n维的情况进行reduce,就是将执行操 ...

  5. js数组中indexOf/filter/forEach/map/reduce详解

    今天在网上看到一篇帖子,如题: 出处:前端开发博客 (http://caibaojian.com/5-array-methods.html) 在ES5中一共有9个Array方法,分别是: Array. ...

  6. JS Array常用方法indexOf/filter/forEach/map/reduce详解

    Array共有九个方法   Array.prototype.indexOf Array.prototype.lastIndexOf Array.prototype.every Array.protot ...

  7. ES5新特性:理解 Array 中增强的 9 个 API

    为了更方便的对JS中Array进行操作,ES5规范在Array的原型上新增了9个方法,分别是forEach.filter.map.reduce.reduceRight.some.every.index ...

  8. 分布式基础学习(2)分布式计算系统(Map/Reduce)

    二. 分布式计算(Map/Reduce) 分 布式式计算,同样是一个宽泛的概念,在这里,它狭义的指代,按Google Map/Reduce框架所设计的分布式框架.在Hadoop中,分布式文件 系统,很 ...

  9. JavaScript数组方法--reduce、reduceRIght、reverse

    今天写的reduce是比较复杂的一个数组方法,其实在这之前我也用过reduce,可是每次用起来总感觉不那么顺手,主要还是因为不熟,对reduce本身不熟.首先reduce这个单词翻译为中文,不那么直观 ...

随机推荐

  1. 浅谈Spring中JDK动态代理与CGLIB动态代理

    前言Spring是Java程序员基本不可能绕开的一个框架,它的核心思想是IOC(控制反转)和AOP(面向切面编程).在Spring中这两个核心思想都是基于设计模式实现的,IOC思想的实现基于工厂模式, ...

  2. 在IE中点击转跳,并打开chorme浏览器继续浏览指定页面,IE自定义ocx控件开发

    因项目需要,需要开发一个功能:在IE中点击转跳,并打开chorme浏览器继续浏览指定页面. 分析需求后,参考了: https://www.cnblogs.com/ffjiang/p/7908025.h ...

  3. javascript getElementsByClassName扩展函数

    代码: function getElementsByClassName(){ if(!arguments[0]){return []};//未指定任何参数,直接返回 var args=argument ...

  4. 基于windows 10打造的kali工具集

    基于windows 10打造的kali工具集.iso,适合于习惯使用windows的安全从业者.if you like it,please touch star! 作为安全从业主,Kali都是必备工具 ...

  5. aps系统切换切记“三要三不要”

    APS系统实施到将要切换时,成功已经近在咫尺,不过还有咫尺天涯的说法,在最后阶段栽跟头也不鲜见. 切换时需要做些什么,不要做些什么,小编总结了三要三不要. 一.要充分准备数据,不要偷工减料 APS系统 ...

  6. maven 学习---Maven中央存储库

    当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载. 首先,Maven 将从本地资源库获得 Maven 的本地资源库依赖资源, 如果没有找到,然后把它会 ...

  7. python—字符串拼接三种方法

    python—字符串拼接三种方法   1.使用加号(+)号进行拼接 字符串拼接直接进行相加就可以,比较容易理解,但是一定要记得,变量直接相加,不是变量就要用引号引起来,不然会出错,另外数字是要转换为字 ...

  8. fastadmin CMS等系列插件安装不成功的问题

    由于fastadmin开发者  没有做到权限优化问题,导致用户在linux服务器上lnmp环境下安装的fastadmin后台安装插件一直产生权限不足,安装不成功的问题, 再次给大家一个具体解决办法 对 ...

  9. eclipse自定义自动补全语句

    1. Windows-->preferences 2. 弹出框选择, Java-->Editor-->Templates-->New 3. 弹出框输入, 1.Name--名字, ...

  10. UDP基础

    UDP主要特点: (1)UDP是无连接的,发送数据不需要建立连接,减少了开销和发送数据之前的时延. (2)UDP使用尽最大努力交付,即不保证可靠交付,因此主机不需要维持连接状态表. (3)UDP面向报 ...