个性化阅读
专注于IT技术分析

ES6 map介绍和用法详解

点击下载

本文概述

ES6是添加到JavaScript的一系列新功能。在ES6之前, 当我们需要键和值的映射时, 我们经常使用一个对象。这是因为该对象允许我们将键映射到任何类型的值。

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

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

语法

为了创建新的map, 我们可以使用以下语法:

var map = new Map([iterable]);

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

map属性

S.no. 属性 描述
1. 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方法

Map对象包括几种方法, 其列表如下:

S.no. 方法 描述
1. Map.prototype.clear() 它从Map对象中删除所有键和值对。
2. Map.prototype.delete(key) 用于删除条目。
3. Map.prototype.has(值) 它检查相应的键是否在Map对象中。
4. Map.prototype.entries() 它用于返回一个新的迭代器对象, 该对象具有按插入顺序排列的Map对象中每个元素的键值对数组。
5. Map.prototype.forEach(callbackFn [, thisArg]) 它只执行一次回调函数, 该回调函数针对Map中的每个元素执行。
6. Map.prototype.keys() 它返回Map中所有键的迭代器。
7. Map.prototype.values() 它为Map中的每个值返回一个迭代器。

弱map

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

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

让我们尝试了解弱map的插图。

例子

'use strict' 
let wp = new WeakMap(); 
let obj = {}; 
console.log(wp.set(obj, "Welcome to srcmini"));  
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

迭代器和map

迭代器是一个对象, 它定义序列和终止时的返回值。它允许一次访问一组对象。 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 }

赞(0)
未经允许不得转载:srcmini » ES6 map介绍和用法详解

评论 抢沙发

评论前必须登录!