异常教程

JavaScript Array（数组）对象（一文讲透）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 JavaScript 开发中，JavaScript Array（数组）对象是开发者最常打交道的核心数据结构之一。它如同一个灵活的“数据容器”，能够存储、操作和管理多种类型的数据。无论是处理用户输入、展示动态列表，还是构建复杂的数据管道，数组都扮演着不可或缺的角色。本文将从基础到进阶，结合生动比喻与实战案例，帮助你系统掌握 JavaScript 数组的使用方法与最佳实践。

数组对象的诞生与基础操作

数组的定义与类比

数组可以被想象成一个有序的物品收纳架，每个“格子”（元素）都有唯一的编号（索引），且可以存放任意类型的“物品”（数据）。例如，一个书架上的书籍、快递包裹中的商品，都可以通过数组的形式进行存储。

创建数组的三种方式：

// 方法1：字面量语法（最常用）
const fruits = ["apple", "banana", "orange"];

// 方法2：Array 构造函数
const numbers = new Array(3); // 创建长度为3的空数组
numbers[0] = 10; // 手动赋值

// 方法3：Array.from() 转换可迭代对象
const arrFrom = Array.from([1, 2, 3], x => x * 2); // [2,4,6]

数组的动态特性

JavaScript 数组是动态可变的，这意味着其长度和内容可以随时调整。例如：

let tasks = ["写代码", "调试"];
tasks.push("部署"); // 添加元素到末尾 → ["写代码", "调试", "部署"]
tasks.pop(); // 移除末尾元素 → ["写代码", "调试"]
tasks.unshift("设计"); // 在开头插入 → ["设计", "写代码", "调试"]

核心方法：访问、修改与增删元素

索引与 length 属性

数组元素通过非负整数索引访问，索引从 0 开始。length 属性反映当前数组的长度，且可动态修改：

const letters = ["a", "b", "c"];
console.log(letters[1]); // 输出 "b"  
letters.length = 2; // 截断为 ["a", "b"]

添加与删除元素的常用方法

1. 尾部操作

  • push()：向末尾添加元素并返回新长度。
  • pop()：移除末尾元素并返回该元素。
let stack = [];
stack.push("HTML", "CSS"); // [ "HTML", "CSS" ], 返回长度2
stack.pop(); // 返回 "CSS"，栈变为 ["HTML"]

2. 头部操作

  • unshift()：在开头添加元素。
  • shift()：移除开头元素。
let queue = ["任务1", "任务2"];
queue.unshift("任务0"); // ["任务0", "任务1", "任务2"]
queue.shift(); // 移除并返回 "任务0"

3. 任意位置操作：splice()

splice() 是数组的“瑞士军刀”，可实现插入、删除、替换等复杂操作：

let nums = [10, 20, 30, 40];
nums.splice(2, 1, 25, 35); // 从索引2开始删除1个元素，插入25和35 → [10,20,25,35,40]
nums.splice(4, 0, "插入"); // 在索引4前插入 → [10,20,25,35,"插入",40]

高阶方法：函数式编程与数据处理

map(): 转换数组元素

map() 接收一个函数，对每个元素执行转换操作，并返回新数组。想象它像一个“加工流水线”，将原材料（原始元素）转化为成品：

案例：将摄氏度转换为华氏度

const celsiusTemps = [0, 20, 100];
const fahrenheitTemps = celsiusTemps.map(temp => temp * 9/5 + 32);
// 结果：[32, 68, 212]

filter(): 筛选元素

filter() 根据条件返回符合条件的元素组成的新数组，如同用“筛子”过滤掉不需要的颗粒：

案例：筛选偶数

const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0); // [2,4]

reduce(): 累积计算

reduce() 将数组元素逐步“累积”为单一值，常用于求和、计数或对象合并：

案例：统计单词频率

const words = ["apple", "banana", "apple", "cherry"];
const count = words.reduce((acc, word) => {
  acc[word] = (acc[word] || 0) + 1;
  return acc;
}, {}); // { apple:2, banana:1, cherry:1 }

其他实用方法与场景应用

数据查找与存在性判断

  • find()/findIndex()：查找满足条件的第一个元素及索引。
  • includes()：检查数组是否包含特定值。
  • some()/every()：判断是否存在或全部元素满足条件。
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

// 查找ID为2的用户
const user = users.find(user => user.id === 2); // { id:2, name:"Bob" }

// 检查是否存在年龄超过30的用户
const hasOldUser = users.some(user => user.age > 30); // 假设用户有age属性

排序与扁平化

sort()：定制排序逻辑

默认排序会将元素转为字符串比较，需提供比较函数：

let nums = [3, 1, 4, 1, 5];
nums.sort((a, b) => a - b); // 升序 → [1,1,3,4,5]

flat()/flatMap()：处理嵌套数组

flat() 扁平化数组，默认深度为1；flatMap() 先 map 后 flat：

const nested = [[1], [2, [3]]];
nested.flat(2); // [1,2,3]

// 简化嵌套数组处理
[["a", "b"], ["c"]].flatMap(arr => arr.toUpperCase()); // ["A", "B", "C"]

常见陷阱与最佳实践

陷阱1：类型灵活性的“双刃剑”

数组可存储混合类型，但也需谨慎：

const mixed = [1, "two", true]; // 合法，但需注意类型检查

陷阱2：方法的副作用与不可变性

  • 变异方法（如 push()）会修改原数组，而 非变异方法（如 map()）返回新数组。
  • 避免在循环中修改自身：
// 错误示例：可能导致无限循环
for (let i = 0; i < arr.length; i++) {
  if (arr[i] === "target") arr.splice(i, 1); // 索引会错位
}

实践建议

  1. 优先使用函数式方法：map、filter 等避免副作用。
  2. 性能优化：批量操作时用 push 而非 concat。
  3. 类型安全：通过类型注解或校验工具确保数据一致性。

现实场景案例：电商商品列表

需求：过滤价格低于100元且库存大于0的商品，并按价格升序排列：

const products = [
  { name: "T恤", price: 59, stock: 10 },
  { name: "背包", price: 120, stock: 0 },
  { name: "帽子", price: 89, stock: 5 }
];

const filtered = products
  .filter(p => p.price < 100 && p.stock > 0)
  .sort((a, b) => a.price - b.price);

console.log(filtered); // 只保留"T恤"和"帽子"，按价格排序

结论

通过本文的系统讲解，你已掌握了JavaScript Array（数组）对象的核心概念与高级用法。从基础的增删改查到函数式编程的灵活应用，数组始终是开发者手中强有力的工具。记住，数组的“动态性”与“灵活性”需要与严谨的逻辑设计结合，才能最大化其价值。建议读者通过实际项目不断练习，逐步掌握数组在不同场景下的最佳实践。未来，随着 ES 新特性的演进，数组的操作方式将持续优化，但其作为数据处理基石的地位将始终稳固。

推荐阅读：若想深入理解数组的底层实现（如引擎如何优化 map 等方法），可进一步学习 JavaScript 引擎原理与性能优化技巧。

最新发布

查看更多文章