[Javascript] Introducing Reduce: Common Patterns

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.

时间: 2024-10-10 16:53:54

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

[Javascript] Advanced Reduce: Common Mistakes

Take away: Always check you ruturn the accumulator Always pass in the inital value var data = ["vote1", "vote2", "vote1", "vote2"]; var reducer = function(acc, value){ if(acc[value]){ acc[value] = acc[value] + 1; }e

[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 array, the dreaded flatmap allows you to convert an array of objects into an array of arrays which then get flattened, and reduceRight allows you to in

通过节食来解释 JavaScript 的Reduce方法!

JavaScript中的reduce方法为您提供了一种简单的方法来获取值数组并将它们组合成一个值,或者根据多个类别对数组求和. 哇,一句话说得太多了,让我们一步一步来吧! 当然,你可以使用 for 循环遍历数组并对每个值执行特定操作.但是,如果你不使用 filter().map() 和reduce() 等方法,那么你的代码将变得更加难以阅读.其他开发人员需要彻底阅读每个循环才能理解其目的,而且容易出现更多的 bug,因为你需要创建更多的变量来跟踪单个值. Filter 方法接受初始数组中的所有元

[Javascript] Advanced Reduce: Composing Functions with Reduce

Learn how to use array reduction to create functional pipelines by composing arrays of functions. const increase = (input) => { return input + 1; } const decrease = (input) => { return input - 1; } const double = (input) => { return input * 2; }

Javascript async异步操作库简介

异步操作知识 在js世界中, 异步操作非常流行, nodejs就是特点基于异步非阻塞. js语言支持的异步语法包括, Promise  async await generator yield. 这些语法需要使用者了解非常清楚, 往往很困难. 下面介绍一个异步操作的超级库,可以实现很多异步操作和流程控制. async库 http://caolan.github.io/async/index.html Async is a utility module which provides straight

JavaScript Application Architecture On The Road To 2015

JavaScript Application Architecture On The Road To 2015 I once told someone I was an architect. It’s true in a way since I now have to design an intricate web of lies to back it up. On a serious note, I thought it might be salutary to look at the sta

Google JavaScript Style Guide

转自:http://google.github.io/styleguide/javascriptguide.xml Google JavaScript Style Guide Revision 2.93 Aaron Whyte Bob Jervis Dan Pupius Erik Arvidsson Fritz Schneider Robby Walker Each style point has a summary for which additional information is ava

Understand JavaScript Callback Functions and Use Them

In JavaScript, functions are first-class objects; that is, functions are of the type Object and they can be used in a first-class manner like any other object (String, Array, Number, etc.) since they are in fact objects themselves. They can be “store

WPF加载HTML、WPF与JavaScript交互

目录 一.WebBrowser加载远程网页 二.WebBrowser加载本地网页,注:不可以加载本地样式CSS和脚本JS文件 三.WebBrowser隐藏网页的JavaScript错误 四.网页屏蔽鼠标右键.Ctrl+N.Shift+F10.F11.F5刷新.退格键 五.WPF程序与网页JavaScript交互 六.创建服务器,提供数据接口.Script.CSS文件 一.WebBrowser加载远程网页 wbrExam.Source = new Uri("http://cnblogs.com/s