Analyse approfondie de la méthode de réduction de tableau en JS (avec code)

Dans l'article précédent "Une brève discussion sur la façon dont la valeur clé dans Vue affecte l'effet de transition et l'effet d'animation (explication détaillée du code)", je vous ai donné une idée de la façon dont la valeur clé dans Vue affecte la transition effet et effet d'animation. L'article suivant vous donnera une compréhension de la méthode de réduction de tableau dans JS. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Signification

La méthode reduce() applique une fonction à l'accumulateur et à chaque élément du tableau (de gauche à droite), le réduisant à une seule valeur. reduce()方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

语法

arr.reduce(callback[, initialValue])

参数

callback执行数组中每个值的函数，包含四个参数：accumulator累加器累加回调的返回值；它是上一次调用回调时返回的累积值，或initialValue（如下所示）。

currentValue

数组中正在处理的元素。currentIndex可选

数组中正在处理的当前元素的索引。 如果提供了initialValue，则索引号为 0，否则为索引为 1。array可选

调用reduce的数组initialValue可选

用作第一个调用callback的第一个参数的值。如果没有提供初始值，则将使用数组中的第一个元素。在没有初始值的空数组上调用reduce将报错。Link to section返回值函数累计处理的结果

例子

求数组[1,2,3,4,5]里所有值的和

// 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

将二维数组转化为一维

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

计算数组中每个元素出现的次数

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 }

使用扩展运算符和initialValueSyntaxe

// 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'
// ]

Parameters

callbackUne fonction qui exécute chaque valeur du tableau, contenant quatre paramètres : accumulatorLa valeur de retour du rappel d'accumulation de l'accumulateur ; Il s'agit de la valeur cumulée renvoyée la dernière fois que le rappel a été appelé, ou initialValue (comme indiqué ci-dessous).

currentValue

L'élément en cours de traitement dans le tableau. currentIndexFacultatif

L'index de l'élément actuel en cours de traitement dans le tableau. Si initialValue est fourni, le numéro d'index est 0, sinon l'index est 1. array optionnel

Le tableau à appeler reduce initialValue optionnel

est utilisé comme valeur du premier paramètre du premier appel à callback. Si aucune valeur initiale n'est fournie, le premier élément du tableau sera utilisé. L'appel de reduce sur un tableau vide sans valeur initiale signalera une erreur. Lien vers la section🎜Valeur de retour🎜Le résultat du traitement cumulatif de la fonction🎜🎜Exemple🎜🎜🎜Trouver la somme de toutes les valeurs du tableau [1,2,3,4 ,5] 🎜🎜

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]

🎜🎜Convertir un tableau bidimensionnel en une dimension🎜🎜

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));

🎜🎜Compter le nombre d'occurrences de chaque élément dans le tableau🎜🎜

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;
    },
  });
}

🎜🎜Utiliser l'opérateur spread et initialValue pour lier l'objet contenu dans un tableau dans un tableau🎜🎜🎜rrreee🎜🎜Déduplication de tableau🎜🎜rrreee🎜🎜Array prenant la valeur maximale et minimale🎜🎜rrreee🎜implémentation de ES5🎜rrreee🎜Apprentissage recommandé : 🎜Vidéo JavaScript tutoriel🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!