JavaScript
文章平均质量分 60
涉及JavaScript及相关内容。作用域链,原型,原型链,闭包,ES6,设计模式等
爱思考的猪
这个作者很懒,什么都没留下…
展开
-
Js的事件机
1. Js的事件机制分为捕获和冒泡两个阶段,先进行捕获在进行冒泡,捕获是从外向内的,冒泡是从内向外的。2. Js的点击事件默认都是在冒泡阶段执行,通过设置addEventListener的第三个参数设置捕获事件。3. 合理的运用事件委托机制是个不错的选择,可以使用stopPropagation或者cancelBubble阻止冒泡。......原创 2022-08-29 22:45:39 · 173 阅读 · 0 评论 -
async和defer的区别?
async和defer的异同主要是因为他们的加载和执行时机。普通的script(不使用async和defer)加载完会立即执行,会阻塞script标签下面的资源加载和dom的解析使用async后,script加载完后会立即执行。(网络)资源的加载过程是异步的,不会阻塞后续资源的加载dom和解析。使用defer后,script异步加载,html解析之后执行、DomContentLoaded之前执行。通常情况下defer的使用频率较高,它能保证script之间的变量依赖。...原创 2022-08-26 16:06:13 · 3625 阅读 · 1 评论 -
JavaScript中的函数式编程
1.函数式编程指的是函数的映射关系2.vue3、react16.8的函数组件推动了前端函数编程3.必须是纯函数(幂等):同样的输入有同样的输出再来看一组纯函数和非纯函数的例子由于前面的函数依赖了外部的(环境)变量,当avaliableVersion这个外部变量发生变化的时候输出结果也会变化,将avaliableVersion在函数内部固定写死就使得这个函数成为纯函数了,但是这样有一个致命的弊端就是写出来的代码不够灵活没有拓展性,使用函数柯理化能有效解决这个问题。柯理化能做到函数的预加载函数柯理化也原创 2022-08-24 13:50:10 · 208 阅读 · 0 评论 -
如何判断JavaScript中的数据类型?
在最新的JavaScript标准中,一共有8种数据类型,分别是基础类型number、string、boolean、null、undefined、bigInt、symbol,引用类型:Object。其中bigInt和symbol是es6新引入的两种基础类型,bigInt可以用来声明超出最大安全边界的数字类型,SymBol用来声明唯一的变量。instance of用来判断某个变量是某个对象的实例,返回布尔值。经常用来判断引用类型的数据,只能判断用构造函数生成的基础数据类型,不能判断用字面量声明的基础类型。原创 2022-08-22 20:37:53 · 152 阅读 · 0 评论 -
手写发布订阅
发布订阅实现的方法:on 订阅事件、emit 发布事件、remove 取消发布、 once 只订阅一次原创 2022-12-03 21:33:29 · 246 阅读 · 0 评论 -
手写call、apply、bind
核心思路是给context添加一个属性,将原函数指向这个属性,再通过context调用原函数。与 Function.prototype.myCall类似,只有入参形式有所区别。## Function.prototype.myCall的实现、Function.prototype.myApply的实现Function.prototype.myBind的实现原创 2022-12-02 10:30:02 · 126 阅读 · 0 评论 -
Promise期约函数的实现
Promise也叫期约函数,是ES6中新增的特性,是解决异步编程的一种方案,取代回调函数避免回调地狱。});// 链式调用 p . then(res => Promise . resolve(res + 2)) . then(res => Promise . resolve(res + 3)) . then(res => console . log(res));// 6。原创 2022-12-01 23:29:26 · 416 阅读 · 0 评论 -
手写一个发布订阅模式
Redux和React的状态管理都是用发布订阅实现的。原创 2022-10-24 10:14:00 · 555 阅读 · 0 评论 -
TypeScript的使用(上)
TypeSecript是JavScript的超集,提供了类型检测功能,ts的类型检测是在编译阶段。TypeScript适用于复杂的大型协作项目,提升开发效率和降低代码维护成本。typeScript提供了numbe、string、boolean、undefined、null的基础类型,数组的类型有两种表示方式,还可以使用元组表示具有多种数据类型的数组。对象类型用interface定义,Object.proptotype的属性使用ts提供的Object类型。原创 2022-10-13 21:55:56 · 1201 阅读 · 0 评论 -
JavaScript中的OOP面向对象编程
面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟。每个对象都是一个功能中心,具有明确分工,可以处理信息,处理信息,发出信息。面向对象编程具有灵活性、可复用性、模块化等好处,适合更多合作完成的大型项目。原创 2022-09-29 10:35:00 · 416 阅读 · 0 评论 -
JavaScript中Object标准库的静态方法和实例方法
Object的静态方法和实例方法: Object.keys()、Object.getOwnPropertyNames()、Object.defineProperty()、Object.defineProperties()、Object.getOwnDescriptor()、Object.getOwnDescriptors、Object.preventExtensions() 、Obejct.isExtensibel()、Object.protoType.valueOf()...原创 2022-09-27 09:53:26 · 473 阅读 · 0 评论 -
console对象与控制台
console对象所有的方法都可以被覆盖,因此可以自定义自己的方法重写console.log()方法,将其改为document.write};设置连console对象本身也可以被修改//null。- copy() 复制,某个值到粘贴板- clear() 清空控制台- dir(object):显示特定对象的所有属性,是console.dir方法的别名- dirxml(object):显示特定对象的 XML 形式,是console.dirxml方法的别名原创 2022-09-25 16:51:10 · 867 阅读 · 0 评论 -
JS中的错误处理机制
除了JS提供的7种原生的错误类型,还可以通过继承Error自定义错误类型};throw new CustomError('这是一个自定义错误');//CustomError {message: '这是一个自定义错误', name: 'CustomError'};JS内置了六种内错误类型: SyntaxError、ReferenceError、TypeError、RangeError、URIError、EvalError。原创 2022-09-25 12:30:36 · 826 阅读 · 0 评论 -
JavaScript比较运算符
比较运算符用于比较两个值的大小,返回一个布尔值1 > 2;//true比较运算符不仅可以用于数字,各种类型的值都可以比较大小。JavaScript一共提供了8种比较运算符> 大于运算符< 小于运算符>= 大于或等于运算符原创 2022-09-23 15:20:51 · 1180 阅读 · 0 评论 -
#算术运算符
JavasScript提供十个算术运算符加法运算符减法运算符乘法运算符除法运算符指数运算符余数运算符数值运算符负数值运算符自增运算符自减运算符减法、乘法、除法运算符就是单纯的数学运算,下面介绍其它几个运算符,重点是加法运算符。加号运算符再运算的时候分为数学运算和连接运算。原创 2022-09-22 22:17:27 · 243 阅读 · 0 评论 -
JavaScript 中的数组类型
数组是按次序依次排列的一组值任何数据类型都可以放入数组数组可以嵌套形成多维数组//二维数组数组的empty和undefined有所区别,empty不会被for…in和forEache以及Object.keys运算,但计算length的时候会包含empty,因此使用length循环带有empty的数组时要格外小心类数组也叫伪数组,是指对象的属性为正整数或者零而且具有length属性的对象。原创 2022-09-22 14:13:53 · 490 阅读 · 0 评论 -
JavaScript中的一等公民: 函数(Function)
函数的基础使用使用函数表达式或者函数声明去创建一个函数函数声明整体提升,函数表达式只提升变量匿名函数构造函数构造函数返回一个对象,使用new操作符执行构造函数构造函数执行的过程:1. 生成一个对象将this绑定到这个对象 2. 执行构造函数的代码 3.返回结果构造函数默认返回一个对象,手动返回应用类型的数据将代替默认的返回结果闭包闭包产生的三个条件:1. 函数嵌套 2.内部函数使用了外部函数作用域内的变量 3.被返回的内部函数在外部作用域有被引用。原创 2022-09-21 09:31:11 · 472 阅读 · 0 评论 -
Object.defineProperty和proxy代理模式
proxy是浏览器提供的代理方式,相比较defineProperty来说Proxy更加灵活,能代理对象的多个属性proxy还能捕捉和拦截数组、函数、构造器、以及Object的一些方法和操作符。原创 2022-09-19 22:31:51 · 910 阅读 · 0 评论 -
Javascript中的对象(Object)类型
读写对象属性可以通过.操作符和方括号运算符,方括号运算符里面可以放变量使用delete 关键字删除对象自身属性,无法删除继承来的属性。通过defineProperty设置configuarble后将不可被删除Object.keys()方法获取的是对象自身的可枚举的key的数组, for…in遍历的是自身属性以及原型上的属性,原型上的toString方法不会被遍历使用in关键字或者hasOwnProperty方法判断对象中是否包含某个属性,区别是in关键字能判断出原型上的属性。原创 2022-09-15 14:14:57 · 862 阅读 · 0 评论 -
reduce方法的使用以及一些使用场景
reduce是数组的一个高阶方法,用来实现对数组的累加计算在数组遍历的时候,回调函数的返回值会累加给previousValue,一直到数组遍历完毕返回这个累加值。在没有传递initialValue的情况下,首次累加的时候previousValue为数组的第1项,currentValue为数组的第2项,当传递了initialValue的时候previousValue初始值为initialValue,currentValue初始值为数组的第一项。原创 2022-09-14 15:28:08 · 712 阅读 · 0 评论 -
JavaScript中使用compose对函数进行编排
开始之前先介绍下reduce函数的使用。reduce是数组的一个高阶方法,用来遍历数组的每一项实现累加//abctotal初始值默认为数组的第一项,还可以通过reduce的第二个参数给total设置初始值//sabc。使用reduce进行函数的编排;redux的compose;koa中的compose原创 2022-09-12 17:44:50 · 248 阅读 · 0 评论 -
JavaScript字符串类型
有时,文本里面包含一些不可打印的符号,比如 ASCII 码0到31的符号都无法打印出来,这时可以使用 Base64 编码,将它们转成可以打印的字符。Base64是一种编码方式,可以将任意值转成A-Z、a-z、+和\这64个字符组成的可以打印的字符,它的目的不是为了加密而是为了不出现特殊字符,简化程序的处理。Js中的字符串可以使用单引号也可以使用双引号,单引号可以嵌套双引号,双引号也可以嵌套单引号。字符串可以看作是类型为字符的数组,它具有数组的length属性,还可以使用方括号运算符。原创 2022-09-11 18:37:57 · 832 阅读 · 0 评论 -
Javascript中的数值类型
Javascript使用64位浮点数存储数值类型的数据,在进行小数计算的时候会失去精度,大安全数范围是-2^53 ~ 253,最大数值范围是2通过Number.MAX_VALUE/Number.MIN_VALUE访问最大值和最小值,通过Number.SAFE_MAX_INTEGER/Number.SAFE_MIN_INTEGER获取最大/最小安全范围Javascript中数值超过一定程度后会使用科学计数法表示:123e+3NaN是数字类型中的一个特殊值;原创 2022-09-10 17:41:51 · 930 阅读 · 0 评论 -
JS数据类型之null和undefined
JavaScript最早像Java一样只有null用来表示值不存在,根据C语言的传统null可以自动转为0,是一个对象类型,最早的时候JavaScript没有错误处理机制,null在自动转换成0的时候很难发现错误。于是 JavaScript的作者Brendan Eich又设计了新的类型undefined用来代替null。undefined在在进行数字类型转换的时候会转换成NaN。我们在阅读别人的代码时经常见到 return void(0)和return void 0的写法,这种写法被称作安全的undefin原创 2022-09-09 22:24:31 · 430 阅读 · 0 评论 -
ES6总结
const 和 let是对var问题的补充和修复,使用const和let声明的变量不会提升模板字符串做函数参数的时候与普通的函数参数有所区别箭头函数内的this指向上级作用域的this,也就是箭头函数本身所在的词法作用域的this使用拓展运算符可以从对象或数组中获取部分参数,而剩下的部分可以通过…拓展运算符获取数组在合并的时候按照从左往右的顺序,对象在合并的时候相同的属性会被后面的覆盖掉。原创 2022-09-07 12:13:09 · 89 阅读 · 0 评论 -
ES6类和装饰器的使用总结
我们都知道Javascript通过原型实现继承};ES6提供了class类,class本质上还是function,它可以看作是function的语法糖。原创 2022-09-04 23:00:42 · 578 阅读 · 0 评论 -
css面试题:li与li之间的空白间隙是什么?
从结果我们可以看到li与li之间有着5px左右的空白间隙,而且li与li之间不存在margin和padding。这个空白间隙实际上是一个空格。inline、inline-block、inline-flex等行内布局方式会将换行/tab/空格渲染成空格。设置display:table-cell;设置font-size:0;会影响文字显示,如果要显示文字则改方法不适用。ul设置letter-spacing:-5px; li设置letter-spacing:normal;...原创 2022-08-26 11:17:38 · 801 阅读 · 0 评论 -
如何让代码更简洁?
由于javascript的对象可以存储多种数据类型,所以面向对象的设计模式实现起来也很容易。策略模式的好处之一就是能有效的减少分支语句。3.使用continue取消if的{}嵌套。原创 2022-08-23 15:59:01 · 200 阅读 · 0 评论 -
使用Moncha进行自动化测试
是一个断言库,提供了很多种断言. 例如equal、notEqual、isNaN、isTrue、isFasle、strictEqual等。在自动化测试中通常使用for循环进行测试语句的生成,因为这样能覆盖更广的测试范围。使用describe和it测试pow函数。...原创 2022-08-18 08:52:25 · 66 阅读 · 0 评论 -
js中toFixed四舍五入精度问题
toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。例如将数据Num保留2位小数,则表示为:toFixed(Num);但是其四舍五入的规则与数学中的规则不同,使用的是银行家舍入规则,银行家舍入:所谓银行家舍入法,其实质是一种四舍六入五取偶(又称四舍六入五留双)法。简单来说就是:四舍六入五考虑,五后非零就进一,五后为零看奇偶,五前为偶应舍去,五前为奇要进一。单独封装toFixed方法实现。...原创 2022-08-04 15:22:45 · 1500 阅读 · 0 评论 -
Javascript闭包的概念及其应用
1. 认识闭包闭包有一个很经典的场景:使用 for循环给上面5个按钮绑定点击事件。var buttons = document.getElementsByClassName('button'); for (var i = 0; i < 5; i++) { buttons[i].onclick = function() { console.log(i+1); } }分别点击5个按钮控制台输出的都是5,由于i的作用域使的问题使得代码没有按照预期进行输出。使用原创 2022-05-12 22:36:58 · 241 阅读 · 0 评论 -
JS中的this指向
js中3种常见的this场景普通函数 var name = 'ian'; function getName() { console.log(this.name); //ian }普通的函数的this指向window对象中的函数 var userInfo = { name: 'Tom', getName: function() { console.log(this.name); } } userInfo.getName(); //Tom var _get原创 2022-04-23 18:00:22 · 1101 阅读 · 0 评论 -
详细介绍JS中的事件机制:捕获、目标、冒泡
详细介绍JS中的事件机制:捕获、目标、冒泡原创 2022-03-03 18:00:14 · 2802 阅读 · 0 评论 -
正则表达式之全部符号对照表
\ 将下一个字符标记为一个特殊字符、或一个原义字符、或一个 向后引用、或一个八进制转义符。例如,'n' 匹配字符 "n"。'\n' 匹配一个换行符。序列 '\\' 匹配 "\" 而 "\(" 则匹配 "("。 ^ 匹配输入字符串的开始位置。如果设置了 RegExp 对象的 Multiline 属性,^ 也匹配 '\n' 或 '\r' 之后的位置。 $ 匹配输入字符串的结束位置。如果设置了RegExp 对象的 Multiline 属性,$ 也匹配 '\n' 或 '\r' 之前的位置。原创 2021-04-30 09:37:04 · 258 阅读 · 0 评论 -
D3.js v6(最新)版本 组织树图:支持折叠,缩放,拖拽平移 ,自定义渲染 TSX和JS两种版本 复制直接可用 全网最新最全!!
写在前面:查阅了数十篇D3文章,费事两天才有的成果! 各位老板拿走的时候记得点个赞哦~js版本:复制直接使用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .link { fill: #37592B; } .node circle {原创 2021-04-27 14:21:19 · 1394 阅读 · 1 评论 -
JavaScript中的模块化
1.原始写法(函数) function m1(fn){ return fn; }; function m2(x){ return x+1 }; document.write(m1(m2(2)));这种写法会污染全局变量,无法保证不与其它模块发生命名冲突,而且无法直接看出模块成员之间的关系2.对象//将函数放入对象里面 const module1 = { count:0,原创 2020-12-16 23:24:05 · 153 阅读 · 1 评论 -
AOP (Aspect Oriented Programming)面向切片编程
AOP (Aspect Oriented Programming)面向切片编程:关键词:AOP,面向切片编程,装饰器,装饰者模式敲重点: AOP就是在不改变函数的情况下,给函数添加新的功能 ,实现原理是在执行原函数之前或者之后执行任意函数//前置切片 在原函数之前执行Function.prototype.before=function(fn){ const self =this; return function(){ fn.call(this,arguments); //原函数原创 2020-12-15 16:50:12 · 245 阅读 · 0 评论 -
超简单!10分钟学会工作中最长用的ES6
知识点概览let与constclass extends super箭头函数字符串模板结构赋值函数的defaultrest …const用于声明产量 声明时必须赋值let声明的变量只在代码块内有效 同一个变量let只能声明一次{let a =1;}console.log(a); //undefined还有一个常见的用法是 使用let代替闭包使用闭包var button = document.getElementsByTagName('button');for(i=0;原创 2020-09-13 22:23:30 · 103 阅读 · 0 评论