// 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. javaEE复习重点个人总结

    最近在学院或集队的群里看见最多的就是求javaEE大作业了,那么突然有感而发,写点参考性的期末复习总结. 第一章JavaEE 概述: 1:两层体系应用体系结构 安全性低,部署困难,消耗系统资源 2 三 ...

  2. javascript:void(0); 和 href = "#"

    在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#", 但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面 ...

  3. linux防火墙和SELinux

    1. 关闭防火墙 永久性生效 开启:chkconfig iptables on 关闭:chkconfig iptables off 即时生效 开启:service iptables start 关闭: ...

  4. SpringCloud学习第四章-Eureka创建

    注:因为有了父项目,所以不需要引入boot的jar,项目都是maven构建 1.pom.xml <?xml version="1.0" encoding="UTF- ...

  5. SQL 分组后只获取每组的一条数据

    /****** Object: Table [dbo].[TEMP] Script Date: 2018-8-22 星期三 23:33:09 ******/ SET ANSI_NULLS ON GO ...

  6. ASP.NET----内置对象----Response

    Response对象是HttpResponse类的实例,它代表Web服务器对客户端请求的响应,包含如下功能: ①重定向:  ②设置页面输出内容 (可以向客户端浏览器发送信息,或者将访问转移到另一个网址 ...

  7. JavaScript 作用域不完全指北

    什么是作用域 对于几乎所有编程语言,最基本的功能之一就是能够存储变量的值,并且能在之后对这个值进行访问和修改.这样就会带来几个问题,这些变量存储在哪里?程序在需要的时候又是如何找到它们的?要解决这些问 ...

  8. 在eclipse中安装使用lombok插件

    Eclipse安装lombok插件 1.下载lombok.jar,lombok.jar官方下载地址:https://projectlombok.org/download 2.双击下载好的lombak. ...

  9. Java多线程编程核心技术-第5章-定时器 Timer-读书笔记

    第 5 章 定时器 Timer 定时 / 计划功能在移动开发领域使用较多,比如 Android 技术.定时计划任务功能在 Java 中主要使用的就是 Timer 对象,他在内部使用多线程的方式进行处理 ...

  10. Nginx——端口负载均衡

    前言 Nginx做的代理后面SpringBoot的项目,1N3T的架构,Tomcat的配置也进行了相应的调优. 配置 这里主要来简单的说下Nginx的端口负载均衡,具体的大家可以参考 Nginx文档 ...