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


Posted in Javascript onFebruary 03, 2020

使用场景

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

首先先声明一个类

接收一个 数组对象: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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
(仅IE下有效)关于checkbox 三态
May 12 Javascript
JavaScript异步加载浅析
Dec 28 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
实例分析js事件循环机制
Dec 13 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
Oct 08 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
js实现滑动进度条效果
Aug 21 Javascript
javscript 数组扁平化的实现
Feb 03 #Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 #Javascript
JavaScript中的类型检查
Feb 03 #Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 #Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 #Javascript
24个解决实际问题的ES6代码片段(小结)
Feb 02 #Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 #Javascript
You might like
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
学习并汇集javascript匿名函数
2010/11/25 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
jQuery 判断元素整理汇总
2017/02/28 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
微信小程序文章详情页面实现代码
2018/09/10 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
浅谈Python中数据解析
2015/05/05 Python
简单讲解Python编程中namedtuple类的用法
2016/06/21 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python退火算法在高次方程的应用
2018/07/26 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
详细分析Python垃圾回收机制
2020/07/01 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
《新型玻璃》教学反思
2014/04/13 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书