ES6教程

ES6 Map

ES6 Map

ES6 是一系列添加到 JavaScript 的新功能。在 ES6 之前,当我们需要映射键和值时,我们经常使用对象。这是因为对象允许我们将键映射到任何类型的值。
ES6 为我们提供一个名为 Map 的新集合类型,它保存键值对,其中任何类型的值都可以用作键或值。 Map 对象始终记住键的实际插入顺序。 Map 对象中的键和值可以是原始对象或对象。它返回新的或空的 Map。
Map 是有序的,因此它们按插入顺序遍历元素。

语法

对于创建一个新的 Map,我们可以使用以下语法:
var map = new Map([iterable]);
Map() 接受一个可选的可迭代对象,其元素在键值对中。

Map 属性

属性 说明
Map.prototype.size 该属性返回 Map 对象中键值对的数量。
让我们简单了解一下Map对象的上述属性。

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

Map Methods

Map 对象包括几个方法,列表如下:
编号 方法 说明
Map.prototype.clear() 它从 Map 对象中删除所有键和值对。
Map.prototype.delete(key) 用于删除条目。
Map.prototype.has(value) 检查对应的key是否在Map对象中。
Map.prototype.entries() 它用于返回一个新的迭代器对象,该对象具有按插入顺序排列的 Map 对象中每个元素的键值对数组。
Map.prototype.forEach(callbackFn[, thisArg]) 它执行一次回调函数,对Map中的每个元素都执行一次。
Map.prototype.keys() 它为 Map 中的所有键返回一个迭代器。
Map.prototype.values() 它为 Map 中的每个值返回一个迭代器。

Weak Maps

Weak Maps 与普通Maps 几乎相似,只是weak Maps 中的键必须是对象。它将每个元素存储为键值对,其中键被弱引用。这里,键是对象,值是任意值。弱映射对象只允许对象类型的键。如果没有对键对象的引用,则它们将被定位到垃圾收集。在弱映射中,键不可枚举。因此,没有获取键列表的方法。
弱映射对象按插入顺序迭代其元素。它只包括delete(key), get(key), has(key) 和set(key, value) 方法。
让我们试试理解弱映射的说明。

例子

'use strict' 
let wp = new WeakMap(); 
let obj = {}; 
console.log(wp.set(obj,"Welcome to lidihuo"));  
console.log(wp.has(obj));
输出
WeakMap { <items unknown> }
true

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

迭代器和映射

迭代器是一个对象,它在终止时定义序列和返回值。它允许一次访问一组对象。 Set 和 Map 都包含返回迭代器的方法。
迭代器是带有 next() 方法的对象。当 next() 方法被调用时,迭代器返回一个对象以及 "value" 和 "done" 属性。
让我们试着理解迭代器和 Map 对象的一些实现。

Example-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 }
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4