JavaScript 数组使用全解析:从基础到高级技巧

118 阅读4分钟

在 JavaScript 里,数组是一种极为常用的数据结构,它灵活且强大,能处理各种数据存储和操作需求。本文将结合实际代码示例,全面介绍 JavaScript 数组的多种使用方式。


一、数组的初始化

1. 数组字面量

使用 [] 可以方便地创建数组,这也是最常用的初始化方式。其语法简洁且执行效率高,推荐优先使用。

const arr = [1, 2, 3, 4, 5];

2. new Array()

使用 new Array() 构造函数能创建数组,但需注意参数类型:

  • 传入单个数字参数时指定数组长度
  • 传入多个参数或非数字参数时作为数组元素
const arr2 = new Array(5); // 创建长度为 5 的数组
console.log(arr2);  // 输出: [empty × 5]

⚠️ 警告:这种方式创建的数组元素未初始化,使用 for...in 无法迭代。可以通过 fill 方法统一填充:

const arr3 = new Array(5).fill(undefined);

3. Array.of()

Array.of() 方法用于创建包含指定元素的数组,解决了 new Array() 参数歧义的问题。

console.log(Array.of(1, 2, 3)); // 输出: [1, 2, 3]

4. Array.from()

Array.from() 可将类数组对象或可迭代对象转换为数组,还能接受一个映射函数进行填充计算。

console.log(Array.from(new Array(26), (val, index) => String.fromCodePoint(65 + index)));
// 输出: ['A', 'B', 'C', ..., 'Z']

二、数组的遍历

1. for...of 循环

for...of 循环可用于遍历数组元素,可读性高,是现代 JavaScript 推荐的遍历方式。

const arr = [1, 2, 3];
for (let item of arr) {
    console.log(item);
}

2. arr.entries()

arr.entries() 返回一个新的数组迭代器对象,可同时获取元素的索引和值。

for (const [index, value] of arr.entries()) {
    console.log(index, value);
}

3. 其他遍历方式对比

方法特点适用场景
for 循环兼容性最好需要索引操作
forEach简洁优雅不需要中断循环
while动态控制循环条件数据量不确定时
map/filter返回新数组链式处理数据

三、数组的常用方法

1. reduce 方法

reduce 方法用于将数组元素累积为单个值,是函数式编程的核心方法之一。

console.log([1, 2, 3, 4, 5, 6].reduce((prev, curr) => {
    return prev + curr;
}, 0)); // 输出: 21

2. map 方法

map 方法会遍历数组并对每个元素执行指定函数,返回一个新数组。

['1', '2', '3'].map((num, index, arr) => {
    console.log(num, index, arr);
    return num;
});

⚠️ 注意事项:在使用 map 结合 parseInt 时要小心,因为 parseInt 可以接受进制参数。

console.log(['1', '2', '3'].map(parseInt)); 
// 实际执行的是 parseInt('1', 0), parseInt('2', 1), parseInt('3', 2)
// 输出: [1, NaN, NaN]

3. 其他实用方法

// filter 过滤符合条件的元素
[1,2,3,4].filter(n => n > 2); // [3,4]

// find 查找第一个符合条件的元素
[1,2,3,4].find(n => n > 2); // 3

// some/every 判断是否满足条件
[1,2,3].some(n => n > 2); // true
[1,2,3].every(n => n > 2); // false

image-20250718105332539.png


四、数组的高级考点

1. 数组的本质

数组是可变、可遍历的对象,V8 引擎对数组有特殊设计:

  • 密集型数组:连续存储,访问效率高
  • 稀疏数组:非连续存储,占用更多内存
  • 哈希特性:支持字符串索引(类似对象)

2. new Array() 的特性

使用 new Array(5) 创建的数组是固定大小的,元素未初始化,for...in 无法迭代这些空元素。

const arr = new Array(5);
for (let key in arr) {
    console.log(key, arr[key]); // 无输出
}

✅ 推荐用法:Array.from({length: 5})new Array(5).fill(undefined)

3. 性能优化建议

  • 尽量避免创建稀疏数组
  • 批量操作时使用 push 而非多次赋值
  • 遍历大数组时优先使用普通 for 循环

五、总结

JavaScript 数组功能丰富,掌握数组的初始化、遍历和常用方法,能让我们在开发中更加高效地处理数据。从基础的数组创建到高级的 reducemap 方法使用,每个知识点都有其独特的应用场景:

场景推荐方法
创建固定长度数组Array.from({length: n})
类数组转数组Array.from()
累加计算reduce()
数据转换map()
过滤数据filter()

通过合理使用数组方法,我们可以写出更简洁、高效的代码。建议开发者根据实际需求选择合适的方法,并注意避免常见陷阱(如 map + parseInt 的问题)。希望本文能帮助大家加深对 JavaScript 数组的理解和运用。