使用 map 來顯示陣列內的資料

5 分鐘

您通常會使用的是儲存在陣列中的資料集合。雖然使用陣列資料類似於使用任何其他物件，但您確實需要能夠對資料進行迴圈，並向使用者顯示。如有疑問，請使用 JavaScript 程式碼在 JSX 中進行這項作業。更精確地說，您使用的是 map 函式。

map 可讓您建立陣列的修改複本。需要轉換陣列的值以供顯示之用時，這會很有用。若要顯示值給使用者，您可以取得值，並將其內嵌在 HTML 元素中。 map 可以完美地處理這項工作。使用 map 時，您可以建立由 HTML 組成的新陣列，其中包含要顯示的陣列中個別的值。

使用 `map`

map 的運作行為類似於 for...of 迴圈或 forEach 方法。它會針對陣列中的每個項目執行一次。主要差異在於，系統會使用傳入 map 的函式所傳回的值，來產生新的陣列。

讓我們來看看 map 如何以現有陣列中數字的平方值來建立新的陣列。首先，建立數字陣列。

const numbers = [2, 5, 8];

接下來請使用 map。 map 接受具有單一參數的函數。參數會設定為原始陣列中每個數字的值。使用 => 或 fat 箭號語法，為此目的建立匿名函式。

const squared = numbers.map((number) => {
    return number * number;
});

squared 是新的陣列，其中包含我們的原始數字的平方。使用 console.log 顯示，會看到下列內容：

console.log(squared);
// Output: [4, 25, 64]

存取索引，以產生索引鍵

在 React 中顯示清單時，請設定每個項目的索引鍵。這可讓您與 React 都能參考目前顯示的個別項目，然後將它們與繫結的資料產生關聯。產生索引鍵最常見的方式，是使用陣列中項目的索引。

在您使用 for 迴圈時，原本就會在語法中產生索引。在您使用 map 時，可以使用委派函式中的第二個參數來存取索引。第二個參數會自動設為目前的索引。

const squared = numbers.map((number, index) => {
    console.log(`Processing item ${index + 1}`);
    return number * number;
});

搭配 React 使用 map

如先前範例中所強調，您可能經常使用 map 來顯示項目清單。主要差異在於，傳回的是 JSX，而不是數字 (如範例所示)。 React 的指導方針是：所有顯示的項目，都應該要有一個索引鍵。如果所顯示的項目沒有自然索引鍵，則通常會使用索引。例如，想要在 div 元素中顯示平方數字，建議使用下列項目：

const squared = numbers.map((number, index) => {
    return (
        <div key={index}>{ number * number }</div>
    );
});

您可以在 JSX 中，以與其他變數相同的方式來使用 squared。如果您已新增 { squared } 至 JSX 的其他位置，則系統會使用更新的數字來呈現 div 元素的集合。

使用 map 來顯示陣列內的資料

使用 map

存取索引，以產生索引鍵

搭配 React 使用 map

意見反應

使用 `map`