每周一练 之 数据结构与算法(Stack)


Posted in Javascript onApril 16, 2019

最近公司内部在开始做前端技术的技术分享,每周一个主题的 每周一练,以基础知识为主,感觉挺棒的,跟着团队的大佬们学习和复习一些知识,新人也可以多学习一些知识,也把团队内部学习氛围营造起来。

我接下来会开始把每周一练的题目和知识整理一下,便于思考和巩固,就像今天这篇开始。

学习的道路,很漫长,要坚持,希望大家都能掌握自己喜欢的技术,和自己需要的技术。

本周练习内容:数据结构与算法 —— Stack

这些都是数据结构与算法,一部分方法是团队其他成员实现的,一部分我自己做的,有什么其他实现方法或错误,欢迎各位大佬指点,感谢。

一、栈有什么特点,生活中有什么例子?

  1. 栈( stack )又称堆栈,是一种后进先出的有序集合,其中一端为栈顶,另一端为栈底,添加元素(称为压栈/入栈或进栈)时,将新元素压入栈顶,删除元素(称为出栈或退栈)时,将栈底元素删除并返回被删除元素。
  2. 特点:先进后出,后进先出。
  3. 例子:一叠书、一叠盘子。

 每周一练 之 数据结构与算法(Stack)

二、实现一个栈,并实现下面方法

  1. push(element):添加一个新元素到栈顶。
  2. pop():移除栈顶的元素,同时返回被移除的元素。
  3. peek():返回栈顶的元素,不对栈做任何修改 (这个方法不会移除栈顶的元素,仅仅返回它)。
  4. isEmpty():如果栈没有任何元素就返回 true,否则返回 false。
  5. clear():移除栈里面的所有元素。
  6. size():返回栈里的元素个数。这个方法与数组的 length 属性类似。

方法1:ES6实现

class Stack {
  constructor (){
    this.items = []
  }
  push( element ){
    this.items.push(element)
  }
  pop(){
    return this.items.pop()
  }
  peek(){
    return this.items[this.items.length - 1]
  }
  isEmpty(){
    return this.items.length === 0
  }
  clear(){
    this.items = []
  }
  size(){
    return this.items.length
  }
}

上面实现的方式虽然简单,但是内部 items 属性是公共的,为了满足面向对象变成私有性的原则,我们应该让 items 作为私有属性,因此我们可以使用 ES6 中 Symbol 或 WeakMap 来实现:

方法2:使用 ES6 的 Symbol 基本数据类型实现
知识点复习:ES6 中的 Symbol 介绍

const _items = Symbol()
class Stack {
  constructor (){
    this[_items] = []
  }
  push (element){
    this[_items].push(element)
  }
  // 剩下方法和第一种实现的差不多,这里省略
  // 只要把前面方法中的 this.items 更改为 this[_items]
}

 方法3:使用 ES6 的 WeakMap 实现

知识点复习:ES6 中的 WeakMap 介绍

 

const items = new WeakMap()
class Stack {
  constructor (){
    items.set(this, [])
  }
  push (element){
    let item = items.get(this)
    item.push(element)
  }
  // 剩下方法和第一种实现的差不多,这里省略
  // 只要把前面方法中的获取 this.items 的方式,更改为 items.get(this) 获取
}

 三、编写一个函数,实现十进制转二进制

题目意思很简单,就是十进制转二进制,但是在实际工作开发中,我们更愿意实现的是任意进制转任意进制,不过呢,我们还是以解决问题为首要目标呀。

当然,业务需求可以直接使用 toString(2) 方法,但是为了练习,咱还是不这么用咯。

方法1:使用前面定义的 Stack 类

这里使用前面题目中定义的 Stack 类。

/**
 * 十进制转换为二进制
 * @param {Number} bit 
 */
function bitset (bit){
  if(bit == 0) return '0'
  if(!/^[0-9]+.?[0-9]*$/.test(bit)){
    return new Error('请输入正确的数值!')
  }

  let stack = new Stack(), result = ''
  while (bit > 0){
    stack.push(bit % 2)
    bit = Math.floor(bit / 2)
  }
  while (!stack.isEmpty()){
    result += stack.pop().toString()
  }
  return result

}

方法2:简单实现

下面这个方法,其实不太好,因为没有怎么用到这次要练习的栈方法,哈哈。

/**
 * 十进制转换为二进制
 * @param {Number} bit 
 */
function bitset (bit){
  if(bit == 0) return '0'
  if(!/^[0-9]+.?[0-9]*$/.test(bit)){
    return new Error('请输入正确的数值!')
  }

  let arr = []
  while(bit > 0){
    arr.push(bit % 2)
    bit = Math.floor(bit / 2)
  }
  return arr.reverse().join('')
}

另外可以参考:wikiHow - 从十进制转换为二进制。

四、编写一个函数,实现检验圆括号顺序的有效性

主要目的就是:该函数接收一个圆括号字符串,判断里面的括号顺序是否有效,如果有效则返回 true 反之 false。
如:

  1. (   -> false
  2. ()  -> true
  3. (() -> false
  4. ()) -> false
  5. ()) -> false
  6. (((()()))()) -> true

这个题目实现的主要方法是:遍历字符串,先排除错误情况,然后将 ( 入栈保存,将 ) 入栈匹配前一个元素是否是 ( ,如果是,则 pop() 前一个元素 (,如果不是,则 push() 这个 ) 入栈,最终查看栈是否为空,若是则检验成功,否则失败。

方法1:使用前面定义的 Stack 类

这里使用前面题目中定义的 Stack 类。

/**
 * 检验圆括号顺序的有效性
 * @param {String} str 
 */
function validParentheses (str){
  if(!str || str.length === 0 || str[0] === ')') return false

  let stack = new Stack()
  str.split('').forEach(char => {
    let status = stack.peek() === '(' && char === ')'
    status ? stack.pop() : stack.push(char)
  })
  return stack.isEmpty()
}

方法2:出入栈操作

/**
 * 检验圆括号顺序的有效性
 * @param {String} str 
 */
function validParentheses (str){
  if(!str || str.length === 0 || str[0] === ')') return false

  let arr = []
  for(let i = 0; i < str.length ; i++){
    str[i] === '(' ? arr.push(str[i]) : arr.pop()
  }
  return arr.length === 0
}

五、改造题二,添加一个 min 函数来获得栈中最小元素

步骤 数据栈 辅助栈 最小值
1.push 3 3 0 3
2.push 4 3, 4 0, 0 3
3.push 2 3, 4, 2 0, 0, 2 2
4.push 1 3, 4, 2 ,1 0, 0, 2, 3 1
5.pop 3, 4, 2 0, 0, 2 2
6.pop 3, 4 0, 0 3
7.push 3, 4 ,0 0, 0, 2 0

使用示例如下:

let stack = new Stack();
stack.push(3);
console.log('After push 3, Min item is', stack.min());
stack.push(4);
console.log('After push 4, Min item is', stack.min());
stack.push(2);
console.log('After push 2, Min item is', stack.min());
stack.push(1);
console.log('After push 1, Min item is', stack.min());
stack.pop();
console.log('After pop, Min item is', stack.min());
stack.pop();
console.log('After pop, Min item is', stack.min());
stack.push(0);
console.log('After push 0, Min item is', stack.min());

提示:利用辅助栈(Web 端可利用数组),每次对栈 push/pop 元素时,也同时更新辅助栈(存储最小元素的位置)

方法1:小操作

class Stack {
 constructor() {
  this.items = [];
  this.minIndexStack = [];
 }

 push(element) {
  this.items.push(element);
  let minLen = this.minIndexStack.length;
  let minItemIndex = this.minIndexStack[minLen - 1];
  if(minLen === 0 || this.items[minItemIndex] > item) {
   this.minIndexStack.push(this.items.length - 1);
  } else {
   this.minIndexStack.push(minItemIndex);
  }
 }

 pop() {
  this.minIndexStack.pop();
  return this.items.pop();
 }
 
 min() {
  let len = this.minIndexStack.length;
  return (len > 0 && this.items[this.minIndexStack[len - 1]]) || 0;
 }

 peek() {
  return this.items[this.items.length - 1];
 }
 
 // 省略其它方法
}

方法2:与方法1中push实现的差异

class Stack {
  constructor (){
    this.items = [] // 数据栈
    this.arr = []  // 辅助栈
  }
  push( element ){
    this.items.push(element)
    let min = Math.min(...this.items)
    this.arr.push( min === element ? this.size() - 1 : 0)
  }
  pop(){
    this.arr.pop()
    return this.items.pop()
  }
  peek(){
    return this.items[this.items.length - 1]
  }
  isEmpty(){
    return this.items.length === 1
  }
  clear(){
    this.items = []
  }
  size(){
    return this.items.length
  }
  min (){
    let last = this.arr[this.arr.length - 1]
    return this.items[last]
  }
}

以上所述是小编给大家介绍的数据结构与算法(Stack)详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
Mar 19 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 #Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 #Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 #Javascript
详解滑动穿透(锁body)终极探索
Apr 16 #Javascript
一些手写JavaScript常用的函数汇总
Apr 16 #Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 #Javascript
理理Vue细节(推荐)
Apr 16 #Javascript
You might like
smarty简单分页的实现方法
2014/10/27 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
Javascript调用C#代码
2011/01/17 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
javaScript产生随机数的用法小结
2018/04/21 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Django中日期处理注意事项与自定义时间格式转换详解
2018/08/06 Python
Python字符串对象实现原理详解
2019/07/01 Python
详解Django将秒转换为xx天xx时xx分
2019/09/27 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
PYQT5开启多个线程和窗口,多线程与多窗口的交互实例
2019/12/13 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
GWebs公司笔试题
2012/05/04 面试题
饲料采购员岗位职责
2013/12/19 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
中学生学习保证书
2015/02/26 职场文书
个人年底工作总结
2015/03/10 职场文书
优秀新员工事迹材料
2019/05/13 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
Kubernetes控制节点的部署
2022/04/01 Servers
Redis全局ID生成器的实现
2022/06/05 Redis