首页 > 编程笔记 > JavaScript笔记 阅读:6

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>
程序中:

相关文章