Learn how two common array functions - map() and filter() - are syntactic sugar for reduce operations. Learn how to use them, how to compose them, and how using reduce can give you a big performance boost over composing filters and maps over a large data set.

var data = [1, 2, 3];
var doubled = data.reduce(function(acc, value) {
acc.push(value * 2); return acc;
}, []); var doubleMapped = data.map(function(item) {
return item * 2;
}); var data2 = [1, 2, 3, 4, 5, 6];
var evens = data2.reduce(function(acc, value) {
if (value % 2 === 0) {
acc.push(value);
} return acc;
}, []); var evenFiltered = data2.filter(function(item) {
return (item % 2 === 0);
}); var filterMapped = data2.filter(function(value) {
return value % 2 === 0;
}).map(function(value) {
return value * 2;
});

About big data:

var bigData = [];
for (var i = 0; i < 1000000; i++) {
bigData[i] = i;
} console.time('bigData');
var filterMappedBigData = bigData.filter(function(value) {
return value % 2 === 0;
}).map(function(value) {
return value * 2;
}); console.timeEnd('bigData'); //79ms console.time('bigDataReduce');
var reducedBigData = bigData.reduce(function(acc, value) {
if (value % 2 === 0) {
acc.push(value * 2);
}
return acc;
}, []);
console.timeEnd('bigDataReduce'); //54ms

Because map and filter each will go thought the array, but reduce only go thought once.

[Javascript] Introducing Reduce: Common Patterns的更多相关文章

  1. [Javascript] Advanced Reduce: Common Mistakes

    Take away: Always check you ruturn the accumulator Always pass in the inital value var data = [" ...

  2. JavaScript中reduce()方法

    原文  http://aotu.io/notes/2016/04/15/2016-04-14-js-reduce/   JavaScript中reduce()方法不完全指南 reduce() 方法接收 ...

  3. [Javascript] Advanced Reduce: Flatten, Flatmap and ReduceRight

    Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single a ...

  4. [Javascript] Advanced Reduce: Additional Reducer Arguments

    Sometimes we need to turn arrays into new values in ways that can't be done purely by passing an acc ...

  5. [Javascript] Advanced Reduce: Composing Functions with Reduce

    Learn how to use array reduction to create functional pipelines by composing arrays of functions. co ...

  6. javascript之reduce()方法的使用

    以前看到reduce方法,总是看得我头皮发麻,今天无意间又遇到他了,于是学习了下,接触之后,觉得这个方法还挺好用的,在很多地方都可以派上用场,比如,数组中元素求和.数组去重.求数组中的最大值或最小值等 ...

  7. JavaScript map reduce

    23333333333333 map var s = []; for(let i=0;i<10;i++){ s.push(i); } function pow(x){ return x*x; } ...

  8. JavaScript Array Reduce用于数组求和

    需求一 假设有一个数组,需要对其中的元素进行求和. const numbers = [1, -1, 2, 3]; 传统写法,使用for循环求和 const numbers = [1, -1, 2, 3 ...

  9. JavaScript 中 reduce去重方法

    过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊 JS 中 redu ...

随机推荐

  1. C# 、winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示

    C# .winform 添加皮肤后(IrisSkin2) label设置的颜色 无法显示 解决方法一:设置label的Tag属性值与skinEngine的DisableTag属性值相同即可.默认值是9 ...

  2. javascript 操作符类型隐性转换

    javascript 操作符类型隐性转换 (一).一元操作符只能操作一个值的操作符叫做一元操作符1.递增和递减操作符a. 在应用于一个包含有效数字字符的字符串时,先将其转换为数字值,再执行加减1的操作 ...

  3. python challenge 16

    前情回顾:上一篇 第16关地址 打开16关,又是一张奇奇怪怪很多点点的图片,应该又是与PIL库有关的. 页面的标题是:let me get this straight.这是英语中的一句俚语,意思是让我 ...

  4. PHP Countable接口

    实现该接口可以使用count()方法来获取集合的总数

  5. 全志A10_linux3.0内核编译记录

    第一次尝试编译时按照 Android A10(4.0.3)系统编译详解.pdf 编译打包出来的镜像可用,但是内核没有生成Module.symvers .后来进一步研究才知道 ./build.sh 脚本 ...

  6. 疯狂学习java web3(javaScript)

    js之前有看过,只不过是在C++代码中通过UI引擎调用js进行画图,当时就为语法问题痛苦了半天,结果现在java web了,更是处处是js,再次陷入痛苦中. js实际例子: <!DOCTYPE ...

  7. poj 2782 Bin Packing (贪心+二分)

    F - 贪心+ 二分 Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   Description ...

  8. 防止SQL注入攻击,数据库操作类

    如果不规避,在黑窗口里面输入内容时利用拼接语句可以对数据进行攻击 如:输入Code值 p001' union select * from Info where '1'='1 //这样可以查询到所有数据 ...

  9. Glide制作圆形图片

    上效果图: 第一步: AndroidStudio添加依赖库: compile 'com.github.bumptech.glide:glide:3.5.2' 第二步: <ImageView an ...

  10. Java进阶代码

    本文重在温习……不过初学以及进阶高手不可错过 1.  public static void arraycopy(全小写)(object src,int srcPos,object dest,int d ...