ReactJS - 地圖：初学者的指南，轉換數組

Hello there, future React developers! Today, we're going to embark on an exciting journey into the world of ReactJS, specifically focusing on the powerful map function. As your friendly neighborhood computer science teacher, I'm here to guide you through this concept with clear explanations, plenty of examples, and maybe even a chuckle or two along the way. So, grab your favorite beverage, get comfy, and let's dive in!

ReactJS - Map

ReactJS中的Map是什麼？

在我們跳進React特定的map用法之前，讓我們從基礎開始。在JavaScript（React是建立在其之上的）中，map是一個數組方法，它允許我們根據給定的函數轉換數組中的每個元素。這就像有一根魔杖，可以把你的列表中的每一項變成新的事物！

語法

這裡是map函數的一般語法：

array.map((currentValue, index, array) => {
// 返回轉換後的元素
});

別擔心這個一開始看起來有點令人卻步。我們會一步一步地剖析它，很快你就會像專家一樣進行映射！

在React中使用Map的原因

在React中，我們經常需要渲染元素列表，例如待辦事項列表、圖片庫或數據表。這正是map發光發熱的地方！它讓我們能夠高效地将數據數組轉換為React可以渲染的JSX元素數組。

你在React中的第一個Map

讓我們從一個簡單的例子開始。想像一下我們有一個水果名稱的數組，我們想把它們作為列表顯示在我們的React組件中。

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

return (
<div>
<h2>我的水果列表</h2>
<ul>
{fruits.map((fruit) => (
<li>{fruit}</li>
))}
</ul>
</div>
);
}

export default FruitList;

讓我們來剖析一下：

我們有一個存儲水果名稱的數組，名為fruits。
在我們的JSX中，我們使用花括號{}來嵌入JavaScript表達式。
我們調用fruits.map()，它將迭代數組中的每個水果。
對於每個水果，我們返回一個包含水果名稱的<li>元素。

當React渲染這個組件時，你將在頁面上看到一個格式良好的水果列表。神奇吧？

為列表項目添加Keys

如果你嘗試運行前面的例子，你可能會在控制台看到一個關於keys的警告。Keys是特殊的屬性，它們幫助React識別列表中的哪些項目已經改變、被添加或被刪除。讓我們更新我們的例子以包含keys：

import React from 'react';

function FruitList() {
const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

return (
<div>
<h2>我的水果列表</h2>
<ul>
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
</ul>
</div>
);
}

export default FruitList;

在這個更新版本中，我們使用水果的index作為其key。雖然通常不推薦對於動態列表使用索引作為key，但對於像這樣的靜態列表來說是沒問題的。

映射對象

通常，你會處理對象數組而不是簡單的字串。讓我們看看我們如何處理：

import React from 'react';

function FruitList() {
const fruits = [
{ id: 1, name: 'Apple', color: 'Red' },
{ id: 2, name: 'Banana', color: 'Yellow' },
{ id: 3, name: 'Cherry', color: 'Red' },
{ id: 4, name: 'Date', color: 'Brown' },
];

return (
<div>
<h2>我的水果列表</h2>
<ul>
{fruits.map((fruit) => (
<li key={fruit.id}>
{fruit.name} - {fruit.color}
</li>
))}
</ul>
</div>
);
}

export default FruitList;

在這個例子中，我們正在映射一個水果對象的數組。每個對象都有id、name和color。我們使用id作為key（這是一種更好的做法），並顯示每個水果的名稱和顏色。

使用Map創建自定義組件

隨著你的React技能成長，你會經常發現自己為列表項目創建自定義組件。讓我們看看我們如何使用map和一個自定義的FruitItem組件：

import React from 'react';

function FruitItem({ name, color }) {
return (
<li style={{ color: color }}>
{name}
</li>
);
}

function FruitList() {
const fruits = [
{ id: 1, name: 'Apple', color: 'red' },
{ id: 2, name: 'Banana', color: 'yellow' },
{ id: 3, name: 'Cherry', color: 'red' },
{ id: 4, name: 'Date', color: 'brown' },
];

return (
<div>
<h2>我的彩色水果列表</h2>
<ul>
{fruits.map((fruit) => (
<FruitItem
key={fruit.id}
name={fruit.name}
color={fruit.color}
/>
))}
</ul>
</div>
);
}

export default FruitList;

在這個例子中，我們創建了一個接收name和color作為props的FruitItem組件。然後我們使用map為我們數組中的每個水果創建一個FruitItem。這種方法使我們的代碼更加模塊化且容易維護。

高級Map技術

映射時過濾

有時候，你可能想在映射時過濾你的列表。你可以通過將map與filter結合來做到這點：

import React from 'react';

function RedFruitList() {
const fruits = [
{ id: 1, name: 'Apple', color: 'red' },
{ id: 2, name: 'Banana', color: 'yellow' },
{ id: 3, name: 'Cherry', color: 'red' },
{ id: 4, name: 'Date', color: 'brown' },
];

return (
<div>
<h2>我的紅色水果列表</h2>
<ul>
{fruits
.filter(fruit => fruit.color === 'red')
.map(fruit => (
<li key={fruit.id}>{fruit.name}</li>
))
}
</ul>
</div>
);
}

export default RedFruitList;

這個例子首先過濾出紅色的水果，然後映射過濾後的數組以創建列表項目。

嵌套映射

有時候，你可能需要處理嵌套數組。讓我們看一個例子：

import React from 'react';

function FruitCategories() {
const fruitCategories = [
{ category: 'Citrus', fruits: ['Orange', 'Lemon', 'Lime'] },
{ category: 'Berries', fruits: ['Strawberry', 'Blueberry', 'Raspberry'] },
{ category: 'Tropical', fruits: ['Mango', 'Pineapple', 'Coconut'] },
];

return (
<div>
<h2>水果分類</h2>
{fruitCategories.map((category, index) => (
<div key={index}>
<h3>{category.category}</h3>
<ul>
{category.fruits.map((fruit, fruitIndex) => (
<li key={fruitIndex}>{fruit}</li>
))}
</ul>
</div>
))}
</div>
);
}

export default FruitCategories;

在這個例子中，我們正在映射fruitCategories數組，並對於每個分類，我們正在映射它的fruits數組。這創建了一個嵌套的列表結構。

React中常見的Map方法

這裡是一個表，總結了一些在React中可能使用到的常見map方法：

方法	描述	示例
`map`	轉換數組中的每個元素	`array.map(item => <li>{item}</li>)`
`filter`	創建一個新數組，包含通過測試的元素	`array.filter(item => item.length > 3)`
`reduce`	將數組縮小為一個單一值	`array.reduce((acc, item) => acc + item, 0)`
`forEach`	對數組中的每個元素執行函數	`array.forEach(item => console.log(item))`
`find`	返回第一個通過測試的元素	`array.find(item => item.id === 3)`
`some`	檢查是否有元素通過測試	`array.some(item => item > 10)`
`every`	檢查是否所有元素通過測試	`array.every(item => item.length > 0)`

記住，雖然map非常有用，但這些其他方法也可以是你在React工具包中的強大工具！

結論

這就是你們，夥伴們！我們一起踏上了React中的map之旅，從基本用法到高級技巧。記住，map就像你在React開發中的瑞士軍刀——它多用途、強大，而且你會不斷地使用它。

在你繼續你的React冒險時，請持續練習使用map。嘗試創建有不同類型的列表，實驗更複雜數據結構，看看你可以如何將map與其他數組方法結合來創建動態和互動用戶界面。

開心編程，願你的數組總是映射成功！

Credits: Image by storyset