」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 在React專案中使用reduce、map和filter進行資料處理

在React專案中使用reduce、map和filter進行資料處理

發佈於2024-11-08
瀏覽:335

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

在我擔任 Web 開發人員的大約 5 年裡,這 3 個陣列函數是我最常使用的用於管理資料和與陣列互動的函數。對於React專案本身來說,這3個陣列函數對於資料處理來說是非常強大的,這裡或多或少的介紹了這3個函數的有效用法。

renderList 的映射

import React from 'react';

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

function UserList() {
  return (
    
    {users.map((user, index) => (
  • {user}
  • ))}
); } export default UserList;

用於條件渲染的濾波器

import React from 'react';

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

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

  return (
    
    {filteredUsers.map((user, index) => (
  • {user}
  • ))}
); } export default UserList;

減少計算數據

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 (
    

Total Price: ${totalPrice}

); } export default TotalPrice;

在 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 (
    

Total Discount: ${totalDiscount}

    {discountedProducts.map(product => (
  • {product.name} - Discount: ${product.discount}
  • ))}
); } export default DiscountedProducts;

結論

在React應用程式中,map、filter和reduce不僅是操作資料的工具,也是動態、有效率地渲染UI的方法。透過理解和掌握這些功能,我們可以創建更模組化、易於閱讀和可擴展的應用程式。因此,在我們的 React 專案中繼續探索和實現這些功能以獲得最大結果

版本聲明 本文轉載於:https://dev.to/saepulmalik27/memanfaatkan-reduce-map-dan-filter-untuk-pengolahan-data-dalam-react-project-5gho?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3