JavaScript 数组精讲：创建与遍历全解析

小飞悟
247 阅读5分钟

JavaScript 数组详解：从定义、创建到遍历，全面掌握数组的使用

JavaScript 中的数组（Array）是一种特殊的对象类型，用于存储多个值，并支持动态扩容、快速访问、遍历和操作。它是 JavaScript 中最基础、最常用的数据结构之一，掌握数组的使用对于前端开发至关重要。

一、什么是数组？

数组是一个有序的元素集合，每个元素都有一个索引（从 0 开始），可以通过索引快速访问数组中的元素。

数组的特性：

  • 可遍历：可以使用多种方式遍历数组中的元素
  • 动态扩容：可以随时添加或删除元素，数组大小自动调整
  • 支持多种数据类型：数组中的元素可以是任意类型
  • 具备对象特性：可以像对象一样设置键值对（但不推荐）

二、数组的创建方法

JavaScript 提供了多种方式来创建数组，每种方式都有其适用场景。

1. 使用字面量语法创建数组

const arr = [1, 2, 3]; // 创建一个包含3个元素的数组
  • ✅ 语法简洁
  • ✅ 可读性强
  • ❌ 不适用于动态创建固定长度的数组

2. 使用构造函数 new Array()

const arr1 = new Array(5); // 创建一个长度为5的空数组（[empty × 5]）
const arr2 = new Array(1, 2, 3); // 创建数组 [1, 2, 3]
⚠️ 注意事项：
  • new Array(5) 并不会创建一个包含 5 个 undefined 的数组，而是创建一个长度为 5 的“空数组”，在 for...in 遍历时不会触发任何迭代。
  • 如果你想创建一个可遍历的数组，可以使用：
const arr = new Array(5).fill(undefined); // [undefined, undefined, undefined, undefined, undefined]

empty不被当作属性，而undefined会被当做属性遍历

3. 使用静态方法创建数组

Array.of()
console.log(Array.of(1, 'a', 3)); // [1, "a", 3]
  • 用途：将一组值转换为数组
  • 特点：参数会直接作为数组元素
Array.from()
console.log(Array.from(new Array(26), (val, index) => String.fromCharCode(65 + index)));
// ['A', 'B', 'C', ..., 'Z']
  • 用途：将类数组或可迭代对象转换为数组
  • 支持映射函数：可以配合 map 函数进行转换

三、数组的高级特性

1. 动态扩容

JavaScript 的数组是动态的，你可以随时添加或删除元素：

const arr = [1, 2];
arr[5] = 6; // 数组自动扩容，中间位置为 undefined
console.log(arr); // [1, 2, undefined, undefined, undefined, 6]

2. 支持 Hash 特性

JavaScript 数组本质上是对象，因此可以像对象一样设置键值：

const arr = [1, 2, 3];
arr['name'] = '数组'; // 合法，但不推荐

但要注意：这些自定义属性不会被 for...of、map 等数组方法处理。

四、数组的遍历方法详解

遍历数组是 JavaScript 开发中最常见的操作之一。不同的遍历方式适用于不同的场景。

1. for 和 while 循环（基础遍历）

for 循环：
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
while 循环：
let i = 0;
while (i < arr.length) {
    console.log(arr[i]);
    i++;
}
  • ✅ 性能好
  • ✅ 可中断（break）
  • ❌ 可读性较差
  • ✅ 适用于需要索引的场景

2. for...in 遍历（慎用）

for (const key in arr) {
    console.log(key, arr[key]);
}
  • ❌ 不推荐用于数组，因为会遍历原型链上的属性
  • ✅ 适用于对象遍历

3. for...of 遍历（推荐）

for (const item of arr) {
    console.log(item);
}
  • ✅ 可读性好
  • ✅ 可以结合 entries() 获取索引和值
  • ✅ 推荐用于大多数数组遍历场景
获取索引和值：
for (const [index, value] of arr.entries()) {
    console.log(index, value);
}
.entries() 方法说明：
  • arr.entries() 返回一个迭代器（Array Iterator）
  • 每次迭代返回 [index, value] 的键值对
  • 配合解构赋值 [index, value] 非常方便

4. forEach() 遍历

arr.forEach((item) => {
    console.log(item);
});
  • ✅ 可读性好
  • ❌ 不能中断（不能 break 或 return）
  • ✅ 适用于“对每个元素执行操作”的场景
❗forEach 的坑：
  • 不能提前中断：即使你在回调中使用 return，也只是跳过当前循环，不能停止整个遍历
  • 不返回值：只用于执行副作用，不能用于筛选或映射
names.forEach(name => {
    if (name === '张三') {
        console.log('找到了');
        return; // ❌ 只跳过当前循环，不能 break
    }
    console.log('继续找...');
});

5. 高阶函数遍历（map、filter、find、reduce 等）

这些方法不仅用于遍历数组，还能进行转换、筛选、查找等操作。

方法用途是否可中断可读性返回值
map映射新数组❌✅新数组
filter筛选符合条件的元素❌✅新数组
find找到第一个符合条件的元素✅✅元素或 undefined
some判断是否有元素符合条件✅✅true 或 false
every判断是否所有元素都符合条件✅✅true 或 false
reduce累计计算❌❌累计结果

6. reduce 方法详解

reduce 是数组中最强大的方法之一，用于将数组中的所有元素“归约”为一个值，比如求和、统计、合并等。

语法：
array.reduce((accumulator, currentValue) => {
  // 返回新的 accumulator
}, initialValue);
示例：求和
const sum = [1, 2, 3, 4, 5, 6].reduce((prev, curr) => prev + curr, 0);
console.log(sum); // 21
示例：统计出现次数
const names = ['张三', '李四', '张三', '王五'];
const count = names.reduce((acc, name) => {
  acc[name] = (acc[name] || 0) + 1;
  return acc;
}, {});
console.log(count); // { 张三: 2, 李四: 1, 王五: 1 }

五、总结对比

方法是否可中断可读性用途
for✅❌基础遍历
while✅❌基础遍历
forEach❌✅对每个元素执行操作
map❌✅映射新数组
filter❌✅筛选符合条件的元素
find✅✅找到第一个符合条件的元素
some✅✅判断是否至少有一个元素符合条件
every✅✅判断是否所有元素都符合条件
reduce❌❌累计计算
for...of✅✅推荐的数组遍历方式
for...in✅❌适用于对象，慎用于数组

六、使用建议

  • 优先使用 for...of：可读性好，支持 break，适用于大多数数组遍历场景
  • 需要索引时使用 entries()：可以同时获取索引和值
  • 使用 map、filter、reduce 等高阶函数：使代码更简洁、函数式
  • 避免滥用 for...in：容易遍历到原型链上的属性，不推荐用于数组
  • 不要在数组中滥用对象特性：如设置非数字键值，避免混淆数据结构
avatar
文章
阅读
粉丝