![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
wangliang_001
这个作者很懒,什么都没留下…
展开
-
在前端开发中,如何获取浏览器的唯一标识
有一个开源库Fingerprint,就是用来处理这个事情的。这是它提供的一个demo原创 2020-05-24 11:22:41 · 6893 阅读 · 1 评论 -
关于JSON,以下代码输出什么
const obj = { a: 3, b: 4, c: null, d: undefined, get e() { return 'e' }}console.log(JSON.stringify(obj)) 答案:"{"a": 3, "b": 4, "c": null}"对象中的null, function将在JSON.stringify时会忽略掉如果对上面的例子,再进行改造,看看会输出什么结果var obj = { a: 3, b: 3, c: nu原创 2020-05-22 17:35:30 · 243 阅读 · 0 评论 -
你在工作中遇到了哪些问题,解决办法是什么
经常在面试中,会听到面试官问,你在工作中遇到了哪些问题,你是怎么解决的?这里总结一下经常在工作中遇到的一些问题Uncaught TypeError: Cannot read property ‘b’ of undefined该错误说明没有某个属性,一般是该属性前面的值是undefined或者是null的情况会出现。这个错误经常发生在后端返回的数据没有按文档的格式返回,这个时候,前端可以做一些异常处理如var a = res && res.a更好的方法,是使用lodash中的g原创 2020-05-11 06:51:29 · 2927 阅读 · 0 评论 -
解决axios请求超时
简介在vue中经常使用axios发起网络请求,与服务器进行数据交互。在使用过程中会有许多问题存在,比如由于网络不稳定导致请求超时/失败,通常有两种解决方案,一种是提示用户重新提交请求,另一种是进行相关提示并自动重新发送请求。第二种方式用户体验明显高于第一种方式。本文就针对第二种方式设计一个解决方案。拦截器基本所有的网络请求库都有拦截器接口,包括请求拦截器和响应拦截器。axios设置拦截器的接...转载 2020-01-14 10:42:03 · 8389 阅读 · 0 评论 -
手写一个Promise
经常在面试题中会看到,让你实现一个Promsie,或者问你实现Promise的原理,所以今天就尝试利用class类的形式来实现一个Promise为了不与原生的Promise命名冲突,这里就简单命名为MyPromise.class MyPromise { constructor(executor) { let _this = this this.state = 'pendin...原创 2020-01-11 11:28:38 · 262 阅读 · 0 评论 -
防抖与截流
在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove,keyup 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢?一般来讲,防抖和节流是比较好的解决方案。防抖 (debounce)所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函...原创 2020-01-11 08:57:02 · 1308 阅读 · 0 评论 -
使用正则表达式实现千分位
function format (num) { num = num + '' var reg = /[1-9]\d{0,2}(?=(\d{3})+$)/g return num.replace(reg, '$&,')}解释:正则表达式[1-9]\d{0-2}(?=(\d{3})+&) 表示前面有1-3个数字,后面至少由一组3个数字结尾?=表示正向引用,可以作为匹配的...原创 2019-05-30 07:46:21 · 5328 阅读 · 0 评论 -
__proto__指向什么,而__proto__.__proto__又指向什么
在chrome控制台打印可以找到答案:__proto____proto__.__proto____proto__.constructor.__proto____proto__.constructor.__proto__.__proto____proto__.constructor.__proto__.__proto__.__proto__...原创 2019-06-06 11:47:26 · 933 阅读 · 0 评论 -
原型链的顶端是什么
js中到处是对象,对象之间往往会通过__proto__连接在一起,这种链接的现象被称为原型链。极少数的对象会滑原型,比如:Object.create(null)生生的对象里面没有任何属性,非常“空”,我们称它为字典,这种字典对象适合存放数据,不必担心原型带来的副作用。对象生的有三种方式,一种是上面的Object.create(),一中是字面量(var a = {}),另外一种是通过构造函数(v...原创 2019-06-06 12:24:15 · 7832 阅读 · 0 评论 -
深拷贝与浅拷贝的区别与概念
数据类型分为两种基础类型和引用类型:1.基础类型:如Number, String, Boolean,undefined, null2.引用类型:Object,Array, Function浅拷贝只是复制了对象的引用地址,两个对象指向同一个内存地址,所以修改其中任意的值,另一个值都会随之变化,这就是浅拷贝(例:assign())深拷贝是将对象及值复制过来,两个对象修改其中任意的值另一个值不会...原创 2019-06-06 13:29:34 · 317 阅读 · 0 评论 -
字符串正则替换replace第二个参数是函数的问题
replace()方法的第二个参数可以是一个文本,也可以是一个函数,在只有一个匹配项(即与模式匹配的字符串)的情况下,会向这个函数传递3个参数:模式的匹配项,模式匹配项在字符串中的位置和原始字符串。在正则表达式中定义了多个捕获组的情况下,传递给函数的参数依次模式的匹配项,第一个捕获组的匹配项,第二个捕获组的匹配项…,但最后两个参数仍然分别是模式的匹配项在字符串中的位置和原始字符串。var url...原创 2019-05-29 15:42:48 · 970 阅读 · 1 评论 -
整数与浮点数
JavaScript内部,所有数字都是以64位浮点数形式储存,即使整数也是如此,所以,1和1.0是相同的,是同一个数。1 === 1.0 // true 也就是说,JavaScript语言的底层根本没有整数,所有数字都是小数(64位浮点数)。...原创 2019-06-01 17:07:36 · 2092 阅读 · 0 评论 -
将二进制数转成十进制数
思路:二进制的整数部分,可以使用parseInt(string, 2)得到。二进制小数部分,将是将小数点后的每位二进制数都转换成十进制数,然后将各个位的十进制数加起来,就是完整的小数部分的十进制数了比如:1111011.111的小数部分为:111转换过程为:代码实现为:/*** 将二进制小数部分转换为十进制数* @param binaryFloatPartArr 二进制小数部分中...原创 2019-06-01 09:29:27 · 1403 阅读 · 0 评论 -
小数的二进制如何计算
十进制小数转换成二进制小数采用"乘2取整,顺序排列"法。具体做法如下:用2乘十进制小数,可以得出积,将积的整数部分取出,再用2乘余下的小数部分,又得到一个积,再将积的整数部分取出,如此进行,直到积中的小数部分为零,或者达到所要求的精度为止。然后把取出的整数部分按顺序排列起来。先取的整数作为二进制小数的高位有效位,后取的整数作为低位有效位。例如:...原创 2019-06-01 08:27:53 · 27369 阅读 · 0 评论 -
构造函数的__proto__指向什么
function A() {}A.__proto__ === A.constructor.prototype // true上面代码,构造函数A也是对象,我们知道,任何对象都有一个constructor属性,指向它的构造函数,即A的构造函数为A.constructor而构造函数中又有一个属性prototype指向实例的原型,即A.constructor.prototype...原创 2019-06-06 11:22:27 · 3260 阅读 · 0 评论 -
函数中的同名参数
如果函数中出现了同名参数,则取最后出现的那个值function f(a, a) { console.log(a);}f(1, 2) // 2上面代码中,函数f有两个参数,且参数名都为a,取值 的时候,以后面的a为准,即使后面的a没有值,或者被省略,也是以其为准。function f(a, a) { console.log(a);}f(1) // undefined调...原创 2019-05-31 17:43:27 · 523 阅读 · 0 评论 -
函数参数的传递
函数参数如果是原始类型值,传递方式是值传递。这意味着,在函数体内修改参数值,不会影响函数外部。var p = 2 function f(p) { p = 3}f(p)p // 2上面代码中,变量p是一个原始类型的值,传入函数f的方式是值传递,因此在函数内部,p的值是原始值的拷贝,无论怎么修改,都不会影响到原始值。但是,如果函数参数是复合类型,传入函数的方式是引用的传递,也就是说,...原创 2019-05-31 17:33:52 · 269 阅读 · 0 评论 -
函数本身的作用域
函数本身也是一个值,也有自己的作用域。它的作用域与变量一样,就是其声明时所在的作用域,与其运行时所在作用域无关。var a = 1var x = function() { console.log(a)}function f() { var a = 2 x()}f()上面代码中,函数x是在函数f的外部声明的,所以它的作用域绑定外层,内部变量a不会到函数f体内取值,所以输出1...原创 2019-05-31 17:17:31 · 190 阅读 · 0 评论 -
函数的length属性
函数的length属性返回函数预期传入的参数个数,即函数定义之中的参数个数。function f(a, b) { return a + b}f.length // 2上面代码中,函数f的length属性就是定义时的参数个数,不管调用时传入多少个参数,length属性始终等于2.如果函数的参数有默认值,则计算length属性时,将不计算有默认值的参数function f(a, b = 2...原创 2019-05-31 16:33:34 · 1061 阅读 · 0 评论 -
函数的name属性
函数的name属性返回函数的名字。function fn() {}fn.name // 'fn'如果是通过变量赋值定义的函数,那么name属性返回变量名。var f = function() {}f.name // 'f'但是,上面这种情况,只有在变量的值是一个匿名函数时才是如此,如果变量的值是一个具名函数,那么name属性返回的function关键字之后的那个函数名。var ...原创 2019-05-31 16:17:23 · 1366 阅读 · 0 评论 -
箭头函数的this指向
实现一个bind函数var fn = function(a, b, c, d) { return a + b + c + d}fn.bind(scope, a, b)(c, d)Function.prototype.bind = function(scope) { let newFn = this let args = Array.prototype.slice.call(argum...原创 2019-06-05 17:13:02 · 207 阅读 · 0 评论 -
parseInt方法内部转化机制
parseInt(string, radio)内部转化机制1.首先看传入的第一个参数是否是字符串,如果是,继续后续步骤2.如果不是,如果不是数值,直接调用String()方法,将其转化为字符串3.如果是数值,如果是十六进制,parseInt会将其按照十六进制ovt解析,如果是二进制,或者八进制,先将其转成十进制数,再调用String()方法,转成字符串4.第二个参数控制参数传入的进制,...原创 2019-06-01 17:27:08 · 494 阅读 · 0 评论 -
parseInt与parseFloat那细微的差别你知道吗
我们都知道,parseInt与parseFloat都是用来将字符串转换成数字,parseInt将字符串转成整数,parseFloat将字符串转成浮点数,但是它们在处理十六进制数时有细微的差别,话不多说,上粟子parseInt('0x11') // 17parseFloat('0x11') // 0上面代码中,parseInt在处理十六进制的字符串时,会直接按十六进制处理,而parseFlo...原创 2019-06-01 19:41:42 · 432 阅读 · 0 评论 -
前端模块化
1.什么是前端模块化模块化开发,一个模块就是一个实现特定功能的文件,有了模块我们就可以更方便地使用别人的代码,要用什么功能就加载什么模块。2.模块化开发的好处1)避免变量污染,命名冲突2)提高代码利用率3)提高维护性4)依赖关系的管理3.前端模块化的进程前端模块化规范从原始野蛮阶段现在慢慢进入“文艺复兴”时代,实现的过程如下:3.1 函数封装我们在讲到函数逻辑的时候提到过,函数...原创 2019-06-10 14:02:05 · 200 阅读 · 0 评论 -
js事件循环机制(Event Loop)
JS的执行机制是一个主线程和一个任务队列(Eventqueue),所有的同步任务都是在主线程上直接执行的。异步任务都被放在任务队列中。(这里盗了一个图)这时程序的执行还没有真正的进入事件循环。接下来异步任务的执行,就涉及到了宏任务和微任务。所有的任务在主线程执行,会形成一个执行栈,执行栈会区分出宏任务和微任务,并把任务放在各自的任务队列中。宏任务一般包括整体SCRIPT代码块,seiTim...转载 2019-06-04 07:53:57 · 429 阅读 · 0 评论 -
右移运算符
右移运算符(>>)表示将一个数的二进制值向右移动指定的位数,头部补0,即除以2的指定次方(最高位即符号位不参与移动)。4 >> 1// 2/*// 因为4的二进制形式为 00000000000000000000000000000100,// 右移一位得到 00000000000000000000000000000010,// 即为十进制的2*/-4 >...原创 2019-06-04 07:45:54 · 3375 阅读 · 0 评论 -
左移运算符
左移运算符(<<)表示将一个数的二进制值向左移动指定的位数,尾部补0,即乘以2的指定次方(最高位即符号位不参与移动)。// 4 的二进制形式为100,// 左移一位为1000(即十进制的8)// 相当于乘以2的1次方4 << 1// 8-4 << 1// -8上面代码中,-4左移一位得到-8,是因为-4的二进制形式是1111111111111...原创 2019-06-04 07:44:39 · 9654 阅读 · 1 评论 -
异或运算
异或运算(^)在两个二进制位不同时返回1,相同时返回0。0 ^ 3 // 3上面表达式中,0(二进制00)与3(二进制11)进行异或运算,它们每一个二进制位都不同,所以得到11(即3)。“异或运算”有一个特殊运用,连续对两个数a和b进行三次异或运算,a^=b; b^=a; a^=b;,可以互换它们的值。这意味着,使用“异或运算”可以在不引入临时变量的前提下,互换两个变量的值。var a ...原创 2019-06-04 07:36:45 · 816 阅读 · 0 评论 -
二进制否运算符
二进制否运算符~将每个二进制位都变为相反的值(0变为1, 1变为0)。它的返回结果有时比较难理解,因为涉及到计算机内部的数值表示机制。~ 3 // -4上面表达式对3进行二进制否运算,得到-4。之所以会有这样的结果,是因为位运算时,JavaScript内部将有的操作数都转为32位二进制整数再进行运算。3的32位整数形式是00000000000000000000000000000011,二进...原创 2019-06-04 07:34:02 · 885 阅读 · 0 评论 -
比较运算符
比较运算符用于比较两个值的大小,然后返回一个布尔值,表示是否满足指定的条件。javaScript一共提供了8个比较运算符。< 小于运算符大于运算符<= 小于或等于运算符= 大于或等于运算符== 相等运算符=== 严格相等运算符!= 不相等运算符!== 严格不相等运算符这八个比较运算符分成两类:相等比较与非相等比较。1.非相等比较对于非相等比较,算法是先看两个...原创 2019-06-03 18:55:49 · 1007 阅读 · 0 评论 -
判断奇偶
常见写法如下:function isOdd(n) { return n % 2 === 1}但是这种写法不太严谨,如果n为负数,时判断就会出问题。是因为余数运算符(%)运算结果的正负号由第一个操作数的正负号决定。所以,更好的写法应该如下:function isOdd(n) { return Math.abs(n % 2) === 1;}...原创 2019-06-03 16:55:47 · 271 阅读 · 0 评论 -
二元加运算符
减法,乘法,除法在运算过程中,都是先将操作数,转成数值,再进行后续操作,而加法,却有所不一样。1)两个数值相加当两个数值相加时,加法运算符,跟减法操作符一样,直接求和。var a = 1var b = 2a + b // 32)字符串相加当两个字符串相加时,加法运算符,这表现为字符串拼接。var a = '1'var b = '2'a + b // '12'注意:只有...原创 2019-06-03 16:44:34 · 586 阅读 · 0 评论 -
with语句
with语句语法with(对象) { 语句}它的作用是,操作同一个对象的多个属性时,提供一些书写的方便.var person = { name: '张三', age: 25} with(person) { console.log(name) console.log(age)}注意,如果with内部有变量的赋值操作,必须是当前对象已经存在的属性,否则会创造一个当前作用域的全局...原创 2019-06-03 08:22:16 · 175 阅读 · 0 评论 -
对象属性的检测与获取
1.1 in运算符in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值), 如果包含就返回true,否则返回falsevar obj = { p: 1 }'p' in obj // true'toString' in obj // true上面代码中,obj对象上有一个p属性,所以使用in运算符时,得到true,但toString并没有在obj对象上,为什么也返回tru...原创 2019-06-03 08:13:52 · 412 阅读 · 0 评论 -
数组的空位问题
如果数组的某个位置是空位,使用in运算符返回falsevar arr = []arr[100] = 'a'100 in arr // true1 in arr // false原创 2019-05-30 08:27:31 · 911 阅读 · 0 评论 -
对象的键名转化问题
如果键名是数值 ,会被自动转化为字符串。如果不是十进制数,先转成十进制数,再转成字符串。var obj = { 1: 'a', 3.2: 'b', 1e2: 'c', 1e-2: 'd', .123: 'e', 0xff: 'f'}如果键名不符合标识符的条件(比如第一个字符为数字,或者含有空格或者运算符),且也不是数字,则必须加上引号,否则会报错。// 报错var obj ...原创 2019-06-02 09:09:22 · 579 阅读 · 0 评论 -
手写一个isNaN方法
利用Number方法实现一个isNaN方法function myIsNaN(param) { var param = Number(param) return param !== param}原创 2019-06-01 19:55:04 · 511 阅读 · 0 评论 -
箭头函数与bind的问题
箭头函数没有自己的this,所以不能通过bind动态地去修改thisvar a = {say: function() { var fn = (() => { console.log(this) }).bind(window) fn()}}a.say() // {say: f}原创 2019-06-05 16:28:57 · 2364 阅读 · 0 评论 -
Error对象
Error实例对象是最一般的错误类型,在它的基础上,JavaScript还定义了其他6种错误对象,也就是,存在的6个派生对象。1.1 SyntaxError对象SyntaxError对象是解析代码时发生的语法错误。上面代码的错误,都是在语法解析阶段就可以发现,所以会抛出SyntaxError。第一个错误提示是"token非法",第二个错误提示1.2 ReferenceError对象Re...原创 2019-05-30 22:16:26 · 312 阅读 · 0 评论 -
高阶函数和高阶组件
高阶函数:高阶函数是指函数可以作为另一个函数的参数或者返回值。高阶组件:是接收一个组件作为参数,并返回一个新组件的函数。高阶组件是一个函数。...原创 2019-05-11 11:58:06 · 1416 阅读 · 0 评论