Analisis mendalam kaedah pengurangan tatasusunan dalam JS (dengan kod)

奋力向前
Lepaskan: 2021-08-19 11:10:15
ke hadapan
2564 orang telah melayarinya

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.

Analisis mendalam kaedah pengurangan tatasusunan dalam JS (dengan kod)

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])
Salin selepas log masuk

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
Salin selepas log masuk

Tukar tatasusunan dua dimensi kepada tatasusunan satu dimensi

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

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:
// { &#39;Alice&#39;: 2, &#39;Bob&#39;: 1, &#39;Tiff&#39;: 1, &#39;Bruce&#39;: 1 }
Salin selepas log masuk

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&#39; books +
// additional list contained in initialValue
var allbooks = friends.reduce(
  function (prev, curr) {
    return [...prev, ...curr.books];
  },
  ["Alphabet"]
);

// allbooks = [
//   &#39;Alphabet&#39;, &#39;Bible&#39;, &#39;Harry Potter&#39;, &#39;War and peace&#39;,
//   &#39;Romeo and Juliet&#39;, &#39;The Lord of the Rings&#39;,
//   &#39;The Shining&#39;
// ]
Salin selepas log masuk

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]
Salin selepas log masuk

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));
Salin selepas log masuk
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;
    },
  });
}
Salin selepas log masuk
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!

Label berkaitan:
js
sumber:chuchur.com
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan