Rumah >hujung hadapan web >tutorial js >Menggunakan pengurangan, peta dan penapis untuk Pemprosesan Data dalam Projek React

Menggunakan pengurangan, peta dan penapis untuk Pemprosesan Data dalam Projek React

WBOY
WBOYasal
2024-08-28 06:10:32702semak imbas

Memanfaatkan reduce, map, dan filter untuk Pengolahan Data dalam React Project

Dalam kira-kira 5 tahun saya telah bekerja sebagai pembangun web, 3 fungsi tatasusunan ini adalah yang paling kerap saya gunakan untuk mengurus data dan berinteraksi dengan tatasusunan. Untuk projek React itu sendiri, 3 fungsi tatasusunan ini sangat berkuasa untuk pemprosesan data, berikut adalah lebih kurang berkesan penggunaan 3 fungsi ini.

Peta untuk renderList

import React from 'react';

const users = ['Alice', 'Bob', 'Charlie'];

function UserList() {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;

Penapis untuk pemaparan bersyarat

import React from 'react';

const users = ['Al', 'Bob', 'Charlie'];

function UserList() {
  const filteredUsers = users.filter(user => user.length > 3);

  return (
    <ul>
      {filteredUsers.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

export default UserList;

Kurangkan untuk Mengira Data

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500 },
  { id: 2, name: 'Phone', price: 800 },
  { id: 3, name: 'Tablet', price: 1200 }
];

function TotalPrice() {
  const totalPrice = products.reduce((acc, product) => acc + product.price, 0);

  return (
    <div>
      <h2>Total Price: ${totalPrice}</h2>
    </div>
  );
}

export default TotalPrice;

Menggabungkan peta, menapis dan mengurangkan dalam React

import React from 'react';

const products = [
  { id: 1, name: 'Laptop', price: 1500, discount: 200 },
  { id: 2, name: 'Phone', price: 800, discount: 50 },
  { id: 3, name: 'Tablet', price: 1200, discount: 100 }
];

function DiscountedProducts() {
  const discountedProducts = products.filter(product => product.discount > 0);
  const totalDiscount = discountedProducts.reduce((acc, product) => acc + product.discount, 0);

  return (
    <div>
      <h2>Total Discount: ${totalDiscount}</h2>
      <ul>
        {discountedProducts.map(product => (
          <li key={product.id}>{product.name} - Discount: ${product.discount}</li>
        ))}
      </ul>
    </div>
  );
}

export default DiscountedProducts;

Kesimpulan

Dalam aplikasi React, peta, penapis dan pengurangan bukan sahaja alat untuk memanipulasi data, tetapi juga cara untuk menjadikan UI secara dinamik dan cekap. Dengan memahami dan menguasai fungsi ini, kami boleh mencipta aplikasi yang lebih modular, mudah dibaca dan berskala. Jadi, teruskan meneroka dan melaksanakan fungsi ini dalam projek React kami untuk hasil yang maksimum

Atas ialah kandungan terperinci Menggunakan pengurangan, peta dan penapis untuk Pemprosesan Data dalam Projek React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
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
Artikel sebelumnya:Gelung Acara JavaScriptArtikel seterusnya:Gelung Acara JavaScript