將數組轉換為列表 – JavaScript編程必備技能

let fruits = ['apple', 'banana', 'cherry'];
let list = '
';
for (let i = 0; i < fruits.length; i++) {
  list += '
' + fruits[i] + '
';
}
list += '
';
document.getElementById('myList').innerHTML = list;

在這個示例中，使用了for循環，將數組中的每個元素用

中。最後使用document.getElementById()方法將HTML代碼添加到頁面上的元素中。

二、將數組轉換為有序列表

將數組轉換為有序列表（ordered list）和將數組轉換為無序列表類似，不同之處在於，用

標籤替換
標籤，並添加order屬性，為列表中的每個項目添加編號。下面是一個示例，說明如何將數組[ 『apple』，『banana』，『cherry』]轉換為HTML有序列表。

let fruits = ['apple', 'banana', 'cherry'];
let list = '
';
for (let i = 0; i < fruits.length; i++) {
  list += '
' + fruits[i] + '
';
}
list += '
';
document.getElementById('myList').innerHTML = list;

在這個示例中，仍然使用了for循環，將數組中的每個元素用

• 標籤包裹，然後將所有的
• 標籤包裹在有序列表標籤
  中。最後使用document.getElementById()方法將HTML代碼添加到頁面上的元素中。

  三、使用map()方法將數組轉換為列表

  在JavaScript中，您也可以使用map()方法將數組轉換為列表。map()方法是一種快速迭代數組中每個元素並返回新數組的方式。下面是一個示例，說明如何將數組[ 『apple』，『banana』，『cherry』]轉換為HTML無序列表。

  let fruits = ['apple', 'banana', 'cherry'];
  let list = '
  ';
  fruits.map((fruit) => {
    list += '
  ' + fruit + '
  ';
  });
  list += '
  ';
  document.getElementById('myList').innerHTML = list;
  

  在這個示例中，使用map()方法迭代fruits數組中每個元素，並用

  1. 標籤包裹，然後將所有的
  2. 標籤包裹在無序列表標籤
     中。最後使用document.getElementById()方法將HTML代碼添加到頁面上的元素中。

     四、在列表中使用JavaScript

     JavaScript可以與HTML和CSS集成，它可以實現各種動態效果和交互。下面是一個示例，說明如何在列表中使用JavaScript。

     
     Apple
     Banana
     Cherry
     
     

     在這個示例中，為每個

     • 標籤添加onclick()事件，當用戶單擊某個項目時，會顯示一條消息框。您可以將onclick()事件改為任何其他事件，並為列表中的每個項目添加自己的JavaScript代碼。
       

       五、總結

       本文介紹了將JavaScript數組轉換為無序列表和有序列表的幾種方法，以及如何在列表中使用JavaScript。無論您是Web開發者還是工程師，將數組轉換為列表是JavaScript編程中必備的基礎技能之一。

       原創文章，作者：DZKI，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/143058.html