开发学院

您的位置:首页>教程>正文

教程正文

ES6 集合

ES6 集合

  ES6引入了两个新的数据结构:Maps和Sets。

  • Maps:此类型的数据存储一个键值对,可以通过key来获取到值。

  • Sets:集合类似于数组。但是,Sets不允许重复。

Maps对象

  Map对象是一个简单的键/值对。Map的键值可以是ES6内置数据类型或对象。

  以下是声明Maps的语法。

new Map([iterable])

  参数iterable表示任何元素包含一个键/值对的任何iterable对象。映射是有序的,即它们以插入的顺序遍历元素。

Map属性

1.Map.prototype.size

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

理解基本Map操作

  set()函数为Map对象中的键设置值。set()函数需要两个参数,即key和它对应的值。这个函数返回Map对象。

  has()函数返回一个布尔值,该值指示在映射对象中是否找到指定的键。此函数以一个键为参数。

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

  注意-如果映射中不存在指定的键,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()

移除所有的键值对

2.Map.prototype.delete(key)

 删除与key相关联的值,并返回map.prototype.has (key)将先前返回的值。map.prototype.has ( key)会在事后返回false。

3.Map.prototype.entries()

  返回一个新的迭代器对象,该对象包含在插入顺序中的map对象中的每个元素的[ key,value]数组。

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

  在插入顺序中为映射对象中的每个键-值对调用一次callbackfn。如果为foreach提供了一个thisarg参数,则它将用作每个回调的“this”值。

5.Map.prototype.keys()

  返回一个新的迭代器对象,该对象包含在插入顺序中的map对象中的每个元素的键。

6.Map.prototype.values()

  返回一个新的迭代器对象,该对象包含在插入顺序中的map对象中的每个元素的[ key,value]数组。

The for…of Loop

  下面代码演示for…of loop循环

'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 Maps与具有以下例外情况的映射相同

  它的键必须是对象。

  Weak Maps中的密钥可以被GC。GC(垃圾数据收集)是一个在程序中清除未被引用的对象所占用的内存的过程。

  Weak Maps不能迭代或清除。


例子: 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

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

  就像Maps一样,Sets也是有序的,即元素在插入顺序中迭代。可以使用以下语法初始化一个集合。

Set属性

1.Set.prototype.size

返回Set集合中的值的数量。

Set方法

Sr.No Method & Description

1.Set.prototype.add(value)

将一个新元素添加到指定对象。返回Set对象。

2.Set.prototype.clear()

清除所有的元素

3.Set.prototype.delete(value)

删除指定的元素

4.Set.prototype.entries()

在插入顺序中返回一个新的迭代器对象,该对象包含集合对象中每个元素的[ value,value]数组。这与map对象保持类似,因此每个条目在这里的键和值都具有相同的值。

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

在插入顺序中为集合对象中的每个值调用一次callbackfn。如果将athisarg参数提供给foreach,它将用作每个回调的“this”值。

6.Set.prototype.has(value)

返回一个布尔值,断言一个元素是否存在于集合对象中的给定值。

7.Set.prototype.values()

返回一个新的迭代器对象,该对象包含在插入顺序中的集合对象中的每个元素的值。

Weak Set

  Weak Set只能包含对象,它们包含的对象可以被GC。像Weak Map一样,弱集不能迭代。

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

迭代器

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

迭代器是具有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 }

  因为,该集合不存储键/值,值数组包含类似的键和值。做的将是错误的,因为有更多的元素要读。

例子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}