如何正确使用 Set 和 Map 在 ES2015 和 ES2016 中进行数据存储

在过去的 Javascript 版本中，开发者通常使用数组和对象来存储和操作数据。但是在 ES2015 和 ES2016 中，Javascript 引入了两个新的数据结构：Set 和 Map。这两个数据结构可以更方便地处理数据，提高代码效率和可读性。本文将介绍 Set 和 Map 的用法，并提供示例代码以帮助读者更好地理解。

Set 的用法

Set 是一种无序且不重复的数据结构，类似于数组但不同之处在于它不允许重复的数据。

创建 Set

你可以使用以下格式来创建一个空的 Set：

let set = new Set();

你也可以在创建时使用初始化数据：

let set = new Set([1, 2, 3]);

Set 常见操作

添加元素

使用 add() 方法可以向 Set 中添加元素。

let set = new Set();
set.add(1);
set.add(2);
set.add(3);
set.add(3); // 重复元素不会被添加
console.log(set); // 输出 Set {1, 2, 3}

删除元素

使用 delete() 方法可以从 Set 中删除指定元素：

let set = new Set([1, 2, 3]);
set.delete(2);
console.log(set); // 输出 Set {1, 3}

清空 Set

使用 clear() 方法可以清空整个 Set：

let set = new Set([1, 2, 3]);
set.clear();
console.log(set); // 输出 Set {}

判断 Set 中是否含有某个元素

使用 has() 方法可以判断是否含有某个元素：

let set = new Set([1, 2, 3]);
console.log(set.has(2)); // 输出 true
console.log(set.has(4)); // 输出 false

Set 中元素个数

使用 size 属性可以获取 Set 中元素的个数：

let set = new Set([1, 2, 3]);
console.log(set.size); // 输出 3

Set 的示例

Set 可以用来去除数组中的重复元素：

let arr = [1, 1, 2, 3, 3];
let set = new Set(arr);
arr = Array.from(set);
console.log(arr); // 输出 [1, 2, 3]

Map 的用法

Map 是一种键值对的数据结构，与对象类似，区别在于 Map 中的键可以是任意类型，并且可以按插入顺序迭代元素。

创建 Map

创建一个空的 Map 可以使用以下格式：

let map = new Map();

创建一个已经初始化的 Map 可以使用如下格式：

let map = new Map([[key1, value1], [key2, value2]]);

Map 常见操作

添加元素

使用 set() 方法可以向 Map 中添加元素：

let map = new Map();
map.set('name', 'Tom');
map.set('age', 25);
console.log(map); // 输出 Map {'name' => 'Tom', 'age' => 25}

获取值

使用 get() 方法可以获取指定键的值：

let map = new Map();
map.set('name', 'Tom');
map.set('age', 25);
let name = map.get('name');
console.log(name); // 输出 Tom

删除元素

使用 delete() 方法可以删除指定键的元素：

let map = new Map();
map.set('name', 'Tom');
map.set('age', 25);
map.delete('name');
console.log(map); // 输出 Map {'age' => 25}

清空 Map

使用 clear() 方法可以清空整个 Map：

let map = new Map();
map.set('name', 'Tom');
map.set('age', 25);
map.clear();
console.log(map); // 输出 Map {}

判断 Map 中是否含有某个键值

使用 has() 方法可以判断是否含有某个键值：

let map = new Map();
map.set('name', 'Tom');
map.set('age', 25);
console.log(map.has('name')); // 输出 true
console.log(map.has('gender')); // 输出 false

Map 中元素个数

使用 size 属性可以获取 Map 中元素的个数：

let map = new Map();
map.set('name', 'Tom');
map.set('age', 25);
console.log(map.size); // 输出 2

Map 的示例

如果我们要统计每个元素出现的次数，可以使用 Map：

let arr = [1, 1, 2, 3, 3];
let map = new Map();
for(let i = 0; i < arr.length; i++) {
    let count = map.get(arr[i]) || 0;
    map.set(arr[i], count + 1);
}
console.log(map); // 输出 Map {1 => 2, 2 => 1, 3 => 2}

总结

Set 和 Map 是在 ES2015 和 ES2016 中引入的两个新的数据结构，它们可以更加方便地操作数据，提高了代码效率和可读性。本文中介绍了 Set 和 Map 的用法以及常见操作，并提供了示例代码，希望读者通过本文可以更好地理解 Set 和 Map 的用法，提高自己的编程能力。

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