使用js实现单链解决前端队列问题的方法

使用场景

• 比如前端需要处理什么队列一类的业务
• 比如有人下单，需要弹出什么弹窗

首先先声明一个类

接收一个 数组对象：items

1. class ChainQueue {
2. constructor(items) {
3. this.items = items || []
4. this.maxNum = 200
5. }
6. }

为队列添加数组队列

1. // 添加数组队列
2. entryArrQueue(node) {
3. Array.isArray(node)
4. node.map(item => this.items.push(item))
5. }

为当前队列添加单个对象

1. // 添加队列
2. entryQueue(node) {
3. if (this.items.length > this.maxNum) {
4. return
5. }
6. if (Array.isArray(node)) {
7. node.map(item => this.items.push(item))
8. } else {
9. this.items.push(node)
10. }
11. }

删除队列，返回删除的当前的项目

1. deleteQueue(func = () => {}) {
2. assert(isFunc(func), `${func} is not function`)
3. func(this.items.shift())
4. }

返回队列的第一个

1. front() {
2. return this.items[0]
3. }

清除队列

1. clear() {
2. this.items = []
3. }

所有代码

1. const isFunc = v => typeof v === 'function'
2. const assert = (condition, msg) => {
3. if (!condition) throw new Error(`[dashboard]${msg}`)
4. }
5. class ChainQueue {
6. constructor(items) {
7. this.items = items || []
8. this.maxNum = 200
9. }
10.  
11. // 添加数组队列
12. entryArrQueue(node) {
13. Array.isArray(node)
14. node.map(item => this.items.push(item))
15. }
16.  
17. // 添加队列
18. entryQueue(node) {
19. if (this.items.length > this.maxNum) {
20. return
21. }
22. if (Array.isArray(node)) {
23. node.map(item => this.items.push(item))
24. } else {
25. this.items.push(node)
26. }
27. }
28.  
29. // 删除队列，返回删除的当前的项目
30. deleteQueue(func = () => {}) {
31. assert(isFunc(func), `${func} is not function`)
32. func(this.items.shift())
33. }
34.  
35. // 返回队列的第一个
36. front() {
37. return this.items[0]
38. }
39.  
40. // 清除队列
41. clear() {
42. this.items = []
43. }
44. get size() {
45. return this.items.length
46. }
47.  
48. get isEmpty() {
49. return !this.items.length
50. }
51.  
52. print() {
53. console.log(this.items.toString())
54. console.log(this.items)
55. }
56. result() {
57. return this.items
58. }
59. }
60.  
61. module.exports = ChainQueue
62.  
63. // export default ChainQueue
64. // export default (ChainQueue = new ChainQueue())
65.  

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。