自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(47)
  • 收藏
  • 关注

原创 js堆排序详解

一. 堆的概念堆是一棵顺序存储的二叉树大根堆(大顶堆):其中每个节点的值都不小于其子节点小根堆(小顶堆):其中每个节点的值都不大于其子节点二. 堆排序的过程创建堆调整堆选取最值再次调整堆三.代码实现let arr = [9, 1, 2, 8, 7, 3, 4, 6, 5]function swap(arr, i, j){ let temp = arr[i] arr[i] = arr[j] arr[j] = temp}function BuildHeap(

2021-09-05 21:11:04 1156

原创 ES6-Map和Set对象以及Iterator

1.Iterator对象主要功能:为各种数据结构,提供一个统一的,简便的访问接口。使得数据结构的成员能够按某种次序排列,是有序的。是 ES6 创造了一种新的遍历命令 for…of 循环,Iterator 接口主要供 for…of 消费。使用方法如果有 Iterator 对象,则可以使用 next 方法进行遍历,就像一个指针,会按顺序指向下一项2.set对象let set = new Set( [1, 1, 2, '3', '3', true, true, {1:1}, {1:1}]

2021-07-26 11:19:48 234

原创 js中for in和for of详解

for…in 和 for…of 区别,以及使用for…of 的特性for…of 需要有 iterator 的支持才能进行遍历。有 iterator 支持的数据结构有:Array Map Set String 函数的arguments对象 NodeList对象object 对象不可以,因为 object 中的属性没有先后顺序,但是可以主动添加 iterator 属性如何添加 iterator 属性,在对象中添加 “Symbol.iterator” 属性,就可以使用 for…of 遍历了凡是部署了

2021-07-21 09:34:02 438

原创 defineProperty和Proxy的区别

1.proxy 的用法,defineProperty 的用法const myProxy = new Proxy(target, handle)// target: 使用proxy包装的目标对象// handle: 用来制定拦截行为Object.defineProperty(obj, prop, descriptor)// obj: 必需。目标对象 // prop: 必需。需定义或修改的属性的名字// descriptor: 必需。目标属性所拥有的特性 (writable:可重写 e

2021-06-27 15:59:12 1045

原创 微信小程序生命周期总结

1.微信小程序生命周期分类:应用生命周期页面生命周期组件生命周期2.小程序的应用生命周期onLaunch: 初始化小程序时触发,全局只触发一次onShow: 小程序初始化完成 或 用户从后台切换到前台时触发onHide: 用户从前台 切换到 后台时触发onError: 小程序发生脚本错误时 或 API调用失败时,会触发,并会带上错误的信息// app.jsApp({ onLaunch: function() { // 监听小程序初始化

2021-04-05 15:56:48 237

原创 微信小程序事件,data-属性的作用

1.微信小程序中的事件,以及为什么要用 data- 来绑定属性原因:因为微信小程序中不能直接使用函数传参,就是用data-来绑定一个属性,进行传参<!-- 通过 bindtap 给元素绑定事件 --><view bindtap="SetData" data-name="mxc">按钮</view>Page({ data: { name:"" }, // 事件函数与 data 同级 SetData:function(

2021-04-02 12:46:54 7886

原创 JS手写发布订阅

手写发布订阅class pubSub { constructor(){ this.list = {} } // 订阅 subscribe(key, fn) { if (!this.list[key]) { this.list[key] = [] } this.list[key].push(fn) } // 发布 publish(key, ...args) {

2021-02-17 18:53:05 581 1

原创 css实现左侧固定,右侧自适应布局,比例1:2:3

css实现左侧固定,右侧比例1:2:3布局注意: flex 由该三个属性结合 flex-grow flex-shrink flex-basis<!-- 弹性布局 --><style> .container{ height: 100px; border: 1px solid blue; display: flex; } .container>div{

2021-02-17 16:06:48 766 1

原创 node使用连接mysql,连接池数量问题

2.连接池注意:要考虑连接池数量的问题,链接数超过,服务器会崩需要通过 pool.releaseConnection(con) 该语句释放连接池const express = require('express')const app = express()const query = require('./db/index')app.get('/',async (req, res)=>{ // 通过 ? 可以给函数动态的传入参数 (?? 可以传入数据库名字) let

2021-01-17 19:38:00 517

原创 Node使用md5加密

1.加密原理解析// 引入加密模块let crypto = require('crypto')app.get('/setsecret',(req,res)=>{ let secretStr = jiami('true') res.cookie('register', secretStr, {maxAge:30000}) setCook('true',secretStr) res.send('cookie加密成功')})app.get('/getsecret'

2021-01-09 16:58:05 1402

原创 node使用cookie

1. cookie 的使用let express = require('express')let app = express()// 引入 cookie 中间件模块let cookieParser = require('cookie-parser')// 使用 cookie 中间件app.use(cookieParser('secret'))app.get('/',(req,res)=>{ // 没设置 signed if(req.cookies.isLogin){

2021-01-09 16:56:59 1804

原创 Node连接数据库,封装查询语句

1.node操作mysql//1. 导入mysql模块let mysql = require('mysql')//2. 选择要连接的数据库对象let options = { host: "localhost", user: "root", port: "3306", password: "849127663", database: "jiaowu"}//3. 创建数据库的连接对象let con = mysql.createConnection(optio

2020-12-23 23:57:40 349

原创 JS手写call,apply,bind

1.手写call,apply,bind//callFunction.prototype.myCall = function(context){ context = context || window context.fn = this let arg = [...arguments].slice(1) let result = context.fn(...arg) delete context.fn return result}//applyFun

2020-12-09 17:16:50 136

原创 axios面试常考

1.为什么 axios 既可以当函数调用,也可以当对象使用,比如axios({}) axios.getaxios() 当函数调用:因为构造函数中,返回的实例就是一个 wrap 函数,在 wrap 函数中返回的是 Axios.prototype.request 函数axios() = instance() = wrap() = Axios.prototype.request.call(context)axios.get 当对象调用:在构造函数中使用 extend 方法,将 Axios.pr

2020-12-07 21:50:31 2175

原创 axios源码解析

1.axios是什么?有什么优点?用法?#axios:axios 是通过 Promise 实现对 ajax 技术的一种封装,在浏览器使用原生 XHR 对象,在node使用 http 模块axios优点:从浏览器中创建 XMLHttpRequest从 node.js 创建 http 请求支持 Promise API转换请求和响应数据支持请求/响应拦截器自动转换JSON数据axios 既可以当函数调用,也可以当对象使用 ( axios({}) axios.get() )请求方法

2020-12-07 21:30:20 221

原创 js 转化boolean值问题

1.转化为boolean值时,出现的问题在js中, false null 0 “” undefined NaN 被称为假值如果Boolean构造函数的参数不是一个布尔值,则该参数会被转换成一个布尔值如果参数上面的假值,就会自动转化为 false其他任何值,任何对象包括空对象{} 或者 字符串’false’ 或者只有空格的字符串 " ",都会转化为 truevar a1 = new Boolean()var a2 = new Boolean(0)var a3 = new Boole

2020-12-05 12:31:37 192

原创 Node express框架源码解析

1.express框架中一些核心的文件middlewareinit.js:初始化request,responsequery.js:格式化url,将 url 中的 rquest 参数剥离,储存到 req.query中router:index.js:负责中间件的插入和链式执行route.js:主要是来处理路由信息的,每条路由都会生成一个Route实例layer.js:Layer存储了每个路由的 path 和 handle 等信息,并且实现了 match 和 handle 的功能exp

2020-11-28 02:32:06 285

原创 Node app.use源码解析

1.app.use的原理是什么?作用:express 的这个中间件架构就是负责管理与调用这些注册的中间件中间件顺序执行,通过 next 来继续下一个,一旦没有继续next,则流程结束app.use 原理:通过 use 使用中间件时,先用layer对象包起来,在放入一个 stack 数组中当 http 请求时,app会从数组中逐个取出,进行匹配过滤,逐个运行遍历完成后,运行 finalhandler,结束一个 http 请求// use 方法,往 app 中的 stack 数组中 pu

2020-11-27 16:08:30 420 2

原创 Node express中间件

1.中间件是什么?功能?中间件:中间件主要针对 收到 HTTP 请求后 和 发送响应 之前,这个阶段执行的一些函数使用 express 对象的 use 方法可以在一条路由的处理链上插入中间件为某个path添加了中间件后,以该路径为基础的路径被访问时,都会应用到该中间件如果为 ‘/’ 添加了中间件,则所有请求都会应用。省略第一个path参数则默认为 ‘/’Express 还提供了一个 static 中间件,可以用来处理网站里的静态文件的GET请求功能:执行任何代码对请求和响应对象进行更

2020-11-27 16:05:36 158

原创 IE兼容,盒模型,默认/冒泡事件

1.IE 盒模型与标准盒模型盒模型的组成,由里向外分别是 content,padding,border,margin标准盒模型:内容大小就是content的大小 ( (margin + padding + border) * 2 + width )IE盒模型: 内容大小是 content,padding,border总的大小 ( margin * 2 + width )通过设置 box-sizing: content-box(W3C) / border-box(IE) 就可以达

2020-11-26 14:43:29 198

原创 JS构造函数返回值问题

1.js构造函数返回值问题构造函数本不应该,不需要有返回值,实际执行的返回值就是此构造函数的实例化对象但是在 js 中构造函数可以有返回值也可以没有,没有时,和正常的构造函数一样,返回实例化对象返回值是非引用类型,如基本类型(string,number,boolean,null,undefined)则与无返回值相同返回值是是引用类型,则实际返回值为这个引用类型,就会出现问题注意:构造函数中的 this 指向实例化的对象,所以构造函数通过 this 给实例添加属性和方法function foo

2020-11-19 23:14:25 1616

原创 JS原型链总结,箭头函数的坑

1. JS 原型链是什么?有时候很多对象会有共同的方法和属性,不可能让每一个对象都定义一个属性,那样太消耗内存了原型链上的所有节点都是对象,不能是字符串、数字、布尔值等原始类型注意:只有函数才有 prototype (函数也是一个对象), 实例只有 proto函数是 Function 的实例, 函数的 prototype 是 Object 的实例 (关键)Object.prototype.proto 指向 null实例化对象的 constructor 属性指向 构造函数 本身fun

2020-11-09 22:19:24 522

原创 async await用法及原理总结

1.Async Await 原理(注:await 只能出现在 async 函数中)当调用一个 async 函数时,会返回一个 Promise 对象 (关键)async 函数中可能会有 await 表达式,await表达式 会使 async 函数暂停执行,直到表达式中的Promise解析完成后继续执行 async 中 await 后面的代码并返回解决结果。既然返回的是Promise 对象,所以在最外层不能直接获取其返回值,那么肯定可以用原来的方式:then() 链来处理这个 Promise 对象原

2020-11-09 21:47:08 16125

原创 ES6-generator用法及原理

1.Generator原理Generator 函数,是可以暂停执行的,函数名之前要加’*’。其实整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器yield 异步操作需要暂停的地方next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法,会返回一个对象,这个对象就是具有两个属性value:yield 语句后面表达式的值,表示当前阶段的值done:是一个布尔值,表示 Generator 函数是否执行完毕。说明了Generator 函数可以暂停

2020-11-09 20:46:33 518

原创 函数声明提升与变量声明提升

1.函数声明提升与变量声明提升// 因为变量提升的优先级 function 高于 var,最后都输出 numberfunction fn(){ console.log(typeof a) // function (function先提升,然后var提升,但是a已经声明是个函数,不能重复声明) var a = 0 function a(){} console.log(typeof a) // number (但是后来把 0 赋值给 a,

2020-11-08 23:35:28 118

原创 Vuex刷新数据保存问题,用户登录状态保持问题

1. Vuex 在页面刷新时的数据清除问题原因:js代码是运行在内存当中的,代码运行时的变量,函数,也都是保存在内存中的。刷新页面后,之前申请的所有内存会被释放,重新加载JavaScript代码,变量和函数将重新赋值和初始化。因此,刷新页面保留数据就必须使用外部存储——客户端 or 服务器解决方法:vuex中的变量是响应式的,而localStorage不是,当你改变vuex中的状态,组件会检测到改变,而 localStorage 就不会了,页面要重新刷新才可以看到改变,所以让vuex中的状态

2020-11-06 22:38:08 971

原创 html5表单总结

1.form中的属性form为表单标签,其中有两个重要的属性1. method:为请求的方式 get:是以url传递的,因地址栏长度有限,数据量也有限制,而且传递数据要在ASCCI码值范围内,否则会有乱码 post:在数据传递之前会先将数据打包,虽然效率会比较慢,但是穿过的数据都能正确解析,所以传中文不会有乱码2. action:是表单提交给的url地址,如果我们没有设置action属性,那么默认的表单还是提交给当前页面2.input中常用的属性1. name:规定input元素的名称,用于

2020-11-06 20:48:56 218

原创 重绘,回流总结

1.重绘,回流(重排)是什么?区别?回流(重排):render tree 中的一部分或全部,因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,这就称为回流(reflow)每个页面至少需要一次回流,页面第一次加载的时候,因为要构建 render tree,这时候一定会发生回流的重绘:render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,就叫称为重绘区别:回流必将引起重绘,而重绘不一定会引起回流比如:只有颜色改变的时候就只会发生重绘而不会引起

2020-11-05 21:29:59 154

原创 vue路由实现原理总结

1.vue路由的两种模式hash模式:比如 'http://www.baidu.com/#/abc' hash 的值为 '#/abc' 它的特点在于:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,因此改变 hash 不会重新加载页面但是会触发 onhashchange 事件,所以我们可以监听,然后渲染自己要渲染的组件,达到路由的效果history模式: 通过 HTML5 中新增的 pushState() replaceState() 方法应用于浏览器的历史记录,在已有

2020-11-05 19:54:14 1244

原创 js new方法的简单实现

1.手写 new 方法function myNew(){ // 创建一个空对象 const obj = {} // 将参数中第一个(第一个参数就是构造函数)拿出来定义 const Constructor = Array.prototype.shift.call(arguments) // 将构造函数的prototype属性赋值给实例对象的__proto__ obj.__proto__ = Constructor.prototype // 判断构造函数

2020-11-02 21:12:34 151

原创 Node EventEmitter简单实现

1.Node中的事件模块Node的事件模块只包含了一个类:EventEmitter。这个类在node的内置模块和第三方模块中大量使用。EventEmitter,用于监听一些事件,并且处理,本质上是一个观察者模式的实现2.EventEmitter基本使用方式const events = require('events')const emitter = new events.EventEmitter()function fn1(name){ console.log("fn1",name)}

2020-11-02 20:36:47 171

原创 JS继承的方式总结

继承的几种方式?实现原理?父类定义function Animal (name) { // 属性 this.name = name || 'Animal' // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉!') }}// 原型方法Animal.prototype.eat = function(food) { console.log(this.name + '正在吃:' + food)}

2020-10-30 18:43:42 245 1

原创 JS parseInt的用法

parseInt的用法// parseInt(string,raix)函数有两个参数// 第一个参数:被检测的字符串或数字// 第二个参数:指的就是进制,默认为10进制,不在范围[2,36]内,返回 NaN // 1. 解析字符串从第一个字符开始直到不是数字的字符部分// 2. 如果字符串中第一个字符就不是数字,那么返回 NaN // 3. 如果第一个参数使用了0x表示十六进制,那么第二个参数设置了值也无效console.log(parseInt('123')) // 123console

2020-10-30 13:14:40 562

原创 css解析逆序匹配

1.css解析什么时候开始1. HTML 经过解析生成 DOM Tree2. 而在 CSS 解析完毕后,需要将解析的结果与 DOM Tree 一起进行分析建立一棵 Render Tree,最终用来进行绘图3. 在建立 Render Tree 时,浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果来确定生成怎样的 renderer4. 选择器的「解析」实际是在这里执行的,在遍历 DOM Tree 时,从 Style Rules 中去寻找对应的 selector2.css解析为什么

2020-10-29 18:28:35 255

原创 BFC与清除浮动总结

1.BFC是什么?清除浮动是什么?1. BFC叫作块级格式上下文,BFC是一个渲染规则。2. 该区域拥有一套渲染规则来约束块级盒子的布局,且与区域外部无关。3. 只要触发了这些规则就会对这个块级区域, 重新计算父子元素之间的关系和子元素的高度,从而重新计算出父元素的高度在渲染1. 清除浮动的原理:clear属性,让这块的元素触发 BFC1.清除浮动的方法?形成BFC的常见条件?清除浮动的方法:1. 利用 clear 属性 父元素内部末尾增加一个额外标签,如空div,使用 clear:bo

2020-10-29 16:43:26 574

原创 立即执行函数总结

1.立即执行函数是什么立即执行函数的两种常见形式:( function(){} )():一个是一个匿名函数包裹在一个括号运算符中,后面再跟一个小括号( function(){}() ):另一个是一个匿名函数后面跟一个小括号,然后整个包裹在一个括号运算符中,这两种写法是等价的。要想立即执行函数能做到立即执行,要注意两点,一是函数体后面要有小括号(),二是函数体必须是函数表达式而不能是函数声明。2.立即执行函数笔试题// 第一个是输出 1 是因为 foo 作为参数传入进去有值// 第二个是因为

2020-10-29 14:57:34 409

原创 作用域链

作用域链的作用var a = 1function b(){ var a = 2 function c(){ var a = 3 console.log(a) } c()}b() // 3 作用域链的作用是保证执行环境有权访问的变量和函数是有序的 作用域链只能向上访问,变量访问到 windows 对象终止,作用域链向下访问变量是不允许的 作用域就是变量和函数的可访问的范围,即作用域控制着的变量和函数的可见性和生命周期...

2020-10-29 14:36:50 192

原创 EventLoop总结

1.浏览器中的eventloop和node中的有什么区别?----在 Node 中的 Event Loop 和浏览器中的是完全不相同的东西浏览器端的Event loop 1.一个函数执行栈,一个事件队列,一个微任务队列 函数调用栈: 用来执行js代码 task队列(宏任务队列): 存放异步任务 微任务队列: 存放另一些异步任务 运行过程: 在event loop调度一个宏任务之前,先查看微任务队列是否有未执行的任务 如果有,先

2020-10-29 14:35:23 105

原创 JS数组方法面试总结

1.操作数组的方法不改变原数组: slice 截取数组 concat 联合数组 join 将转换成字符串 forEach map filter reduce 不改变原数组改变原数组: push unshift 返回数组的长度 pop shift 返回删除的元素,参数无用 reverse 返回反置的数组 sort 排序数组 splice 截取数组的同时,还会插入数据,返回的值为截取出来的元素// 1. array.push(item1, item2, …, itemX) //

2020-10-29 14:32:12 323

原创 字符串方法面试总结

字符串方法// 1. charAt 可返回指定位置的字符var str = "HELLO WORLD";var n = str.charAt(2); // L// 2. concat 用于连接两个或多个字符串,并返回新的字符串。var str1 = "Hello ";var str2 = "world!";var n = str1.concat(str2); //输出结果为Hello world!// 3. indexOf 返回某子字符串在该字符串中第一次出现的位置,如果没有找到

2020-10-29 14:30:06 110

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除