[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 invert the order in which your reducer is applied to your input values.

Flatten

var data = [[1,2,3], [4,5,6], [7,8,9]];
var flatData = data.reduce( (acc, value) => {
  return acc.concat(value);
}, []);

console.log(flatData); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

Flatmap

var input = [
  {
    title: "Batman Begins",
    year: 2005,
    cast: [
      "Christian Bale",
      "Michael Caine",
      "Liam Neeson",
      "Katie Holmes",
      "Gary Oldman",
      "Cillian Murphy"
    ]
  },
  {
    title: "The Dark Knight",
    year: 2008,
    cast: [
      "Christian Bale",
      "Heath Ledger",
      "Aaron Eckhart",
      "Michael Caine",
      "Maggie Gyllenhal",
      "Gary Oldman",
      "Morgan Freeman"
    ]
  },
  {
    title: "The Dark Knight Rises",
    year: 2012,
    cast: [
      "Christian Bale",
      "Gary Oldman",
      "Tom Hardy",
      "Joseph Gordon-Levitt",
      "Anne Hathaway",
      "Marion Cotillard",
      "Morgan Freeman",
      "Michael Caine"
    ]
  }
];

var flatMapInput = input.reduce((acc, value)=>{
  value.cast.forEach((star)=>{
    if(acc.indexOf(star) === -1){
      acc.push(star);
    };
  });

  return acc;
}, []);

//["Christian Bale", "Michael Caine", "Liam Neeson", "Katie Holmes", "Gary Oldman", "Cillian Murphy", "Heath Ledger", "Aaron Eckhart", "Maggie Gyllenhal", "Morgan Freeman", "Tom Hardy", "Joseph Gordon-Levitt", "Anne Hathaway", "Marion Cotillard"]

ReduceRight

var countDown = [1,2,3,4,"5"];

var str = countDown.reduceRight((acc, value)=>{
  return acc + value;
}, "");

console.log(str); //"54321"
时间: 2024-08-09 22:01:39

[Javascript] Advanced Reduce: Flatten, Flatmap and ReduceRight的相关文章

[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] 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 的Reduce方法!

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

[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

[Javascript] Advanced Console Log Arguments

Get more mileage from your console output by going beyond mere string logging - log entire introspectable objects, log multiple items in one call, and apply C-Style string substitution to make the console work for you. // Can accept multi args consol

JavaScript: Advanced

DOM 1. 节点 getElementsByName方法 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <script type="text/javascript"> 5 function getnum(){ 6 var mynode = document.getElementsByName("myt"); 7 alert(mynode.length); 8 } 9 </scrip

【Swift】Map、FlatMap、CompactMap、CompactMapValues、Filter、Reduce

Map map函数能够被数组调用,它接受一个闭包作为参数,作用于数组中的每个元素.闭包返回一个变换后的元素,接着将所有这些变换后的元素组成一个新的数组 1. 比如我们有一个这样的需求遍历一个数组中所有的元素,将每个元素自身与自身相加,最后返回一个保存相加后元素的数组(-_-原谅我这表达能力,下面用代码阐述) 如果我们不使用map函数,那么代码如下 let numbers = [1,2,3] var sumNumbers = [Int]() for var number in numbers {

javascript的学习2

嘿嘿,今天主要学习了javascript的引用类型,其实看啦一下js的书,感觉在引用类型上面讲解的还是可以理解的,些许这意味着我还在js门口徘徊吧!目前学习过的未感觉太难,太碎,但接下来我又看啦一下BOM和DOM,虽没有具体的看这两章,这也足以让我感受到:js也是我的挑战啦.下面就简单的介绍下js中的引用类型吧. 一.总体认识 1.object类型 2.Array类型 2.1.创建数组的基本方式有两种:一是使用Array构造函数:二是使用数组字面量表示法: 2.2.检测数组的方法:instanc

Javascript数组小结

Javascript数组小结 Javascript将指定的数字索引值转换成字符串--索引值1变成"1"--然后将其作为属性名来使用. 数组的length修改后,数组中大于设定值的元素将被删除 数组的添加删除: 1)  修改length属性值(删除) 2)  push.pop在数组的尾部进行插入.删除操作并返回操作元素:unshift和shift()在数组的首部进行插入.删除操作 3)  delete可以删除数组元素,但它不会改变数组的length属性,只是将该值置空. 4)  spli