创建和操作 JavaScript 数组

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

在本实验中,学生将探索在 JavaScript 中创建和操作数组的基本概念。实验通过实际的编码练习,全面介绍了数组的初始化、访问数组元素以及执行基本数组操作的方法。参与者将学习如何使用不同的方法创建数组,包括方括号表示法和 Array 构造函数,并理解如何处理包含各种数据类型的数组。

实验涵盖了关键技能,例如使用数字、字符串和混合元素定义数组,使用索引访问单个数组元素,并展示基本的数组操作技术。通过动手实践示例,学习者将获得创建、访问和与数组交互的实践经验,这些是 JavaScript 编程中必不可少的数据结构。

理解数组的定义与初始化

在这一步中,你将学习 JavaScript 中的数组,这是一种用于在单个变量中存储多个值的基本数据结构。数组可以帮助你高效地收集和组织相关数据。

让我们从创建一个简单的 JavaScript 数组开始。打开 WebIDE,在 ~/project 目录下创建一个名为 arrays.js 的新文件。

// 创建一个数字数组
let numbers = [1, 2, 3, 4, 5];

// 创建一个字符串数组
let fruits = ["apple", "banana", "orange"];

// 创建一个空数组
let emptyArray = [];

// 创建一个包含混合数据类型的数组
let mixedArray = [42, "hello", true, null];

console.log("Numbers array:", numbers);
console.log("Fruits array:", fruits);
console.log("Empty array:", emptyArray);
console.log("Mixed array:", mixedArray);

当你运行这段代码时,你将看到以下示例输出:

Numbers array: [1, 2, 3, 4, 5]
Fruits array: ['apple', 'banana', 'orange']
Empty array: []
Mixed array: [42, 'hello', true, null]

关于数组初始化的关键点:

  • 数组使用方括号 [] 创建
  • 数组可以包含不同类型的元素
  • 数组可以是空的,也可以预先填充数据
  • 数组的第一个元素始终位于索引 0 处

你也可以使用 Array 构造函数创建数组:

// 使用 Array 构造函数
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log("Array using constructor:", numbersConstructor);

使用索引访问数组元素

在这一步中,你将学习如何使用索引访问数组中的单个元素。在 JavaScript 中,数组索引从 0 开始,这意味着第一个元素的索引为 0,第二个元素的索引为 1,依此类推。

打开 ~/project 目录下的 arrays.js 文件,并添加以下代码:

// 创建一个颜色数组
let colors = ["red", "green", "blue", "yellow", "purple"];

// 通过索引访问数组元素
console.log("First color:", colors[0]); // 第一个元素
console.log("Third color:", colors[2]); // 第三个元素
console.log("Last color:", colors[colors.length - 1]); // 最后一个元素

// 修改数组元素
colors[1] = "orange"; // 修改第二个元素
console.log("Modified colors array:", colors);

// 演示索引范围
console.log("Array length:", colors.length);

当你运行这段代码时,你将看到以下示例输出:

First color: red
Third color: blue
Last color: purple
Modified colors array: ['red', 'orange', 'blue', 'yellow', 'purple']
Array length: 5

关于数组索引的关键点:

  • 索引从 0 开始
  • 使用方括号 [] 访问元素
  • array.length 返回数组的总元素数量
  • 你可以通过为特定索引赋值来修改元素
  • 要访问最后一个元素,请使用 array[array.length - 1]

尝试访问数组范围之外的元素,看看会发生什么:

console.log("Accessing out-of-range index:", colors[10]); // 返回 undefined

创建一个水果数组

在这一步中,你将创建一个水果数组并学习如何操作它。打开 ~/project 目录下的 arrays.js 文件,并添加以下代码:

// 创建一个水果数组
let fruits = ["apple", "banana", "orange", "mango", "strawberry"];

// 显示整个水果数组
console.log("Fruits array:", fruits);

// 向数组末尾添加一个新水果
fruits.push("grape");
console.log("Fruits after adding grape:", fruits);

// 创建一个包含不同类型水果的数组
let tropicalFruits = ["pineapple", "coconut", "papaya"];

// 合并两个水果数组
let allFruits = fruits.concat(tropicalFruits);
console.log("All fruits:", allFruits);

// 检查水果的数量
console.log("Total number of fruits:", allFruits.length);

当你运行这段代码时,你将看到以下示例输出:

Fruits array: ['apple', 'banana', 'orange', 'mango', 'strawberry']
Fruits after adding grape: ['apple', 'banana', 'orange', 'mango', 'strawberry', 'grape']
All fruits: ['apple', 'banana', 'orange', 'mango', 'strawberry', 'grape', 'pineapple', 'coconut', 'papaya']
Total number of fruits: 9

关于创建和操作水果数组的关键点:

  • 数组可以包含多个元素
  • 你可以使用 push() 添加新元素
  • 数组可以使用 concat() 合并
  • length 属性显示元素的总数

将数组元素打印到网页

在这一步中,你将学习如何使用 HTML 和 JavaScript 在网页上显示数组元素。首先,在 ~/project 目录下创建一个名为 fruits.html 的 HTML 文件:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Fruits Array Display</title>
    <style>
      body {
        font-family: Arial, sans-serif;
      }
      #fruits-list {
        background-color: #f4f4f4;
        padding: 20px;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>My Fruits Collection</h1>
    <div id="fruits-list"></div>

    <script>
      // 创建一个水果数组
      let fruits = ["Apple", "Banana", "Orange", "Mango", "Strawberry"];

      // 获取水果列表容器
      let fruitsList = document.getElementById("fruits-list");

      // 创建一个无序列表来显示水果
      let ul = document.createElement("ul");

      // 遍历水果数组并创建列表项
      fruits.forEach(function (fruit) {
        let li = document.createElement("li");
        li.textContent = fruit;
        ul.appendChild(li);
      });

      // 将列表添加到页面中
      fruitsList.appendChild(ul);
    </script>
  </body>
</html>

这个示例演示了几个关键概念:

  • 创建 HTML 结构
  • 使用 JavaScript 操作 DOM
  • 在网页上显示数组元素
  • 使用 forEach() 遍历数组元素

当你在浏览器中打开这个 HTML 文件时,你将看到页面上显示的水果列表。

使用 innerHTML 的替代方法:

// 显示水果的替代方法
let fruitsList = document.getElementById("fruits-list");
fruitsList.innerHTML = fruits.map((fruit) => `<li>${fruit}</li>`).join("");

探索基本数组操作

在这一步中,你将学习 JavaScript 中常见的数组操作。打开 ~/project 目录下的 arrays.js 文件,并添加以下代码:

// 创建一个数字数组
let numbers = [5, 2, 8, 1, 9, 3];

// 添加元素
numbers.push(10); // 在末尾添加元素
numbers.unshift(0); // 在开头添加元素
console.log("After adding elements:", numbers);

// 删除元素
let lastNumber = numbers.pop(); // 删除最后一个元素
let firstNumber = numbers.shift(); // 删除第一个元素
console.log("After removing elements:", numbers);

// 排序数组
numbers.sort((a, b) => a - b); // 升序排列
console.log("Sorted array:", numbers);

// 反转数组
numbers.reverse();
console.log("Reversed array:", numbers);

// 查找元素
let index = numbers.indexOf(8);
console.log("Index of 8:", index);

// 切片数组
let slicedNumbers = numbers.slice(1, 4);
console.log("Sliced array:", slicedNumbers);

// 过滤数组
let evenNumbers = numbers.filter((num) => num % 2 === 0);
console.log("Even numbers:", evenNumbers);

// 映射数组
let squaredNumbers = numbers.map((num) => num * num);
console.log("Squared numbers:", squaredNumbers);

当你运行这段代码时,你将看到以下示例输出:

After adding elements: [0, 5, 2, 8, 1, 9, 3, 10]
After removing elements: [5, 2, 8, 1, 9, 3, 10]
Sorted array: [1, 2, 3, 5, 8, 9, 10]
Reversed array: [10, 9, 8, 5, 3, 2, 1]
Index of 8: 2
Sliced array: [9, 8, 5]
Even numbers: [10, 8, 2]
Squared numbers: [100, 81, 64, 25, 9, 4, 1]

演示的关键数组操作:

  • push()unshift() 用于添加元素
  • pop()shift() 用于删除元素
  • sort() 用于排序元素
  • reverse() 用于反转数组顺序
  • indexOf() 用于查找元素位置
  • slice() 用于提取数组的一部分
  • filter() 用于创建包含特定元素的新数组
  • map() 用于转换数组元素

总结

在本实验中,参与者探索了 JavaScript 中数组操作的基础知识,学习了如何创建、初始化和操作数组数据结构。实验涵盖了关键概念,例如使用方括号和 Array 构造函数定义数组,展示了创建包含不同类型元素(包括数字、字符串和混合数据类型)的数组的能力。

参与者通过索引访问数组元素获得了实践技能,理解了数组索引从 0 开始,并学习了如何执行基本的数组操作。通过动手实践,学习者练习了创建数组、记录其内容,并探索了 JavaScript 数组在高效存储和组织数据方面的灵活性。

您可能感兴趣的其他 JavaScript 教程