JavaScript 数组详解：从基础到高级用法

JavaScript 数组详解：从基础到高级用法

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

什么是数组？

在编程中，数组是一种用于存储有序数据集合的数据结构。与普通对象不同，数组中的元素是按照顺序排列的，每个元素都有一个数字索引（从0开始）。这使得数组成为存储列表类数据的理想选择，比如用户列表、商品清单或HTML元素集合。

创建数组

JavaScript提供了两种创建数组的方式：

// 方式1：使用数组字面量（推荐）
let fruits = ['苹果', '橙子', '梨'];

// 方式2：使用Array构造函数（较少使用）
let numbers = new Array(1, 2, 3);

数组字面量语法更简洁直观，是大多数情况下的首选方式。

访问和修改数组元素

数组元素通过索引访问和修改：

let fruits = ['苹果', '橙子', '梨'];

// 获取元素
console.log(fruits[0]); // "苹果"

// 修改元素
fruits[1] = '香蕉'; // 现在数组是 ['苹果', '香蕉', '梨']

// 添加新元素
fruits[3] = '柠檬'; // 现在数组是 ['苹果', '香蕉', '梨', '柠檬']

数组长度

每个数组都有length属性，表示数组中元素的数量：

let fruits = ['苹果', '橙子', '梨'];
console.log(fruits.length); // 3

有趣的是，length属性是可写的。如果我们手动增加它，数组会扩展，新增的元素将是undefined。如果减少它，数组会被截断：

let arr = [1, 2, 3, 4, 5];
arr.length = 2; // 截断数组
console.log(arr); // [1, 2]

arr.length = 5; // 恢复长度
console.log(arr[3]); // undefined

数组方法

JavaScript数组提供了丰富的方法来操作数据：

操作数组末尾

• push() - 在数组末尾添加一个或多个元素
• pop() - 移除并返回数组的最后一个元素

let fruits = ['苹果', '橙子'];
fruits.push('梨'); // ['苹果', '橙子', '梨']
let last = fruits.pop(); // '梨', 数组现在是 ['苹果', '橙子']

操作数组开头

• unshift() - 在数组开头添加一个或多个元素
• shift() - 移除并返回数组的第一个元素

let fruits = ['橙子', '梨'];
fruits.unshift('苹果'); // ['苹果', '橙子', '梨']
let first = fruits.shift(); // '苹果', 数组现在是 ['橙子', '梨']

遍历数组

有几种方式可以遍历数组元素：

1. 经典的for循环：

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

2. for...of循环（ES6）：

for (let fruit of fruits) {
  console.log(fruit);
}

注意：避免使用for...in循环遍历数组，因为它会遍历所有可枚举属性，而不仅仅是数组元素。

数组的特殊特性

1. 数组可以存储任何类型的数据：

let mixed = ['字符串', {name: '对象'}, true, function() { console.log('函数'); }];

2. 数组实际上是对象：

typeof []; // "object"

3. 数组复制是引用复制：

let arr1 = [1, 2, 3];
let arr2 = arr1; // 两个变量引用同一个数组
arr2.push(4);
console.log(arr1); // [1, 2, 3, 4]

性能考虑

• push/pop操作非常快，因为它们只操作数组末尾
• shift/unshift操作较慢，因为它们需要移动所有元素并重新索引

这是因为JavaScript引擎通常将数组元素存储在连续的内存区域中。当我们在数组开头添加或删除元素时，需要移动所有后续元素。

多维数组

数组可以包含其他数组，从而创建多维数组：

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
console.log(matrix[1][1]); // 5

注意事项

1. 不要用==比较数组：

[] == []; // false
[0] == [0]; // false

这是因为==比较的是引用而不是内容。要比较数组内容，需要手动比较每个元素或使用专门的函数。

2. 避免创建稀疏数组：

let arr = [];
arr[100] = 1; // 创建了包含101个元素的数组，前100个是undefined

3. 不要将数组当作普通对象使用：

let arr = [];
arr.property = 'value'; // 不推荐

总结

数组是JavaScript中处理有序数据集合的强大工具。理解数组的特性和方法对于编写高效、清晰的代码至关重要。记住：

• 使用数组字面量语法创建数组
• 利用数组方法（push/pop/shift/unshift）来操作数据
• 选择正确的遍历方式（for循环或for...of）
• 注意数组是对象，复制时是引用复制
• 考虑操作性能，特别是处理大型数组时

掌握这些知识将帮助你在JavaScript中更有效地处理列表类数据。

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info