weixin_42597880的博客

原创 typescript学习(四)——泛型

泛型泛型：软件工程中，不仅要创建一致的定义良好的API，同时也要考虑可重用性，组件不仅能够支持当前的数据类型，同时也能支持未来的数据类型，这在创建大型系统时提供了十分灵活的功能。在像c#和java这样的语言中，可以使用泛型来创建可重用的组件，一个组件可以支持多种类型的数据，这样用户就能用自己的数据类型来使用组件。所以，泛型是解决类、接口、方法的复用性，以及对不特定数据类型的支持。泛型函数// 普通的对不同类型函数的实现// 对每个类型都实现一遍函数 或 用any数据类型function get

原创 typescript学习(三)——类

类的定义在es6中，为了让js类的写法更像面向对象的形式，引入了class语法糖实现类。ts中的类是在es6的基础上加上类型强定义实现的。阮一峰教程：es6类的实现类的继承——extends关键字类的修饰符public公有类型：变量在当前类里面、子类、类外面都可以访问protected保护类型：变量在当前类里面、子类中可以访问，在类外面不能访问private私有类型：只能在当前类里面访问，子类、类外部无法访问不加修饰符时，默认是公有类型属性静态属性、静态方法多态——继承的一种多态

原创 typescript学习（二）——函数

一、函数的定义// 1. 函数声明法// 规定返回值必须为string类型function run():string { return 'im string'}// 2. 匿名函数法let run = function():string { return 'im string'}// 没有返回值时function run():void { return 'im string'}二、函数传参es5中方法的实参和形参数目可以不一致，但ts中必须一致，当可能存在不一致情况时要配置可

原创 typescript学习(一)——介绍和基本类型

介绍是微软开发的开源编程语言是javascript的超集，遵循最新的es6、es5规范，且ts扩展了js语法更像后端java、c#这样的面向对象语言，可以让js开发大型企业项目vue、react、nestjs、midway用可以用ts语法数据类型布尔: var flag:boolean = true数字（number）字符串（string）数组（array）// 1. 定义数组方式一let arr:number[] = [1, 2, 3]// 2.定义数组方式二let a

原创 计划中的前端进阶学习方向

原创 数据结构——二叉堆和优先队列

一、概念队列和堆都是一种数据结构，优先队列是用二叉堆实现的。优先队列和堆常用语辅助实现其它算法，例如数据压缩赫夫曼编码算法、Dijkstra最短路径算法、Prim最短生成树算法，优先队列还可以实现事件模拟、选择问题，操作系统的线程调度也使用优先队列。优先队列特点：元素正常入队，按照优先级大小出队。实现方式：有序表或无序表（即数组，或顺序表和链表）、二叉树、AVL平衡二叉树、堆和二叉堆。使用普通的表实现优先队列的性能比较低，有序表插入为O(1)，无序表取出为O(n)，另外使用普通二叉树实现优先队列只能

原创 js中数组和字符串常用api总结

一、数组Array1. Array构造函数方法Array.from 常用指数：两颗星从类似数组或迭代器对象中构造函数，包括dom元素数组、集合Set、字典Map、arguments等等。2. 原地修改数组方法3. 生成新数组的方法4. 遍历方法5. 获得索引方法二、字符串String1. String构造函数方法2. 原地修改字符串方法3. 生成新字符串的方法4. 遍历方法5. 获得索引方法...

原创 算法心得——二分查找

二分查找模板二分查找常用在有序数组中找到某个元素或插入某个元素，关于二分查找方法的详细介绍和分析可以看力扣上这一篇大神级题解：用「排除法」（减治思想）写二分查找问题、与其它二分查找模板的比较。对区间的选取不同会有很多种不同的模板，这里只把我最常用的思路模板写一下：left = 0right = arr.lenght-1while(left < right) { // 注意这里是向下取整 mid = Math.floor((left + right)/2) if(target > a

原创 css-in-js之style-components的使用

css-in-jsreact是用js写html的框架，为了在react框架中使用js编写一切代码，使用css-in-js库编写css代码，style-components是近期使用人数最多的css-in-js库，它的优点如下：可以编写实际的CSS代码来设计组件样式，也不需要组件和样式之间的映射，即创建后就是一个正常的React 组件，直接在JSX中引入即可在一个组件内会将结构、样式和逻辑写在一起，虽然这违背了关注点分离的原则，但是这有利于组件间的隔离。为了顺应组件化的潮流使用styled-comp

原创 算法心得——排序

简单排序主要操作：比较两个数据项、交换两个数据项或复制其中一项，具体操作要看排序的类型。1.冒泡排序运行效率较低, 但是在概念上它是排序算法中最简单的，最适合初学的一种排序，具体思路为：对未排序的各元素从头到尾依次比较相邻的两个元素大小关系如果左边的队员高, 则两队员交换位置向右移动一个位置, 比较下面两个队员当走到最右端时, 最高的队员一定被放在了最右边继续从最左边开始排序，把第二高的队员排到倒数第二位置上依此类推，完成排序ArrayList.prototype.bubbleSor

原创 数据结构——树

1.前序遍历// 递归var preorderTraversal = function(root) { let res = [] let preorder = function(node) { if(!node) return res.push(node.val) preorder(node.left) preor...

原创 数据结构——栈与深度优先遍历

栈的应用力扣739:每日温度1.递减栈的使用let Node = function(idx, val) { this.idx = idx; this.val = val;}var dailyTemperatures = function(T) { const len = T.length; if(!len) return []; let stack...

原创 数据结构——队列与广度优先遍历

一、队列的特点先进先出队列的应用广度优先搜索// 模板function BFS(root, target) { // 定义队列，存入根节点 let queue = [root]; // 每一层到根节点的距离 let step = 0; // 使用哈西表防止重复访问同一个节点 let hash = new Set(); hash.set(root); // 队列不为空就说明...

原创 一些小众算法

1.摩尔投票在一些候选人中选出得票最多的那个，分为两个阶段：对抗阶段：分属两个候选人的票数进行两两对抗抵消计数阶段：计算对抗结果中最后留下的候选人票数是否有效可看例题：力扣169:多数元素// 伪代码major ＝ arr[0] // 保存当前票数最多候选人，初值为第一个候选人count ＝ 1 // 当前最多候选人票数循环剩下的候选人： arr[i]当前候选人 != ...

原创 算法心得——动态规划

二、动态规划非常重要：找状态方程

原创 算法心得——链表

一、双指针法使用两个指针遍历链表，一般有以下几种使用情况：快指针走两步，慢指针走一步：判断链表是否有环、找到链表中点快指针先走，到一定判断条件后慢指针再走：找倒数第几个节点双指针交叉遍历两个链表：相交链表力扣141:环形链表若存在环，快慢节点总会在环中相交var hasCycle = function(head) { if(!head) return false; ...

原创 数据结构——链表

单链表线性表的链式存储，包含两个域，一个存储的值(this.data)，一个指向下一个链表节点(this.next)。封装链表类，添加链表的属性：链表节点、头部（链表的起始点）、长度。// 封装链表类 function LinkedList() { // 内部的类：节点类 function Node(data) { this.d...

原创 html5和css基础知识——第二节

iframe在这个页面嵌入另一个网页，iframe是一个可替代元素可替换元素特点：通常是行盒通常显示的内容取决于元素的属性（src）CSS不能完全控制其中的样式具有行块盒的特点通常用来放置别人网站的视频（嵌入代码）（1）嵌入其他网页iframe { width:500px; height:500px;}<iframe src="https://www.b...

原创 html5和css基础知识——第一节

某些元素在显示时会独占一行（块级元素），而某些元素不会（行级元素），行级元素和块级元素只是一种显示效果，在HTML中，弃用这种说法，因为语义化，元素代表的只是语义，而不是显示效果文本元素<h><p><span>：没有任何语义<pre>：预格式化文本元素，保留源代码格式显示到页面上，该元素通常用于在网页中显示一些代码，不会出现空白折叠空白...

原创 webpack与vue的使用

一、安装 webpack 和 webpack-cli运行npm i webpack -g npm i webpack-cli -g全局安装webpack，这样就能在全局使用webpack的命令在项目根目录中运行npm i webpack --save-dev安装到项目依赖中由于版本变动，webpack和webpack-cli的安装有些不一样，还需再探讨https://segmentfa...

原创 科研中遇到的c++知识

1.extern关键字可以置于变量或者函数前，以标示变量或函数的定义在别的文件中，提示编译器遇到此变量和函数时在其他模块中寻找其定义。此外，extern也可用来进行链接指定2.库函数sscanf作用：从一个字符串中读进与指定格式相符的数据，利用这个函数可以从字符串中取出整数、浮点数和字符串sscanf和scanf的区别：scanf是以键盘作为输入源，sscanf是以字符串作为输入源。...

原创 JSON与异步加载

1.前后端数据传输——JSON本来用XML传输数据<student> <name>deng</name> <age>40</age></student>数据库的基础格式也是XML现在改为对象的形式，即JSON{ "name" : "deng", "age" : 40}通常对象的属性名可...

原创 学习DOM第四节——事件

1.绑定事件的方法0级事件处理程序//方式一div.onclick = function() { console.log('a');}//方式二<div style = "width: 100px; height: 100px;" onclick = "console.log('a')"></div>//删除事件绑定div.onclick = nu...

原创 学习DOM第一节

1.查看document代表整个文档节点document.getElementById(‘ID’);只能获取到一个元素。IE8以下的浏览器中，ID不区分大小写，且在没有ID时可以匹配name属性的元素，但是ID一个页面只能出现几次，标识片段名，因此少用document.getElementsByTagName(‘tag’);以类数组的形式存储，即使只有一个，但是没有push方法doc...

原创 学习JS第九节——try..catch

1.try…catch在try中发生错误，不会执行错误后的try里面的代码，但是会执行catch中的代码try { console.log('a'); console.log(b); //错误语句，在try中不报错，继续执行后续代码 console.log('c'); //在错误信息后，不执行} catch(e) { //error.name error.mess...

原创 学习JS第八节——数组

1.三目运算符var num = 判断条件 ? 返回式一 : 返回式二;2.数组定义方法var arr = [1,2,3];数组可以自动伸长var arr[10] = 10;//数组长度就是11var arr = new Array(1,2,3);两者的区别是，第二种可以直接定义数组的长度var arr = new Array(10);，第一个不可以，但是第二个的参数不能...

原创 学习JS第七节——继承

1.继承的方式原型链继承了太多没用的属性借用构造函数(call方法)function Person(name, age, sex) { this.name = name;}（1）不能继承构造函数的原型（2）在视觉上省了空间，但是每次构造函数都要多走一个构造函数共享原型Father.prototype.lastName = "Deng";function Fathe...

原创 学习JS第六节——原型链

1. 原型定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先，通过该构造函数产生的对象，可以继承该原型的属性和方法，原型也是对象。//Person.prototype -->原型//Person.prototype = {} -->这是祖先，也是对象//用原型给构造函数添加属性Person.prototype.LastName = "D...

原创 学习JS第五节——对象

1.对象var person = { name : "kathy", age : 24, sex : "male", health : 100, smoke : function() { console.log('smoke!'); person.health --; //在对象方法中调用对象的属性，也需要加上对象名称 //不然系统不知道调用的是谁的对象 //也可以...

原创 学习JS第四节——作用域、闭包、立即执行函数

1.函数的隐式属性[[scope]]：运行期上下文：函数每次执行时都会产生一个上下文，这个上下文AO为即时的，因此执行完就被销毁4.闭包的优点：5.立即执行函数：多用于只执行一次的函数，因为执行一次后立即销毁，避免占用过多内存（初始化功能的函数）(function() {}() )只有表达式才能被执行符号执行能被执行符号执行的表达式，会放弃名字！ &am...

原创 学习JS第二节——操作符

1.&&逻辑操作符注意：两个表达式var a = 1 && 2;document.write(a);//输出2var b = 0 && 2document.write(b);//输出0先看第一个表达式转换成布尔值结果，如果第一个为真，那么直接返回第二个表达式结果；如果第一个表达式转换为布尔值的结果为0，则直接返回第一个表达式的...

原创 学习JS第三节——函数

一、函数定义函数定义方法一function abc() {}abc(); //调用函数console.log(abc);//输出 function abc = {}函数名字就代表了它的函数体函数定义方法二（1）命名函数表达式var test = function abc() { }console.log(abc);//报错console....

原创 学习JS第一节——浏览器基本知识

浏览器组成：shell部分：所有能看到的部分内核部分-渲染引擎（HTML、CSS、JS的语法识别和渲染）-js引擎：负责执行JS-其他模块2008年Google发布浏览器Chrome，采用优化后的JavaScript引擎，引擎代号V8，可以把js代码直接转化为机械码来执行，速度很快。语言分类编译型语言：通篇翻译后生成一个文件（比如c++的.obj文件），操作系统执行这个文...

原创 promise

promise的用途promise是把类似的异步处理对象和处理规则进行规范化，并按照采用统一的接口来编写，而采取规定方法之外的写法都会报错。基本语法为：new Promise ( //执行器 executor function (resolve, reject) { //一段耗时很长的异步操作 resolve(); //数据处理完成 reject(); //数据处理出错 ...

原创 浏览器存储

一、客户端存储历程远古时期(a) cookies(b) userdataHTML5时代(a) localstorage(b) application cache© indexedDB二、远古时代存储方式1.服务器端存储位置：cache：从CB、磁盘上拿出来的东西，存放于内存磁盘文件：资源文件，如图片、视频数据库：mysql等内存：频繁使用的，提高读取效率2.用c...

原创 块级格式上下文BFC

1.Block formatting context=block-level box+Formatting ContextBFC（Block formatting context）直译为“块级格式化上下文”，是一个独立的渲染区域，只有块级元素参与，规定了块级元素如何布局，并且与这个区域外部毫不相干。Box是CSS布局的对象和基本单位，一个页面就是由很多Box组成的，元素类型和display属性...

原创 前端路由理解

前端路由在很多开源的js类库框架中都得到支持，如angular，react等。一、路由（route）定义路由是url到函数的映射，可以根据不同的url地址展示不同的内容或页面。/users -> getAllUsers()/users/count -> getUsersCount()这就是两条路由，当访问 /users 的时候，会执行 getAllUs...

原创 图形可视化与Web图像技术介绍

一、SVG：可伸缩的矢量图形（声明式方法：保留模式图形绘制）SVG 本身是基于 XML 的一种独立的数据格式，用于声明式的 2D 矢量图形。但是，它也可以嵌入到 HTML 文档中，这是所有主流浏览器都支持的。使用 SVG 绘制一个可调整大小的圆：<html style="height: 100%; width: 100%"> <body style="height: 1...

原创 JavaScript的性能优化：加载和执行

一、页面加入脚本的缺点HTML中无论JavaScript是内嵌还是外链在文件中，都有以下特性：页面的下载和渲染都必须停下来等待脚本执行完成（浏览器必须先花时间下载外链文件中的代码，然后解析并执行它）；执行时间耗时越久，浏览器等待响应用户输入的时间就越长（页面渲染和用户交互完全被阻塞了）；脚本可能会改变页面或JavaScript的命名空间，对后面页面内容造成影响。二、脚本位置的影响脚...

原创 BOM和DOM详解

一、DOM和BOM的联系和区别DOM（文档对象模型）HTML 和 XML 的应用程序接口（API）。DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过js去读取这张地图。BOM主要处理浏览器窗口和框架， window对象对应着浏览器窗口本身，这个对象的属性和方法通常被称为BOM弹出新的浏览器窗口移动、关闭浏览器窗口以及调整窗口大小...