js
喂维围
一个三流大学生的成长历程
展开
-
js中Array.sort()的底层原理
js sort原理v8引擎 Array源码(710行开始)不同内核浏览器下,sort()实现的不同原创 2021-02-20 13:23:30 · 888 阅读 · 2 评论 -
svg和canvas的区别
svg是线条图,和分辨率无关.。方法缩小依旧可以高清显示适应cavans是基于像素的,可以对每个像素点进行操作。SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在原创 2020-12-28 17:28:23 · 437 阅读 · 0 评论 -
大厂面试常考:手写promise.all()
// promise.all使用// Promise.all([]: Array): Array1参数为promise对象数组2返回的是一个promise对象,并且resolve()传递一个promise对象数组给之后的then操作3当全部返回时才进行使用,也就是conut === promiseArray.length是进行resolve(reslut)操作4必须是一个回调,因为每个请求的响应事件不一样,有长有短,所以需要使用回调进行’未来时’操作,进行计数Promise.prototype.原创 2020-12-21 09:57:45 · 383 阅读 · 0 评论 -
promise,generator,async/await三者关系的弯弯绕绕
起因:我们的js的异步是使用回调进行实现,而它有记得缺点缺乏可信度,回调嵌套(回调地狱)后面我们使用promise来进行解决,以then操作的形式,进行链式操作,而不再是回调地狱而我们的generator(生成器)实则就是一个打断点执行的操作。通过next,yield进行一步步的操作后来我们发现可以吧generator和promise进行结合实现完美的promise操作。后面就是有我们的async/await操作推荐书籍:你不知道的javascript中,第三章promise资料...原创 2020-12-17 10:12:03 · 542 阅读 · 0 评论 -
来看一看css像素,物理像素,设备独立像素的关系g啊
1像素是组成屏幕或者是图片的单位,但是并不能用长度进行衡量。不能说我们的像素是几毫米或者是几微米。他是一个相对的单位2分辨率分为图片分辨率和屏幕分辨率。例如:图片的分辨率为30164032,我们只能说这张图片是由宽3016的像素点高4032的像素点构成的。而我们的屏幕,1024720,是1024720个物理像素点组成。图片的这个所谓的像素点的决定因素是你的相机好不好。屏幕的物理像素决定因素是你的屏幕够不够高科技3 css像素我们写页面所说的宽100px,高200px的div这个像素就是原创 2020-10-30 16:11:07 · 757 阅读 · 0 评论 -
toFixed()返回类型
返回的是字符串坑!!!原创 2020-10-28 11:53:27 · 1680 阅读 · 0 评论 -
来看一看Map和WeakMap有什么不同之处
WeakMap和Map的升级版知识点1:Map是为了解决对象中的key只能为字符串的缺陷,//基本的对象const obj = { 'name': '张飞',, 'age': 18}// Maplet m = new Map()a.set(obj,1)// 我们的Map是可以解决对象的key不能为对象的缺陷// 但是又随之而来了一个缺点,耗费内存,强引用什么是强/弱引用?就是创建引用之后,无法被垃圾资源回收机制进行回收的,就是强引用.强到你设置了null,也分不开const原创 2020-10-24 13:49:28 · 422 阅读 · 0 评论 -
柯里化深度剖析(面试满分版)
https://www.jianshu.com/p/5e1899fe7d6bhttps://www.jianshu.com/p/2975c25e4d71原创 2020-10-14 16:26:19 · 172 阅读 · 0 评论 -
手写实现js中常用继承
// 原型继承方式// 这种方法的继承的缺点: // 1. 父类的引用属性和原型对象的引用属性是所有实例共享的(共享就会存在污染)// 2. 创建子类实例时,无法向父类构造函数传参 // 3. 不能多继承// function Parent(a){// this.a = a // }// function Children(b){// this.b = b// }// Children.prototype = new Parent(1)// console.log(new原创 2020-10-13 20:34:41 · 183 阅读 · 0 评论 -
手写实现js中的一个满分的instanceof
直接上代码,解析见注释// 使用示例function Person(){ console.log('person实例化')}let person = new Person()console.log(person instanceof Object)console.log(person instanceof Person)console.log(1 instanceof Number)let a = 1let b = '1'let c = falselet d = nullle原创 2020-10-12 20:37:28 · 265 阅读 · 0 评论 -
js中的基本包装类型
我们的基本类型有六种,string,number,boolean,null,undefined,symbol我们的前三中都有基本包装类型。let a = new String(‘hello’)let a = ‘hello’他们两者是有区别的,a是一个对象,而基本类型string你可以想一下,我们的基本类型string为什么会有方法,不是应该对象才有方法的嘛?let a = ‘hello’a.strsub()因为我们js引擎中进行处理,基本类型处于‘只读模式’。js引擎做的操作let aa原创 2020-10-12 20:24:31 · 240 阅读 · 0 评论 -
来看看为什么typeof null是object
https://www.cnblogs.com/xiaoheimiaoer/p/4572558.html总结一下,这是一个历史遗留问题,无法更改。是一个小bug吧,但无伤大雅。000标志位代表的是对象,而当为null(空指正的时候),也是000。所以我们说的typeof null 为对象详情见大佬文章...原创 2020-10-12 20:03:35 · 171 阅读 · 0 评论 -
看看真正的new操作符,手写实现
// new 操作符function Person(a,b){ // 我们传递进来的this,表示的是谁调用了他 // 所以this代表的是person这个实例 // 下面两句是在实例中添加属性 this.personA = a this.personB = b this.testA=function() { console.log('testA') }}let person = new Person(11,2)console.log(person)// 规则// 1创建一个原创 2020-10-11 17:43:42 · 221 阅读 · 1 评论 -
大厂常见面试题,EventLoop,宏观,微观任务
//请写出输出内容 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(f原创 2020-10-11 15:22:50 · 471 阅读 · 0 评论 -
如何手写出一个满分的深拷贝惊艳全场?
深拷贝,就是开辟一个空间,并且进行赋值,而不是把引用地址进行赋值(浅拷贝)方法1JSON.parse(JSON.stringify(obj))但是是有缺点的,直接贴代码,详情见注释: let a = { b: [],//数组 c: {},//对象 d: 1, //基本类型 e: null,//typeof null === 'object' f: undefined,//类型为undefined g: function(){ consol原创 2020-09-29 00:02:24 · 287 阅读 · 0 评论 -
为什么不推荐for...in遍历数组
我们一般来说,使用for…in来遍历对象,使用for…of来遍历数组我们强烈建议不要使用for…in来遍历数组为什么???因为for…in遍历的是对象的key或者是数组的下标。当然最重要的原因是,他会到原型链上寻找,遍历其中新增加的属性的key值for of遍历的是数组元素值,for in 遍历的是数组的索引(即键名)for of遍历的只是数组内的元素,for in 遍历的不只是数组内的元素,还有其新增的原型属性和索引for of 遍历Array.prototype.method=func原创 2020-09-28 10:46:26 · 1809 阅读 · 0 评论 -
看看真正的防抖节流,手撕源码手写实现
话不多少,全在注释里了直接上代码:// 节流,表示的是在规定时间内,只是触发一次操作// 那就分情况讨论,// 有规定时间内,第一次触发// 规定时间内,最后一次触发// 规定时间内,第一次和最后一次都触发// 使用时间戳实现,第一次被调用function throttle(callBack, delay){ let pre = 0 return function(...args){ if(Date.now() - pre > delay){ pre = Date.ne原创 2020-09-27 17:50:17 · 90 阅读 · 0 评论 -
看看真正的bind,手撕原理手写实现
直接上代码,代码中有详细的备注例子 function fn(...args){ console.log(arguments) const a = this.a console.log(a) console.log(this) console.log(args) } let obj={ a:1, objFn: fn } obj.objFn.bind(this)() obj.objFn.bind(thi原创 2020-09-27 16:48:52 · 149 阅读 · 0 评论 -
看看真正的call方法,手撕代码实现
我们现在先来看个小demo function fn(){ let a = this.a console.log(a) } let obj = { a: 1, objFn: fn } let obj2 = { a: 2, // objFn: fn } obj.objFn() fn.call(obj2) //打印结果:我们的call方法其实就是改变函数的上下文,或者说call方原创 2020-09-27 11:53:19 · 327 阅读 · 2 评论 -
从import开始,手撕vue-router
首先,我们先来介绍一下两种不同的模式hash和history模式hash,就是url中#后面的字符串,因为我们是使用单页面应用,所以我们把hash值和页面进行一一对应,实现页面的跳转和切换。并且,我们对url的hash值进行实时监听。history,就是操控history的API,实现对历史记录的操作,例如回退,前进等。主要是使用history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;这个API来完成跳转,且无需加载页面。但是,history模式需原创 2020-09-26 13:27:59 · 144 阅读 · 0 评论 -
在vue中,点击entry进行搜索
奉上截图,有疑问可留言,有更好的方案也可留言,互相交流!!!原创 2020-09-21 15:25:12 · 646 阅读 · 0 评论 -
手撕promise!!!附上Promise源码,并一步步实现源码!
看看大佬们的文章吧!好文推荐!!!Promises/A+规范大佬详细解剖大佬手写promise给大佬们的文章点个赞吧!!!原创 2020-09-20 23:29:50 · 170 阅读 · 0 评论 -
js函数实现参数默认值和可选参数的方法
// 定义时使用 = 进行赋默认值function doSome({a,b=2,c}){ console.log(a,b,c);}//调用时使用:进行赋值,传递的是一个对象doSome({a:5,c:22})// 5 2 22//参数列表方式function doSome(a,b=2,c){ console.log(a,b,c); }doSome(5,22)// 5 2 22...原创 2020-09-20 14:34:53 · 1679 阅读 · 1 评论 -
js中的this到底是什么???
this有很多个名字,上下文,执行环境变量等等还有的说this是调用对象的引用,谁调用,this指向谁那this到底是个啥?this只有在函数中才存在?this为什么需要这个,解决的问题是啥?首先先贴代码看看此时函数中的this取到的是不同的a值要究其根本,那我们先来说一下定义变量和函数时,计算机是怎么储存的。例如,我们定义一个变量(对象)let a = {b: 1}我们是定义了一个a在栈中,同时会在堆中开辟一块空间,那么我们a是一个指针,存放的是开辟的空间地址。那么,我们如果要原创 2020-08-22 17:50:12 · 267 阅读 · 0 评论 -
js中的数据属性
js中的数据属性应该有四种解释之前,我们来解析一下数据属性是啥意思,简单来说就是数据的属性???数据属性,就是对象中的属性的特性。在ES标准中定义了,这些特性只有在内部才能使用,描述了属性的各种特征。为了实现js的引擎而用的。因为才js终不能访问他们,所以他们被放在两个方括中[[Enumerable]]。说人话就是,在ES中定死了这些属性的特性,给js引擎用的,开发者用不上。configurable是指,是否能删除,重新配置定义属性enumerable是指,是否能使用for in 来循环返回对原创 2020-08-22 13:48:40 · 473 阅读 · 0 评论 -
vue中的自定义指令
vue中我们常见的指令有很多,v-if,v-model等等那我们对指令的拓展,还有这自定义指令。它可以是全局的,也可以是局部的全局的我们可以在入口处main.js中进行定义使用后台console打印的结果对于各种属性的介绍,看官网声明钩子函数声明钩子函数中的参数好的,那声明钩子函数的作用可以自己体会,选用。那么我们参考v-model,v-html,v-if。他其实是给我们绑定的dom上增加额外的操作,是我们声明指令的一种拓展...原创 2020-08-20 14:49:53 · 103 阅读 · 0 评论 -
函数中的this和作用域以及call,apply
作用域:是从定义开始就与生俱来的属性,指的是函数,变量,对象能够被作用的范围this: this的值就是我们所说的上下文,环境,执行环境变量。this被赋予这个对象的上下文的值。所以,可以通过this的值来获取到被调用作用域的方法属性等。我们的this,谁调用就指向谁。所以,this的值是会随时变化的,根据不同的人调用。this的值也可以说是代表着被调用者我们的bind,call,apply就是改变this值的方法。或者说是给this赋值的方法还有一个就是箭头函数 ()=> {} ,这个是原创 2020-08-16 23:53:22 · 108 阅读 · 0 评论 -
var的变量提升
变量提升是var这个关键字的一个特性但是它提升的只是申明,并不是赋值例如:console.log(a)let a = 1;他是会报错的,因为let没有变量提升的特性。console的时候,他没有找到a这个变量。所以他会报错现在换成varconsole.log(a)var a= 1他不会报错,但是会打印出undefined翻译一下,上面的var,等同于下面这一段let a ;console.log(a)a = 1总结,所以说var的变量提升特性,只是声明这一步提前了,赋值这一步原创 2020-08-16 20:27:36 · 2533 阅读 · 0 评论 -
vue中webpack配置理解
webpack:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。这是官网上的解析,翻译成人话就是:webpack是一个静态资源的打包器首先,它会找到一个入口entry,从这个文件开始进行递归操作,把所有的依赖关系屡清楚,变成一个网状的结构之后,在编译原创 2020-08-15 15:59:31 · 932 阅读 · 0 评论 -
css实现过度动画和平移的效果
在我们的css的属性中有transtion和transform两个属性那我们的transform属性是对元素进行移动,旋转,缩放,2D/3D的切换等等操作那我们的transtion就是对元素的过度动画的一个操作官方网站上的demo例子:<!DOCTYPE html><html><head><style> div{width:100px;height:100px;background:blue;transition:width 2s;原创 2020-08-15 10:54:56 · 4507 阅读 · 0 评论 -
在vue中用防抖
在查询的请求中,每输入一个就会进行监听进行查询。那么我们需要做一个防抖节流的优化。 <script> function getUserAction(e) { console.log(e); console.log('执行查询操作',+new Date()); }; function debounce(func, wait) { console.log('asdad') var timeout; r原创 2020-08-14 17:52:05 · 317 阅读 · 1 评论 -
html中的文档流和文本流
知识前要:1文档流,是盒模型中的概念。文档流就是在浏览器中的规则,块状元素的规则是从上到下排序的,行内元素是从左到右排序的文档流我个人觉得就是盒模型之间的空间或者说是空气2文本流,是文本中的概念,只适用于文本这两个不会互相影响3脱离文档流,有float,absolute和fixed(relative并不会脱离文档流)其中float和position(absolute和fixed)是有区别的float是脱离文档流,但是没有脱离文本流。???这句话是啥意思?也就是说,box会对你视而不见,会原创 2020-07-24 11:54:34 · 3014 阅读 · 0 评论 -
js中的this
1普通函数的中的this在普通函数中,进行调用,函数中的this指向的就是windows上下文例如:function a(){ console.log(this.x) // 打印10}let x = 10 其他形式的函数调用例如定义在对象中的函数let demo = { let a = 10; let b = 20; function x(){ console.log(this.a) //打印10 }}demo.x()因为是demo这个对象调用的方法,所以this指原创 2020-07-23 16:02:32 · 84 阅读 · 0 评论 -
js中的声明关键字var,let,const
首先,我们需要一点点的知识储备1全局作用域:当你不使用关键字进行声明的时候,就是全局变量。这个比价好理解2函数作用域:在函数范围内使用的变量3块级作用于,在{}范围内使用的变量。我会把块级作用域和函数作用域搞混。块级作用域是在例如if(){}或者是for(){}这种是块级作用域4函数提升和变量提升就是js在进行编译的时候,会把var申明的变量提高到最前面。函数也会提到最前面。让所用使用这个函数的,不至于会找不到它let,块级作用域var,函数作用域,可以跨级作用域,会进行变量提原创 2020-07-21 23:55:18 · 742 阅读 · 0 评论 -
js原型链中的原型,对象,constractor
首先我们来搞清楚几个概念1js中‘万物皆对象’所有的变量,函数都是对象(函数是一个特殊的对象)let a = 'a' 我们申明了一个a变量,实际上这是一个对象,由String()这个构造函数而生成了。那我们的String()这个构造函数又是由Object这个对象(对象的源头,万物之源)而派生的。所以,我们所有的变量,函数的尽头都是Object对象2构造函数在1中,我们提到了构造函数,那么js构造函数和普通函数,以及java中的构造函数有什么不同的地方呢?首先,我们普通的函数是调用这个函数,返回原创 2020-07-14 13:10:11 · 519 阅读 · 0 评论 -
js中的==和===
在js中,有这 == 和 === 两种比较方法,那这其中有什么区别呢?== 是比较值的不同,===是比较值和类型的不同例如: 1 == "1" //返回true1 === “1” //返回的就是false但是有很多地方是不推荐使用 == 的,你用的时候就会报错因为 == 会造成一些奇奇怪怪的问题比如: if('a'){ console.log('成功')} // 打印: 成功 'a' == true // false 'a' == false // false是不是原创 2020-07-13 08:58:06 · 208 阅读 · 0 评论