Javascript 零基础教程

JavaScript 创建和访问数组

数组（Arrays）是 JavaScript 中的基础数据结构，它允许你在一个变量名下存储和管理数据的集合。

数组在 Web 开发、数据处理和算法设计中被广泛使用。它们提供了一种有组织的方式来处理多个值，实现了信息的高效存储和检索。

本章节将介绍创建数组的不同方法、如何访问和修改数组元素，以及使用数组索引的最佳实践。

1. 创建数组

在 JavaScript 中，有几种创建数组的方法。最常见的方法是使用数组字面量和 Array 构造函数。

1.1 数组字面量 (Array Literals)

数组字面量是创建数组最简单、最易读的方法。它涉及使用方括号 []，并将数组元素放在里面，用逗号分隔。

// 使用数组字面量创建一个空数组
let emptyArray = [];
console.log(emptyArray); // 输出: []

// 创建一个包含初始值（数字）的数组
let numbers = [1, 2, 3, 4, 5];
console.log(numbers); // 输出: [1, 2, 3, 4, 5]

// 创建一个包含初始值（字符串）的数组
let fruits = ['apple', 'banana', 'orange'];
console.log(fruits); // 输出: ["apple", "banana", "orange"]

// 创建一个混合数据类型的数组
let mixedArray = [1, 'hello', true, null, undefined];
console.log(mixedArray); // 输出: [1, "hello", true, null, undefined]

解释：

  • 空数组使用 [] 创建。
  • 数组可以包含数字、字符串、布尔值、null、undefined，甚至可以混合包含这些类型。
  • 元素之间用逗号分隔。

1.2 Array 构造函数

你也可以使用 Array 构造函数来创建数组。虽然不如数组字面量常用，但理解它的工作原理很重要。

// 使用 Array 构造函数创建一个空数组
let emptyArrayConstructor = new Array();
console.log(emptyArrayConstructor); // 输出: []

// 创建一个指定长度的数组
let arrayWithLength = new Array(5); // 创建一个长度为 5 的数组，但没有任何值
console.log(arrayWithLength); // 输出: [ <5 empty items> ]

// 使用 Array 构造函数创建带有初始值的数组
let numbersConstructor = new Array(1, 2, 3, 4, 5);
console.log(numbersConstructor); // 输出: [1, 2, 3, 4, 5]

解释：

  • new Array() 创建一个空数组，类似于 []。
  • new Array(5) 创建一个指定长度的数组，但没有任何定义的值。这些位置被认为是“空的（empty）”。
  • new Array(1, 2, 3, 4, 5) 创建一个包含指定初始值的数组。

重要提示：
使用 Array 构造函数并传入单个数字参数是比较棘手的，因为它会创建一个具有该数量空位的数组，而不是把这个数字作为元素。除非你特别需要预先分配一个特定大小的数组，否则通常最好使用数组字面量。这可以避免后续使用数组方法时出现意外行为。

1.3 实战示例：创建不同类型的数组

用户名列表：

let usernames = ['Alice', 'Bob', 'Charlie'];
console.log(usernames); // 输出: ["Alice", "Bob", "Charlie"]

产品价格列表：

let prices = [19.99, 29.99, 49.99];
console.log(prices); // 输出: [19.99, 29.99, 49.99]

布尔值列表:

let booleanValues = [true, false, true];
console.log(booleanValues); // 输出: [true, false, true]

2. 访问数组元素

一旦创建了数组，你就可以使用索引（Index）来访问它的元素。JavaScript 中的数组索引从 0 开始。

2.1 使用索引号

要访问元素，请使用方括号 [] 并在其中放入索引号。

let fruits = ['apple', 'banana', 'orange'];

// 访问第一个元素 (索引 0)
console.log(fruits[0]); // 输出: apple

// 访问第二个元素 (索引 1)
console.log(fruits[1]); // 输出: banana

// 访问第三个元素 (索引 2)
console.log(fruits[2]); // 输出: orange

解释：

  • fruits[0] 访问索引 0 处的元素，即第一个元素 ('apple')。
  • fruits[1] 访问索引 1 处的元素，即第二个元素 ('banana')。
  • fruits[2] 访问索引 2 处的元素，即第三个元素 ('orange')。

3. 修改数组元素

你也可以通过向特定索引赋值来修改数组元素。

let fruits = ['apple', 'banana', 'orange'];

// 修改索引 1 处的元素
fruits[1] = 'grape';
console.log(fruits); // 输出: ["apple", "grape", "orange"]

// 在索引 3 处添加新元素 (当前数组末尾的后一位)
fruits[3] = 'kiwi';
console.log(fruits); // 输出: ["apple", "grape", "orange", "kiwi"]

解释：

  • fruits[1] = 'grape' 将索引 1 处的值从 'banana' 更改为 'grape'。
  • fruits[3] = 'kiwi' 在索引 3 处添加了一个新元素。JavaScript 数组是动态的，这意味着它们可以根据需要增长或缩小。

4. 数组长度 (Array Length)

数组的 length 属性返回数组中元素的数量。

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits.length); // 输出: 3

length 属性也可以用来在数组末尾添加元素。

let fruits = ['apple', 'banana', 'orange'];
fruits[fruits.length] = 'kiwi';
console.log(fruits); // 输出: ["apple", "banana", "orange", "kiwi"]

这在功能上等同于 fruits.push('kiwi')，我们将在下一课中介绍它。

4.1 访问超出范围的元素

如果你尝试访问超出范围（即索引大于或等于数组长度）的元素，JavaScript 将返回 undefined。

let fruits = ['apple', 'banana', 'orange'];
console.log(fruits[5]); // 输出: undefined

4.2 实战示例：访问和修改数组元素

访问用户名：

let usernames = ['Alice', 'Bob', 'Charlie'];
console.log('第一位用户:', usernames[0]); // 输出: 第一位用户: Alice
console.log('第二位用户:', usernames[1]); // 输出: 第二位用户: Bob

修改产品价格：

let prices = [19.99, 29.99, 49.99];
prices[1] = 34.99; // 更改第二个产品的价格
console.log(prices); // 输出: [19.99, 34.99, 49.99]

处理布尔值：

let booleanValues = [true, false, true];
booleanValues[0] = false; // 更改第一个值
console.log(booleanValues); // 输出: [false, false, true]