![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 67
Amethyst紫宣
这个作者很懒,什么都没留下…
展开
-
事件循环例题,你能做对几道?
例题1new Promise((resolve)=>{ resolve();}).then(()=>{ console.log(1); Promise.resolve().then(()=>{ console.log(2); })}).then(()=>{ console.log(3);})例题2new Promise((resolve)=>{ resolve();}).then(()=>{原创 2022-02-12 16:02:18 · 718 阅读 · 1 评论 -
正则表达式
文章目录元字符(限定符)示例创建正则表达式对象正则表达式其他方法的使用match()replace()exec(str)ES9正则扩展命名捕获分组正则断言dotAll模式ES11-String.prototype.matchAll元字符(限定符)元字符含义.除了\n以外的任意一个单个字符[]范围()分组,提升优先级|或者*0-多次+1-多次?0-1次{0,}*{1,}+{0,1}?\d数字\D非原创 2021-02-11 16:26:26 · 160 阅读 · 2 评论 -
JS实现瀑布流布局
瀑布流布局的特点:各元素等宽不等高大概效果如下:分析通过定位布局先确定在浏览器显示区域内,一行能放多少列图片获取页面的宽度pageWidth(做兼容)图片盒子宽度itemWidth间隙gap列数:column=pageWidth/(itemWidth+gap)先排第一行当盒子索引小于列数column的时候,就排在第一行确定在第一行后,动态设置left的值,top值为0left=i*(itemWidth+gap)第一行排好之后,因为第二行需要考虑top值,将原创 2021-05-18 17:39:58 · 475 阅读 · 1 评论 -
数组扁平化的四种方法
文章目录数组扁平化数组扁平化的四种方法数组自带的flat方法利用正则函数递归使用reduce数组扁平化数组扁平化是指将一个多维数组变为一个一维数组const arr=[1,[2,[3,4]]]=>[1,2,3,4]数组扁平化的四种方法数组自带的flat方法const arr=[1,[2,[3,4]]];console.log(arr.flat(Infinity));// [1, 2, 3, 4]利用正则先使用JSON.stringify(arr)将原创 2021-05-16 15:50:53 · 520 阅读 · 0 评论 -
reduce方法详解(含数组扁平化、数组去重)
文章目录参数应用场景数组求和reduce实现数组扁平化统计数组中元素出现的次数reduce数组去重参数arr.reduce(callback(prev,cur,index,arr),init);prev:上一次调用时的返回值,或者初始值init(传入init)cur:当前正在处理的数组元素index:和当前正在处理的数组元素一一对应arr:原数组init:初始值,该值也决定了返回值的数据类型常用的参数:prev、cur、init应用场景数组求和、求乘积计算数组中每个元素的出现次原创 2021-05-16 15:44:17 · 438 阅读 · 0 评论 -
JS的事件循环机制-event-loop
文章目录JS运行机制event-loopJS运行机制1、谈谈JS的运行机制JS是单线程的,因为js离不开用户的操作,和用途有关例如:操作页面上的dom元素,假设js是多线程,一个线程是删除dom,一个线程是增加dom,这样就不知道该以哪个线程为主了2、JS语言的特点?单线程、解释性语言event-loop事件循环机制 由三部分组成:调用栈、微任务队列(微队列)、消息队列(宏队列)event-loop开始的时候,会从全局一行一行地执行,会压入到调用栈中,被压入的函数被原创 2021-05-15 09:22:23 · 210 阅读 · 0 评论 -
JS防抖和节流
文章目录情景借助underscore实现防抖(debounce)应用场景基本实现立即执行返回值和取消操作节流(throttle)应用场景使用时间戳完成节流函数({leading:true,trailing:false})使用定时器完成节流函数({leading:false,trailing:true})合并、处理第三个参数函数防抖和节流:解决频繁性的事件触发,实现前端页面性能优化。情景<body> <div class="box"></div> &l原创 2021-05-13 20:07:45 · 206 阅读 · 2 评论 -
Promise面试题——宏队列和微队列
宏队列和微队列JS中用来存储待执行回调函数的队列包含两个不同的特定的队列宏队列:用来保存待执行的宏任务(回调),如:定时器回调、dom事件回调、ajax回调微队列:用来保存待执行的微任务(回调),如:promise的回调、MutationServer的回调js首先必须执行完所有的初始化同步代码每次准备取出第一个宏任务执行前,都要先将所有的微任务一个接一个地取出来执行分析输出结果:setTimeout(()=>{ console.log('0');},0);n原创 2021-05-11 11:10:28 · 449 阅读 · 0 评论 -
手写Promise核心
文章目录起步构建then()、链式调用then中回调的返回值类型代码优化、返回约束静态resolve()和reject()all(promises)race()注意异步操作和处理异常起步构建状态、值、executor、resolve、reject由于状态只改变一次,所以在resolve和reject改变状态之前要先判断当前是否为pending状态。注意处理异常:如在executor中调用resolve或reject的时候传入未定义变量。因此需要在executor外层加上try-catch捕获异常。原创 2021-05-10 19:45:03 · 143 阅读 · 0 评论 -
原始包装类型、单例内置对象
文章目录原始包装类型BooleanNumbertoFixed()toPrecision()、toExponential()isInteger()与安全整数String字符串操作方法字符串位置方法字符串包含方法trim()去掉两端空格repeat() 复制字符串padStart()、padEnd() 填充字符字符串迭代与解构toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()字符串模式匹配方法localeCompare() 比较原创 2021-03-30 09:36:32 · 273 阅读 · 0 评论 -
apply、call、bind改变this指向
apply和call改变this指向apply和call方法也是函数的调用方式apply和call如果没有传入参数,或者是传入的null,那么该方法的函数对象中的this就是默认的windowapply和call传入参数的写法不一样,但是效果一样 function add(x,y){ console.log('result: '+(x+y)+this); } add(1,2);//result: 3[object Window] add.apply();//result: Na原创 2021-03-05 22:23:16 · 239 阅读 · 0 评论 -
构造函数、实例对象、原型对象
文章目录构造函数与实例对象之间的关系原型简单的原型写法原型添加方法、属性解决数据共享问题原型中的方法相互访问实例对象使用属性和方法的层层搜索为内置对象添加原型方法原型链改变原型的指向原型最终指向构造函数与实例对象之间的关系1、实例对象是通过构造函数来创建的——创建的过程叫实例化2、如何判断对象是不是这个数据类型?1)对象 instanceof 构造函数的名字(更常用)2)通过构造器的方式:实例对象.构造器==构造函数的名字 console.dir(obj);//console.dir显示对象的结原创 2021-03-05 20:49:02 · 1525 阅读 · 0 评论 -
JS创建对象的四种方式
对象:特指某个事物,具有属性和方法创建对象:实例化一个对象的同时对其属性进行初始化1、字面量创建对象var obj1={ name:"amethyst", color:"blueviolet", code(){ console.log('love coding'); }}console.log(obj1.color);//bluevioletobj1.code();//love coding调用系统的构造函数创建对象var obj2=new原创 2021-03-05 09:21:03 · 3501 阅读 · 7 评论