javascript array转化为list

原创

mob649e81673fa5 2023-12-01 12:28:17 ©著作权

文章标签 数组数据 javascript 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e81673fa5的原创作品，请联系作者获取转载授权，否则将追究法律责任

JavaScript数组转化为列表

JavaScript是一种面向对象的脚本语言，广泛用于网页开发中。在JavaScript中，数组是一种常见的数据结构，用于存储和操作一组数据。有时候我们需要将数组转化为列表，以便更好地展示数据或进行操作。本文将介绍如何将JavaScript数组转化为列表，并提供代码示例。

什么是数组？

在开始之前，让我们先了解一下JavaScript中的数组是什么。数组是一种有序的数据集合，可以包含任意类型的数据，例如数字、字符串、对象等。数组中的每个元素都有一个对应的索引，可以通过索引访问和修改数组中的元素。

在JavaScript中，可以使用以下方式创建一个数组：

// 创建一个空数组
let array1 = [];
// 创建一个包含元素的数组
let array2 = [1, 2, 3, 4, 5];
// 创建一个包含不同类型元素的数组
let array3 = ['apple', 2, {name: 'John'}, true];

数组转化为列表

有时候，我们需要将数组的元素以列表的形式展示出来，这样可以更好地呈现数据。下面是将JavaScript数组转化为列表的步骤：

创建一个空的<ul>元素，用于存放列表项。
遍历数组，对每个数组元素执行以下操作：
1. 创建一个新的<li>元素。
2. 将数组元素的值赋给<li>元素的内容。
3. 将<li>元素添加到<ul>元素中。
将<ul>元素添加到文档中的适当位置。

下面是一个示例代码，将一个包含水果名称的数组转化为列表：

// 数组转化为列表
function arrayToList(array) {
  // 创建一个空的<ul>元素
  let ul = document.createElement('ul');

  // 遍历数组
  for (let i = 0; i < array.length; i++) {
    let fruit = array[i];

    // 创建一个新的<li>元素
    let li = document.createElement('li');

    // 将数组元素的值赋给<li>元素的内容
    li.textContent = fruit;

    // 将<li>元素添加到<ul>元素中
    ul.appendChild(li);
  }

  // 将<ul>元素添加到文档中的适当位置
  document.body.appendChild(ul);
}

// 测试代码
let fruits = ['apple', 'banana', 'orange'];
arrayToList(fruits);

运行以上代码，将会在页面中创建一个包含水果名称的列表。

列表转化为数组

除了将数组转化为列表，有时候我们也需要将列表转化回数组。下面是将列表转化为JavaScript数组的步骤：

获取包含列表项的<ul>元素。
遍历列表项，对每个列表项执行以下操作：
1. 获取列表项的内容。
2. 将列表项的内容添加到数组中。
返回数组。

以下是一个示例代码，将一个包含水果名称的列表转化为数组：

// 列表转化为数组
function listToArray(ul) {
  let array = [];

  // 获取包含列表项的<ul>元素
  let listItems = ul.getElementsByTagName('li');

  // 遍历列表项
  for (let i = 0; i < listItems.length; i++) {
    let listItem = listItems[i];

    // 获取列表项的内容
    let fruit = listItem.textContent;

    // 将列表项的内容添加到数组中
    array.push(fruit);
  }

  return array;
}

// 测试代码
let ul = document.querySelector('ul');
let fruits = listToArray(ul);
console.log(fruits);

运行以上代码，将会在控制台输出包含水果名称的数组。