Array JavaScript API

2025 年 3 月 2 日 | 6 分钟阅读

概述

在 JavaScript 中,数组是一种用于存储数据的全局对象类型。数组是零个或多个数据类型的有序列表或集合,可以通过从 0 开始的数字索引访问。

由于数组允许我们将多个值存储在一个变量中,它们在组织和精简代码方面非常有用,使其更易于阅读和维护。数组可以保存任何类型的数据,包括字符串、数字和对象。

数组中的对象

像其他编程语言中的数组一样,JavaScript 中的 Array 对象具有用于常见数组函数的方法,并支持在单个变量名下存储多个项目。

解释

JavaScript 数组是具有以下基本特性的数组对象,而不是原始类型

  1. JavaScript 数组支持多种数据类型,并且可以调整大小。而不是这种灵活性,应该使用类型化数组。
  2. 因为 JavaScript 数组不是关联数组,所以必须使用非负整数(或其字符串等效项)来访问数组元素,而不是使用随机字符串作为索引。
  3. JavaScript 数组采用零基索引,其中最后一个元素位于数组长度减一处。第一个元素位于索引 0,第二个位于索引 1,依此类推。
  4. 复制数组的 JavaScript 操作会生成浅拷贝。对于任何 JavaScript 对象,内置的复制操作都是标准操作,并且会生成浅拷贝而不是深拷贝。

数组索引

数组对象不能像关联数组那样使用任意字符串作为元素索引;相反,它们必须使用非负整数(或其相应的字符串形式)。使用非整数值进行访问或设置不会直接操作数组列表,而是操作链接到数组对象属性集合的变量。数组对象的属性和数组中的元素是不同的,并且不能对这些命名属性使用遍历和修改数组的操作。

数组中的元素类似于 对象 的属性,就像 toString 是一个属性,尽管它是一个方法。但是,尝试从数组中检索特定元素会导致语法错误,因为属性名无效。

输出

Array JavaScript API

在 JavaScript 中,如果属性以数字开头,则必须使用方括号表示法而不是点表示法来访问它。引用数组索引(例如 years['2'] 而不是 years[2])也是一种选择,尽管通常不需要。

JavaScript 引擎通过强制转换将 years[2] 中的 2 隐式转换为字符串。因此,'2' 和 '02' 将表示年份对象上的不同位置,从而导致可能的情况

唯一有效的数组索引是 years['2']。在数组迭代期间,不会访问字符串属性 years['02']。

大小与数字特征之间的联系

  1. JavaScript 数组的 length 属性与其数字属性直接相关。
  2. 一些预定义的数组函数(例如 join()、slice()、indexOf() 等)在执行期间会考虑数组 length 属性的值。
  3. 替代技术(例如 push()、splice() 等)也会导致数组 length 属性的更改。

代码

输出

Array JavaScript API

如果您为 JavaScript 数组的属性赋值,该属性是有效索引且当前不在数组边界内,则数组的 length 属性将由引擎进行调整。

数组函数和未初始化元素

数组方法在稀疏数组中遇到空槽时,它们会显示不同的行为。传统方法(如 forEach)通常会区分 undefined 值的索引和空槽。

Concat()copyWithin()every()filter()flat()flatMap()forEach()indexOf()lastIndexOf()map()reduce()reduceRight()reverse()slice()some()sort()splice() 是一些对空槽提供特殊处理的方法。forEach 等迭代方法甚至不会遍历空槽。其他方法,如 concat 和 copyWithin,在复制过程中保留开放槽,生成稀疏数组。

代码

输出

Array JavaScript API

更近期的技术,例如 keys,没有区分空槽,而是将它们视为包含 undefined 值。将 null 位置与未指定组件组合的技术包括 entries()fill()find()findIndex()、findLast()、findLastIndex()、includes()join()keys()toLocaleString()、toReversed()、toSorted()、toSpliced()、values() 和 with()。

代码

输出

Array JavaScript API

复制和更改数据的方法

某些技术会生成一个新数组,而不是更改应用它的原始数组。它们通过从一个空数组开始并向其中添加元素来完成此操作。

复制过程是浅拷贝,并且永远不会超出原始数组。新数组将按照以下方式填充原始数组中的元素。

对象:新数组包含对对象的引用的副本。初始数组和更新后的数组都指向同一个对象。换句话说,如果被引用的对象被修改,则修改将在原始数组和新数组中都可见。

新数组使用基本数据类型(如字符串、数字和布尔值)进行复制(不使用 String、Number 和 Boolean 对象)。

或者,数组可以通过其他被调用的方法进行转换,从而导致其返回值发生变化,例如指向原始数组的指针或更新后数组的大小。

使用 this.constructor[Symbol.species] 来确定要使用的构造函数,以下函数创建新数组:concat()、slice()、splice()、filter()、flat()、flatMap()、map()(用于形成返回的已删除元素数组)。

当使用 toReversed()、toSorted()、toSpliced() 和 with() 等方法时,Array 基本构造函数总是生成新数组。

下表列出了修改原始数组的方法及其对应的非修改替代方法

修改方法非修改替代方法
copyWithin()没有单一方法替代
fill()没有单一方法替代
pop()slice(0, -1)
push(v1, v2)concat([v1, v2])
reverse()toReversed()
shift()slice(1)
sort()toSorted()
splice()toSpliced()
unshift(v1, v2)toSpliced(0, 0, v1, v2)

通用数组方法

数组方法从不访问数组对象的内部数据;相反,它们总是通用的。它们只能通过使用带索引的元素和 length 属性来访问数组元素。这意味着它们也可以在类似数组的对象上调用。

代码

代码

Array JavaScript API

类似数组的对象

任何在前面概述的长度转换过程中不会抛出异常的对象都被称为类似数组的对象。实际上,人们会期望这样的对象在 0 到 length - 1 之间具有带索引的元素和一个实际的 length 属性。(如果缺少任何索引,它将类似于稀疏数组。)当数组方法应用于类似数组的对象时,它会忽略任何大于或等于 length - 1 的整数索引。

许多 DOM 对象,如 HTMLCollection 和 NodeList,都类似于数组。arguments 对象也类似于数组。即使它们本身没有这些方法,您也可以在它们上调用数组方法。

代码

输出

Array JavaScript API

总结

数组是 JavaScript 编程中一个基本且极其灵活的组成部分。本教程涵盖了数组的创建、索引以及对它们执行的一些最常见的操作,包括添加、删除和修改项目。此外,我们还学习了两种遍历数组的方法,这是一种广泛使用的数据显示技术。