前端算法codewhy第一章: 邂逅数据结构与算法

news2024/9/25 9:39:58

第一章: 邂逅数据结构与算法

image-20230221102749761

编程的真相 – 数据的处理

image-20230221103022209

数据结构与算法的本质

image-20230221103057649

学习数据结构与算法到底有什么实际应用?

image-20230221103315359

源码中的数据结构

image-20230221103328829

image-20230221103351092

image-20230221103416717

如何学习数据结构与算法?

image-20230221103447354

TypeScript常见数据结构与算法

image-20230221103518537

image-20230221103524474

到底什么是数据结构

image-20230221103557006

什么是数据结构(Data Structure)

image-20230221103642631

如何摆放图书?

image-20230221103725169

image-20230221103743911

image-20230221103751440

image-20230221103859752

常见的数据结构

image-20230221104131016

什么是算法?

image-20230221104209374

生活中的数据结构与算法

image-20230221104430653

image-20230221104443807

第一章:线性结构 – 数组

MDN

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

线性结构(Linear List)

image-20230221104955284

数组(Array)结构

image-20230221105025653

第一章:栈结构(Stack)

画图解决问题:合法出栈顺序–入栈随意,只要满足后进先出(先进后出)的规则即可

image-20230221150322614

认识栈结构

image-20230221165101346

image-20230221170209467

栈结构面试题

image-20230221170328712

栈结构的实现

image-20230221170413347

创建栈的类

image-20230221170426997

栈的操作

image-20230221170517564

ts代码的运行环境

1.浏览器–需要通过webpack等环境才能运行

2.node–需要同个ts-node库 运行代码

image-20230221162814180

安装库 npm install ts-node

pm install ts-node

ts-node -v

ts-node 文件名

注意点
默认ts代码在同一个作用域下,所以如果定义的类名重复的话,可以通过export {} ,将我们每个ts文件变成单独的模块
export {}

01_实现栈结构Stack.ts

// 封装一个栈
class ArrayStack {
  // 定义一个数组/链表, 用于存储元素
  // private私有变量
  private data: any[] = []

  // 实现栈中相关的操作方法
  // push方法: 将一个元素压入到栈中
  push(element: any): void {
    this.data.push(element)
  }

  // pop方法: 将栈顶的元素弹出栈(返回出去, 并且从栈顶移除掉)
  pop(): any {
    return this.data.pop()
  }

  // peek方法: 看一眼--查看栈顶元素, 但是不进行任何的操作
  peek(): any {
    return this.data[this.data.length - 1]
  }

  // isEmpty: 判断栈是否为空
  isEmpty(): boolean {
    return this.data.length === 0
  }

  // 返回栈的数据个数
  size(): number {
    return this.data.length
  }
}


// 创建Stack的实例
const stack1 = new ArrayStack()
stack1.push("aaa")
stack1.push("bbb")
stack1.push("ccc")

console.log(stack1.peek())
console.log(stack1.pop())
console.log(stack1.pop())
console.log(stack1.pop())

console.log(stack1.isEmpty())
console.log(stack1.size())

export {}

02_实现栈结构Stack(重构)

import IStack from "./IStack";

// 封装一个栈: TypeScript => AnyScript  ArrayStack< T=any > 泛型默认值
//  ArrayStack<T> 泛型 调用的时候传入泛型类型 例如 const stack1 = new ArrayStack<string>()
class ArrayStack<T> implements IStack<T> {
  // 定义一个数组/链表, 用于存储元素
  private data: T[] = [];

  // 实现栈中相关的操作方法
  // push方法: 将一个元素压入到栈中
  push(element: T): void {
    this.data.push(element);
  }

  // pop方法: 将栈顶的元素弹出栈(返回出去, 并且从栈顶移除掉)
  pop(): T | undefined {
    return this.data.pop();
  }

  // peek方法: 看一眼栈顶元素, 但是不进行任何的操作
  // T | undefined联合类型 如果没有数据栈是pop()不出任何东西值,返回值为undefined类型
  peek(): T | undefined {
    return this.data[this.data.length - 1];
  }

  // isEmpty: 判断栈是否为空
  isEmpty(): boolean {
    return this.data.length === 0;
  }

  // 返回栈的数据个数
  size(): number {
    return this.data.length;
  }
}

export default ArrayStack;

03_实现栈结构Stack(链表)

import IStack from './IStack'

class LinkedStack<T> implements IStack<T> {
  // 创建一个链表结构

  push(element: T): void {
    throw new Error('Method not implemented.')
  }
  pop(): T | undefined {
    throw new Error('Method not implemented.')
  }
  peek(): T | undefined {
    throw new Error('Method not implemented.')
  }
  isEmpty(): boolean {
    throw new Error('Method not implemented.')
  }
  size(): number {
    throw new Error('Method not implemented.')
  }
}

export {}

IStack接口的封装

import IList from "../types/IList"

// 定义栈的接口
interface IStack<T> extends IList<T> {
  push(element: T): void
  pop(): T | undefined
  // peek(): T | undefined
  // isEmpty(): boolean
  // size(): number
}

export default IStack

types-》 IList.ts
export default interface IList<T> {
  // peek
  peek(): T | undefined
  // 判断是否为空
  isEmpty(): boolean
  // 元素的个数
  size(): number
}


十进制转二进制(面试题)

前提知识:

接口

相当于一个约束,让对象遵循约束,保持一致

image-20230221221723943

泛型(Generics):

泛型是指在定义函数、接口或者类的时候。不预先指定具体的类型,而在使用的时候在指定类型的一种特性

泛型变量T T表示任何类型

// 泛型(Generics):是指在定义函数、接口或者类的时候。不预先指定具体的类型,而在使用的时候在指定类型的一种特性

// 泛型变量T    T表示任何类型
// 基础写法
function f4(x: number, y: number): number[] {
  return [x, y];
}

f4(10, 20);

function f5(x: string, y: string): string[] {
  return [x, y];
}

f5("1111", "111");

function f6(x: boolean, y: boolean): boolean[] {
  return [x, y];
}

f6(true, false);

// 泛型写法 泛型最关键是写在定义函数后参数前的位置,调用函数后传入参数前的位置
function f7<T>(x: T, y: T): T[] {
  return [x, y];
}
f7<number>(10, 20);
f7<string>("1111", "111");
f7<boolean>(true, false);

function f8(x: string): number {
  return x.length;
}

f8("forever fsf");
//   报错 ,T是  T表示任何类型 但是并不是任何类型都有length属性,所以我们需要要泛型约束
function f9<T>(x: T): number {
  return x.length;
}

f9<string>("forever fsf");

//   泛型约束 extends
interface LengthNum {
    // 泛型约束 ,类型必须有length属性
  length: number;
}
// 这里的T任意类型就受到了LengthNum的泛型约束--传入的类型中必须有length属性
function f10<T extends LengthNum>(x: T): number {
    return x.length;
}
f10<string>("forever fsf");
// 报错 类型“number”不满足约束“LengthNum”。
f10<number>("forever fsf");

泛型接口

// 泛型接口
// 定义函数,判断传入的参数是否相同
// js写法
// let fn1 = function (s1, s2) {
//   return s1 == s2;
// };
// fn1("a", "b");
// ts基本写法
let fn2 = function (s1: string, s2: string): boolean {
  return s1 == s2;
};
fn2("a", "b");

// 另一个实例函数
// js写法
// let fn3 = function (x, y) {
//   if (x > y) {
//     return true;
//   } else {
//     return false;
//   }
// };
// fn3("a", "b");
// ts基本写法
let fn4 = function (x: string, y: string): boolean {
  if (x > y) {
    return true;
  } else {
    return false;
  }
};
fn4("x", "y");

// ts定义接口写法
// 定义规范 共同的部分提取出来,定义规范,变成接口
// interface InspectFn {
//   (x: string, y: string): boolean;
// }

// let fn1: InspectFn = function (s1, s2) {
//   return s1 == s2;
// };

// fn1("x", "y");
// 定义规范 共同的部分提取出来,定义规范,变成接口
// let fn3: InspectFn = function (x, y) {
//   if (x > y) {
//     return true;
//   } else {
//     return false;
//   }
// };

// 下一步,对我们的接口类型添加泛型
// 先阶段意思表示 只要是传入两个参数,返回值是boolean类型的,都可以收到这个接口的约束
interface InspectFn {
  <T>(x: T, y: T): boolean;
}
let fn1: InspectFn = function (s1, s2) {
  return s1 == s2;
};

fn1<string>("x", "y");

let fn3: InspectFn = function (x, y) {
  if (x > y) {
    return true;
  } else {
    return false;
  }
};
fn3<number>(10, 5);

要把十进制转化成二进制,我们可以将该十进制数字和2整除(二进制是满二进一),直到结果是0为止。

计算出来的余数:后放进来的余数,在组成二进制的时候是放在高位的

image-20230221175401185

image-20230221175448063

04_面试题一-十进制转二进制

console.log(stack.pop()); 打印的时候 调用方法的时候,里面的变量或者值也会改变值

import ArrayStack from "./02_实现栈结构Stack(重构)"

function decimalToBinary(decimal: number): string {
  // 1.创建一个栈, 用于存放余数
  const stack = new ArrayStack<number>()

  // 2.使用循环: 
  // while: 不确定次数, 只知道循环结束跳转 
  // for: 知道循环的次数时
  while (decimal > 0) {
    const result = decimal % 2
    stack.push(result)

    decimal = Math.floor(decimal / 2)
  }ts

  // 3.所有的余数都已经放在stack中, 以此取出即可
  let binary = ''
  while (!stack.isEmpty()) {
    binary += stack.pop()
  }

  return binary
}


console.log(decimalToBinary(35))
console.log('------')
console.log(decimalToBinary(100))

export {}

有效的括号 – 字节、华为等面试题

https://leetcode.cn/problems/valid-parentheses/description/

image-20230221204829872

if语句的写法

import ArrayStack from "./02_实现栈结构Stack(重构)";
// 成对出现,一一对应
function isValid(s: string): boolean {
  // 1.创建栈结构
  const stack: string[] = [];

  // 2.遍历s中的所有的括号
  for (let i = 0; i < s.length; i++) {
    const c = s[i];
    if (c === "(") {
      stack.push(")");
    } else if (c === "{") {
      stack.push("}");
    } else if (c === "[") {
      stack.push("]");
    } else {
      if (c !== stack.pop()) return false;
    }
  }

  return stack.length === 0;
}

console.log(isValid("()"));
console.log(isValid("([)]){}"));
console.log(isValid("(]"));

export {};

switch语句写法

import ArrayStack from './02_实现栈结构Stack(重构)'
// 成对出现,一一对应
function isValid(s: string): boolean {
  // 1.创建栈结构
  const stack: string[] = []

  // 2.遍历s中的所有的括号
  for (let i = 0; i < s.length; i++) {
    const c = s[i]
    switch (c) {
      case "(":
        stack.push(")")
        break
      case "{":
        stack.push("}")
        break
      case "[":
        stack.push("]")
        break
      default:
        if (c !== stack.pop()) return false
        break
    }
  }

  return stack.length === 0
}

console.log(isValid("()"))
console.log(isValid("([]){}"))
console.log(isValid("(]"))

export {}

第一章:内容回顾

注意点:不管在哪里调用方法都会执行,不论是全局调用,局部调用,console.log打印调用,甚至是if等条件语句中调用都会执行

到底什么是线性结构

image-20230221102607324

十进制转二进制的计算过程

image-20230221102632597

有效括号的解题思路

image-20230221102647252

一. 邂逅数据结构与算法

1.1. 编程尽头、数据结构

1.2. 实际的应用场景

  • 源码: Vue/React/Webpack/Java…
  • 大厂面试

1.3. 如何学习数据结构与算法

  • 优质的文章
  • 看书: 算法
  • LeetCode
  • 视频课程

二. 线性结构 - 数组

2.1. 什么线性结构

2.2. 数组 - 连续的内存

三. 栈结构 - Stack

3.1. 栈结构的认识和特性

  • 先进后出
  • 后进先出

3.2. 栈结构的特性 - 笔试题

3.3. 栈结构的封装和实现

3.4. 栈结构的代码重构

  • 泛型
  • 接口设计

3.5. 面试题一 - 十进制转二进制

3.6. 面试题二 - 有效的括号

image-20230222101841113

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/367438.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据库系统之并发控制(重点标记)

1. 并发控制概述 事务是并发控制的基本单位&#xff0c;并发控制机制的任务是&#xff1a; 对并发操作进行正确调度。保证事务的隔离性。保证数据库的一致性。 数据不一致及其原因 并发操作带来的数据不一致性主要包括丢失修改&#xff0c;不重复读和读“脏”数据。产生三类数…

Appium自动化测试 Inspector定位Webview/H5页面元素

目录操作步骤Python操作该混合App代码Appium在操作混合App或Android App的H5页面时, 常常需要定位H5页面中的元素, 传统方式是 FQ 使用Chrome://inspect来定位元素, 环境准备相当繁琐, 不仅需要想办法FQ, 而且还需要Android设备安装Google框架以及手机版Chrome浏览器以及相应的…

图片分类 STL-10 数据集下载及使用指南

转载自安全验证 - 知乎 这次给大家介绍的 STL10数据集&#xff0c;是图片分类任务早期常用的基准数据集之一&#xff0c;虽然只有10种样本&#xff0c;图片尺寸也偏小&#xff0c;但是标注类型比较平衡&#xff0c;各种种类都有各500张&#xff08;train&#xff09;/800张&am…

深度解析linux的文件系统

背景&#xff1a;虚拟文件系统&#xff08;有时也称作虚拟文件交换&#xff0c;更常见的是简称VFS)作为内核子系统&#xff0c;为用户空间程序提供了文件和文件系统相关的接口。系统中所有文件系统不但依赖VFS共存&#xff0c;而且也依靠VFS系统协同工作。通过虚拟文件系统&…

动态规划(一):01背包问题和完全背包问题

动态规划 目录动态规划1.01背包问题1.1题目介绍1.2思路一介绍(二维数组)1.3思路二介绍(一维数组) 空间优化1.4思路三介绍(输入数据优化)2.完全背包问题2.1题目描述&#xff1a;2.2思路一(朴素算法)2.3思路二(将k优化处理掉)2.4思路三(优化j的初始条件)总结1.01背包问题 1.1题目…

求职-进度

2-23 投递 恒生校招 C https://campus.hundsun.com/personal/deliveryRecord 投递 合合信息 大数据开发工程师 https://intsig.zhiye.com/personal/deliveryRecord 投递 尚游网络 游戏服务器开发工程师 https://app.mokahr.com/campus_apply/shangyou/36582?recommendCodeDS…

项目管理中,哪些信息差是不应该存在的呢?

在项目管理中&#xff0c;如果存在信息差&#xff0c;那么就会存在了巨大的问题&#xff0c;从而导致项目的失败。 项目管理中哪些信息差是不应该存在的呢&#xff1f; 1、项目背景 项目经理接手项目&#xff0c;首先要了解清楚项目背景&#xff0c;避免在项目过程中对自己…

计算句子向量相似度:SentenceBert和SimCSE

SentenceBert Sentence-BERT: 如何通过对比学习得到更好的句子向量表示 - 哔哩哔哩 (bilibili.com) (229条消息) Sentence-BERT详解_数学家是我理想的博客-CSDN博客_sentence-bert 动机&#xff1a; 直接把2个句子串联起来输入Bert做分类&#xff08;即Cross-Encoder方式&…

Blazor入门100天 : 身份验证和授权 (6) - 使用 FreeSql orm 管理ids数据

目录 建立默认带身份验证 Blazor 程序角色/组件/特性/过程逻辑DB 改 Sqlite将自定义字段添加到用户表脚手架拉取IDS文件,本地化资源freesql 生成实体类,freesql 管理ids数据表初始化 Roles,freesql 外键 > 导航属性完善 freesql 和 bb 特性 本节源码 https://github.com/…

Maven基础-又简单又详细

如果文章对你有帮助欢迎【关注❤️❤️❤️点赞&#x1f44d;&#x1f44d;&#x1f44d;收藏⭐⭐⭐】一键三连&#xff01;一起努力&#xff01; 一、Maven简介 1、maven是什么 Maven的本质是一个项目管理工具&#xff0c;将项目开发和管理过程抽象成一个项目对象模型&#x…

JavaTCP通信程序

3 TCP通信程序 3.1 TCP通信原理 TCP通信协议是一种可靠的网络协议&#xff0c; 它在通信的两端名建立一个Socke对象&#xff0c; 从而在通信的两端形成网络虚拟链路一旦建立了 虚拟的网络链路&#xff0c;两端的程序就可以通过虚拟链路进行通信Java对基于TCP协议的的网络提供…

python3.11.2安装 + pycharm安装

下载 &#xff1a;https://www.python.org/ 2.双击下载的软件&#xff1a; 3.进入安装界面 下一步&#xff0c;点击 是 上一步点击后就看到如下&#xff1a; 安装成功了&#xff0c;接下来检测一下&#xff1a;cmd 安装pycharm PyCharm是一种Python IDE&#xff08;Integr…

office三件套与mathtype的安装和导入word

0. 前言 网上大部分说的不够具体&#xff0c;说的比较具体的就是下面这篇文章&#xff0c;但关键他路径还是错的。 MathType如何导入word 可能因为他是32位系统&#xff0c;所以office中某些路径和设置不一样&#xff0c;下文中一一指出。 mathtype导入word0. 前言1. 安装1.…

springboot整合springdata jpa全能书

一&#xff1a;spring data jpa介绍 spring data:其实spring data就是spring提供了一个操作数据的框架。而spirng data jpa只是spring data框架下的一个基于jpa标准操作数据的模块。 spring data jpa&#xff1a;基于jpa的标准对数据进行操作。简化操作持久层的代码。只需要编…

GEE学习笔记 五十二:Google Earth Studio初体验

Google Earth Studio出来一段时间了&#xff0c;自己也体验了一番。这里做一个简单的体验总结&#xff0c;为那些还没有体验过的小伙伴展示一下Google Earth Sutdio究竟长什么样子&#xff0c;能做什么&#xff1f; 注&#xff1a;这篇文章营养价值不大&#xff0c;纯粹是展示…

京东测开岗3+1面经+经验分享,拿到offer,月薪34k....

现在&#xff0c;招聘黄金时间已经来临&#xff0c;在网上看了很多大佬的面经&#xff0c;也加了很多交流群&#xff0c;受到了很多朋友的提点&#xff0c;今天终于轮到我来分享面经啦&#xff0c;之前面试了几家公司&#xff0c;最后拿到了京东测试岗的 offer&#xff0c;这里…

【机器学习、深度学习】损失函数

1.什么是损失函数 ​ 损失函数&#xff08;Loss Function&#xff09;又叫做误差函数&#xff0c;用来衡量算法拟合数据的好坏程度&#xff0c;评价模型的预测值与真实值的不一致程度&#xff0c;是一个非负实值函数&#xff0c;通常使用L(Y, f(x))​来表示&#xff0…

canvas初学1

前端数据可视化方案&#xff1a; 一、canvas绘制直线 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewpor…

CentOS 8利用Apache安装部署文件服务器

1&#xff1a;部署的目的是做一个类似下面开源镜像网站&#xff0c;把一些软件或者资料上传到服务器上面&#xff0c;减少用户在互联网上下载资料&#xff0c;提高效率&#xff0c;减少病毒。 2&#xff1a;使用下面的命令配置本机的IP地址主机名等信息。后期使用IP地址进行访问…

任意网络环境实现外网访问分销ERP

随着企业业务的不断扩展&#xff0c;经营网点遍布全国不同的区域&#xff0c;传统的管理手段存在诸多问题&#xff0c;无法实时监控各地分公司、办事处及营业网点的经营状况&#xff1b;订货、销售、库存等数据和信息反馈不及时&#xff0c;商品积压、缺货情况经常出现&#xf…