Bagaimana untuk menggunakan fungsi pada setiap kunci penumpuk dan objek dalam JavaScript?-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

Bagaimana untuk menggunakan fungsi pada setiap kunci penumpuk dan objek dalam JavaScript?

王林

Aug 25, 2023 pm 05:33 PM

如何在 JavaScript 中对累加器和对象的每个键应用函数？

Dalam JavaScript, kita boleh menggunakan kaedah reduce() untuk menggunakan fungsi pada penumpuk dan setiap kekunci objek (dari kiri ke kanan). Kaedah

reduce() mengambil tatasusunan dan menerima fungsi panggil balik sebagai hujah pertamanya. Lihat array reduce() untuk butiran lanjut. Mari kita lihat sintaks kaedah ini.

Syntax

array array.reduce(callback[, initialValue]);

Parameter

Panggil Balik - Fungsi dilaksanakan pada setiap nilai dalam tatasusunan.

initialValue - Objek yang digunakan sebagai hujah pertama untuk seruan pertama panggilan balik.

Panggil balik Fungsi diluluskan empat parameter

Parameter pertama ialah penumpuk, iaitu hasil daripada panggilan fungsi panggil balik sebelumnya, atau nilai awal jika ini adalah panggilan pertama.
Parameter kedua ialah kunci yang sedang diproses.
Parameter ketiga ialah kunci yang sedang diproses. Nilai yang sedang diproses.
Parameter keempat ialah indeks sedang diproses.

Kemudian kaedah reduce() mengembalikan penumpuk.

Menggunakan kaedah reduce()

Mari kita lihat contoh mudah untuk memahami cara kaedah reduce() berfungsi.

Kami mempunyai tatasusunan objek, setiap objek mempunyai nama dan harta nilai. Kami menggunakan kaedah reduce() untuk menjumlahkan nilai.

Kita boleh melakukan ini dengan menghantar fungsi panggil balik yang menerima penumpuk (hasil daripada panggilan fungsi panggil balik sebelumnya) dan nilai semasa untuk dikendalikan. Fungsi panggil balik kemudian mengembalikan penumpuk ditambah nilai semasa.

Contoh

<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
      let sum = arr.reduce((acc, cur) => acc + cur.value, 0);
      document.getElementById("result").innerHTML = sum;
   </script>
</body>
</html>

Dalam program di atas, kita mempunyai tatasusunan objek, setiap objek mempunyai nama dan atribut nilai. Kami menggunakan kaedah reduce() untuk menjumlahkan nilai.

Kami meneruskan fungsi panggil balik ((acc, cur) => acc + cur.value), yang menerima acc accumulator sedang diproses (hasil daripada panggilan fungsi panggil balik sebelumnya) dan cur nilai semasa. Fungsi panggil balik kemudian mengembalikan penumpuk ditambah nilai semasa.

Kemudian, kaedah reduce() mengembalikan penumpuk, iaitu jumlah semua nilai.

Kelebihan menggunakan reduce()

Satu kelebihan menggunakan reduce() ialah ia boleh menjadikan kod anda lebih mudah dibaca.

Sebagai contoh, jika kita ingin menjumlahkan nilai dalam tatasusunan di atas, kita juga boleh menggunakan gelung for.

Contoh

<html>
<head>
   <title>Using for loop</title>
</head>
<body>
   <h2 id="Using-for-loop-to-sum-the-values-of-objects-in-an-array"> Using for loop to sum the values of objects in an array</h2>
   <div id="result"></div>
   <script>
      let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
      let sum = 0;
      for (let i = 0; i < arr.length; i++) {
         sum += arr[i].value;
      }
      document.getElementById("result").innerHTML = sum
   </script>
</body>
</html>

Kaedah reduce() di atas dan gelung for kedua-duanya mencapai hasil yang sama. Namun, kaedah reduce() lebih ringkas dan mudah dibaca.

Satu lagi kelebihan menggunakan reduce() ialah ia boleh digunakan untuk memproses data secara selari.

Sebagai contoh, jika kita mempunyai tatasusunan objek, setiap objek mempunyai nama dan atribut nilai, dan kita mahu memprosesnya secara selari Untuk setiap objek, kita boleh menggunakan kaedah peta ().

let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let results = arr.map(obj => { // do something with obj });

Walau bagaimanapun, jika kita ingin memproses data secara berurutan, kita boleh menggunakan kaedah reduce().

let arr = [{ name: "John", value: 5 }, { name: "Jane", value: 7 }, { name: "Jim", value: 3 }];
let result = arr.reduce((acc, obj) => { // do something with obj and return the result }, initialValue);

Kesimpulan

Dalam tutorial ini, kami melihat cara menggunakan fungsi pada penumpuk dan setiap kunci objek menggunakan kaedah reduce(). Kami juga melihat beberapa kelebihan menggunakan reduce() berbanding kaedah lain.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan fungsi pada setiap kunci penumpuk dan objek dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

Artikel ini dikembalikan pada:tutorialspoint. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel Berkaitan

Di sebalik tabir: Apa bahasa JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript berjalan dalam penyemak imbas dan persekitaran Node.js dan bergantung pada enjin JavaScript untuk menghuraikan dan melaksanakan kod. 1) menjana pokok sintaks abstrak (AST) di peringkat parsing; 2) menukar AST ke bytecode atau kod mesin dalam peringkat penyusunan; 3) Laksanakan kod yang disusun dalam peringkat pelaksanaan.

Masa Depan Python dan JavaScript: Trend dan RamalanApr 27, 2025 am 12:21 AM

Trend masa depan Python dan JavaScript termasuk: 1. Kedua -duanya akan terus mengembangkan senario aplikasi dalam bidang masing -masing dan membuat lebih banyak penemuan dalam prestasi.

Python vs JavaScript: Persekitaran dan Alat PembangunanApr 26, 2025 am 12:09 AM

Kedua -dua pilihan Python dan JavaScript dalam persekitaran pembangunan adalah penting. 1) Persekitaran pembangunan Python termasuk Pycharm, Jupyternotebook dan Anaconda, yang sesuai untuk sains data dan prototaip cepat. 2) Persekitaran pembangunan JavaScript termasuk node.js, vscode dan webpack, yang sesuai untuk pembangunan front-end dan back-end. Memilih alat yang betul mengikut keperluan projek dapat meningkatkan kecekapan pembangunan dan kadar kejayaan projek.

Adakah JavaScript ditulis dalam C? Memeriksa buktiApr 25, 2025 am 12:15 AM

Ya, teras enjin JavaScript ditulis dalam C. 1) Bahasa C menyediakan prestasi yang efisien dan kawalan asas, yang sesuai untuk pembangunan enjin JavaScript. 2) Mengambil enjin V8 sebagai contoh, terasnya ditulis dalam C, menggabungkan kecekapan dan ciri-ciri berorientasikan objek C. 3) Prinsip kerja enjin JavaScript termasuk parsing, penyusun dan pelaksanaan, dan bahasa C memainkan peranan penting dalam proses ini.

Peranan JavaScript: Membuat Web Interaktif dan DinamikApr 24, 2025 am 12:12 AM

JavaScript adalah di tengah -tengah laman web moden kerana ia meningkatkan interaktiviti dan dinamik laman web. 1) Ia membolehkan untuk menukar kandungan tanpa menyegarkan halaman, 2) memanipulasi laman web melalui Domapi, 3) menyokong kesan interaktif kompleks seperti animasi dan drag-and-drop, 4) mengoptimumkan prestasi dan amalan terbaik untuk meningkatkan pengalaman pengguna.

C dan JavaScript: Sambungan dijelaskanApr 23, 2025 am 12:07 AM

C dan JavaScript mencapai interoperabilitas melalui webassembly. 1) Kod C disusun ke dalam modul WebAssembly dan diperkenalkan ke dalam persekitaran JavaScript untuk meningkatkan kuasa pengkomputeran. 2) Dalam pembangunan permainan, C mengendalikan enjin fizik dan rendering grafik, dan JavaScript bertanggungjawab untuk logik permainan dan antara muka pengguna.

Dari laman web ke aplikasi: Aplikasi pelbagai JavaScriptApr 22, 2025 am 12:02 AM

JavaScript digunakan secara meluas di laman web, aplikasi mudah alih, aplikasi desktop dan pengaturcaraan sisi pelayan. 1) Dalam pembangunan laman web, JavaScript mengendalikan DOM bersama -sama dengan HTML dan CSS untuk mencapai kesan dinamik dan menyokong rangka kerja seperti JQuery dan React. 2) Melalui reaktnatif dan ionik, JavaScript digunakan untuk membangunkan aplikasi mudah alih rentas platform. 3) Rangka kerja elektron membolehkan JavaScript membina aplikasi desktop. 4) Node.js membolehkan JavaScript berjalan di sisi pelayan dan menyokong permintaan serentak yang tinggi.

Python vs JavaScript: Gunakan Kes dan Aplikasi MembandingkanApr 21, 2025 am 12:01 AM

Python lebih sesuai untuk sains data dan automasi, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python berfungsi dengan baik dalam sains data dan pembelajaran mesin, menggunakan perpustakaan seperti numpy dan panda untuk pemprosesan data dan pemodelan. 2. Python adalah ringkas dan cekap dalam automasi dan skrip. 3. JavaScript sangat diperlukan dalam pembangunan front-end dan digunakan untuk membina laman web dinamik dan aplikasi satu halaman. 4. JavaScript memainkan peranan dalam pembangunan back-end melalui Node.js dan menyokong pembangunan stack penuh.

See all articles