Array.reduce()方法的使用
起因是学习异步函数的串行与并行写法时,发现reduce方法可以简化写法,然后看到一篇博客里面这样一段代码:
var array = [1, [2, [3, 4], 5], 6];
function flatten(array) {
return array.reduce(function (arr, item) {
return (Object.prototype.toString.call(item) === '[object Array]'
? Array.prototype.push.apply(arr, flatten(item))
: arr.push(item)
, arr);
}, []);
}
console.log(flatten(array));
发现好多不理解的地方,花费些许时间终于弄懂了:
- reduce(fn,initValue)接收2个参数。第一个是迭代器函数,函数的作用是对数组中从左到右的每一个元素进行处理。函数有4个参数,分别是accumulator、currentValue、currentIndex、array。
accumulator 累加器,即函数上一次调用的返回值。第一次的时候为 initialValue || arr[0]
currentValue 数组中函数正在处理的的值。第一次的时候initialValue || arr[1]
currentIndex 数组中函数正在处理的的索引
array 函数调用的数组
initValue reduce 的第二个可选参数,累加器的初始值。没有时,累加器第一次的值为currentValue;
2. return (a,b) 这里其实就是逗号运算符了。先计算左边,再计算右边,最后返回右边的值。比如
var n = (1,2,3,4);
console.log(n); //
3. 然后reduce的第一个参数的这个函数一定要每次都有返回值;
4. Array.prototype.push.apply(arr1,arr2)为什么可以把2个数组concat()起来。
我觉得我应该能想的出来的,以前看过但没怎么用,印象不深刻,所以没记起来。
这个从 call 、apply、bind 说起。
fn.call() 第一个参数,传入调用的对象,第二个以后的参数为fn的参数,一一对应;
fn.apply() 同上,第二个参数变为数组,数组中的元素与fn的参数一一对应;
fn.bind() 同 apply ,不过 call apply 直接就执行了, bind 是生成了一个新函数,在需要的时候执行。
这样就出来了, Array.prototype.push.apply(arr1,arr2) 将 arr2 中的每一个元素当成参数 push 到 arr1 中去了,而不是arr1.push(arr2)。
所以上述的意思就是,第一次迭代时 accumulator 的值为[],然后递归调用flatten,每次都返回accumulator
此外 apply 还有很多巧妙的用处,比如数组找最大值Math.max.apply(Math,arr);
伪数组的转换Array.prototype.slice.apply(arguments)
上文说过fn.apply()接收2个参数,一个是context,一个是数组作为参数。此时只传了一个上下文环境(arguments是伪数组,本身没有slice方法,所以借用数组原型上的方法),而slice本身是没有传参数的。不传参数默认为slice(0),即 Array.prototype.slice.apply(arguments,[0])所以就将整个数组复制一份返回出来了。
关于promise
reduce 可以使 promise 的串行.then()写法变得简单;
// promise生成函数
function log(n, delay, param) {
return function () {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(n);
resolve(param);
}, delay);
})
}
}
/**异步函数的串行1
* 这是正常的promise链式调用,每个then里面都返回一个promise;
* 上一个执行完成,下一个才会执行
*/
Promise.resolve()
.then(log(1,300))
.then(log(2,0))
.then(log(3,500))
.then(log(4,100));
上面的代码按顺序打印出1、2、3、4。
如果想让1、2、3、4全部执行完毕后再执行某个函数,则可以用Promise.all(arr)
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。具体示例如下:
//异步函数的并行写法
Promise.all([
log(1, 300, "aa")(), log(2, 0, "bb")(), log(3, 1500, "cc")(), log(4, 100, "dd")()
]).then((result) => {
console.log('finished!')
console.log(result);
});
//
//
//
//
//finished!
//[ 'aa', 'bb', 'cc', 'dd' ]
如果想让串行的写法和这种并行的写法差不多的话,可以用到reduce()
函数
//异步函数的串行2
//reduce中传入Promise.resolve()作为累加器的初始值
//第一次时Promise.resolve().then(fn)传入一个函数log(1, 300),函数运行后返回promis实例
//这个实例作为第二次的累加器的值,然后调用它的then()方法,并传入数组的第二项...
[log(1, 300),log(2, 0),log(3, 500),log(4, 100)].reduce((accumulator, value) => {
return accumulator.then(value)
},Promise.resolve());
结果和上面的串行1一样,按顺序打印出来1、2、3、4
原文链接:https://blog.csdn.net/q1325545052/article/details/78851786
参考链接:https://blog.csdn.net/zhendong9860/article/details/74908062
Array.reduce()方法的使用的更多相关文章
- Array.reduce()方法
Array.reduce()方法是对数组的遍历,返回一个单个返回值 使用方法: Array.reduce((acc, cur, idx, src) => { }, initialValue) ...
- 用es6的Array.reduce()方法计算一个字符串中每个字符出现的次数
有一道经典的字符串处理的问题,统计一个字符串中每个字符出现的次数. 用es6的Array.reduce()函数配合“...”扩展符号可以更方便的处理该问题. s='abananbaacnncn' [. ...
- Array.reduce()学习
昨天遇到的一道题:1234567890 => 1,234,567,890 要求其实就是使用逗号做千分位将数字进行分隔. 当时没想到任何方法,但是以前看到过,印象很深刻,今天就找了一下. 看到其实 ...
- JS Array.reduce 对象属性累加
Array reduce() 方法 ,无非就是 计算数组元素 相加后的总和 ,看网上给的Demo 全是 [1,2,3,4,6].reduce 这种基本用法, 本次我将使用 reduce 实现 数组 ...
- 自从学会了 Array.reduce() ,再也离不开它
(转载)原文链接:https://juejin.im/post/5dfd9d27e51d455825129ec3 在所有后 ES6 时代的数组方法中,我觉得最难理解的就是Array.reduce( ...
- JavaScript - reduce方法,reduceRight方法 (Array)
JavaScript - reduce方法 (Array) 解释:reduce() 方法接收一个函数作为累加器(accumulator),数组 中的每个值(从左到右)开始合并,最终为一个值. 语法:a ...
- reduce 方法 (Array) (JavaScript)
对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次调用该回调函数时作为参数提供. 语法 array1.reduce(callbackfn[, in ...
- 数组的方法之(Array.prototype.reduce() 方法)
reduce函数 reduce() 方法对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值. 对数组中的所有元素调用指定的回调函数.该回调函数的返回值为累积结果,并且此返回值在下一次 ...
- JavaScript Array every()&some()&reduce()方法
every()方法测试数组的所有元素是否都通过了指定函数的测试. // 每一项都要满足条件才会返回true,只要有一项不满足返回false var arr = [1, 2, 3, 4]; let bl ...
随机推荐
- ASP.NET MVC4+EasyUI+EntityFrameWork5权限管理系统——数据库的设计(一)
快一年没写博客了,这段时间感觉好迷茫,写点博客,记录一下自己的成长过程,希望对大家也有帮助 先上图 一个用户可以有多个角色,一个用户可以属于多个部门,这些都可以控制到权限,有时特殊要求,同样的部门和角 ...
- Codeforces 450B div.2 Jzzhu and Sequences 矩阵快速幂or规律
Jzzhu has invented a kind of sequences, they meet the following property: You are given x and y, ple ...
- Python学习笔记(四十一)— 内置模块(10)urllib
摘抄自:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432688314 ...
- 《JavaScript 实战》:Tween 算法及缓动效果
Flash 做动画时会用到 Tween 类,利用它可以做很多动画效果,例如缓动.弹簧等等.我这里要教大家的是怎么利用 Flash 的 Tween 类的算法,来做js的Tween算法,并利用它做一些简单 ...
- [php]php错误处理机制
1.判断文件是否存在,file_exists("文件名") or die("no such file");2.set_error_hanlder("错 ...
- 【51nod】1238 最小公倍数之和 V3 杜教筛
[题意]给定n,求Σi=1~nΣj=1~n lcm(i,j),n<=10^10. [算法]杜教筛 [题解]就因为写了这个非常规写法,我折腾了3天…… $$ans=\sum_{i=1}^{n}\s ...
- fetch and js异步介绍
http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html Javascript异步编程的4种方法 ht ...
- js常见易错点
原文:http://www.jianshu.com/p/1c77853d4f01 前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函 ...
- 关于linux的一些基础知识
一.基础 1.linux所有内容以文件形式保存,包括硬件. 2.linux 不区分扩展名,靠权限区分. #但是,约定 .sh脚本文件 .conf配置文件. 3.-rw-r--r-- ...
- 修改ecshop后台的管理菜单
ecshop后台菜单如何去修改,下面ecshop开发中心如何去修改 首先先打开后台菜单项相关文件: admin\includes\inc_menu.php languages\zh_cn\admin\ ...