simple's Studio.

ES6中的Map(映射)

2017/11/05

如果说 Set 类似于数组,那么 Map 就类似于对象,因为 Map 存储键值对,和对象包含命名属性及值相类似。

本质上,Map 是一个可以存储键值对的对象,键和值都可以是对象、原始值或二者的结合。

如何创建 Map
要创建 Map,只需输入:

const employees = new Map();
console.log(employees);
Map {}

这样就会创建空的 Map employee,没有键值对。
修改 Map

#####和 Set 不同,你无法使用值列表创建 Map;而是使用 Map 的 .set() 方法添加键值。#####

const employees = new Map();

employees.set('james.parkes@udacity.com', { 
    firstName: 'James',
    lastName: 'Parkes',
    role: 'Content Developer' 
});
employees.set('julia@udacity.com', {
    firstName: 'Julia',
    lastName: 'Van Cleve',
    role: 'Content Developer'
});
employees.set('richard@udacity.com', {
    firstName: 'Richard',
    lastName: 'Kalehoff',
    role: 'Content Developer'
});

console.log(employees);
Map {'james.parkes@udacity.com' => Object {...}, 'julia@udacity.com' => Object {...}, 'richard@udacity.com' => Object {...}}

.set() 方法有两个参数。第一个参数是键,用来引用第二个参数,即值。

要移除键值对,只需使用 .delete() 方法。

employees.delete('julia@udacity.com');
employees.delete('richard@udacity.com');
console.log(employees);
Map {'james.parkes@udacity.com' => Object {firstName: 'James', lastName: 'Parkes', role: 'Course Developer'}}

同样,和 Set 类似,你可以使用 .clear() 方法从 Map 中删除所有键值对。

employees.clear()
console.log(employees);
Map {}

提示:如果你使用 .set() 向 Map 中添加键已存在的键值对,不会收到错误,但是该键值对将覆盖 Map 中的现有键值对。此外,如果尝试使用 .delete() 删除 Map 中不存在的键值,不会收到错误,而 Map 会保持不变。

如果成功地删除了键值对,.delete() 方法会返回 true,失败则返回 false。.set() 如果成功执行,则返回 Map 对象本身。

###处理 Map###
构建 Map 后,可以使用 .has() 方法并向其传入一个键来检查 Map 中是否存在该键值对。

const members = new Map();

members.set('Evelyn', 75.68);
members.set('Liam', 20.16);
members.set('Sophia', 0);
members.set('Marcus', 10.25);

console.log(members.has('Xavier'));
console.log(members.has('Marcus'));
false
true

还可以通过向 .get() 方法传入一个键,检索 Map 中的值。

console.log(members.get('Evelyn'));
75.68

##循环访问 Map##
你已经创建了 Map,添加了一些键值对,现在你想循环访问该 Map。幸运的是,可以通过以下三种方式循环访问:

  • 使用 Map 的默认迭代器循环访问每个键或值
  • 使用新的 for…of 循环来循环访问每个键值对
  • 使用 Map 的 .forEach() 方法循环访问每个键值对

###1.使用 MapIterator###
在 Map 上使用 .keys() 和 .values() 方法将返回新的迭代器对象,叫做 MapIterator。你可以将该迭代器对象存储在新的变量中,并使用 .next() 循环访问每个键或值。你所使用的方法将决定迭代器是否能够访问 Map 的键或值。

let iteratorObjForKeys = members.keys();
iteratorObjForKeys.next();
Object {value: 'Evelyn', done: false}

使用 .next() 获得下个键值对。

iteratorObjForKeys.next();
Object {value: 'Liam', done: false}

等等。

iteratorObjForKeys.next();
Object {value: 'Sophia', done: false}

另一方面,使用 .values() 方法访问 Map 的值,然后重复同一流程。

let iteratorObjForValues = members.values();
iteratorObjForValues.next();
Object {value: 75.68, done: false}

###2.使用 for…of 循环###
Map 的第二种循环访问方式是使用 for…of 循环。

for (const member of members) {
  console.log(member);
}
 ['Evelyn', 75.68]
 ['Liam', 20.16]
 ['Sophia', 0]
 ['Marcus', 10.25]

但是,在对 Map 使用 for…of 循环时,并不会得到一个键值或一个值。键值对会拆分为一个数组,第一个元素是键,第二个元素是值。有没有什么方法可以解决这一问题?

CATALOG