In-depth analysis of the array reduce method in JS (with code)

In the previous article " A brief discussion on the impact of key values ​​​​in Vue on transition effects and animation effects (detailed code explanation) ", let everyone know how the key values ​​​​in Vue affect transition effects and animations Effect. The following article will give you an understanding of the array reduce method in JS. It has certain reference value. Friends in need can refer to it.

Meaning

reduce() method works on the accumulator and each element in the array (from left to right ) applies a function to reduce it to a single value.

Syntax

arr.reduce(callback[, initialValue])

Parameters

callbackFunction that executes each value in the array, contains four parameters: accumulatorThe accumulator accumulates the return value of the callback; it is the accumulated value returned the last time the callback was called, or initialValue (as shown below).

currentValue

The element in the array being processed. currentIndexOptional

The index of the current element being processed in the array. If initialValue is provided, the index number is 0, otherwise the index is 1. array optional

Array of callreduceinitialValueoptional

is used as the first call to callback the value of a parameter. If no initial value is provided, the first element in the array will be used. Calling reduce on an empty array with no initial value will report an error. Link to sectionReturn valueThe result of cumulative processing of the function

Example

Find the array[1,2,3, 4,5]The sum of all values ​​in

// 1 遍历求和
let count = 0;
let arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
  count += arr[i];
}
console.log(count);
// output 15

// 2 eval
let count = eval([1, 2, 3, 4, 5].join("+"));
console.log(count);
// output 15

// 3 reduce
let count = [1, 2, 3, 4, 5].reduce((a, b) => a + b);
console.log(count);
// output 15

Convert the two-dimensional array into one-dimensional

var flattened = [
  [0, 1],
  [2, 3],
  [4, 5],
].reduce((acc, cur) => acc.concat(cur), []);

Calculate each value in the array The number of occurrences of elements

var names = ["Alice", "Bob", "Tiff", "Bruce", "Alice"];

var countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++;
  } else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

Use the spread operator and initialValueBind the array contained in the object array

// friends - an array of objects
// where object field "books" - list of favorite books
var friends = [
  {
    name: "Anna",
    books: ["Bible", "Harry Potter"],
    age: 21,
  },
  {
    name: "Bob",
    books: ["War and peace", "Romeo and Juliet"],
    age: 26,
  },
  {
    name: "Alice",
    books: ["The Lord of the Rings", "The Shining"],
    age: 18,
  },
];

// allbooks - list which will contain all friends' books +
// additional list contained in initialValue
var allbooks = friends.reduce(
  function (prev, curr) {
    return [...prev, ...curr.books];
  },
  ["Alphabet"]
);

// allbooks = [
//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace',
//   'Romeo and Juliet', 'The Lord of the Rings',
//   'The Shining'
// ]

Array deduplication

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce((init, current) => {
  if (init.length === 0 || init[init.length - 1] !== current) {
    init.push(current);
  }
  return init;
}, []);
console.log(result); //[1,2,3,4,5]

Array taking the maximum and minimum values

let data = [1, 4, 2, 2, 4, 5, 6, 7, 8, 8, 9, 10];
//取最小值
let min = data.reduce((x, y) => (x > y ? y : x));
//取最大值
let max = data.reduce((x, y) => (x > y ? x : y));

ES5 implementation

if (!Array.prototype.reduce) {
  Object.defineProperty(Array.prototype, "reduce", {
    value: function (callback /*, initialValue*/) {
      if (this === null) {
        throw new TypeError(
          "Array.prototype.reduce " + "called on null or undefined"
        );
      }
      if (typeof callback !== "function") {
        throw new TypeError(callback + " is not a function");
      }

      // 1. Let O be ? ToObject(this value).
      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;
      // >>表示是带符号的右移：按照二进制把数字右移指定数位，高位如符号位为正补零，符号位负补一，低位直接移除
      //  >>>表示无符号的右移：按照二进制把数字右移指定数位，高位直接补零，低位移除。

      // Steps 3, 4, 5, 6, 7
      var k = 0;
      var value;

      if (arguments.length >= 2) {
        value = arguments[1];
      } else {
        while (k < len && !(k in o)) {
          k++;
        }

        // 3. 长度为0 且初始值不存在 抛出异常
        if (k >= len) {
          throw new TypeError(
            "Reduce of empty array " + "with no initial value"
          );
        }
        value = o[k++];
      }

      // 8. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kPresent be ? HasProperty(O, Pk).
        // c. If kPresent is true, then
        //    i.  Let kValue be ? Get(O, Pk).
        //    ii. Let accumulator be ? Call(
        //          callbackfn, undefined,
        //          « accumulator, kValue, k, O »).
        if (k in o) {
          value = callback(value, o[k], k, o);
        }

        // d. Increase k by 1.
        k++;
      }

      // 9. Return accumulator.
      return value;
    },
  });
}

Recommended learning ：JavaScript video tutorial

The above is the detailed content of In-depth analysis of the array reduce method in JS (with code). For more information, please follow other related articles on the PHP Chinese website!