首页 > 编程笔记 > JavaScript笔记
阅读:6
JavaScript Set和Map类型的用法(附带实例)
本节介绍 ES6 新增的两种数据结构,分别是 Set 和 Map。
Set() 本身是一个构造函数,用来生成 Set 数据结构。Set() 函数可以接收一个数组(或者是具有 iterable 接口的其他数据结构)作为参数,用来初始化。
Set 结构有一个 size 属性,用于返回 Set 实例的成员总数。由于成员的值都是唯一的,没有重复的值,因此第 4 行和第 6 行输出的结果是 4 和 3。
【实例 1】去除数组中的重复成员以及字符串里的重复字符。
Set 实例常用方法如下表所示:
【实例 2】Set 实例常用方法。
Map 类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果需要“键值对”的数据结构,Map 比 Object 更合适。
Map 本身是一个构造函数,用来生成 Map 数据结构。Map() 函数可以接收一个数组作为参数,用来初始化。
Map 实例常用方法如下表所示:
【实例 3】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>程序中:
- 第 2 行代码创建一个空的 Set 结构;
- 第 3 行和第 4 行代码通过 add() 方法增加成员;
- 第 5 行代码通过 size 属性得到 Set 结构的长度;第 6~8 行代码判断是否含有某个值;
- 第 9 行代码通过 forEach 遍历 Set 结构。这里需要注意,Set 结构的键名就是键值(两者是同一个值),因此第一个参数 value 与第二个参数 key 的值永远都是一样的。
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>程序中:
- 第 2 行代码创建一个空的 Map 结构;
- 第 3~5 行代码通过 set() 方法增加成员;
- 第 6 行代码通过 size 属性得到 Set 结构的长度;
- 第 7 行代码通过 get() 方法获取成员的值;
- 第 8 行代码判断是否含有某个键;
- 第 10 行代码通过 forEach 遍历 Map 结构;
- 第 11 行代码删除键,因此 size 属性会受影响;
- 第 13 行代码清除所有成员,因此 size 属性的值是 0。