在 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
四、数组的高级考点
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 数组功能丰富,掌握数组的初始化、遍历和常用方法,能让我们在开发中更加高效地处理数据。从基础的数组创建到高级的 reduce、map 方法使用,每个知识点都有其独特的应用场景:
| 场景 | 推荐方法 |
|---|---|
| 创建固定长度数组 | Array.from({length: n}) |
| 类数组转数组 | Array.from() |
| 累加计算 | reduce() |
| 数据转换 | map() |
| 过滤数据 | filter() |
通过合理使用数组方法,我们可以写出更简洁、高效的代码。建议开发者根据实际需求选择合适的方法,并注意避免常见陷阱(如 map + parseInt 的问题)。希望本文能帮助大家加深对 JavaScript 数组的理解和运用。