学习数据结构非常重要。首要原因是数据结构和算法可以很高效的解决常见问题。作为前端,通过javascript学习数据结构和算法要比学习java和c版本容易的多。

在讲数据结构之前我们先了解一下ES6的一些方法。因为这可能对我们了解数据结构有帮助。

ES6操作数组的方法

首先我们来用箭头函数定义一个函数。

const isEven = x => x % 2 === 0;
let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];

1.event方法迭代

此方法会迭代数组中每个元素,如果每个元素都返回true,此方法才会返回true.

numbers.every(isEven);

因为并不是每个数字都是偶数。所以返回false;

2.some方法迭代

此方法会迭代数组中每个元素,如果有元素都返回true,此方法才会返回true.

numbers.some(isEven);

因为有偶数元素,所以返回true;

3.forEach方法迭代

此方法会迭代数组中的每个元素,然后分别执行传入的回到函数。

number.forEach(callback);

4.map方法迭代

此方法会将数组的每个元素通过回调函数,并将每个返回值组成新的数组返回。

numbers.map(isEven);

返回[false,true,false,true,false,true,false,true,false,true,false,true,false,true,false];

5.filter方法迭代

此方法返回的新数组由使回调函数返回true的元素组成。

numbers.filter(isEven);

因为2,4,6,8,10,12,14模2等于0;所以返回[2,4,6,8,10,12,14];

6.reduce方法迭代

此方法有四个参数previousValue,currentValue,index,array.后连个参数为可选参数,可以不传。这个函数会返回一个将被叠加到叠加器的值。

numbers.reduce((previous, current) => previous + current)

我们来分解一下reduce执行过程。第一个previous为1,current为2 return为1+2=3。在第二次迭代中previous为上一个迭代的返回值3,current为3, return为6 …因此最后返回120。

除此之外,ES6还新增了很多语法糖。有兴趣的同学可以去阮大神的个人博客。

1.什么是栈?

基础的东西简单的介绍完了,接下来我们来点干货。那么什么是栈呢?栈是一种遵从后进先出(LIFO)原则的有序集合。新添加和待删除的元素都保存在栈的同一端,称作栈顶,另一端就叫栈底。在栈里,新元素都靠近栈顶,旧元素都接近栈底。就像生活中厨房里叠放的盘子。

2.创建基于JavaScript数组的栈

先从声明一个Stack类开始。

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

接下来我们添加一些方法。

  • 1.push(element);添加元素到栈顶
  • 2.pop();移除栈顶元素,并返回移除元素
  • 3.peek();返回栈顶的元素
  • 4.isEmpty();如果站里没有元素则按返回true,反之返回false
  • 5.clear();移除栈里所有元素
  • 6.size();返回栈里元素个数

push方法

push(element) {
this.items.push(element);
}

pop方法

pop() {
return this.items.pop();
}

peek方法

peek() {
return this.items[this.items.length - 1];
}

isEmpty方法

isEmpty() {
return this.items.length === 0;
}

clear方法

clear() {
this.items = [];
}

size方法

size() {
return this.items.length;
}

3.创建基于JavaScript对象的栈

先从声明一个Stack类开始。

class Stack {
constructor() {
this.count = 0;
this.items = {};
}
}

接下来我们添加一些方法。

  • 1.push(element);添加元素到栈顶
  • 2.pop();移除栈顶元素,并返回移除元素
  • 3.peek();返回栈顶的元素
  • 4.isEmpty();如果站里没有元素则按返回true,反之返回false
  • 5.clear();移除栈里所有元素
  • 6.size();返回栈里元素个数

push方法

push(element) {
this.items[this.count] = element;
this.count ++;
}

pop方法

pop() {
if(this.isEmpty()) {
return undefined;
}
this.count --;
let result = this.items[this.count];
delete this.items[this.count]
return result;
}

peek方法

peek() {
if(this.isEmpty()) {
return undefined;
}
return this.items[this.count - 1];
}

isEmpty方法

isEmpty() {
return this.count == 0;
}

clear方法

clear() {
this.count = 0;
this.items = {};
}

size方法

size() {
return this.items.count;
}

toString方法

因为数组版本的栈的toString()方法可以直接使用数组提供的toString方法,为对象版则需要我们自己封装。

toString() {
if(this.isEmpty()) {
return ''
}
let objString = `${this.items[0]}`;
for(let i=1; i<this.count; i++) {
objString = `${objString},${this.items[i]}`
}
return objString;
}

这就是我们用javascript版本的栈数据结构。

4.用栈解决问题

下面我们以10进制转2进制为例,看看如何用栈决绝问题。

function decimalToBinary(decNumber) {
const remStack = new Stack();
let number = decNumber;
let rem;
let binaryString = '';
while(number > 0) {
rem = Math.floor(number % 2);
remStack.push(rem);
number = Math.floor(number / 2);
}
if(!remStack.isEmpty()) {
binaryString += this.pop().toString();
}
return binaryString;
}

这便是用数据结构解决问题。后续我会将用JavaScript讲解什么是队列、链表、集合、字典、哈希表(HashTable)、递归、树、二叉堆、图等数据结构。

原创博客:转载请注明:javascript数据结构 – 栈

javascript数据结构的更多相关文章

  1. 学习javascript数据结构(三)——集合

    前言 总括: 本文讲解了数据结构中的[集合]概念,并使用javascript实现了集合. 原文博客地址:学习javascript数据结构(三)--集合 知乎专栏&&简书专题:前端进击者 ...

  2. 学习javascript数据结构(二)——链表

    前言 人生总是直向前行走,从不留下什么. 原文地址:学习javascript数据结构(二)--链表 博主博客地址:Damonare的个人博客 正文 链表简介 上一篇博客-学习javascript数据结 ...

  3. 学习javascript数据结构(一)——栈和队列

    前言 只要你不计较得失,人生还有什么不能想法子克服的. 原文地址:学习javascript数据结构(一)--栈和队列 博主博客地址:Damonare的个人博客 几乎所有的编程语言都原生支持数组类型,因 ...

  4. javascript数据结构与算法--高级排序算法

    javascript数据结构与算法--高级排序算法 高级排序算法是处理大型数据集的最高效排序算法,它是处理的数据集可以达到上百万个元素,而不仅仅是几百个或者几千个.现在我们来学习下2种高级排序算法-- ...

  5. javascript数据结构与算法-- 二叉树

    javascript数据结构与算法-- 二叉树 树是计算机科学中经常用到的一种数据结构.树是一种非线性的数据结构,以分成的方式存储数据,树被用来存储具有层级关系的数据,比如文件系统的文件,树还被用来存 ...

  6. javascript数据结构与算法--散列

    一:javascript数据结构与算法--散列  一:什么是哈希表? 哈希表也叫散列表,是根据关键码值(key,value)而直接进行访问的数据结构,它是通过键码值映射到表中一个位置来访问记录的,散列 ...

  7. javascript数据结构与算法---队列

    javascript数据结构与算法---队列 队列是一种列表,不同的是队列只能在队尾插入元素,在队首删除元素.队列用于存储按顺序排列的数据,先进先出,这点和栈不一样(后入先出).在栈中,最后入栈的元素 ...

  8. javascript数据结构与算法---栈

    javascript数据结构与算法---栈 在上一遍博客介绍了下列表,列表是最简单的一种结构,但是如果要处理一些比较复杂的结构,列表显得太简陋了,所以我们需要某种和列表类似但是更复杂的数据结构---栈 ...

  9. javascript数据结构与算法---列表

    javascript数据结构与算法---列表 前言:在日常生活中,人们经常要使用列表,比如我们有时候要去购物时,为了购物时东西要买全,我们可以在去之前,列下要买的东西,这就要用的列表了,或者我们小时候 ...

  10. JavaScript数据结构——树

    树:非顺序数据结构,对于存储需要快速查找的数据非常有用. 二叉树:二叉树中的节点最多只能有两个子节点(左侧子节点和右侧子节点).这些定义有助于我们写出更高效的向/从树中插入.查找和删除节点的算法. 二 ...

随机推荐

  1. 20191010-6 alpha week 1/2 Scrum立会报告+燃尽图 04

    此作业的要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8749] 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 ...

  2. numpy和matplotlib下载中出现的问题

    在安装numpy的时候遇到如下所示的错误: 经过几个小时的查找,最终发现是pygame的路径不对导致.将pygame的具体路径加上后,问题解决.实施如下:得出一个结论:路径很重要,千万得小心哦. 报错 ...

  3. JavaScript笔记四

    1.运算符 逻辑运算符 ! - 非运算可以对一个布尔值进行取反,true变false false边true - 当对非布尔值使用!时,会先将其转换为布尔值然后再取反 - 我们可以利用!来将其他的数据类 ...

  4. JAVA网络通信底层调用LINUX探究

    前言:该博客花了我一个下午得心血,全部手打,路过给个赞,拒绝抄袭!!!!!!!!!!!!!!!!!!!!!!!!! 简单的SOCKET通信程序 先从一段简单的JAVA程序性开始写起,这里我们才用半双工 ...

  5. C#学习笔记03--循环和一维数组

    一.循环(重点) 什么时候用循环? 想让一段代码执行多次, 这段代码可能不一样但是一定有一个规律. 1.while 循环 格式:  while(循环条件) { 循环执行的代码; } 循环的机制:  当 ...

  6. scrapy抓取人人网上的“新鲜事”

    利用scrapy模拟登陆人人网,笔者本打算抓取一下个人页面新鲜事,感觉这个网站越做越差,都懒得抓里面的东西了.这里仅仅模拟人人网登陆,说明一下scrapy的POST请求问题. 人人网改版之后,反爬措施 ...

  7. 转载 C#中DataTable中的Compute方法使用收集

    原文: C#中DataTable中的Compute方法使用收集 Compute函数的参数就两个:Expression,和Filter. Expresstion是计算表达式,关于Expression的详 ...

  8. 有趣的动态规划(golang版本)

    多年前就听过这个动态规划,最近在复习常用算法的时候才认真学习了一下,发现蛮有意思,和大家安利一波. 定义: 准确来说,动态规划师吧一个复杂问题分解成若干个子问题,并且寻找最优子问题的一种思想,而不是一 ...

  9. 2019-2020-8 20199317 《Linux内核原理与分析》 第八周作业

    第7章  可执行程序工作原理 1  ELF目标文件格式 1.1  ELF概述        “目标文件”,是指编译器生成的文件.“目标”指目标平台目标文件一般也叫作ABI(Application Bi ...

  10. 一句话总结flux,以及我们为何需要flux

    如果让你用一句话总结一下什么是flux,该怎么说? 官网上有这样的介绍:flux是一种思想,一种框架,是facebook给react... 这样的解释对程序员来说,显得过于抽象又不具体了. 阮老师的文 ...