High Order Functions (array.reduce ())

This is the sixth day of my participation in Gwen Challenge

Following the previous article, this one focuses on higher-order functions (array.reduce ()).

What is reduce?

The reduce() method takes a function as an accumulator, and each value in the array (from left to right) starts to shrink and eventually evaluates to a value.
Reduce () can be used as a higher-order function for compose of functions.
grammar

array.reduce(function(prev, cur, index, arr), init)
- Prev (the value returned from the last call to the callback, or the initialValue provided)
- Cur (the current element in the array being processed)
- Index (index of the current element in the array)
- Arr (Array of calls)
- Init (the initial value passed to the function)
- If an initial value is passed in, the first iteration of accumulator is the initial value; otherwise, it is the first element of the array. Subsequent iterations will be the result of the last iteration function. So, if the length of the array is n, if you pass in the initial value, the number of iterations is n; Otherwise, n minus 1.
- For example, implement the array arr = [1,2,3,4] and find the sum of arrays

let arr = [1.2.3.4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10
Copy the code

Browser Support

Common usage of reduce

Reduce accumulation

// with an initial value
var arr = [1.2.3.4]
var sum = arr.reduce((pre, item) = > {
    return pre + item
}, 10)
console.log(sum) / / 20

// No initial value
var arr = [1.2.3.4]
var sum = arr.reduce((pre, item) = > {
    return pre + item
},)
console.log(sum) / / 10
Copy the code

Reduce array deduplication

var arr = [1.2.3.3.2.1.4]
arr.reduce((acc, cur) = > {
  if(! (acc.includes(cur))) { acc.push(cur) }return acc
}, [])
// [1, 2, 3, 4]
Copy the code

Reduce calculates the maximum number of array items

var arr = [1.2.3.4];
arr.reduce((prev, cur) = > {
    return Math.max(prev,cur);
});
/ / 4
Copy the code

Reduce transforms a two-dimensional array into a one-dimensional array

var arr = [[1.2], [3.4], [5.6]]
arr.reduce((acc, cur) = > {
  return acc.concat(cur)
}, [])
/ / [6]
Copy the code

Attribute summation in reduce objects

var arr = [
    {subject: 'Math'.score: 90},
    {subject: 'Chinese'.score: 90},
    {subject: 'English'.score: 100}
]
arr.reduce((pre, cur) = > {
    return cur.score + pre
}, 0)
/ / 280
Copy the code

Reduce counts the number of occurrences of each element in the array

var arr = [1.2.3.3.2.1.2.1]
arr.reduce((acc, cur) = > {
  if(! (curin acc)) {
    acc[cur] = 1
  } else {
    acc[cur] += 1
  }
  return acc
}, {})
//{1: 3, 2: 3, 3: 2}
Copy the code

Reduce classifies arrays by attributes

var arr = [
    {subject: 'Math'.score: 90},
    {subject: 'Chinese'.score: 90},
    {subject: 'English'.score: 100},
    {subject: 'Math'.score: 80},
    {subject: 'Chinese'.score: 95}]; arr.reduce((acc, cur) = > {
  if(! acc[cur.type]) { acc[cur.type] = []; } acc[cur.type].push(cur)return acc
}, {})
Copy the code

Reduce implementation map

var arr = [1.2.3.4]
Array.prototype.reduceMap = function(callback) {
  return this.reduce((acc, cur, index, array) = > {
    const item = callback(cur, index, array)
    acc.push(item)
    return acc
  }, [])
}
arr.reduceMap((item, index) = > {
  return item + index
})
// [1, 3, 5, 7]

Copy the code

Reduce implementation forEach

var arr = [1.2.3.4]
Array.prototype.reduceForEach = function(callback) {
  this.reduce((acc, cur, index, array) = > {
    callback(cur, index, array)
  }, [])
}

arr.reduceForEach((item, index, array) = > {
  console.log(item, index)
})
/ / 1234
/ / 0123
Copy the code

Reduce implementation filter

var arr = [1.2.3.4]
Array.prototype.reduceFilter = function (callback) {
   return this.reduce((acc, cur, index, array) = > {
    if (callback(cur, index, array)) {
      acc.push(cur)
    }
    return acc
  }, [])
}
arr.reduceFilter(item= > item % 2= =0) // Filter out even entries.
/ / (2, 4]
Copy the code

Reduce implementation the find

var arr = [1.2.3.4]
var obj = [{ a: 1 }, { a: 2 }, { a: 3 }, { a: 4 }]
Array.prototype.reduceFind = function (callback) {
  return this.reduce((acc, cur, index, array) = > {
    if (callback(cur, index, array)) {
      if (acc instanceof Array && acc.length == 0) {
        acc = cur
      }
    }    
    if ((index == array.length - 1) && acc instanceof Array && acc.length == 0) {
      acc = undefined
    }
    return acc
  }, [])
}
arr.reduceFind(item= > item % 2= =0) / / 2
obj.reduceFind(item= > item.a % 2= =0) // {a: 2}
obj.reduceFind(item= > item.a % 9= =0) // undefined
Copy the code

Important usage of reduce

Convert an array to an object
In real business development, you may have encountered situations where a background interface returns an array type and you need to convert it to an object that looks up each item of the array as a value based on the id value as a key.

Such as:

const peopleArr = [
  {
    id: 1.username: 'limei'.sex: 0.email: '[email protected]'
  },
  {
    id: 2.username: 'ajerry'.sex: 1.email: '[email protected]'
  },
  {
    id: 3.username: 'jnancy'.sex: 0.email: ' '}];function keyByUserReducer(acc, person) {
    return{... acc, [person.id]: person}; }const userObj = peopleArr.reduce(keyByUserReducer, {});
console.log(userObj);
Copy the code

Run asynchronous functions sequentially
Another thing we can do reduce() is to run Promises sequentially (not in parallel). If you have a rate limit on API requests, or if you need to pass the results of each PRMISE to the next promise, Reduce can help you

function fetchMessages(username) {
 return fetch(`https://example.com/api/messages/${username}`)
  .then(response= > response.json());
}

function getUsername(person) {
 return person.username;
}

async function chainedFetchMessages(p, username) {
 // In this function, p is a promise. We wait for it to finish,
 // then run fetchMessages().
 const obj = await p;
 const data = await fetchMessages(username);
 return { ...obj, [username]: data};
}

const msgObj = userList
 .map(getUsername)
 .reduce(chainedFetchMessages, Promise.resolve({}))
 .then(console.log);
// {glestrade: [...] , Mholmes: [...] Iadler: [...] }
Copy the code

The async function returns a Promise object, and callbacks can be added using the then method. When a function executes, it returns as soon as it encounters await, waits for the asynchronous operation to complete, and then executes the following statement in the function body.
Note that here we pass Promise as the initial promise.resolve (), and our first API call will run immediately.
Koa’s source code, there is a only module, the entire module is a simple return reduce method operation object:

var only = function(obj, keys){
 obj = obj || {};
 if ('string'= =typeof keys) keys = keys.split(/ +/);
 return keys.reduce(function(ret, key){
  if (null == obj[key]) return ret;
  ret[key] = obj[key];
  return ret;
 }, {});
};
Copy the code

By understanding the concept of reduce, this module mainly wants to create and return an object object with keys in obJ object.

var a = {
  env : 'development'.proxy : false.subdomainOffset : 2
}
only(a,['env'.'proxy'])  // {env:'development',proxy : false}
Copy the code

The above is to introduce to you detailed solution JS array Reduce() method detailed solution and advanced skills, I hope to help you

High Order Functions (array.reduce ())

Related Posts

2021-04-01 React Hook

Front-end Docker image volume optimization – Zhihu

Handwritten Vue3.0 source code – responsive API