数组全解 - 技术栈

JavaScript 数组与 Map 对象详解

在 JavaScript 中，数组（Array）和 Map 对象是两种非常重要的数据结构。它们各自有着独特的特性和方法，适用于不同的场景。下面我们将详细介绍这些内容。

一、数组（Array）

数组是一种线性数据结构，它能够存储多个值，并且可以通过索引来快速访问这些值。数组的索引从0开始，这使得对数组的操作变得非常直观。JavaScript 的数组是动态的，可以随时增加或删除元素，而且支持多种内置方法来简化操作。

1. 常用方法介绍

Array.from()
Array.from() 是 ES6 引入的一个静态方法，用于将类数组对象或可迭代对象（如字符串、Map、Set 等）转换为数组实例。它的优势在于能够轻松地将非数组结构转化为数组，从而可以使用数组的各种方法。
javascript 复制代码
```
console.log(Array.from("ma")); // ['m', 'a']
const m = new Map().set(1, 2).set(3, 4);
console.log(Array.from(m)); // [[1, 2], [3, 4]]
```
Set 方法去重
Set 是一种集合类型，它可以自动去除重复元素。通过结合 Array.from() 或扩展运算符 [...]，可以快速实现数组去重。
javascript 复制代码
```
const s = new Set().add(1).add(2).add(1);
console.log(s); // Set {1, 2}
console.log([...s]); // [1, 2]
```
处理空位

在 JavaScript 中，数组中可能存在"空位"（holes），例如 [,,,,]。这些空位实际上是未定义的，但它们的存在会影响某些数组方法的行为。需要注意的是，空位不等于 null，而是被视为 undefined。
javascript 复制代码
```
const arr = [1, , 3];
console.log(arr.length); // 3
console.log(arr[1]); // undefined
```

length 属性

数组的 length 属性表示数组中元素的数量。通过修改 length，可以动态地增加或删除数组中的元素。

javascript 复制代码

let arr = [1, 2, 3];
arr.length = 5; // 添加两个 undefined 到数组末尾
console.log(arr); // [1, 2, 3, undefined, undefined]
arr.length = 2; // 删除多余的元素
console.log(arr); // [1, 2]

isArray() 方法
Array.isArray() 是一个静态方法，用于判断某个值是否为数组。相比 typeof 操作符，它更加精确。
javascript 复制代码
```
console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false
```

迭代器方法

数组提供了三种迭代器方法：keys()、values() 和 entries()，分别用于获取键、值和键值对。

javascript 复制代码

let arr = ["a", "b"];
for (let key of arr.keys()) {
  console.log(key); // 输出: 0, 1
}
for (let value of arr.values()) {
  console.log(value); // 输出: a, b
}
for (let [key, value] of arr.entries()) {
  console.log(key, value); // 输出: 0 a, 1 b
}

fill() 方法
fill() 方法用于填充数组的指定部分。它可以接受三个参数：要填充的值、起始索引（可选）、结束索引（可选）。
javascript 复制代码
```
let arr = [1, 2, 3].fill(0, 1, 2); // [1, 0, 0]
console.log(arr);
```
栈方法

数组支持栈操作，包括 push()（向末尾添加元素）、pop()（移除末尾元素）、shift()（移除开头元素）和 unshift()（向开头添加元素）。这些方法使得数组具有 LIFO（后进先出）和 FIFO（先进先出）的特点。
javascript 复制代码
```
let stack = [];
stack.push(1);
stack.push(2);
console.log(stack.pop()); // 2
console.log(stack.shift()); // 1
```
toString() 和 valueOf()
- toString() 方法返回由数组中每个值组成的逗号分隔的字符串。
- valueOf() 方法返回数组的原始值，通常就是数组本身。
javascript 复制代码
```
let arr = [1, 2, 3];
console.log(arr.toString()); // "1,2,3"
console.log(arr.valueOf()); // [1, 2, 3]
```

二、Map 对象

Map 是一种新的键值对集合类型，它可以接受任何类型的键，包括对象引用和原始值。与普通对象相比，Map 提供了更多的功能和更高的性能。

1. 主要特点

键的多样性

Map 的键可以是任意类型，包括对象、函数、原始值等。而普通对象的键只能是字符串或 Symbol 类型。
javascript 复制代码
```
const objKey = {};
const map = new Map();
map.set(objKey, "value");
console.log(map.get(objKey)); // "value"
```
维护插入顺序

Map 会记住元素插入的顺序，因此可以按顺序遍历。而普通对象在 ES2015 之前并不保证属性的顺序。
javascript 复制代码
```
const map = new Map();
map.set("first", 1);
map.set("second", 2);
for (let [key, value] of map) {
  console.log(key, value); // 输出: first 1, second 2
}
```
更高效的查询

Map 在频繁增删键值对时性能更好，尤其是在大数据量的情况下。相比普通对象，Map 更适合动态场景。

2. 使用示例

javascript 复制代码

const m = new Map();
m.set("key1", "value1").set(1, "numberValue");
console.log(m.get("key1")); // "value1"
console.log(m.size); // 2

3. 遍历方法

Map 提供了多种遍历方法，包括 keys()、values() 和 entries()，类似于数组的迭代器方法。

javascript 复制代码

const map = new Map([
  ["name", "Alice"],
  ["age", 25],
]);
for (let key of map.keys()) {
  console.log(key); // name, age
}
for (let value of map.values()) {
  console.log(value); // Alice, 25
}
for (let [key, value] of map.entries()) {
  console.log(key, value); // name Alice, age 25
}

三、数组与 Map 的对比

特性	数组	Map
数据结构	线性结构	键值对集合
键类型	索引（数字）	任意类型
插入顺序	维护插入顺序	维护插入顺序
查询性能	索引查询效率高	键值查询效率高
动态增删	支持动态增删	支持动态增删
使用场景	存储有序数据集	存储复杂键值对关系

四、总结

无论是数组还是 Map 对象，在现代 JavaScript 开发中都扮演着不可或缺的角色。理解它们的区别和各自的优势，可以帮助开发者选择最合适的工具来解决问题。数组以其强大的内置方法和灵活的操作方式成为了处理有序数据集的首选；而 Map 提供了更高效的键值对管理，特别适合需要动态增删大量键值对的场景。掌握这两者的特性，无疑能大大提升代码的效率和可读性。

此外，随着 JavaScript 的不断发展，ES6 及其后续版本引入了许多新特性，如 Array.from()、Set、Map 等，极大地丰富了语言的功能。开发者应熟练掌握这些新特性，以便更好地应对复杂的开发需求。