📌  相关文章
📜  ES6-收藏

📅  最后修改于: 2020-10-25 10:43:01             🧑  作者: Mango

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

  • 映射-此数据结构允许将键映射到值。

  • 集-集类似于数组。但是，集合不鼓励重复。

地图

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

以下是相同的语法。

new Map([iterable])

参数iterable表示其元素由键/值对组成的任何可迭代对象。地图是有序的，即，地图按其插入顺序遍历元素。

地图属性

Sr.No Property & Description
1 Map.prototype.size

This property returns the number of key/value pairs in the Map object.

了解基本的地图操作

set（）函数设置Map对象中键的值。 set（）函数采用两个参数，即键及其值。此函数返回Map对象。

has（）函数返回一个布尔值，该布尔值指示是否在Map对象中找到指定的键。此函数以键作为参数。

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

上面的示例创建一个地图对象。该地图只有一个元素。元素键由name表示。该键被映射到一个值Tutorial point 。

注–映射区分相似的值，但具有不同的数据类型。换句话说，认为整数键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还支持使用散布运算符来表示数组。

例

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

地图方法

Sr.No Method & Description
1 Map.prototype.clear()

Removes all key/value pairs from the Map object.
2 Map.prototype.delete(key)

Removes any value associated to the key and returns the value that Map.prototype.has(key) would have previously returned.

Map.prototype.has(key) will return false afterwards.
3 Map.prototype.entries()

Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.
4 Map.prototype.forEach(callbackFn[, thisArg])

Calls callbackFn once for each key-value pair present in the Map object, in insertion order. If a thisArg parameter is provided to forEach, it will be used as the ‘this’ value for each callback .
5 Map.prototype.keys()

Returns a new Iterator object that contains the keys for each element in the Map object in insertion order.
6 Map.prototype.values()

Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order.

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

弱地图

弱映射与映射相同，除了以下例外：

  • 它的键必须是对象。

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

  • 弱映射不能被迭代或清除。

示例：弱地图

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

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

WeakMap {} 
true

套装

集合是ES6数据结构。它类似于数组，但不能包含重复项。换句话说，它使您可以存储唯一值。集支持原始值和对象引用。

就像地图一样，集合也是有序的，即元素按其插入顺序进行迭代。可以使用以下语法初始化集合。

设置属性

Sr.No Property & Description
1 Set.prototype.size

Returns the number of values in the Set object.

设定方法

Sr.No Method & Description
1 Set.prototype.add(value)

Appends a new element with the given value to the Set object. Returns the Set object.
2 Set.prototype.clear()

Removes all the elements from the Set object.
3 Set.prototype.delete(value)

Removes the element associated to the value.
4 Set.prototype.entries()

Returns a new Iterator object that contains an array of [value, value] for each element in the Set object, in insertion order. This is kept similar to the Map object, so that each entry has the same value for its key and value here.
5 Set.prototype.forEach(callbackFn[, thisArg])

Calls callbackFn once for each value present in the Set object, in insertion order. If athisArg parameter is provided to forEach, it will be used as the ‘this’ value for each callback.
6 Set.prototype.has(value)

Returns a boolean asserting whether an element is present with the given value in the Set object or not.
7 Set.prototype.values()

Returns a new Iterator object that contains the values for each element in the Set object in insertion order.

弱集

弱集只能包含对象，并且它们包含的对象可能被垃圾回收。像弱映射一样，弱集合也无法迭代。

示例：使用弱集

'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和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}