授课语音

认识ES6中新增的数据结构

在ES6中,JavaScript引入了几种新的数据结构,它们使得我们在处理集合数据时更加方便和高效。ES6新增的数据结构包括SetMapWeakSetWeakMap等,它们相较于传统的数组和对象提供了更加灵活和高效的数据存储方式。通过学习这些新的数据结构,开发者可以更好地处理数据集合,提高代码的可读性和执行效率。


1. Set(集合)

Set是一种新的数据结构,类似于数组,但是其中的值是唯一的,不能重复。Set中的每个值只能出现一次,因此它是一个集合的概念。

1.1 创建Set

// 创建一个Set
const mySet = new Set([1, 2, 3, 4, 5]);

console.log(mySet);
// 输出:Set { 1, 2, 3, 4, 5 }

解释:

  • 使用new Set()可以创建一个集合,集合中的值是唯一的。

1.2 Set的常用操作

  • 添加元素: 使用add()方法向Set中添加元素。
  • 删除元素: 使用delete()方法从Set中删除指定元素。
  • 检查元素: 使用has()方法检查Set中是否存在某个元素。
  • 清空集合: 使用clear()方法清空Set中的所有元素。
const mySet = new Set();

// 添加元素
mySet.add(1);
mySet.add(2);
mySet.add(2);  // 不会重复添加

console.log(mySet);
// 输出:Set { 1, 2 }

// 删除元素
mySet.delete(1);
console.log(mySet);
// 输出:Set { 2 }

// 检查元素
console.log(mySet.has(2)); // 输出:true

// 清空集合
mySet.clear();
console.log(mySet);
// 输出:Set {}

解释:

  • Set只允许添加唯一的元素。
  • has()检查某个元素是否存在。
  • clear()清空所有元素。

2. Map(映射)

Map是一种新的键值对集合,它允许任意类型的键,并且键值对的顺序是有序的。相比于传统的对象,Map具有更好的性能,尤其是在频繁添加和删除键值对时。

2.1 创建Map

// 创建一个Map
const myMap = new Map([['name', '小明'], ['age', 25]]);

console.log(myMap);
// 输出:Map { 'name' => '小明', 'age' => 25 }

解释:

  • 使用new Map()可以创建一个新的Map实例。每一项都是一个数组,数组的第一个元素是键,第二个元素是值。

2.2 Map的常用操作

  • 添加键值对: 使用set()方法添加键值对。
  • 获取值: 使用get()方法获取某个键对应的值。
  • 删除键值对: 使用delete()方法删除指定键值对。
  • 检查键是否存在: 使用has()方法检查Map中是否存在某个键。
  • 清空Map: 使用clear()方法清空Map中的所有键值对。
const myMap = new Map();

// 添加键值对
myMap.set('name', '小明');
myMap.set('age', 25);

console.log(myMap);
// 输出:Map { 'name' => '小明', 'age' => 25 }

// 获取值
console.log(myMap.get('name')); // 输出:小明

// 删除键值对
myMap.delete('age');
console.log(myMap);
// 输出:Map { 'name' => '小明' }

// 检查键是否存在
console.log(myMap.has('age')); // 输出:false

// 清空Map
myMap.clear();
console.log(myMap);
// 输出:Map {}

解释:

  • Map中的键值对是有序的,set()用于添加新的键值对,get()用于获取值,has()用于检查键是否存在。

3. WeakSet(弱集合)

WeakSetSet的一种变体,它的特点是集合中的元素是“弱引用”的,即元素可以被垃圾回收机制回收。WeakSet只能存储对象类型的元素,而不能存储原始值类型。

3.1 创建WeakSet

let obj1 = { name: '小红' };
let obj2 = { name: '小蓝' };

// 创建WeakSet
const myWeakSet = new WeakSet([obj1, obj2]);

console.log(myWeakSet);
// 输出:WeakSet { <items unknown> }

解释:

  • WeakSet只接受对象作为元素,并且元素是弱引用的。

3.2 WeakSet的常用操作

  • 添加元素: 使用add()方法添加元素。
  • 删除元素: 使用delete()方法删除指定元素。
  • 检查元素: 使用has()方法检查元素是否存在。
let obj = { name: '小绿' };
const myWeakSet = new WeakSet();

// 添加元素
myWeakSet.add(obj);

// 检查元素
console.log(myWeakSet.has(obj)); // 输出:true

// 删除元素
myWeakSet.delete(obj);
console.log(myWeakSet.has(obj)); // 输出:false

解释:

  • WeakSet的元素是弱引用的,这意味着如果对象没有其他引用指向它,它会被垃圾回收机制回收。

4. WeakMap(弱映射)

WeakMapMap的一种变体,它的键是弱引用的,可以被垃圾回收机制回收。与WeakSet类似,WeakMap的键只能是对象类型。

4.1 创建WeakMap

let obj1 = { name: '小白' };
let obj2 = { name: '小黑' };

// 创建WeakMap
const myWeakMap = new WeakMap([[obj1, '123'], [obj2, '456']]);

console.log(myWeakMap);
// 输出:WeakMap { <items unknown> }

解释:

  • WeakMap中的键是对象,并且是弱引用。

4.2 WeakMap的常用操作

  • 添加键值对: 使用set()方法添加键值对。
  • 获取值: 使用get()方法获取某个键的值。
  • 删除键值对: 使用delete()方法删除指定键的键值对。
  • 检查键是否存在: 使用has()方法检查某个键是否存在。
let obj = { name: '小紫' };
const myWeakMap = new WeakMap();

// 添加键值对
myWeakMap.set(obj, '789');

// 获取值
console.log(myWeakMap.get(obj)); // 输出:789

// 删除键值对
myWeakMap.delete(obj);
console.log(myWeakMap.has(obj)); // 输出:false

解释:

  • WeakMap的键是对象且是弱引用,键会被垃圾回收机制回收。

5. 总结

  1. Set: 无重复元素的集合,支持增、删、查等基本操作。
  2. Map: 键值对集合,键可以是任意类型,插入顺序有保证。
  3. WeakSet: 类似Set,但元素是弱引用,只有对象类型的元素,支持垃圾回收。
  4. WeakMap: 类似Map,但键是弱引用,只有对象类型的键,支持垃圾回收。

通过了解和使用这些新的数据结构,我们可以更加灵活地处理数据,提升代码的性能和可维护性。

去1:1私密咨询

系列课程: