深入了解JavaScript中Map和Set(映射和集合)的用法与区别

JavaScript处理数据的集合包括Object(对象)和Array(数组)。

这些对象也被称为构建对象,因为它们是在JavaScript中预先准备好的,具有以下性质。

  • 对象,存储带有键的数据的集合。

  • 数组,存储有序集合。

随着 ES6 中 Map 和 Set 的引入,您现在可以更灵活地处理数据。

因此,这次在介绍 Map 和 Set 的同时,也会说明 Object 和 Array 的区别。

Map 

Map 是一个带键的数据项的集合,就像一个 Object 一样。 

在 ES5 之前,Object 被用作 Map 的替代品。

但是它们最大的差别是 Map 允许任何类型的键(key)。

Map的基本用法

从这里,让我们看看如何使用 Map。

Map创建/初始化

new Map() 创建一个Map()

const map = new Map();

使用元素创建Map

创建Map时也可以设置初始值。存储键值对。

const map = new Map([
  [1, 'One'],
  [2, 'Two'],
  [3, 'Three']
]);

添加和删除元素

Map提供了set和get方法。

可以使用map.set(key,value)添加值,也可以使用map.get(key)检索值。

//创建 Map
const map = new Map();
// 添加元素
map.set(1, 'One');
// 检索元素
console.log(map.get(1)); //"One"

如果多次使用相同的键名使用 set 方法,最后添加的值将覆盖它。

const map = new Map();

map.set(1, 'One');
map.set(1, '一');
map.set(1, '1');

console.log(map.get(1)); // "1"

此外,在下面我们可以看到,键并不局限于字符串,它可以是任何类型的键。这是“Object”和“Map”的主要区别。

const map = new Map();

map.set(1, 'number');
map.set('1', 'string');
map.set(false, 'boolean');

console.log(map.get(1)); // "number"
console.log(map.get('1')); // "string"
console.log(map.get(false)); // "boolean"

获取元素数量

要获得Map中元素的数量,可以size方法。

新创建的 Map 将返回 0。

const map1 = new Map();
const map2 = new Map([
  [1, 'One'],
  [2, 'Two'],
  [3, 'Three']
]);

console.log(map1.size); // 0
console.log(map2.size); // 3

检查元素是否存在

要检查Map中是否存在元素,可以使用has方法。

如果map.has(key)存在键,则返回true,否则返回false。

const map = new Map();

map.set(1, 'One');

console.log(map.has(1)); // true
console.log(map.has('1')); // false

Map迭代

您可以使用forEach方法在Map中进行迭代。

Map的forEach方法传递的是键,而不是数组中的索引。

const map = new Map([
  [1, 'One'],
  [2, 'Two'],
  [3, 'Three']
]);

map.forEach((value, key) => {
  console.log(key, value);
});
// 1, "One"
// 2, "Two"
// 3, "Three"

还可以使用以下方法在Map中执行迭代操作。

这时,for…和of句一起使用。

map.keys() —— 遍历并返回一个包含所有键的可迭代对象,
map.values() —— 遍历并返回一个包含所有值的可迭代对象,
map.entries() —— 遍历并返回一个包含所有实体 [key, value] 的可迭代对象,for..of 在默认情况下使用的就是这个。

const map = new Map([
  [1, 'One'],
  [2, 'Two'],
  [3, 'Three']
]);

// 遍历所有的键
for (let number of map.keys()) {
  console.log(number);
}
// 1
// 2
// 3

// 遍历所有的值
for (let number of map.values()) {
  console.log(number);
}
// "One"
// "Two"
// "Three"

// 遍历所有的实体 [key, value]
for (let number of map.entries()) {
  console.log(number);
}
// [1, "One"]
// [2, "Two"]
// [3, "Three"]

Set

Set 是一个可以存储无键值的集合。

Array和Set具有相似的性质,可以保存多个引用类型或原始类型的值。

与Array的主要区别在于,Set不能具有重复的值。

所以当你想保证一个值是唯一的,或者你想检查它是否有一个值时,则Set非常有用。

深入了解JavaScript中Map和Set(映射和集合)的用法与区别

Set的基本用法

让我们看看如何使用Set。

创建/初始化Set

可以使用new Set()创建一个新的Set,并且还可以在创建时包含初始值。

const set = new Set();
const set = new Set(['One', 'Two', 'Three']);

获取元素数量

要获得Set中元素的数量,可以size方法。

新创建的 Set 将返回 0。

const set1 = new Set();
const set2 = new Set(['One', 'Two', 'Three']);

console.log(set1.size); // 0
console.log(set2.size); // 3

添加和删除元素

Set拥有可以追加和删除要素的方法。

你可以在set.add(value)中添加值,在set.delete(value)中删除任何值。

此外,在set.clear()中,删除set的所有元素。

const set = new Set();
const person = { name: 'Emma' };

// 添加元素
set.add('One');
set.add(1);
set.add(person);
console.log(set.size); // 3

// 删除元素
set.delete('One');
console.log(set.size); // 2

// 删除所有元素
set.clear();
console.log(set.size); // 0

Set的特点是没有重复的元素

因此,在add方法添加已经有的值的情况下,则会忽略该值。

const set = new Set();

set.add('One');
console.log(set.size); // 1

// 因为重复,所以不添加
set.add('One');
console.log(set.size); // 1

检查元素是否存在

要检查Set中是否存在元素,可以使用has方法。

如果set.has(key)存在键,则返回true,否则返回false。

const set = new Set();

set.add('One');

console.log(set.has('One')); // true
console.log(set.has(1)); // false

Set迭代

您可以使用forEach方法或者for..of在Set中进行迭代。

const set = new Set(['One', 'Two', 'Three']);

set.forEach((num) => {
  console.log(num);
});
// "One"
// "Two"
// "Three"

for (let num of set) {
  console.log(num);
}
// "One"
// "Two"
// "Three"

将Set转换为数组

Set 和 Array 的属性非常相似,不同之处在于它们是否可以具有相同的值。

但是,可以在保留 Set 功能的同时将 Set 转换为 Array。

通过结合spread运算符,您可以轻松创建一个不重复的数组。

const array = [1, 2, 3, 1, 2, 3]; // 创建具有重复值的数组
const set = new Set(array); // 从数组创建Set
const newArray = [...set]; // 将Set转换为数组

console.log(newArray); // [1, 2, 3]

结语

这一次,我解释了Map和Set。

通过采用Map和Set,可以灵活地进行数据管理和重复处理。