JavaScript 数组入门：操作与遍历方法详解

引言 / 什么是 JavaScript 数组

在 JavaScript 编程中，数组是一种用于存储多个值的特殊数据结构。它允许你将一组相关的数据组织在一起，通过统一的索引进行访问和操作。无论是处理用户输入、存储API返回的数据，还是实现复杂的数据算法，数组都是开发者最常用的工具之一。

与许多其他编程语言不同，JavaScript 数组具有动态大小，可以随时添加或删除元素。它们可以包含任何类型的数据（字符串、数字、对象、甚至其他数组），这种灵活性使得数组成为处理多样化数据的理想选择。本文将详细介绍数组的创建、基本操作和遍历方法，帮助你快速掌握这一核心概念。

数组的创建方式

1. 字面量创建法

最常用的数组创建方式是使用方括号 [] 的字面量语法：

const fruits = ['苹果', '香蕉', '橙子'];
const numbers = [1, 2, 3, 4, 5];
const mixedArray = [1, 'hello', true, { name: 'John' }];

这种方法简洁直观，推荐在已知数组元素时使用。

2. 构造函数创建法

使用 Array() 构造函数可以创建数组：

const emptyArray = new Array(); // 创建空数组
const sizeArray = new Array(5); // 创建长度为5的空位数组
const valueArray = new Array('red', 'green', 'blue'); // 创建带元素的数组

提示：当传入单个数字参数时，构造函数会创建指定长度的空位数组（非 undefined 值），这与字面量语法有本质区别。

元素访问与基本操作

通过索引访问元素

数组元素通过数字索引访问，索引从0开始：

const colors = ['red', 'green', 'blue'];
console.log(colors[0]); // 输出: red
console.log(colors[2]); // 输出: blue

要检查数组长度，使用 length 属性：

console.log(colors.length); // 输出: 3

添加和删除元素

示例：操作数组元素

let numbers = [10, 20, 30];

// 添加元素
numbers.push(40);    // [10, 20, 30, 40]
numbers.unshift(5);  // [5, 10, 20, 30, 40]

// 删除元素
numbers.pop();       // [5, 10, 20, 30]
numbers.shift();     // [10, 20, 30]

// 任意位置操作
numbers.splice(1, 1, 15, 25); // [10, 15, 25, 30]

数组遍历方法

1. 传统 for 循环

最基础的遍历方式，适合需要精确控制索引的场景：

const scores = [85, 90, 78, 92];
let sum = 0;

for (let i = 0; i < scores.length; i++) {
  sum += scores[i];
}

const average = sum / scores.length;
console.log(`平均分: ${average}`); // 输出: 平均分: 86.25

2. forEach 方法

forEach() 对每个元素执行指定函数，无法中断循环：

const products = ['手机', '电脑', '平板'];

products.forEach((item, index) => {
  console.log(`${index + 1}. ${item}`);
});
// 输出:
// 1. 手机
// 2. 电脑
// 3. 平板

3. map 方法

map() 创建新数组，其结果是该数组中每个元素调用函数后的返回值：

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // 输出: [2, 4, 6]

实用案例：计算平均值

function calculateAverage(arr) {
  if (arr.length === 0) return 0;
  
  const sum = arr.reduce((acc, curr) => acc + curr, 0);
  return sum / arr.length;
}

const temperatures = [22, 24, 19, 23];
console.log(`平均温度: ${calculateAverage(temperatures)}°C`);
// 输出: 平均温度: 22°C

进阶技巧

使用解构赋值访问元素

const [first, second] = [10, 20, 30];
console.log(first);  // 10
console.log(second); // 20

数组展开运算符

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

查找元素

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' }
];

const bob = users.find(user => user.id === 2);
console.log(bob.name); // Bob

常见问题

Q：如何判断一个变量是否是数组？

A：使用 Array.isArray() 方法：

const data = [1, 2, 3];
console.log(Array.isArray(data)); // true

Q：如何清空数组？

A：三种方法：

let arr = [1, 2, 3];
arr = []; // 方法1：重新赋值
arr.length = 0; // 方法2：修改length
arr.splice(0, arr.length); // 方法3：使用splice

Q：for...of 和 forEach 有什么区别？

A：for...of 是语法结构，可以配合 break 中断循环；forEach 是数组方法，无法中断执行：

const arr = [1, 2, 3];

// 可以中断
for (const num of arr) {
  if (num === 2) break;
  console.log(num);
}

// 无法中断
arr.forEach(num => {
  if (num === 2) return; // 只是跳过当前迭代
  console.log(num);
});

小结

本文系统介绍了 JavaScript 数组的核心知识：从创建数组的两种方式，到元素访问和增删操作；从基础遍历方法到实用进阶技巧。特别通过计算平均值的案例，展示了如何组合运用这些方法解决实际问题。

数组作为 JavaScript 的基础数据结构，掌握其操作是编程入门的关键一步。建议通过实际项目练习巩固这些概念，例如：

1. 创建购物车商品列表
2. 处理表单输入数据
3. 实现简单的待办事项应用

随着实践深入，你将发现数组在数据处理中的强大能力，为学习更高级的 JavaScript 特性打下坚实基础。