ES6 - 集合


ES6 集合

ES6引入了两个新的数据结构:地图和集合。

  • Maps - 此数据结构可将键映射到值。
  • Sets - 集合与数组类似。但是,套不鼓励重复。

Maps

Map对象是一个简单的键/值对。地图中的键和值可以是基元或对象。

以下是相同的语法。

new Map([iterable])

参数iterable表示其元素包含键/值对的任何可迭代对象。地图是有序的,即它们按照它们插入的顺序遍历元素。

Map 属性

序号 属性 & 描述
1 Map.prototype.size

该属性返回Map对象中键/值对的数量。

了解基本的地图操作

set()函数为Map对象中的键设置值。set()函数接受两个参数,即密钥及其值。该函数返回Map对象。

has()函数返回一个布尔值,指示在Map对象中是否找到指定的键。这个函数将一个键作为参数。

var map = new Map();
map.set('name','Tutorial Point');
map.get('name'); // Tutorial point

上面的例子创建一个地图对象。该地图只有一个元素。元素键由名称表示。该键映射到一个值教程点。

- Map区分类似的值,但承载不同的数据类型。换句话说,整数键1被认为不同于字符串键“1”。考虑下面的例子来更好地理解这个概念

var map = new Map();
map.set(1,true);
console.log(map.has("1")); //false

map.set("1",true);
console.log(map.has("1")); //true

输出

false
true

set()方法也是可链接的。考虑下面的例子。

var roles = new Map();
roles.set('r1', 'User')
.set('r2', 'Guest')
.set('r3', 'Admin');
console.log(roles.has('r1'))

输出

True

上面的例子定义了一个地图对象。该示例链接set()函数来定义键/值对。

get()函数用于检索与指定键相对应的值。

Map构造函数也可以传递一个数组。此外,map还支持使用spread运算符来表示数组。

示例

var roles = new Map([
   ['r1', 'User'],
   ['r2', 'Guest'],
   ['r3', 'Admin'],
]);  
console.log(roles.get('r2'))

在成功执行上述代码时,会显示以下输出。

Guest

- 如果指定的键在地图中不存在,则get()函数返回undefined。

set()替换该键的值(如果它已经存在于映射中)。考虑下面的例子。

var roles = new Map([
   ['r1', 'User'],
   ['r2', 'Guest'],
   ['r3', 'Admin'],
]);  
console.log(`value of key r1 before set(): ${roles.get('r1')}`)
roles.set('r1','superUser')
console.log(`value of key r1 after set(): ${roles.get('r1')}`)

在成功执行上述代码时,会显示以下输出。

value of key r1 before set(): User
value of key r1 after set(): superUser

Map方法

序号 方法 & 描述
1 Map.prototype.clear()

从Map对象中删除所有键/值对。

2 Map.prototype.delete(key)

删除与该键关联的任何值,并返回Map.prototype.has(键)之前返回的值。

之后Map.prototype.has(key)将返回false。

3 Map.prototype.entries()

按照插入顺序返回一个新的Iterator对象,该对象包含Map对象中每个元素的[key,value]数组。

4 Map.prototype.forEach(callbackFn[, thisArg])

按照插入顺序为Map对象中存在的每个键值对调用一次callbackFn。如果为forEach提供了thisArg参数,它将用作每个回调的'this'值。

5 Map.prototype.keys()

按照插入顺序返回一个新的Iterator对象,该对象包含Map对象中每个元素的键。

6 Map.prototype.values()

按照插入顺序返回一个新的Iterator对象,该对象包含Map对象中每个元素的[key,value]数组。

for…of 循环

以下示例说明使用for ... of循环遍历映射。

'use strict'
var roles = new Map([
   ['r1', 'User'],
   ['r2', 'Guest'],
   ['r3', 'Admin'],
]);
for(let r of roles.entries())
console.log(`${r[0]}: ${r[1]}`);

在成功执行上述代码时,会显示以下输出。

r1: User
r2: Guest
r3: Admin

Weak Maps

Weak Map与Map相同,但以下情况除外 -

  • 它的键必须是对象。
  • Weak Map中的键可以是垃圾收集。垃圾收集是清除程序中未引用对象占用的内存的过程。
  • 弱映射不能被迭代或清除。

示例:弱映射

'use strict'
let weakMap = new WeakMap();
let obj = {};
console.log(weakMap.set(obj,"hello"));  
console.log(weakMap.has(obj));// true

在成功执行上述代码时,会显示以下输出。

WeakMap {}
true

Sets

一组是一个ES6数据结构。它与数组类似,只是它不能包含重复项。换句话说,它可以让你存储唯一的值。集支持原始值和对象引用。

就像Map一样,集合也是有序的,即元素按照它们的插入顺序迭代。一组可以使用以下语法进行初始化。

Set 属性

序号 属性 & 描述
1 Set.prototype.size

返回Set对象中的值的数量。

Set 方法

序号 Method & Description
1 Set.prototype.add(value)

将具有给定值的新元素附加到Set对象。返回Set对象。

2 Set.prototype.clear()

从Set对象中删除所有元素。

3 Set.prototype.delete(value)

删除与该值关联的元素。

4 Set.prototype.entries()

以插入顺序返回一个新的Iterator对象,该对象包含Set对象中每个元素的[value,value]数组。这与Map对象保持相似,以便每个条目在此处具有与其键和值相同的值。

5 Set.prototype.forEach(callbackFn[, thisArg])

以插入顺序为Set对象中存在的每个值调用一次callbackFn。如果athisArg参数提供给forEach,它将用作每个回调的“this”值。

6 Set.prototype.has(value)

返回一个布尔值,断言一个元素是否与给定值一起出现在Set对象中。

7 Set.prototype.values()

返回一个新的Iterator对象,该对象包含广告素材顺序中Set对象中每个元素的值。

Weak Set

弱集只能包含对象,并且它们包含的对象可能被垃圾收集。像弱映射一样,弱集不能迭代。

示例:使用弱集

'use strict'
   let weakSet = new WeakSet();  
   let obj = {msg:"hello"};
   weakSet.add(obj);
   console.log(weakSet.has(obj));
   weakSet.delete(obj);
   console.log(weakSet.has(obj));

在成功执行上述代码时,会显示以下输出。

true
false

迭代器

Iterator是一个允许一次访问一个对象集合的对象。set和map都有返回迭代器的方法。

迭代器是next()方法的对象。当next()方法被调用时,它会返回一个具有'value'和'done'属性的对象。'done'是布尔型的,在读取集合中的所有项目后,这将返回true

例1:Set和Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.entries();
console.log(iterator.next())

在成功执行上述代码时,会显示以下输出。

{ value: [ 'a', 'a' ], done: false }

因为该集合不存储键/值,所以该值数组包含相似的键和值。由于有更多元素需要阅读,所以完成将是错误的。

示例2:Set和Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.values();
console.log(iterator.next());

在成功执行上述代码时,会显示以下输出。

{ value: 'a', done: false }

例3:Set和Iterator

var  set = new Set(['a','b','c','d','e']);  
var iterator = set.keys();
console.log(iterator.next());

在成功执行上述代码时,会显示以下输出。

{ value: 'a', done: false }

示例4:映射和迭代器

var map = new Map([[1,'one'],[2,'two'],[3,'three']]);
var iterator = map.entries();
console.log(iterator.next());

在成功执行上述代码时,会显示以下输出。

{ value: [ 1, 'one' ], done: false }

示例5:映射和迭代器

var map = new Map([[1,'one'],[2,'two'],[3,'three']]);
var iterator = map.values();
console.log(iterator.next());

在成功执行上述代码时,会显示以下输出。

{value: "one", done: false}

示例6:映射和迭代器

var map = new Map([[1,'one'],[2,'two'],[3,'three']]);
var iterator = map.keys();
console.log(iterator.next());

在成功执行上述代码时,会显示以下输出。

{value: 1, done: false}