JavaScript字典与集合详解

目录

字典

什么是字典JavaScript中的字典字典的应用

集合

什么是集合JS中的集合集合中的操作交集、并集、差集的封装

字典


什么是字典

说到字典，第一时间想到的应该就是新华字典，实际上，这跟编程中的字典类似，两者都有一个特点，就是一一对应（yi yi dui ying），或者说是映射。
字典通常以**【键，值】** 对的形成存储，因为是以键值对的形式存储，更方便通过key来获取value
比如存储用户信息：

1. {
2.   'username': '一碗周',
3.   'age': 18
4. }

复制代码

JavaScript中的字典

在JavaScript中，对象好像拥有字典的所有特点，但是在ES6中新增Map，用来表示字典，这里的map不是翻译成地图，而是映射。
示例代码如下：

1. // 创建一个字典
2. const map = new Map()
4. // 往字典中存储信息
5. map.set('username', '一碗周')
6. map.set('age', 18)
7. console.log(map) // Map(2) { 'username' => '一碗周', 'age' => 18 }

复制代码

字典的应用

在学习链表的时候我们做了一个算法题，是力扣中题号为20的一道题，它题目：有效的括号，题目大意就是判断给定字符串中的括号是否匹配，匹配返回true，否则返回false。
解题思路如下：

判断字符串的长度是否为偶数，不为偶数直接返回false，因为括号都是成对出现的；新建一个栈；遍历字符串，遍历到每一项时如果时左括号，将其压入栈；如果是右括号，与栈顶对比，如果相匹配则出栈，不匹配则返回false。

我们原来的解法：

1. /**
2. * @param {string} s
3. * @return {boolean}
4. */
5. var isValid = function(s) {
6.     if (s.length % 2 !== 0) return false
7.     const stack = []
8.     for(let i = 0; i<s.length; i++) {
9.         const c = s[i] // 记录当前项
10.         if (c === '(' || c === '[' || c==='{') {
11.             stack.push(c)
12.         } else {
13.             const t = stack[stack.length - 1] // 获取栈顶元素
14.             if (
15.                 (t === '(' && c === ')') ||
16.                 (t === '[' && c === ']') ||
17.                 (t === '{' && c === '}')
18.             ) {
19.                 stack.pop()
20.             } else {
21.                 return false
22.             }
23.         }
24.     }
25.     // 如果为0表示全部匹配，有剩余则表示不匹配
26.     return stack.length === 0
27. };

复制代码

在上面的代码中，条件判断中的判断条件非常的长，这时我们就可以利用字典来优化这个写法，
实现代码如下：

1. /**
2. * @param {string} s
3. * @return {boolean}
4. */
5. var isValid = function(s) {
6.     // 1. 判断字符串的长度是否为偶数，不为偶数直接返回false，因为括号都是成对出现的；
7.     if (s.length % 2 !== 0) return false
8.     const stack = []
9.     const map = new Map() // 将所有括号的对应关系存储在字典中
10.     map.set('(', ')')
11.     map.set('[', ']')
12.     map.set('{', '}')
13.     for(let i = 0; i<s.length; i++) {
14.         const c = s[i] // 记录当前项
15.         // 判断是否存在 key 也就是左括号，如果存储，将左括号存储在栈中
16.         if (map.has(c)) {
17.             stack.push(c)
18.         } else {
19.             const t = stack[stack.length - 1] // 获取栈顶元素
20.             if (map.get(t) === c) { // 获取最后一个左括号，判断是否与右括号匹配
21.                 stack.pop() // 出栈
22.             } else {
23.                 return false
24.             }
25.         }
26.     }
27.     // 如果为0表示全部匹配，有剩余则表示不匹配
28.     return stack.length === 0
29. };

复制代码

在这个代码中，我们优化了if语句中的判断条件。

集合


什么是集合

集合是由一组无序且不重复的元素构成。我们可以将集合看成一种特殊的数组，它的特殊之处就是无序且不重复，这也就意味着我们不能通过下标的方式进行访问，而且集合中不会出现重复的元素；

JS中的集合

在JavaScript中提供了集合这个数据结构，即Set，MDN中的描述如下：

Set对象是值的集合，你可以按照插入的顺序迭代它的元素。Set中的元素只会出现一次，即Set中的元素是唯一的。

集合中的操作

在集合中主要有以下场景操作：

添加元素到集合中；在集合中删除某元素；判断元素是否在集合中；清空集合；求交集、并集、差集；

除了最后一种Set对象就为我们提供了对应的方法，示例代码如下：

1. const arr = [1, 2, 3, 2, 3, 4, 5]
2. // 利用set实现去重
3. const set = new Set(arr) // [1, 2, 3, 4, 5]
5. // 往集合中添加元素
6. set.add(3) // [1, 2, 3, 4, 5] 添加失败，集合中不允许出现重复元素
7. set.add(6) // [1, 2, 3, 4, 5, 6]
9. // 判断元素是否在集合中
10. set.has(2) // true
11. set.has(7) // false
13. // 删除集合中的元素
14. set.delete(1) // [2, 3, 4, 5, 6]
16. // 清空集合
17. set.clear()

复制代码

交集、并集、差集的封装

首先我们需要了解一下什么交集、并集、差集。

并集：对于给定的两个集合，返回一个包含两个集合中所有元素的新集合交集：对于给定的两个集合，返回一个包含两个集合中共有元素的新集合差集：对于给定的两个集合，返回一个包含所有存在于第一个集合且不存在于第二个集合的元素的新集合

下面这个图更好的解释了什么是交集、并集、差集。

封装代码如下：

1. // 求两个集合的并集
2. export function union(setA, setB) {
3.   let _union = new Set(setA)
4.   for (let elem of setB) {
5.     _union.add(elem) // 因为集合中不存在重复元素
6.   }
7.   return _union
8. }
10. // 求两个集合的交集
11. export function intersection(setA, setB) {
12.   let _intersection = new Set()
13.   for (let elem of setB) {
14.     if (setA.has(elem)) {
15.       _intersection.add(elem)
16.     }
17.   }
18.   return _intersection
19. }
20. // 求两个集合的差集
21. export function difference(setA, setB) {
22.   let _difference = new Set(setA)
23.   for (let elem of setB) {
24.     _difference.delete(elem)
25.   }
26.   return _difference
27. }

复制代码

封装的这三个方法全部利用了集合不能重复的特性。
到此这篇关于JavaScript字典与集合详解的文章就介绍到这了,更多相关JS字典与集合内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！