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

 更新时间:2020年02月03日 10:24:04   作者:starkwang  
这篇文章主要介绍了使用js实现单链解决前端队列问题的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

使用场景

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

首先先声明一个类

接收一个 数组对象:items

class ChainQueue {
 constructor(items) {
  this.items = items || []
  this.maxNum = 200
 }
}

为队列添加数组队列

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

为当前队列添加单个对象

// 添加队列
entryQueue(node) {
 if (this.items.length > this.maxNum) {
  return
 }
 if (Array.isArray(node)) {
  node.map(item => this.items.push(item))
 } else {
  this.items.push(node)
 }
}

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

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

返回队列的第一个

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

清除队列

clear() {
 this.items = []
}

所有代码

const isFunc = v => typeof v === 'function'
const assert = (condition, msg) => {
 if (!condition) throw new Error(`[dashboard]${msg}`)
}
class ChainQueue {
 constructor(items) {
  this.items = items || []
  this.maxNum = 200
 }

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

 // 添加队列
 entryQueue(node) {
  if (this.items.length > this.maxNum) {
   return
  }
  if (Array.isArray(node)) {
   node.map(item => this.items.push(item))
  } else {
   this.items.push(node)
  }
 }

 // 删除队列,返回删除的当前的项目
 deleteQueue(func = () => {}) {
  assert(isFunc(func), `${func} is not function`)
  func(this.items.shift())
 }

 // 返回队列的第一个
 front() {
  return this.items[0]
 }

 // 清除队列
 clear() {
  this.items = []
 }
 get size() {
  return this.items.length
 }

 get isEmpty() {
  return !this.items.length
 }

 print() {
  console.log(this.items.toString())
  console.log(this.items)
 }
 result() {
  return this.items
 }
}

module.exports = ChainQueue

// export default ChainQueue
// export default (ChainQueue = new ChainQueue())

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

相关文章

  • JavaScript中双向数据绑定详解

    JavaScript中双向数据绑定详解

    这篇文章主要为大家详细介绍了JavaScript中双向数据绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • js冒泡法和数组转换成字符串示例代码

    js冒泡法和数组转换成字符串示例代码

    将数组转换成字符串的方法有很多,想必大家也不会陌生,下面为大家讲解下js冒泡法的使用,感兴趣的朋友可以参考下
    2013-08-08
  • 通俗易懂讲解Json Web Token (JWT)

    通俗易懂讲解Json Web Token (JWT)

    这篇文章主要介绍了通俗易懂讲解Json Web Token (JWT)问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Javascript实现hashcode函数实现对象比较与原理说明

    Javascript实现hashcode函数实现对象比较与原理说明

    在JavaScript中,数值的比较是比较简单的,使用相等(==)和全等(===)符号基本上可以解决大多数非对象的比较。但是相等(==)和全等(===)符号在对象 object 的比较上,就不能满足所有的要求了
    2023-06-06
  • js图片放大镜实例讲解(必看篇)

    js图片放大镜实例讲解(必看篇)

    下面小编就为大家带来一篇js图片放大镜实例讲解(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 键盘上一张下一张兼容IE/google/firefox等浏览器

    键盘上一张下一张兼容IE/google/firefox等浏览器

    键盘上一张下一张的效果想必大家都有见到过吧,本文为大家介绍的这个兼容IE,google,firefox等主流浏览器
    2014-01-01
  • 详解JS中continue关键字和break关键字的区别

    详解JS中continue关键字和break关键字的区别

    在javascript中continue的作用是退出当前次循环,break的作用则是一旦当前循环有break那么直接退出整个循环。本文将通过一些示例为大家详细讲讲二者的区别,感兴趣的可以了解一下
    2022-08-08
  • swiper.js插件实现pc端文本上下滑动功能示例

    swiper.js插件实现pc端文本上下滑动功能示例

    这篇文章主要介绍了swiper.js插件实现pc端文本上下滑动功能,结合实例形式分析了swiper.js插件的具体引用与相关使用技巧,需要的朋友可以参考下
    2018-12-12
  • javaScript中的空值和假值

    javaScript中的空值和假值

    JavaScript 是世界上最流行的编程语言。javaScript中有五种空值和假值,分别为false,null,undefined,“”,0。从广义上来说,这五个值都是对应数据类型的无效值或空值
    2017-12-12
  • 浅谈使用splice函数对数组中的元素进行删除时的注意事项

    浅谈使用splice函数对数组中的元素进行删除时的注意事项

    下面小编就为大家带来一篇浅谈使用splice函数对数组中的元素进行删除时的注意事项。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12

最新评论