JS
尼古拉斯二嘎
记录工作中的点点滴滴,希望与大家共同进步
展开
-
为什么使用node做中间层
1、适配性提升我们其实在开发过程中,经常会给pc端、mobile、app端各自研发一套前端。其实对于这三端来说,大部分端业务逻辑是一样的。唯一区别就是交互展现逻辑不同。如果controller层在后端手里,后端为了这些不同端页面展示逻辑,自己维护这些controller,徒增和前端沟通端成本。 如果增加了node.js层2、响应速度提升我们有时候,会遇到后端返回给前端的数据太简单了,前端需要对这些数据进行逻辑运算。那么在数据量比较小的时候,对其做运算分组等操作,并无影响。但是当数据量大的时候,会有明原创 2021-08-31 20:11:41 · 741 阅读 · 0 评论 -
深拷贝解决循环引用问题
var obj = { a: 1, b: null}obj.b = objfunction deep(obj, m = new Map()) { let clone; let Con = obj.constructor; if (Con) { switch(Con) { case RegExp: clone = new Con() break case Date: clone = new Con()原创 2021-08-04 14:26:18 · 451 阅读 · 0 评论 -
js继承详解
此篇文章为大家讲解es5继承和es6继承的实现和区别首先我们来看一下es5和es6继承的图,再结合代码来让大家深刻理解左边是es5继承,右边是es6继承代码实现1、es5的继承function F () { this.name = 'f'}F.prototype.test = function () { console.log('ffffff')}function S () { F.call(this)}S.prototype = new F()S.p.原创 2021-02-26 19:29:51 · 144 阅读 · 2 评论 -
生成平衡二叉树
学习平衡二叉树前,先来看看下图废话不多说,直接上代码class TreeNode { constructor (data) { this.data = data this.leftChild = null this.rightChild = null this.parent = null } leftRotate () { let newNode = this.rightChild let grandeNode = newNode.left原创 2021-01-02 16:17:34 · 573 阅读 · 0 评论 -
new本质与this指向问题
new的本质:1.在内存中创建一个新的空对象2.让this指向这个新的对象3.执行构造函数里面的代码,给这个新的对象添加属性和方法4.返回这个新的对象(所以构造函数里面不需要return)function A () { this.a = 1 // 如果解开这段注释,打印结果就位2222 // this.b = 2222 return { b: 2, c: 3 }}A.prototype.b = 4A.prototype.c = 5let obj = .原创 2020-12-23 18:23:57 · 684 阅读 · 0 评论 -
http和https区别介绍1
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP协议不适合传输一些敏感信息,比如:信用卡号、密码等支付信息。为了解决HTTP协议的这一缺陷,需要使用另一种协议:安全套接字层超文本传输协议HTTPS,为了数据传输的安全,HTTPS在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。原创 2020-12-20 17:01:47 · 161 阅读 · 0 评论 -
从内向外遍历对象的key值
题目:let obj = { a:{ b:{ c:{f:"aa"} }, d:{ e:{g:"bb"}, h:{i:"cc"} }, j:{ k:"dd" } }}// 想要的结果[f,g,i,c,e,h,k,b,d,j,a]解答:function getType (data) { return Object.prototype.toString.call(data)}// 关键原创 2020-12-20 16:17:09 · 248 阅读 · 0 评论 -
信封错排问题
假设有5封信放入5个信箱,问:有多少种方案是5个信封全部没有放入对应的信箱中如:[1,2,3] 有两种方案:[2,3,1] [3,1,2]// [1,2,3]。两个错位排列的数组为 [2,3,1] 和 [3,1,2]var findDerangement = function(n) { /* 公式:D(n)=(n−1)∗(D(n−2)+D(n−1)) 推出公式(感性) 对于第n个数,放在k位置上。 而第k个数有两种情况: 当第k个数放到n位置时,相当于把k和n交换了位.原创 2020-12-13 16:01:38 · 1129 阅读 · 0 评论 -
只输出最后一个promsie的结果(经典面试题)
实现方法调用后如下:let count = 1;let promiseFunction = () => new Promise(rs => setTimeout(() => { rs(count++); }) );lastFn().then(console.log); // 无输出lastFn().then(console.log); // 无输出lastFn().then(console.log); // 3实现方案:fu.原创 2020-12-13 12:01:36 · 288 阅读 · 1 评论 -
setTimeout实现setInterval和clearInterval
function interV (fn, time) { let res = { target: '' // 需要注意:利用引用类型保证target一直是最新的 } function test () { fn() res.target = setTimeout(test, time); } test() return res}function cv (timer) { clearTimeout(timer.target)}let t = int原创 2020-12-13 11:20:55 · 532 阅读 · 3 评论 -
生成器函数generator
function * fn(){ yield 10; y = yield 'foo'; yield y;}var test = fn();console.log(test.next()) // { value: 10, done: false }console.log(test.next()); // { value: 'foo', done: false }console.log(test.next(11)) // { value: 11, done: false }consol原创 2020-12-10 11:38:31 · 871 阅读 · 0 评论 -
2020年js新特性
最近项目没有那么忙,就能多抽出时间来为大家更新博哥,顺便也是自己学习历程记录本篇文章就为大家介绍一下2020年js都出现了哪些新特性我就从使用的频繁度来为大家介绍1、可选链操作符我们是不是在代码中经常这么写if (data && data.list && data.list.name) { //do something}// 我们都知道这么写是为了容错,减少代码异常问题,但是这么写很不优雅js的新特性中为我们添加了可选链操作符,以上代码就可以这么写.原创 2020-12-08 15:52:19 · 1393 阅读 · 0 评论 -
es6的扩展运算符(...)详解
**对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中**下面为大家一一举例说明:1、对象使用扩展运算符let obj = {a: 1}let newObj = {...obj}console.log(newObj) // {a: 1}// 等价于let newObj = Object.assign({}, obj)// 还可以这么用let obj = {a: 1}let newObj = {...obj, ...{a:4, b: 2}}let ne原创 2020-11-25 16:11:36 · 270 阅读 · 2 评论 -
vscode代码折叠起来,看不到尾部}
今天打开我的vscode发现,代码折叠起来后看不到尾部的},全是…,非常不舒服,看图下面进行这样的设置,找到vscode首选项然后看到’控制计算折叠范围的策略’默认的是auto,我们改为indentation,就可以看到折叠后代码末尾的’}'啦,这样就方便我们插入代码了效果如下:...原创 2020-09-15 11:48:50 · 1357 阅读 · 3 评论 -
AMD、CMD、Common.js、ES6模块对比
他们都是用于在模块化定义中使用的,AMD、CMD、CommonJs是ES5中提供的模块化编程的方案,import/export是ES6中定义新增的AMD-异步模块定义AMD是一个组织,RequireJS是在这个组织下自定义的一套脚本语言RequireJS:是一个AMD框架,可以异步加载JS文件,按照模块加载方法,通过define()函数定义,第一个参数是一个数组,里面定义一些需要依赖的包,第二个参数是一个回调函数,通过变量来引用模块里面的方法,最后通过return来输出。是一个依赖前置、异步定义原创 2020-09-01 14:51:48 · 171 阅读 · 0 评论 -
fetch发送2次请求的原因分析
划重点:如果被别人问到,其实这是在迷惑你,发送两次请求的情况确实存在,但这与你所使用的是不是http协议,所采用的是不是fetch真的没有任何关系!我们所说的发送2次请求,其实就是在跨域请求时,编写了带预检请求的代码导致多了一次名为OPTIONS的尝试请求发送2次请求需要满足以下2个条件:必须要在跨域的情况下除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain .原创 2020-08-21 15:07:12 · 2529 阅读 · 0 评论 -
js中不借助第三变量交换两个变量的值
方法一:let a = 5let b = 6a = a + b // 11b = a - b // 5a = a - b // 6方法二:let a = 5let b = 6a = a * b // 30b = a / b // 5a = a / b // 6原创 2020-08-12 10:50:11 · 309 阅读 · 0 评论 -
斐波那契数列递归和循环实现
斐波那契数,指的是这样一个数列:1、1、2、3、5、8、13、21、……,用文字来说,就是斐波那契数列由 0 和 1开始,之后的斐波那契数列系数就由之前的两数相加1.普通递归实现function fei (n) { if (n === 1 || n === 2) { return 1 } return fei(n - 1) + fei(n - 2)}2、普通循环function fibonacci(n) { let n1 = 1 le.原创 2020-08-06 14:50:47 · 294 阅读 · 0 评论 -
经典的数组扁平化
有数组:[1, [2, 3, [4, 5]]]最后我们要得到[1,2,3,4,5]// toString方法、join方法都能将以上数组转换为1,2,3,4,5字符串// 方法一function fn1 (arr) { return arr.join().split(',').map(function(item) { return Number(item) })}// 方法二function fn2 (arr) { return arr.toString原创 2020-08-04 16:03:42 · 92 阅读 · 0 评论 -
手动实现promise
创建promise的基础框架function MyPromise(executor) { function resolve(value) { } function reject(reason) { } try { // executor为new promise时传入的函数,executor的两个参数分别为成功回调函数和失败的回调 executor(resolve, reject) } catch (reason) { reject(rea.原创 2020-07-30 16:30:31 · 276 阅读 · 0 评论 -
判断对象中是否存在某个属性的方法
1、in 运算符如果指定的属性在指定的对象或其原型链中,则in 运算符返回true'name' in test //true'un' in test //true'toString' in test //true'age' in test //false这种方式的局限性就是无法区分自身和原型链上的属性2、hasOwnProperty()test.hasOwnProperty('name') //true .原创 2020-07-13 23:10:18 · 1472 阅读 · 0 评论 -
js中判断数据类型方法
js中有7种数据类型,其中三种基本类型:Number、String、Boolean两种引用类型:Object、Array两种特殊类型:undefined、null1.判断boolean类型的不再多说,我们都知道undefined、null、NaN、0、’'这几种大都是false,其余都是true2.typeof,他无法判断数组和对象,返回的都是Object console.log(typeof str);//string console.log(typeof arr);//object原创 2020-07-13 23:05:43 · 203 阅读 · 0 评论 -
js原型对象个人理解
所有的构造函数都有一个prototype属性,这个属性叫做原型对象所有的构造函数new出来的对象都有一个原型对象下面我用一张图来给大家解释prototype是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法所有通过同一个构造函数创建的实例对象都会共享同一个prototype原型,原型诞生的意义就是实现代码复用原型的执行顺序:首先在实例上查找,如果实例有方法或属性就返回,如果没有,就去原型上查找,如果有就返回,如果原型上没有对应的属性或方法,就去最外层的Objec.原创 2020-07-13 22:43:55 · 139 阅读 · 0 评论 -
js代码优化之惰性函数
什么是惰性函数? 简单来说它很惰,所以其只会在函数第一次调用时执行话不多说,直接上代码function zhou(){ if(a === 1){ console.log("对着JS一调一下午") }else{ console.log("调了一下午,bug还得补") }}在上面这段代码中存有一个判断语句,如果在当前环境下a的值不变,那么该函数不管你如何执行,其结果都不会发生任何变化。但每次执行还要进行if判断,这势必造成了没有必要的浪费,有.原创 2020-07-13 21:57:13 · 171 阅读 · 0 评论 -
Event Loop新手讲解、相关代码练习
今天由于工作原因没有额外的时间去学习新知识,正好白天同事分享了有关执行顺序的的代码,我来为大家解读一下:解读之前呢,建议大家先学习一下js的event loop机制方便理解,我找了一张关于event loop机制的图帮助大家理解Event TableEvent Table 可以理解成一张 事件->回调函数 对应表它就是用来存储 JavaScript 中的异步事件 (request, setTimeout, IO等) 及其对应的回调函数的列表Event QueueEvent .原创 2020-07-07 23:32:25 · 241 阅读 · 0 评论 -
substring、substr、slice、splice傻傻分不清楚
substring() 只能操作字符串,不修改原字符串substring(start,stop)表示返回从start开始到stop处之间的新字符串,其长度为stop减 start。包含start,但不包含stop,且不修改原字符串。这一点与slice的含头不含尾相近。var str = "0123456789";console.log(str.substring(1,5))//"1234" length为5-1console.log(str.substring(0,9),str)//"0123456原创 2020-06-09 16:37:28 · 195 阅读 · 0 评论 -
深浅拷贝理解记录
javascript总结:深拷贝与浅拷贝的实现浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”。我们希望在改变新的数组(对象)的时候,不改变原数组(对)时需要使用深拷贝。浅拷贝实现(对象)const obj = { siteNa...原创 2019-09-06 16:38:35 · 114 阅读 · 0 评论 -
强大的Object.defineProperty详解
强大的JS方法Object.defineProperty详解Object.defineProperty是一个很了不起的方法。vue.js之所以能够实现双向绑定便是拜它所赐!defineProperty直接翻译过来即是“定义属性”,不过该方法可不仅仅是定义属性这么简单,咱们还可以通过它来对属性进行拦截设置!var obj={};//或obj=new Object;// 添加属性(描述)obj...原创 2019-09-06 16:39:56 · 194 阅读 · 0 评论 -
初探canvas
使用canvas来绘制图形基本用法canvas看起来和 img 元素很相像,唯一的不同就是它并没有 src 和 alt 属性。实际上,canvas 标签只有两个属性—— width和height。这些都是可选的,并且同样利用 DOM properties 来设置。当没有设置宽度和高度的时候,canvas会初始化宽度为300像素和高度为150像素。该元素可以使用CSS来定义大小,但在绘制时图像会...原创 2019-09-06 16:49:52 · 115 阅读 · 0 评论 -
前端必用正则表达式汇总整理
前端必用正则表达式汇总整理基本用法医生的药方,道士的画符以及程序的正则表达式被尊誉为人世间的三大装逼神器!作为优秀前端的你,出门时怎能不拎几个正则?所以我在这里为大家精心准备了大把的正则,并亲自验证,放心拿去,不谢!1、 手机号:mobile/^1((3[\d])|(4[5,6,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[1-3,5-8])|(9[1,8...原创 2019-09-26 16:10:42 · 291 阅读 · 0 评论