Analisis mendalam kaedah pengurangan tatasusunan dalam JS (dengan kod)

Dalam artikel sebelumnya " Perbincangan ringkas tentang kesan nilai utama ​​​​dalam Vue pada kesan peralihan dan kesan animasi (penjelasan kod terperinci) ", saya akan memberi anda pemahaman tentang kesan nilai utama dalam Vue pada kesan peralihan dan animasi. Artikel berikut akan memberi anda pemahaman tentang kaedah pengurangan tatasusunan dalam JS Ia mempunyai nilai rujukan tertentu Rakan yang memerlukan boleh merujuknya.

Maksud Kaedah

reduce() menggunakan fungsi kepada penumpuk dan setiap elemen dalam tatasusunan (dari kiri ke kanan), Ia dikurangkan kepada satu nilai.

Sintaks

arr.reduce(callback[, initialValue])

Parameter

callbackFungsi yang melaksanakan setiap nilai dalam tatasusunan, mengandungi empat parameter: accumulatorKumpul Nilai pulangan panggil balik penumpuk; ia ialah nilai terkumpul yang dikembalikan pada kali terakhir panggilan balik dipanggil, atau initialValue (seperti yang ditunjukkan di bawah).

currentValue

Elemen dalam tatasusunan sedang diproses. currentIndexPilihan

Indeks unsur semasa dalam tatasusunan yang sedang diproses. Jika initialValue disediakan, nombor indeks ialah 0, jika tidak indeks ialah 1. tatasusunan pilihan

Suatu tatasusunanreducepilihaninitialValue

untuk digunakan sebagai nilai bagi argumen pertama panggilan pertama

. Jika tiada nilai awal diberikan, elemen pertama dalam tatasusunan akan digunakan. Memanggil callback pada tatasusunan kosong tanpa nilai awal akan menimbulkan ralat. reduceLink to sectionNilai pulanganHasil pemprosesan kumulatif fungsi

Contoh

Cari jumlah semua nilai dalam tatasusunan[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

Tukar tatasusunan dua dimensi kepada tatasusunan satu dimensi

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

Hitung bilangan kejadian setiap elemen dalam tatasusunan

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 }

Ikat tatasusunan yang terkandung dalam tatasusunan objek menggunakan operator hamparan dan initialValue

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

Penyahduaan tatasusunan

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]

Mengambil nilai maksimum dan minimum suatu tatasusunan

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

Pelaksanaan ES5

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

Pembelajaran yang disyorkan:

Tutorial video JavaScript

Atas ialah kandungan terperinci Analisis mendalam kaedah pengurangan tatasusunan dalam JS (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!