ECMAScript/ES6映射/Map

ES6的一系列新功能都被添加到JavaScript中。 在ES6之前，当需要键和值的映射时，一般是使用一个对象。 这是因为该对象可以将键映射到任何类型的值。

ES6提供了一种称为Map的新集合类型，其中包含键-值对，其中任何类型的值都可以用作键或值。 Map对象始终记住键的实际插入顺序。 Map对象中的键和值可以是原语或对象。 它返回新的或空的Map。

映射是有序的，因此它们按其插入顺序遍历元素。

语法

使用以下语法：

var map = new Map([iterable]);

Map()接受一个可选的可迭代对象，该对象的元素在键值对中。

1.Map属性

1.1.Map.prototype.size

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

语法

Map.size

示例代码：

var map = new Map();  
    map.set('John', 'author');  
    map.set('arry', 'publisher');  
    map.set('Mary', 'subscriber');  
    map.set('James', 'Distributor');  

console.log(map.size);

运行结果如下：

4

2.Map方法

Map对象包括几种方法，其列表如下：

3.弱映射

弱映射几乎与普通映射相似，不同之处在于弱映射中的键必须是对象。 它将每个元素存储为键-值对，其中键被弱引用。 在这里，键是对象，值是任意值。 弱映射对象仅允许使用对象类型的键。 如果没有对关键对象的引用，则它们将针对垃圾回收。 在弱Map中，键不可枚举。 因此，没有方法来获取键列表。

弱映射对象按插入顺序迭代其元素。 它仅包括：delete(key), get(key), has(key) 和 set(key, value)方法。

示例代码

'use strict'   
let wp = new WeakMap();   
let obj = {};   
console.log(wp.set(obj,"Welcome to XNTutor"));    
console.log(wp.has(obj));

执行上面示例代码，得到以下结果：

WeakMap { <items unknown> }
true

4.for…of循环和弱映射

for...of循环用于对键(即Map对象的值)执行迭代。 以下示例将通过使用for...of循环来说明Map对象的遍历。

'use strict'   
var colors = new Map([   
   ['1', 'Red'],   
   ['2', 'Green'],   
   ['3', 'Yellow'],  
   ['4', 'Violet']   
]);  

for (let col of colors.values()) {  
    console.log(col);  
}  

console.log(" ")  

for(let col of colors.entries())   
console.log(`${col[0]}: ${col[1]}`);

执行上面示例代码，得到以下结果：

Red
Green
Yellow
Violet

1: Red
2: Green
3: Yellow
4: Violet

5.迭代器和映射

迭代器是一个对象，它定义序列和终止时的返回值。 它允许一次访问一组对象。 Set和Map都包含返回迭代器的方法。

迭代器是具有next方法的对象。 当调用next方法时，迭代器将返回一个对象以及“值”和“完成”属性。

下面来了解一些迭代器以及Map对象的实现。

示例1

'use strict'   
var colors = new Map([   
   ['1', 'Red'],   
   ['2', 'Green'],   
   ['3', 'Yellow'],  
   ['4', 'Violet']   
]);  

var itr = colors.values();  
console.log(itr.next());  
console.log(itr.next());  
console.log(itr.next());

执行上面示例代码，得到以下结果：

{ value: 'Red', done: false }
{ value: 'Green', done: false }
{ value: 'Yellow', done: false }

示例2

'use strict'   
var colors = new Map([   
   ['1', 'Red'],   
   ['2', 'Green'],   
   ['3', 'Yellow'],  
   ['4', 'Violet']   
]);  
var itr = colors.entries();  
console.log(itr.next());  
console.log(itr.next());  
console.log(itr.next());

执行上面示例代码，得到以下结果：

{ value: [ '1', 'Red' ], done: false }
{ value: [ '2', 'Green' ], done: false }
{ value: [ '3', 'Yellow' ], done: false }

示例3

'use strict'   
var colors = new Map([   
   ['1', 'Red'],   
   ['2', 'Green'],   
   ['3', 'Yellow'],  
   ['4', 'Violet']   
]);  

var itr = colors.keys();  
console.log(itr.next());  
console.log(itr.next());  
console.log(itr.next());

执行上面示例代码，得到以下结果：

{ value: '1', done: false }
{ value: '2', done: false }
{ value: '3', done: false }