在我擔任 Web 開發人員的大約 5 年裡,這 3 個陣列函數是我最常使用的用於管理資料和與陣列互動的函數。對於React專案本身來說,這3個陣列函數對於資料處理來說是非常強大的,這裡或多或少的介紹了這3個函數的有效用法。
import React from 'react'; const users = ['Alice', 'Bob', 'Charlie']; function UserList() { return (
import React from 'react'; const users = ['Al', 'Bob', 'Charlie']; function UserList() { const filteredUsers = users.filter(user => user.length > 3); return (
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 (); } export default TotalPrice;Total Price: ${totalPrice}
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 (); } export default DiscountedProducts;Total Discount: ${totalDiscount}
{discountedProducts.map(product => (
- {product.name} - Discount: ${product.discount}
))}
在React應用程式中,map、filter和reduce不僅是操作資料的工具,也是動態、有效率地渲染UI的方法。透過理解和掌握這些功能,我們可以創建更模組化、易於閱讀和可擴展的應用程式。因此,在我們的 React 專案中繼續探索和實現這些功能以獲得最大結果
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3