首页 > 编程笔记 > JavaScript笔记 阅读：21

JavaScript Set和Map类型的用法（附带实例）

本节介绍 ES6 新增的两种数据结构，分别是 Set 和 Map。

JavaScript Set类型

ES6 提供的新的数据结构 Set 类似于数组，但是其成员的值都是唯一的，没有重复的值。

Set() 本身是一个构造函数，用来生成 Set 数据结构。Set() 函数可以接收一个数组（或者是具有 iterable 接口的其他数据结构）作为参数，用来初始化。 
const s1 = new Set(); // 没有成员
console.log(s1.size); // 0
const s2 = new Set([1, 2, 3, 4, 4]);
console.log(s2.size); // 4
const s3 = new Set('asdasda');
console.log(s3.size); // 3
在上面代码中，第 3 行是接收数组作为参数，第 5 行是接收字符串作为参数。

Set 结构有一个 size 属性，用于返回 Set 实例的成员总数。由于成员的值都是唯一的，没有重复的值，因此第 4 行和第 6 行输出的结果是 4 和 3。

【实例 1】去除数组中的重复成员以及字符串里的重复字符。 
<script>
// 去除数组中的重复成员
var array = [1, 1, 2, 3, 4, 4];
var b = [...new Set(array)];
console.log(b); // [1,2,3,4]

// 去除字符串中的重复字符
var s = 'ababbc';
var r = [...new Set(s)].join('');
console.log(r); // 'abc'
</script>
在程序中，第 4 行和第 8 行代码通过原数组和原字符串得到一个 Set 结构数据，此时就去除了重复的值，然后使用扩展运算符展开到数组中。

Set 实例常用方法如下表所示：

方法 描述
add 添加某个值，返回 Set 结构本身
delete 删除某个值，返回一个布尔值，表示删除是否成功
has 返回一个布尔值，表示该值是否为 Set 的成员
clear 清除所有成员，没有返回值
forEach 为每个元素调用回调函数

【实例 2】Set 实例常用方法。 
<script>
const s = new Set();
s.add(1);
s.add(2);
console.log(s.size); // 2
console.log(s.has(1)) // true
console.log(s.has(2)) // true
console.log(s.has(3)) // false
s.forEach((value, key) => console.log(key + ':' + value)) // 1:1 2:2
console.log(s.delete(1)) // true
</script>
程序中:

JavaScript Map类型

在 ES6 之前，对象（Object）只能把字符串当作键，这给它的使用带来了很大的限制。为了解决这个问题，ES6 提供了 Map 数据结构。

Map 类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果需要“键值对”的数据结构，Map 比 Object 更合适。

Map 本身是一个构造函数，用来生成 Map 数据结构。Map() 函数可以接收一个数组作为参数，用来初始化。 
const map = new Map();
console.log(map.size); // 0
const fruits = new Map([
    ["apples", 500],
    ["bananas", 300]
]);
console.log(fruits.size); // 2
在上面代码中，第 3 行是接收数组作为参数，在新建 Map 实例时，就指定了两个键 apples 和 bananas。Map 结构有一个 size 属性，用于返回 Map 实例的成员总数。

Map 实例常用方法如下表所示：

方法 描述
set(key, value) 设置键名 key 对应的键值为 value，然后返回整个 Map 结构。如果 key 已经有值，则键值会被更新，否则就新生成该键
get(key) 读取 key 对应的键值，如果找不到 key，就返回 undefined
has(key) 返回一个布尔值，表示某个键是否在当前 Map 对象之中
delete(key) 删除某个键，返回 true。如果删除失败，返回 false
clear 清除所有成员，没有返回值
forEach 为每个元素调用回调函数

【实例 3】Map 实例常用方法。 
<script>
const fruits = new Map();
fruits.set("apples", 500);
fruits.set("bananas", 300);
fruits.set("oranges", 200);
console.log(fruits.size); // 3
console.log(fruits.get("apples")); // 500
console.log(fruits.has("apples")); // true
// apples:500 bananas:300 oranges:200
fruits.forEach((value,key)=>console.log(key+':'+value))
fruits.delete("apples");
console.log(fruits.size); // 2
fruits.clear();
console.log(fruits.size); // 0
</script>
程序中：

相关文章