guanfeii的博客

原创 TypeScript

简述TS数据类型：数字类型：let num: number = 18;字符串类型：let str: string = '字符串'布尔类型：let flag: boolean = true;数组类型： // 第一种： let array: number[] = [1, 2, 3, 4, 5, 6]; // 第二种： let array: Array<number> = [1, 2, 3, 4, 5, 6];元组类型：元组类型是数组的一种特殊类型

原创 Javascript高级总结

一、数据类型数据类型分类：基本数据类型、引用数据类型、大整数 和 Symbol基本数据类型：Number、String、Boolean、Undefined和Null，其中Undefined和Null不常用；上述五种数据类型在typeof作用下分别返回"number"、"string"、"bool"、"undefined“和”object"；引用数据类型：Object(’Object‘、‘Function’和’Array’)，在typeof作用下返回"object"；大整数：BigInt，在type

原创 javascript函数参数传递方式

js函数调用传递的参数我们分为两种：一种是传值，一种是传名。对于这两种传递方式，我们把函数的调用据此分为传值调用和传名调用，传值调用的值，我们又分为基本数据类型值传递和引用数据类型值传递，那么传名调用函数的参数我们可以把它归为函数名，这个函数是在函数内调用才返回的结果，所以叫作传名参数；...

原创 console.log()异步？

基于webkit的浏览器比如chrome和safari，console.log()表现出来异步效果看下面这一段代码：var obj = {};console.log(obj);obj.name = '张三';我们会发现在浏览器中打印的结果是{ name:'张三' },而我们期望的结果应该是一个空的{}。导致这种结果的出现原因在于console.log()对于打印的对象存储的是地址值，并且没有在代码执行处立即执行拍摄快照，而是等到代码返回事件队列时才去拍摄快照，所以此时我们看到的是堆内存空间存

原创 vue文件中css使用module致使改变第三方ui组件(element-ui)样式不能成功

在.vue文件中使用module保护自身的样式不被其他组件影响下，会带来使用>>>或/deep/改变第三方组件库(element-ui)样式失败。解决方案是我们可以在当前.vue文件中另加一个style标签(此标签不添加module)，在此style标签中去更改第三方组件库样式。...

转载 promise源码解析

链接地址：promise

原创 NestJs导入导出excel文件-ExcelJs插件

导入比方我们需要导入上方excel表格

原创 在forEach回调函数中存在异步操作的处理

我们会碰到这种情形：const result = [];const ids = [1, 2, 3, 4, 5];ids.forEach(id => { const list = http(id); //http为一个异步请求，拿到对应id的信息 result.push(list.name); })console.log(result); // []结果事与愿违是一个空的数组，其实我们希望的结果打印对应id的信息name；原因在于http是一个异步请求，那么forEach的函数回调

原创 JS for循环下的continue、break和break区别

continue：跳出本轮循环function test() { for(let i = 0; i < 3; i++) { if(i===1) { continue; } console.log(i); } console.log('我是test方法');}test(); // 0 2 '我是test'方法在for循环执行到i为1时，则跳出本轮循环，不执行console.log(i)，然后i++，进入下一轮循环；break：结束for循环function ..

原创 常用JS编码优化

一个变量可能有多个值并且针对多个值的处理结果一样// badif(x === 'ysgd' || x === 'wsgd' || x === 'ysj' || x === 'wsj') { console.log('result', x);}// goodif(['ysgd', 'wsgd', 'ysj', 'wsj'].includes(x)) { console.log('result', x);}一个变量可能有多个值但是针对多个值的处理结果不一样// badif..

原创 浏览器内存泄漏的常见情况

全局变量：顶层代码window环境下，变量使用后，无需再次使用，然而变量未释放空间；控制台打印：console.log()也是占用内存空间的；分离的Dom节点：已删除的dom节点，然而其引用未释放；const outerBox = document.getElementById('oBox');const innerBox = document.getElementById('iBox');const btn = document.getElementById('btn');btn...

原创 js中addEventListener注册事件用removeEventListener解绑注意事项

注册DOM事件的一种方式：addEventListenerdocument.addEventListener('mousemove', function() { console.log('执行');});上述事件绑定，我们是不能通过使用removeEventListener来将其解绑，因为addEventListener的第二个参数是一个匿名函数，所以removeEventListener的第二个参数是获取不到与其同名的函数；要想解绑addEventListener绑定的事件，可以通过下面实现

原创 数组扁平化

数组扁平化function flatArray(arr) { if(!(arr instanceof Array)){ console.warn('目标对象非数组'); return []; } let result = []; const { length } = arr; for(let i = 0; i < length; i+=1) { if(arr[i] instanceof Array){ result = [...result, ...flatArray(a

原创 简单说下postgre数据库对时间存储的处理

postgre数据库对时间存储存放的时间数据格式有四种：date：它是用来表明存储的值为年月日，2021-03-23；time: 它是用来表明存储的值为时刻，22:25:56；timetz：它是用来表明存储的值为时刻+时区，即在其后面标明存储到数据库的值所在的当前时区；timestamp：它是用来表明存储的值为年月日+时刻，2021-03-23 22:25:56；timestamptz：它是用来表明存储的值为年月日+时刻+时区；即在其后面标明存储到数据库的值所在的当前时区；...

原创 如何将前端传递的一个字段为对象数组完整保存到postgre数据库中

我们知道前端传递给后端一个字段的值为[{id: 1, name: '张三'}, {id:2, name: '李四'}]，我们在存储到数据库中看到的值变成了['[object]', '[object]']这种形式，显然是数据库强制更改了我们存入的数据类型值，所以我们打开设计表，将对应字段的数据库数据类型更改为json，那么数据存储进去就还是[{id: 1, name: '张三'}, {id:2, name: '李四'}]；...

原创 js中this的四大绑定规则

四大绑定原则new绑定：var a = 1;function Person(a){ this.a = a; console.log(this.a);}const p = new Person(2); // 2console.log(p.a); // 2显式绑定：call，apply，bindvar a = 'window';var obj1 = { a:1, test:function(){ console.log(this.a); }};var obj2 =

原创 js伪数组转真数组

伪数组转真数组三种方法伪数组：arguments借调写法：Array.prototype.slice.apply(arguments)返回一个真数组；延展运算符：[...arguments]返回一个真数组；数组静态方法：Array.from(arguments)返回一个真数组；...

原创 js原型、原型链以及原型继承简单阐述

原型原型是对象数据类型所有，原型又分为显式原型和隐式原型：// 语法糖形式class Person { constructor(name, age) { this.name = name; this.age = age; } getName() { return this.name; } getAge() { return this.age; }}const person = new Person('张三', 18);person.getName(); // 张三

原创 手写实现call，apply，bind

callFunction.prototype.call = function(target, ...args){ const type = typeof target; if(type !== 'function' || type !=='object'){ console.error('目标对象须是一个函数或者object数据类型的数据'); return; } const context = target || window; const _property = Symbol('fn

原创 js异步加载文件-defer async type=module

defer等到Dom全部加载渲染完后，再执行加载js文件；多个defer标记的js文件，则按照引入文件先后顺序执行；async在其他js文件加载完并且Dom渲染前，去加载async标记的js文件；type=module等同于defer...

原创 vue-router路由传参，页面刷新，数据类型改变

vue-router传参，不管是params形式还是query形式传参，在页面刷新后，params和query对象中的属性所对应的属性值都会被浏览器自身强制转换为string类型(这一点与浏览器的sessionStorage和localStorage存储对象，对象会被转为string类型，不谋而合)，破环原先属性值的数据类型。下面为6种数据类型属性值的解决方法：1.number数据类型：页面刷新后，其类型会转换为`string`类型。那么我们在路由刷新页面，对传递过来的属性值做一次`Number()..

原创 什么是事件？事件的实现原理？

事件是通过某一时刻某一个动作而触发的一个操作。事件的形成有两步：第一步是事件的预先定义；第二步事件触发；事件的实现是通过订阅发布模式实现，即在代码运行中预先定义事件(订阅)，在后面某个操作触发这个预先定义好的事件，执行事件处理程序；web端Dom事件分为三类：一类：dom节点通过onclick绑定事件，通过dom.onclick = null来解绑事件；二类：dom节点通过addEventListener()方法注册事件，通过removeEventListener()来注销事件；三类：css中设置ui.

原创 渲染项目列表时，“key“属性的作用和重要性

不管是在vue还是react中，我们在用数组渲染项目列表时，编译器都会提示我们在实体dom上添加一个key属性，key值必须唯一。目的是为了virtual-dom在进行diff算法比对时，将这个key作为比对有状态组件的一个重要凭证；对于这个key值我们需要注意几点：1.key值可以为number、string类型；2.key值不可以取数组的索引值；尤其注意第二点，key值如果取数据索引值，那么有两个问题：(1).加数组索引值和静态列表每一项不加key值没有区别，加数组索引值反而是属于多此一举；(2)..

原创 js中var、let、const声明变量区别

1

转载 vue下使用perfect-scrollbar（自定义指令封装）

链接地址：https://segmentfault.com/a/1190000014821207

原创 js构造函数之隐式原型链图解

原创 浏览器内存回收机制

浏览器内存大小32位操作系统下，浏览器内存空间大小为0.7G，其中新生代内存空间大小为16M，老生代内存空间大小为700M；64位操作系统下，浏览器内存空间大小为1.4G，其中新生代内存空间大小为64M，老生代内存空间大小为1400M；浏览器内存运转机制新生代内存空间涉及粘贴、复制两个操作；老生代内存空间涉及标记、删除和整理三个操作；新生代、老生代内存空间转化新生代from和to各占50%的内存空间，新生代内存空间数据移交到老生代有两种情况：一、from的数据内存粘贴到to中(或to转from)占

原创 js中null与undefined的区别

null与undefined的区别相同点：两者均是基本数据类型不同点：typeof null和typeof undefined分别返回"object"、“undefined”；在变量类型中的应用(基本变量类型，引用变量类型)：let a = undefined，表示a变量后面代码可能重新赋值为基本数据类型值；let b = null，表示变量b后面代码中可能重新赋值为引用数据类型值；在浏览器垃圾回收中应用：全局执行上下文中对于全局变量(引用变量)的内存回收，对于这些使用过需要释放内存空间的变量，