ES6 - 集合



ES6 引入了两种新的数据结构:Map 和 Set。

  • Map − 这种数据结构能够将键映射到值。

  • Set − Set 类似于数组。但是,Set 不允许重复。

Map

Map 对象是一个简单的键值对。Map 中的键和值可以是原始值或对象。

以下是它的语法。

new Map([iterable]) 

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

Map 属性

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

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

了解基本的 Map 操作

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

has() 函数返回一个布尔值,指示 Map 对象中是否存在指定的键。此函数接受一个键作为参数。

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

上面的例子创建了一个 map 对象。该 map 只有一个元素。元素键用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 

上面的例子定义了一个 map 对象。该示例将 set() 函数链接起来以定义键值对。

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

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

示例

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

上述代码成功执行后将显示以下输出。

Guest

注意 − 如果 map 中不存在指定的键,则 get() 函数返回 undefined。

如果键已存在于 map 中,则 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(key) 之前返回的值。

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

3 Map.prototype.entries()

返回一个新的 Iterator 对象,其中包含 Map 对象中每个元素的[键,值] 数组,按插入顺序排列。

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

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

5 Map.prototype.keys()

返回一个新的 Iterator 对象,其中包含 Map 对象中每个元素的,按插入顺序排列。

6 Map.prototype.values()

返回一个新的 Iterator 对象,其中包含 Map 对象中每个元素的[键,值] 数组,按插入顺序排列。

for…of 循环

以下示例演示了使用 for…of 循环遍历 map。

'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

弱 Map

弱 Map 与 Map 相同,但以下例外:

  • 其键必须是对象。

  • 弱 Map 中的键可以被垃圾回收。垃圾回收是清除程序中未引用对象所占用的内存的过程。

  • 弱 Map 无法迭代或清除。

示例:弱 Map

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

上述代码成功执行后将显示以下输出。

WeakMap {} 
true

Set

Set 是 ES6 数据结构。它类似于数组,区别在于它不能包含重复项。换句话说,它允许你存储唯一的值。Set 支持原始值和对象引用。

与 Map 一样,Set 也是有序的,即元素按其插入顺序进行迭代。可以使用以下语法初始化 Set。

Set 属性

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

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

Set 方法

序号 方法和描述
1 Set.prototype.add(value)

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

2 Set.prototype.clear()

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

3 Set.prototype.delete(value)

删除与值关联的元素。

4 Set.prototype.entries()

返回一个新的 Iterator 对象,其中包含 Set 对象中每个元素的[值,值] 数组,按插入顺序排列。这与 Map 对象保持一致,因此每个条目的键和值在这里都具有相同的值。

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

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

6 Set.prototype.has(value)

返回一个布尔值,表示 Set 对象中是否存在具有给定值元素。

7 Set.prototype.values()

返回一个新的 Iterator 对象,其中包含 Set 对象中每个元素的,按插入顺序排列。

弱 Set

弱 Set 只能包含对象,并且它们包含的对象可能会被垃圾回收。与弱 Map 一样,弱 Set 无法迭代。

示例:使用弱 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

迭代器

迭代器是一个对象,它允许一次访问一个对象的集合。Set 和 Map 都有返回迭代器的方法。

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

示例 1:Set 和迭代器

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

上述代码成功执行后将显示以下输出。

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

由于 Set 不存储键值,因此值数组包含相似的键和值。done 将为 false,因为还有更多元素需要读取。

示例 2:Set 和迭代器

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

上述代码成功执行后将显示以下输出。

{ value: 'a', done: false }  

示例 3:Set 和迭代器

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

上述代码成功执行后将显示以下输出。

{ value: 'a', done: false }  

示例 4:Map 和迭代器

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

上述代码成功执行后将显示以下输出。

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

示例 5:Map 和迭代器

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

上述代码成功执行后将显示以下输出。

{value: "one", done: false} 

示例 6:Map 和迭代器

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

上述代码成功执行后将显示以下输出。

{value: 1, done: false} 
广告