JavaScript 中的 Array 对象是一种用于存储多个值的特殊对象,它按顺序存储元素,并允许通过索引(从 0 开始)进行访问。数组是 JavaScript 中最常用且功能强大的数据结构之一,几乎在每一个 Web 项目中都会频繁使用。本文将全面介绍 Array 对象的创建方式、属性、方法及其应用,并辅以表格、代码示例和图表帮助理解。


一、数组的创建

在 JavaScript 中,数组可以通过多种方式创建:

1. 使用 Array 构造函数

let arr1 = new Array(3);   // 创建一个长度为 3 的空数组
let arr2 = new Array(1, 2, 3); // 创建一个包含 1, 2, 3 的数组

2. 使用字面量(推荐)

let arr = [1, 2, 3]; // 创建一个包含 1, 2, 3 的数组

推荐使用字面量语法,因为它更简洁、直观,且性能更优。


二、数组的属性

属性 描述
constructor 返回创建数组对象的原型函数
length 设置或返回数组元素的个数
prototype 允许向数组对象添加属性或方法

三、数组的方法

1. 常用方法汇总表

方法名 描述
concat() 连接多个数组,返回新数组
copyWithin() 拷贝数组元素到指定位置
entries() 返回数组的可迭代对象
every() 检测所有元素是否满足条件
fill() 使用固定值填充数组
filter() 返回符合条件的所有元素组成的新数组
find() 返回第一个满足条件的元素
findIndex() 返回第一个满足条件的元素索引
forEach() 对每个元素执行一次函数
includes() 判断数组是否包含某个值
indexOf() 返回元素在数组中的位置
join() 将数组元素拼接成字符串
map() 对每个元素执行函数并返回新数组
pop() 删除最后一个元素并返回
push() 在末尾添加一个或多个元素
reduce() 从左到右计算数组为一个值
reverse() 反转数组顺序
slice() 返回数组的一部分
splice() 添加或删除元素
sort() 对数组排序
toString() 将数组转为字符串

2. 新增方法(ES6+)

方法名 描述
Array.from() 从类数组对象创建数组
Array.of() 将一组值转换为数组
Array.at() 根据索引返回元素,支持负数
Array.flat() 将嵌套数组“拉平”
Array.flatMap() 先映射后拉平
Array.findLast() 返回最后一个满足条件的元素
Array.toReversed() 返回反转后的新数组(不改变原数组)
Array.toSorted() 返回排序后的新数组
Array.toSpliced() 返回删除或添加元素后的新数组

四、数组的迭代与遍历

1. forEach 示例

let arr = [1, 2, 3];
arr.forEach(item => console.log(item));
// 输出:1, 2, 3

2. map 示例

let doubled = arr.map(item => item * 2);
// doubled: [2, 4, 6]

3. filter 示例

let evens = arr.filter(item => item % 2 === 0);
// evens: [2]

五、数组的高阶函数:reduce

let sum = arr.reduce((acc, cur) => acc + cur, 0);
// sum: 6

六、Mermaid UML 图表:Array 对象结构

Array
-length: number
-constructor: function
-prototype: object
+concat()
+map()
+filter()
+reduce()
+forEach()
+push()
+pop()
+slice()
+splice()

七、单词与短语表

单词/短语 音标 词性 释义 词根/词缀 同义词/反义词 例句
Array /əˈreɪ/ n. 数组 - List let arr = new Array();
Constructor /kənˈstrʌktər/ n. 构造函数 struct- Builder new Array(3)
Prototype /ˈproʊtətaɪp/ n. 原型 proto- Blueprint Array.prototype.myMethod = ...
Iterable /ˈɪtərəbl/ adj. 可迭代的 iter- Enumerable for (let item of iterable) {}
Concatenate /kənˈkætəneɪt/ v. 连接 con- + caten- Join arr1.concat(arr2)
Mutable /ˈmjuːtəbl/ adj. 可变的 mut- Changeable Arrays are mutable.
Immutable /ɪˈmjuːtəbl/ adj. 不可变的 im- + mut- Unchangeable Strings are immutable.
Reducer /rɪˈduːsər/ n. 归约函数 re- + duc- Accumulator arr.reduce(reducer)
Asynchronous /eɪˈsɪŋkrənəs/ adj. 异步的 a- + syn- Non-blocking async function fetchData()

结语

JavaScript 的 Array 对象是前端开发中不可或缺的工具,掌握其属性和方法对于编写高效、可读性强的代码至关重要。本文从基础到高级全面介绍了数组的使用,希望能帮助你在实际开发中更加得心应手。

本文基于知识共享协议(CC BY-SA)进行改编和扩展,保留原文核心内容并加入更多实用示例与图表。


参考文献

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐