ECMAScript 2019 (ES10) 中的 Map 数据结构：新特性和用法详解-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2019 (ES10) 中，JavaScript 引入了一种新的数据结构：Map。它是一种键值对集合，其中的键和值可以是任何类型的数据，包括对象、数组和函数等。Map 的出现使得 JavaScript 在数据处理方面更加灵活和高效。本文将详细介绍 Map 的新特性和用法，帮助读者更好地理解和应用 Map。

Map 的新特性

Map.prototype.forEach() 方法

在 ES6 中，Map 已经有了 forEach() 方法，但是只能遍历 Map 中的值。在 ES10 中，Map.prototype.forEach() 方法新增了一个可选参数，用于指定 this 指向。这使得使用 forEach() 方法更加灵活，可以更好地控制上下文环境。

下面是一个示例：

// javascriptcn.com 代码示例
const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

const obj = {
  name: 'Alice',
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
};

myMap.forEach(function(value, key, map) {
  console.log(`${key} => ${value}`);
  this.sayHello();
}, obj);

输出结果为：

key1 => value1
Hello, Alice!
key2 => value2
Hello, Alice!
key3 => value3
Hello, Alice!

Map.prototype.size 属性

在 ES6 中，Map 已经有了 size 属性，用于返回 Map 中键值对的数量。在 ES10 中，Map.prototype.size 属性变成了一个可写属性，可以通过直接赋值来改变 Map 中键值对的数量。

下面是一个示例：

// javascriptcn.com 代码示例
const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

console.log(myMap.size); // 输出 3

myMap.size = 2;

console.log(myMap.size); // 输出 2
console.log(myMap.get('key1')); // 输出 undefined

Map.prototype.clear() 方法

在 ES6 中，Map 已经有了 clear() 方法，用于清空 Map 中的所有键值对。在 ES10 中，Map.prototype.clear() 方法返回 Map 对象本身，使得可以链式调用 clear() 方法。

下面是一个示例：

// javascriptcn.com 代码示例
const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

myMap.clear().set('key4', 'value4');

console.log(myMap.size); // 输出 1
console.log(myMap.get('key4')); // 输出 value4

Map 的用法

创建 Map 对象

可以使用 new 关键字创建一个空的 Map 对象，也可以在创建时传入一个数组，其中每个元素都是一个键值对。下面是两个示例：

const emptyMap = new Map();

const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

向 Map 中添加键值对

在 Map 中添加键值对可以使用 set() 方法。如果添加的键已经存在，则会覆盖原来的值。

下面是一个示例：

// javascriptcn.com 代码示例
const myMap = new Map();

myMap.set('key1', 'value1');
myMap.set('key2', 'value2');
myMap.set('key3', 'value3');
myMap.set('key1', 'newValue');

console.log(myMap.size); // 输出 3
console.log(myMap.get('key1')); // 输出 newValue

从 Map 中获取值

可以使用 get() 方法从 Map 中获取指定键的值。如果键不存在，则返回 undefined。

下面是一个示例：

const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

console.log(myMap.get('key1')); // 输出 value1
console.log(myMap.get('key4')); // 输出 undefined

遍历 Map

可以使用 forEach() 方法遍历 Map 中的键值对。这个方法接受一个回调函数作为参数，回调函数的参数依次为值、键和 Map 对象本身。

下面是一个示例：

// javascriptcn.com 代码示例
const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

myMap.forEach(function(value, key, map) {
  console.log(`${key} => ${value}`);
});

输出结果为：

key1 => value1
key2 => value2
key3 => value3

判断 Map 中是否包含某个键

可以使用 has() 方法判断 Map 中是否包含某个键。

下面是一个示例：

const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

console.log(myMap.has('key1')); // 输出 true
console.log(myMap.has('key4')); // 输出 false

从 Map 中删除键值对

可以使用 delete() 方法从 Map 中删除指定键的键值对。如果键不存在，则不会进行任何操作。

下面是一个示例：

// javascriptcn.com 代码示例
const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

myMap.delete('key2');

console.log(myMap.size); // 输出 2
console.log(myMap.get('key2')); // 输出 undefined

总结

Map 是一种非常实用的数据结构，它可以存储任意类型的键值对，提供了灵活的数据处理方式。在 ECMAScript 2019 (ES10) 中，Map 又新增了一些新特性，使得它更加强大和易用。通过本文的介绍，读者可以更好地理解和应用 Map，提高 JavaScript 编程的效率和质量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6506af7a95b1f8cacd26a4ed