webrun

JavaScript 数组：按索引访问有序数据

JavaScript 数组用于存储按顺序排列、以整数索引访问的值集合。当顺序有意义时应使用数组，例如列表、队列，或任何位置会影响含义的数据。无论数组大小如何，按索引读取都是即时的（O(1)），并且 length 会自动跟踪元素数量。

JavaScript Array 创建与访问数据示例

输出：

输出将显示在这里...

输出：

红色
3
[
  "红色",
  "绿色",
  "蓝色",
  "黄色"
]

这个示例如何工作

  1. ["红色", "绿色", "蓝色"] 使用方括号字面量语法创建了一个包含 3 个元素的数组，这是定义带初始值 JavaScript 数组的标准方式。
  2. colors[0] 读取第一个元素。数组使用从零开始的索引：索引 0 是第一个元素，1 是第二个，以此类推。
  3. colors.length 返回元素数量。添加或删除元素时它会自动更新。
  4. colors.push("黄色") 在末尾追加一个元素。原数组会被原地修改。

什么是 JavaScript Array？

JavaScript array 是针对数字索引优化的对象：添加或删除元素时，length 属性会自动更新；map、filter、reduce、forEach 等内置方法会按索引顺序迭代。要可靠判断一个值是否为数组，请使用 Array.isArray(value)，因为 typeof [] 返回的是 "object"。

JavaScript Array 的常见错误

使用 new Array(n) 时误以为会创建单元素数组。

错误写法：

const items = new Array(3); // 3 个空槽，不是 [3]

正确写法：

const items = [3]; // 包含数字 3 的数组

单个数字参数会设置 length 并创建空槽，而不是创建对应的元素。

期望稀疏数组会被完整迭代。

错误写法：

const a = Array(3).map((_, i) => i); // [空槽 × 3]

正确写法：

const a = Array.from({ length: 3 }, (_, i) => i); // [0, 1, 2]

map 会跳过空槽。Array.from 会创建已定义的元素，因此回调会对每个索引执行一次。

会修改原数组的方法 vs 不会修改原数组的方法

修改原数组返回新数组
push, pop, splice, sort, reversemap, filter, slice, concat, toSorted

ES2023 新增了 toReversed()、toSorted()、toSpliced() 和 with()，它们是对应原地方法的非修改版。如果你既要保留原顺序又要得到排序结果，优先使用 toSorted() 而不是 sort()。

性能注意事项

push 和 pop 在数组末尾操作，时间复杂度为 O(1)。shift 和 unshift 需要给每个元素重新编号，因此是 O(n)。在热点循环中，应避免对大数组做头部操作。

更多示例

数组中的数组：访问嵌套数据：

const matrix = [[1, 2], [3, 4], [5, 6]];
console.log(matrix[1][0]); // 3

每个元素本身又是一个数组。JavaScript array of arrays 是建模网格数据的直接方式，使用双索引 [row][col] 可以访问内部值。

使用 push 和 pop 实现栈：

const stack = [10, 20, 30];
stack.push(40);
console.log(stack.at(-1)); // 40
stack.pop();
console.log(stack);        // [ 10, 20, 30 ]

push 在末尾添加，pop 在末尾移除，两者都是 O(1)。at(-1) 不需要先知道长度就能读取最后一个元素。

何时使用 JavaScript Array

  • 需要按位置访问的有序集合（列表、队列、栈）。
  • 任何会增长或收缩的序列：栈用 push/pop，队列用 push/shift。
  • 以数组套数组建模的分组数据（行、列、矩阵）。
  • 不要把数组用于键值查找，应改用 Map 或普通对象。
  • 不要在要求元素唯一时使用数组，应改用 Set。

FAQ

如何创建带初始值的 JavaScript array？

使用方括号字面量：const colors = ["红色", "绿色", "蓝色"]。这是首选语法。Array.of(1, 2, 3) 也可用，但除非在多态代码里需要避免 new Array(n) 的歧义，否则很少需要它。

哪些 JavaScript array 方法会修改原数组？

push、pop、shift、unshift、splice、sort、reverse 和 fill 都会原地修改数组。像 toSorted、toReversed、toSpliced（ES2023）这类现代替代方法会返回新数组，不会改动原数组。

如何检查一个值在 JavaScript 中是否是数组？

调用 Array.isArray(value)。它在 iframe 和不同 realm 间都能正确工作；instanceof Array 在数组来自不同执行上下文时会失效。