js
文章平均质量分 52
障碍的枫子
这个作者很懒,什么都没留下…
展开
-
端口合法,字符串消消乐,格式转换和洗牌算法
端口号为整数,范围在0~65535之间function isPort(port) { if (/^[1-9]\d*|0$/.test(port) && port * 1 >= 0 && port * 1 <= 65535){ return true } return false;}console.log(isPort(8080));//trueconsole.log(isPort("cfe"));//false字符串消消乐链接原创 2021-10-28 14:02:28 · 223 阅读 · 0 评论 -
判断一个变量是否是一个空对象
// 方法一:就是粗暴的直接转字符串,然后强行比较function isEmptyObject1(obj) { return (JSON.stringify(obj) === '{}');}console.log(isEmptyObject1({}));//trueconsole.log(isEmptyObject1({name: "xiaoming"}));//false// 方法二:通过对象的键长度来判断function isEmptyObject2(obj){ return原创 2021-10-25 15:48:09 · 352 阅读 · 0 评论 -
js多线程的实现
一、前言JS作为脚本语言,它的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。但是单线程的语言,有一个很致命的确定。如果说一个脚本语言在执行时,其中某一块的功能在执行时耗费了大量的时间,那么就会造成阻塞。这样的项目,用户体验是非常差的,所以这种现象在项目的开发过程中是不允许存在的。二、JS实现多线程方式(Worker)JS为我们提供了一个Worker的类,它的作用就是为了解决这种阻塞的现象。当我们使用这个类的时候,它就会向浏览器申请一个新的线程。这个线程就用原创 2021-10-19 11:10:04 · 7222 阅读 · 0 评论 -
Promise实现原理及使用
一、什么是回调地狱在以往的js中使用异步编程,都是串联多个异步回调,嵌套大量的回调函数(将一个函数作为参数传递给另个函数),也就是“回调地狱”的解决方法。如下代码所示:function a(functionb(){ c(function d(){ })})造成代码混乱,可读性差和后期维护困难等负作用。二、Promise基本用法和实现原理Promise是异步编程的一种解决方案,解决前端异步函数多层嵌套所产生的回调地狱问题,以及回调地狱错误不方便捕捉的问题;可以原创 2021-10-18 13:09:59 · 425 阅读 · 0 评论 -
五种常用排序
冒泡排序原理: 比较两个相邻的元素,将值大的元素交换到右边。实现思路: 依次比较相邻的两个数,将比较小的数放在前面,比较大的数放在后面。优点: 比较简单,空间复杂度较低,是稳定的。缺点: 时间复杂度太高,效率不好。function bubbleSort(arr) { for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr.length - i; j++) { if (arr[j] &g.原创 2021-09-25 22:59:37 · 1032 阅读 · 0 评论 -
防抖与节流
一、概念函数防抖和函数节流二者都是优化高频率执行js的一种手段;常用于绑定resize、scroll、mousemove 等事件;可控制在事件持续触发的过程中按自己的频率地去执行函数。防抖: n秒后在执行该事件,若在n秒内被重复触发,则重新计时。节流:n秒内只运行一次,若在n秒内重复触发,只有一次执行。相同点:都可以使用定时器来实现;目的都是,降低回调执行频率。节省计算资源。区别:函数防抖,在一段连续操作结束后,处理回调,利用 clearTimeout 和 setTimeou原创 2021-09-30 17:16:12 · 76 阅读 · 0 评论 -
CDN实现原理及作用
什么是CDNCDN即,Content Delivery Network或Content Ddistribute Network,即内容分发网络。作用: 尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。基本思路: 通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。1.首先访问本地的 DNS原创 2021-09-22 17:14:43 · 1378 阅读 · 0 评论 -
跨域及解决方法
1. 跨域是什么跨域本质是浏览器基于同源策略的一种基本安全手段。同源策略就是一种约定是浏览器最基本的安全功能。同源是指在同一个域(协议、主机、端口相同),当其中一项不相同时,就会产生跨域问题。2. 解决方法通过jsonp跨域;-document.domain+iframe跨域;-location.hash+iframe;-window.name+iframe跨域;-postMessage跨域;-跨域资源共享(CORS);-nginx代理跨域;-nodejs中间件代理跨域;-We原创 2021-09-19 19:46:29 · 178 阅读 · 0 评论 -
JS的继承
1. 原型继承原理:把父类的实例作为子类的原型。缺点:子类的实例共享了父类构造函数的引用属性,不能传参。var person = { friends: ["a", "b", "c", "d"];} var p1 = Object.create(person);p1.friends.push("aaa"); console.log(p1.__proto__ == person);//trueconsole.log(p1);// {}console.log(person);//{原创 2021-09-19 11:21:29 · 68 阅读 · 0 评论 -
闭包的详解
一、什么是闭包闭包指的是那些引用了另一个函数作用域中变量的函数,通常是在嵌套函数中实现;也就是说,闭包可以让你在一个内层函数中访问到其外层函数的作用域(也通常被称为是函数之间的沟通的桥梁)。1.1 闭包的3个特性函数嵌套函数;函数内部可以引用函数外部的参数和变量;参数和变量不会被垃圾回收机制回收。1.2 函数作为返回值经典①function fn() { let age = 19; return function() { return age; }}let原创 2021-09-18 23:49:58 · 774 阅读 · 0 评论 -
代理、模块化、ES6和CommonJS的区别
一、代理的几种定义字面量定义,对象里面的get和post;类定义,class中的get和set;Proxy对象,里面传两个对象;第一个对象是目标对象target,第二个对象是专门放get和set的handler对象。Proxy和上面两个的区别在于Proxy专门对对象的属性进行get和set。代理的实际应用Vue的双向绑定(Vue2用的是Object.definedProperty,Vue3用的是Proxy);校验值;计算属性值(get的时候加以修饰)...原创 2021-09-18 09:01:54 · 86 阅读 · 0 评论 -
Vue3.0的优化(相较于Vue2.0)
一、更快1.1 重构了Virtual DOM在传统Virtual DOM的数据改变渲染上,在数据变更之后,新的Virtual DOM进行patch算法比较,匹对出新旧DOM之间的差异,再将差异进行修改。传统Virtual DOM性能跟模板大小呈正关系,而与动态节点数量无关,模板(组件)越大,那么进行数据更新时损耗的性能就有多大;这种方式利用率低,数据更新时,要对比整个模板(组件),存在性能损耗。 Vue3.0 Virtual DOM是采用动静结合的方式,将模板基于动态指令切割为嵌套的区块,各原创 2021-09-15 16:16:03 · 816 阅读 · 0 评论 -
箭头函数和普通函数的区别
箭头函数是普通函数的简写,但它不具备很多函数的特性;箭头函数不能使用arguments(类数组对象,可以在函数内部访问arguments对象,从中取得传进来的每个参数值)、super和new.target,也不能用作构造函数,此外,箭头函数也没有prototype属性。arguments关键字访问// arguments关键字访问function foo() { console.log(arguments[0], arguments[1]);}foo(3, 6);//3 6let .原创 2021-09-15 15:55:11 · 142 阅读 · 0 评论 -
变量和函数提升
对所有函数声明进行提升(除了函数表达式和箭头函数),引用类型的赋值;开辟堆空间;内容存储;将地址赋给变量。对变量进行提升,只声明,不赋值,值为undefined。变量提升console.log(variable);var variable = "Is variable";console.log(variable);// 编译后var variable;console.log(variable);//undefinedvariable = "Is variable";con.原创 2021-09-15 08:52:18 · 83 阅读 · 0 评论 -
内存泄漏与垃圾回收机制
内存泄漏: 是指不再用的内存没有被及时释放出来,导致该段内存无法被使用称作为“内存泄漏”。原因: 在我们无法通过js访问某个对象,而垃圾回收机制却认为该对象仍在被引用,因此垃圾回收机制不会释放该对象,导致该块内存永远无法释放,积少成多,最终 系统会越来越卡以至奔溃。垃圾回收机制策略有 标记清除法和 引用计数法两种。标记清除法垃圾回收机制获取根并标记它们,再访问并标记所有来自它们的引用,然后再访问这些对象并标记它们的引用,如此递进结束后,如果发现有没有被标记的(不可达的)进行删除,进入执行环境.原创 2021-09-14 12:50:03 · 209 阅读 · 0 评论 -
字面量、new操作符 和Object.create(null)创建出来的对象的区别
加粗文本字面量创建对象更简单,方便阅读;不需要作用域解析,速度更快。new内部创建一个空对象;使新对象的__proto__指向原函数的prototype;改变this指向(指向新的obj)并执行该函数,执行结果保存起来作为result;判断执行函数的结果是否是Null/Undefined,如果是,则返回之前的新对象,否则返回result。function myNew(fn, ...args) { // 创建一个空对象 let obj = {}; // 使空对象的隐.原创 2021-09-13 22:22:41 · 259 阅读 · 0 评论 -
JS执行机制(事件循环)
JS执行顺序1、先执行主线程(执行栈)中的同步任务;2、异步任务(回调函数)放入到任务队列中;3、执行栈中的所有同步任务执行完毕,JS引擎就会按照次序读取任务队列中的异步任务,通过这种方式被读取的异步任务结束等待过程,进入执行栈中,开始执行。异步任务又可分为宏任务(macrotask队列)和微任务(microtask队列):宏任务:script、setTimeOut、setInterval、setImmediate;微任务:promise.then,process.nextTick、Obj原创 2021-09-13 17:27:36 · 368 阅读 · 0 评论 -
this指向及call、apply和bind
call和apply实现思路:判断是否为函数调用,否则抛出异常;通过新对象(context)来调用函数; - 给context创建一个fn设置为需要调用的函数; - 结束调用完之后删除fn。call:Function.prototype.myCall = function(context) { //判断调用myCall是不是一个函数 if(typeof this !== 'function') {//this ——> 调用myCall的 throw new T.原创 2021-09-13 11:47:12 · 116 阅读 · 0 评论 -
判断数据类型的4种方法
typeof(无法分辨是null还是Object,如typeof null —> Object 而不是null)在js中,不同的对象都是使用二进制存储的,如果二进制的前三位都是 0 的话,就会被系统判断为Object类型,而null的二进制全是0,就会被判断为Object的数据类型。标识位:000 —— 对象1 —— 整型010 —— 双精度类型100 —— 字符串110 —— 布尔型instanceof(只能判断该对象是否存在于目标对象的原型上);实现原理如下/.原创 2021-09-12 00:08:40 · 391 阅读 · 0 评论 -
了解Ajax
一、背景和目的(传统网站中存在的问题)网速慢的情况下,页面加载时间长,用户只能等待;表单提交后,如果一项内容不合格,需要重新填写所有表单;页面跳转,重新加载页面,造成资源浪费,增加用户等待时间。二、应用场景页面上拉加载更多数据;列表数据无刷新验证;表单项焦点数据验证;索框提示文字下拉列表。三、原生js Ajax请求的5个步骤//1、创建 XMLHttpRequest 对象var ajax = new XMLHttpRequest();//2、规定请求的类型、URL 以原创 2021-09-09 16:19:36 · 128 阅读 · 0 评论 -
构造函数的继承
“动物”构造函数function Animal() { this.species = '动物';}“人”构造函数function Person(name, color) { this.name = name; this.color = color;}如何让人继承动物?一、 构造函数绑定构造函数的绑定 Object.apply(this, arguments) 或 Object.call(this, arguments)。function Animal() { thi原创 2021-09-09 10:54:55 · 123 阅读 · 0 评论 -
原型与原型链
每当定义一个对象时,对象都会包含一些预定义的属性(包括prototype),指向函数的原型对象,使用原型对象的好处是在它上面定义的属性和方法可以被对象实例共享,但缺点就是弱化了向构造函数传递初始化参数的能力,会导致所有实例默认都取得相同的属性值。原型链指向图<这张图看得懂的就不用浪费时间往后看,赶紧学点其他的>function Person() {};Person.prototype = { name: 'Jakc', age: 20, joy: 'Working', .原创 2021-09-07 16:43:17 · 89 阅读 · 0 评论 -
数组常用操作方法
数组的操作方法共有27种,其中10个是ES6新增的增1、concat()在后面添加数组,返回被连接数组的一个副本。var array1 = [1, 2, 3];var array2 = [4, 5];var array3 = array1.concat(array2);console.log(array3);//[ 1, 2, 3, 4, 5 ]2、push() 数组末尾添加元素,返回新数组的长度。var array1 = [1, 2, 3];var array2 = [4, 5原创 2021-09-06 15:33:35 · 437 阅读 · 0 评论 -
执行上下文与执行栈
在js编译阶段,会有三种情况执行上下文1、开始编译js代码时,会创建一个全局执行上下文,存在所有的全局变量和函数,并且整个js执行周期都存在,直到网页或者浏览器被关闭;2、当调用一个函数的时候,会编译函数体内的代码并创建该函数的执行上下文,函数调用结束,该执行上下文便会被销毁;3、使用eval()函数时,eval代码被编译并且创建执行上下文。JavaScript引擎是通过“调用栈”来管理执行上下文的;(数据结构栈是一种后进先出的线性结构)。对于JavaScript来说(全局作用域),当代原创 2021-09-06 11:12:07 · 152 阅读 · 0 评论 -
数据类型与按值传参
原始数据类型(undefined、Null、Boolean、Number、String和Symbol):原始值直接存储在变量访问栈(stack)的位置中,栈区包括了变量的标识符和变量的值;特点:占据空间是固定的;优点:存储到较小的内存区域(栈 Stack),便于迅速查询变量的值;引用数据类型(Object Function Array Date等):存储在堆(Heap)中,存储在变量处的是一个指针(point),指向存储对象的内存处,放在栈空间中的值是对该对象存储在堆中的地址。特点:存储大小.原创 2021-09-04 17:41:25 · 121 阅读 · 0 评论 -
var、let和const的区别
Var与let区别VarLet作用域函数作用域块作用域声明提升有无重复声明可以不可以全局声明声明的变量会成为window对象的属性该作用域变量Let和const的区别LetConst初始化可以不用声明的同时必须同时初始化当遇到对象时,只读的const时允许对对象的属性进行操作的,但本身的引用(内存中的引用地址)不可以修改。...原创 2021-09-04 16:53:30 · 77 阅读 · 0 评论 -
暂时性死区
在解析代码时,js引擎会先注意到块后面的该变量声明(let const),这时,在这个变量声明之前的执行瞬间就会出现一个暂时性死区;如果声明这个变量的关键字没有声明提升特性,那么,在执行到声明之前以任何方式来引用未声明的变量都会抛出 ReferenceError。var a = 1;if(true){ a = 2; console.log(a); let a = 3;}当块后面的该变量声明具有声明提升时,可避免暂时性死区var a = 1;if(true){ let .原创 2021-09-04 11:25:42 · 179 阅读 · 0 评论