JavaScript数组类型详解

目录

一、数组的基本概念

二、数组的类型

1. 基本数组类型：

2. 数字数组：

3. 字符串数组：

4. 对象数组：

5. 类型数组（TypedArray）：

6. ArrayBuffer数组：

7. 类数组（类数组对象）：

三、数组的特点

四、数组的创建方式

1. 字面量方式

2. Array()构造函数

3. 扩展运算符

4. Array.from()方法

五、数组的属性与方法

1. 属性：

2. 常用方法：

（1）添加元素

（2）删除元素

（3）插入元素

（4）合并与分割

（5）查找方法

（6）遍历方法

（7）排序与反转

（8）数组与字符串的转换

---

一、数组的基本概念

JavaScript中的数组是一种复合数据类型，用于存储一组有序的数据，每个数据称为元素（Element），每个元素都有一个唯一的索引（Index），从0开始计数。数组可以包含任意类型的数据，包括数字、字符串、布尔值、对象等。

二、数组的类型

1. 基本数组类型：

基本数组是JavaScript中最常见的数组类型，可以存储任意数据类型的元素，包括数字、字符串、布尔值、对象、函数等。这种数组是基于对象的，通过索引访问元素，其长度是动态可变的。

2. 数字数组：

数字数组仅包含数字值，通常用于需要数值计算的场景。数字数组的内存存储是连续的，因此访问速度较快。

3. 字符串数组：

字符串数组只包含字符串类型的元素，字符串数组的每个元素都是一个字符串对象，可以使用索引直接访问字符串内容。

4. 对象数组：

对象数组存储的是对象类型的元素，每个对象可以包含不同的属性和值，常用于存储复杂的数据结构。

5. 类型数组（TypedArray）：

类型数组是JavaScript中的一种特殊数组类型，用于处理固定位宽的数值数据。类型数组的内存布局类似于C语言中的数组，适合高性能计算和数据传输。

6. ArrayBuffer数组：

ArrayBuffer是JavaScript中用于处理二进制数据的底层数据结构，提供了底层的内存操作能力，通常与类型数组结合使用。

7. 类数组（类数组对象）：

类数组对象虽然不是真正的数组，但它们具有类似数组的特性，如拥有length属性和索引访问方式，常见的类数组包括DOM节点列表、函数参数等。

三、数组的特点

1. 动态大小 JavaScript数组的长度是动态的，可以在运行时随时增加或减少元素，而无需预先指定大小。例如，可以通过push方法添加元素，通过pop方法移除元素，或者直接修改数组长度属性来调整数组大小。

2. 异构元素 数组中的元素可以是任意类型，包括数字、字符串、布尔值、对象、函数等，这使得JavaScript数组比其他语言中的数组更加灵活。

3. 索引访问 数组的元素可以通过索引访问，索引从0开始，通过索引可以方便地访问、修改或删除数组中的元素。数组的索引是基于整数的，最大索引值为2^32-2（即4294967294），这是JavaScript引擎实现的限制。

4. 稀疏数组 数组可以是稀疏的，即数组中存在空位（未赋值的索引），稀疏数组的长度属性会返回所有已赋值元素的数量，但未赋值的索引不会被计算在内。

5. 继承自Array.prototype JavaScript数组是Array.prototype的实例，因此继承了Array.prototype提供的方法，如sort()、reverse()、filter()等，这些方法为数组操作提供了丰富的功能。

6. 内置方法 JavaScript数组提供了大量内置方法，用于处理数组中的数据。

7. 字面量语法 数组可以通过字面量语法创建，这种方式简洁且直观。

8. 索引作为属性名 数组的索引也可以作为对象的属性名使用。例如，let arr = [1, 2, 3]; console.log(arr[0]);等同于let arr = {0: 1, 1: 2, 2: 3}; console.log(arr[0]);。

9. 性能优化 在现代JavaScript引擎（如Chrome V8）中，数组的实现经过优化，支持两种存储模式：Fast Elements（快速元素）和Dictionary Elements（字典元素）。这些优化提升了数组操作的效率。

10. 不支持多维数组 虽然JavaScript不直接支持多维数组，但可以通过嵌套数组的方式实现多维数据结构。

11. 自动更新长度属性 当向数组添加新元素时，JavaScript会自动更新数组的长度属性。

12. 稀疏数组的处理 对于稀疏数组，可以通过设置长度属性来截断多余的空间。

四、数组的创建方式

JavaScript提供了多种创建数组的方式：

1. 字面量方式

使用方括号[]直接定义数组。

 let arr = [1, 2, 3, 'hello', true];

2. Array()构造函数

通过new Array()创建数组，可以指定长度或直接传入参数。

 let arr = new Array(3); // 创建长度为3的数组let arr2 = new Array(1, 2, 3); // 创建包含指定元素的数组

3. 扩展运算符

使用...符号创建数组。

 let arr = [...[1, 2, 3]];

4. Array.from()方法

将类数组对象或可迭代对象转换为数组。

五、数组的属性与方法

1. 属性：

length：返回数组的长度。

 let arr = [1, 2, 3];console.log(arr.length); // 输出：3

2. 常用方法：

（1）添加元素

push(): 在数组末尾添加一个或多个元素，并返回新长度。

 let arr = [1, 2, 3];arr.push(4);console.log(arr); // 输出：[1, 2, 3, 4]

unshift(): 在数组开头添加一个或多个元素，并返回新长度。

 let arr = [1, 2, 3];arr.unshift(0);console.log(arr); // 输出：[0, 1, 2, 3]

（2）删除元素

pop(): 删除数组末尾的元素，并返回被删除的元素。

 let arr = [1, 2, 3];console.log(arr.pop()); // 输出：3console.log(arr); // 输出：[1, 2]

shift(): 删除数组开头的元素，并返回被删除的元素。

 let arr = [1, 2, 3];console.log(arr.shift()); // 输出：1console.log(arr); // 输出：[2, 3]

（3）插入元素

splice(index, deleteCount, ...items)：从指定位置插入一个或多个元素，还可以用于删除和替换元素。

• index：必需。规定从何处添加/删除元素。

• deleteCount：必需。要删除的元素数量。如果设置为 0，则不会删除任何元素。

• ...items：可选。要添加到数组的新元素。

 let arr = [1, 2, 4, 5];arr.splice(2, 0, 3); // 在索引2的位置插入元素3console.log(arr); // 输出: [1, 2, 3, 4, 5]

（4）合并与分割

concat()：合并数组，返回新数组。

slice(start, end)：截取子数组（不修改原数组）。

 console.log([1, 2].concat([3, 4])); // 输出：[1, 2, 3, 4]console.log([1, 2, 3].slice(1)); // 输出：[2, 3]

（5）查找方法

indexOf(): 查找指定元素在数组中的索引。

 let arr = [1, 2, 3];console.log(arr.indexOf(2)); // 输出：1

（6）遍历方法

forEach(): 遍历数组中的每个元素。

 let arr = [1, 2, 3];arr.forEach((element) => {console.log(element);});

（7）排序与反转

sort()：对数组进行排序（默认按字符串Unicode排序）。

reverse()：反转数组顺序。

 let arr = [3, 1, 2];console.log(arr.sort()); // 输出：[1, 2, 3]console.log(arr.reverse()); // 输出：[1, 2, 3]

（8）数组与字符串的转换

join(separator)：按分隔符拼接为字符串。

split(separator)：按分隔符分割为数组。

 ["a", "b", "c"].join("-"); // 输出："a-b-c""a,b,c".split(","); // 输出：["a", "b", "c"]