正文

JavaScript集合全解析：从数组到Map与Set，一文搞懂所有集合类型

/0 浏览量
0418

JavaScript作为一种广泛使用的编程语言，提供了多种数据结构来存储和组织数据。在JavaScript中，集合（Collection）是其中一种非常重要的数据结构，它可以帮助开发者更高效地处理数据。本文将全面解析JavaScript中的集合类型，包括数组、Map和Set，帮助读者一文搞懂所有集合类型。

数组（Array）

数组是JavaScript中最常用的集合类型，它允许我们存储一系列的值。在JavaScript中，数组是对象的一种，因此它具有许多对象的属性和方法。

数组的基本操作

  • 创建数组：可以使用 [] 或 new Array() 创建数组。 
    
let arr1 = []; // 使用空方括号
let arr2 = new Array(); // 使用new Array()构造函数
  • 添加元素：可以使用 push() 方法向数组末尾添加元素。 
    
arr1.push(1, 2, 3); // 数组变为[1, 2, 3]
  • 删除元素：可以使用 pop() 方法从数组末尾删除元素。 
    
arr1.pop(); // 数组变为[1, 2]
  • 遍历数组：可以使用 forEach() 方法遍历数组。 
    
arr1.forEach((item, index) => {
console.log(item, index); // 输出：1 0，2 1，3 2
});

数组的常用方法

  • indexOf() 和 lastIndexOf()：查找数组中元素的索引。 
    
let index = arr1.indexOf(2); // index为2
  • filter()：创建一个新数组，包含通过提供的函数实现的测试的所有元素。 
    
let filteredArr = arr1.filter(item => item > 1); // filteredArr为[2, 3]
  • map()：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。 
    
let mappedArr = arr1.map(item => item * 2); // mappedArr为[2, 4, 6]
  • reduce()：对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。 
    
let reducedArr = arr1.reduce((acc, cur) => acc + cur); // reducedArr为6

Map（映射）

Map对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者是原始值）都可以作为一个键或一个值。

Map的基本操作

  • 创建Map：可以使用 new Map() 创建Map。 
    
let map1 = new Map();
  • 添加键值对：可以使用 set() 方法添加键值对。 
    
map1.set('name', 'Alice');
map1.set('age', 25);
  • 获取值：可以使用 get() 方法获取值。 
    
let name = map1.get('name'); // name为'Alice'
  • 删除键值对：可以使用 delete() 方法删除键值对。 
    
map1.delete('age');

Map的常用方法

  • size 属性：返回Map中键值对的数量。 
    
console.log(map1.size); // 输出：2
  • keys()、values() 和 entries()：返回Map中键、值和键值对的迭代器。 
    
for (let key of map1.keys()) {
console.log(key); // 输出：'name'
}
for (let value of map1.values()) {
console.log(value); // 输出：'Alice'
}
for (let [key, value] of map1.entries()) {
console.log(key, value); // 输出：'name' 'Alice'
}

Set（集合）

Set对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set的基本操作

  • 创建Set：可以使用 new Set() 创建Set。 
    
let set1 = new Set();
  • 添加元素：可以使用 add() 方法添加元素。 
    
set1.add(1);
set1.add(2);
set1.add(2); // 2不会被添加，因为Set不允许重复元素
  • 删除元素：可以使用 delete() 方法删除元素。 
    
set1.delete(2);
  • 检查元素：可以使用 has() 方法检查元素是否存在于Set中。 
    
console.log(set1.has(1)); // 输出：true

Set的常用方法

  • size 属性：返回Set中元素的数量。 
    
console.log(set1.size); // 输出：1
  • add()、delete() 和 has()：与Map的相应方法类似。
  • values() 和 entries()：返回Set中值和键值对的迭代器。 
    
for (let value of set1.values()) {
console.log(value); // 输出：1
}
for (let [key, value] of set1.entries()) {
console.log(key, value); // 输出：1 1
}

总结

本文全面解析了JavaScript中的集合类型，包括数组、Map和Set。通过本文的介绍，读者可以了解到这些集合类型的基本操作、常用方法和特点。在实际开发中，根据具体需求选择合适的集合类型，可以提高代码的可读性和可维护性。希望本文对读者有所帮助。

-- 展开阅读全文 --