![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 85
nuise_
这个作者很懒,什么都没留下…
展开
-
WebGL、canvas、svg
webGL是一种帮助我们开发3D网页的绘图技术,底层是JavaScript APIWebGL 技术旨在帮助我们在不使用插件的情况下在任何兼容的网页浏览器中开发交互式 2D 和 3D 网页效果。原创 2022-09-01 16:27:55 · 1251 阅读 · 0 评论 -
异步编程解决方案 Generator生成器函数、iterator迭代器、async/await、Promise
1.addTask(1000, ‘1’)执行到const res = await promiseCreator()的时候,交出执行权,执行下一步。try catch是同步代码在执行栈中,异步任务会被推进队列中,根据事件循环机制,会先将执行栈中的代码执行完毕再去执行队列中的任务。任务调度器-控制任务的执行,当资源不足时将任务加入等待队列,当资源足够时,将等待队列中的任务取出执行。的generator函数,是generator函数的语法糖,当函数执行遇到。)也会调用默认的 Iterator 接口。.......原创 2022-08-04 00:16:49 · 614 阅读 · 0 评论 -
setTimeout 、setInterval、requestAnimationFrame
如果事件处理程序花了300ms多一点时间完成,同时定时器代码也花了差不多的时间,就会同时出现跳过某间隔的情况。这样做的好处 ①在前一个定时器代码执行完之前,不会向队列插入新的定时器代码,确保不会有任何缺失的间隔。② 它可以保证在下一次定时器代码执行之前,至少要等待指定的间隔,避免了连续的运行。显示器的刷新频率是60Hz,浏览器也会尽量保持60Hz的刷新率运行,也就是16.7ms刷新一帧所以(60次/s)在每次屏幕刷新时,判断当前帧是否还有多余的时间(上述6个步骤执行完后),如果有,则会调用。........原创 2022-08-02 22:09:01 · 412 阅读 · 0 评论 -
JavaScript 面试题总结
区别letconstvar重复声明不能重复声明,会报SyntaxError错const定义常量,值不能修改的变量叫做常量,一定要赋初始值,因为不能修改。可以重复声明变量提升不存在不存在存在块级作用域拥有拥有不拥有会不会污染全局变量(挂载在window上)不会不会会补充如果常量是个数组或对象,对其内部元素修改,不算对常量的修改,不会报错。因为常量的值报错的是地址,地址并没有改变。..........................................原创 2022-07-28 23:31:01 · 1215 阅读 · 0 评论 -
DOM事件流 事件冒泡-事件捕获-事件委托
绑定事件监听时,第三个参数可以设置事件在哪个阶段执行,默认是事件冒泡阶段。DOM事件流的三个阶段是捕获阶段->目标阶段->冒泡阶段。目的解决页面中的事件流(事件发生顺序)的问题。原创 2022-07-26 00:02:08 · 148 阅读 · 0 评论 -
浏览器本地缓存 localstorage/sessionstorage/cookie - 身份认证 cookie/session/token
HTTP 是无状态的协议,每个请求都是完全独立的,服务端无法确认当前访问者的身份信息,无法分辨上一次的请求发送者和这一次的发送者是不是同一个人。所以服务器与浏览器为了进行会话跟踪(知道是谁在访问我),就必须主动的去维护一个状态,这个状态用于告知服务端前后两个请求是否来自同一浏览器。而这个状态需要通过 cookie 或者 session 去实现。cookie的特点cookie的主要属性原生js操作cookiecookie的使用1.浏览器首次向服务器发起请求。2.服务器响应时,会发送 Set-Cookie原创 2022-07-06 16:35:59 · 1973 阅读 · 0 评论 -
JavaScript 垃圾回收机制
基本类型存放在栈中,引用类型存放在堆中JavaScript 是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时“自动”释放。释放的过程称为垃圾回收。所有垃圾回收器都需要做的任务一般来说没有被引用的对象就是垃圾,就是要被清除。从根开始遍历对象。例外如果几个对象引用形成一个环,互相引用,但根访问不到它们,这几个对象也是垃圾,也要被清除。根对象有一组基本的固有可达值,由于显而易见的原因无法删除存活对象如果引用或引用链可以从根访问任何其他值,则认为该值是可访问的将堆分为新生代和老生代。原创 2022-07-04 16:20:48 · 953 阅读 · 0 评论 -
JS实现带并发的异步任务调度器-promise
实现一个具有并发数量限制的异步任务调度器,可以规定最大同时运行的任务。JS实现一个带并发限制的异步调度器Scheduler,保证同时运行的任务最多有两个。完善下面代码的Scheduler类,使以下程序能够正常输出:整个的完整执行流程:起始1、2两个任务开始执行500ms时,2任务执行完毕,输出2,任务3开始执行800ms时,3任务执行完毕,输出3,任务4开始执行1000ms时,1任务执行完毕,输出1,此时只剩下4任务在执行1200ms时,4任务执行完毕,输出4任务调度器-控制任务的执行,当资源不足原创 2022-07-01 17:35:30 · 2495 阅读 · 0 评论 -
TS 常考知识点记录
TypeScript是JavaScript的超集,在JavaScript的基础上添加了很多新特性。主要优势1.在编译阶段就可以发现大部分错误,更利于调试和维护。2.TypeScript 是添加了类型系统的 JavaScript,适用于任何规模的项目。再从TypeScript新增的特性进行回答......原创 2022-06-25 17:25:48 · 270 阅读 · 0 评论 -
JavaScript 数据结构
Object.keys()方法会返回一个由给定对象的自身可枚举属性组成的数组如果Object.keys()返回的迭代器对象长度为0,说明该对象是空对象。还需要判断是否为对象的构造函数,在JS中有9个内置构造函数,调用该函数返回的结果都为true。还需要考虑边界情况比如null或者undefined修改版本如果属性是Symbol对象,这个函数会判断错误可以通过方法判断是否存在Symbol对象如果不可枚举对象也需要判断,那么可以将换成Reflect.ownKeys() 优先使用 方法返回一个由目原创 2022-06-25 16:27:18 · 591 阅读 · 0 评论 -
DOM渲染与优化 - CSS、JS、DOM解析和渲染阻塞问题
知识点对于浏览器说,页面加载主要有两个事件浏览器向服务器请求到了 HTML 文档后便开始解析,产物是 DOM(文档对象模型),到这里 HTML 文档就被加载和解析完成了。HTML文件的解析就是生成DOM树的过程HTML中的三类script渲染进程在解析 HTML 的时候,如果遇到一个没有任何属性的 标签,就会暂停解析,先发送网络请求获取该 JS 脚本的代码内容,然后让 JS 引擎执行该代码,当代码执行完成后再切换回渲染引擎继续渲染流程。async、defer属性的js脚本,渲染引擎遇到这一行命令,原创 2023-09-08 14:17:40 · 4351 阅读 · 3 评论 -
排序算法 快排-冒泡-归并排序-堆排序-选择排序-V8引擎sort排序的原理
思路通过一趟排序,将排序的数组分隔成了两个部分,基准元素也找到最终的位置。一个n个元素,那么就需要n-1趟。采用递归的思想实现1.递归的参数、返回值和停止递归的条件一般采用左右边界的方法来对数组进行区间划分。所以我们需要知道数组、左右边界。我们通过在数组中交换元素进行排序,所以修改了数组本身的值,不需要返回值。递归的终止条件是子表只有一个元素时,停止。2.本层递归逻辑寻找基准值的位置,根据基准值分为左右两个部分,左右那部分继续排序优化:随机基准值的快排基本快排的问题:不适合本身有序的数组原创 2022-06-14 19:17:28 · 428 阅读 · 0 评论 -
JS常见代码题 数组去重-自定义new-节流和防抖-深拷贝-instanceof-url参数提取-千位分隔符-数组转树形结构-数组扁平化-函数柯里化
方法1: 利用forEach()和indexOf()说明: 本质是双重遍历, 效率差些思路1:遍历数组,建立新数组,利用indexOf判断是否存在于新数组,不存在则push,最后返回新数组。思路2:数组下标判断法, 遍历数组,利用indexOf判断元素的值是否与当前索引相等,如相等则加入方法2: 利用forEach() + 对象容器说明: 只需一重遍历, 效率高些思路: 遍历数组,将数组值保存成object对象的属性,判断数组值是否已经保存在object中,未保存则push到新数组并用object[原创 2022-06-08 10:19:18 · 416 阅读 · 0 评论 -
Promise 自定义
文章目录Promise自定义Promise.all()/Promise.race()的实现 ★ 面试常考Promise.all()Promise.race()Promise自定义1.promise的执行结果通过.then获取Promise.all()/Promise.race()的实现 ★ 面试常考Promise.all()参数是数组数组中如果为值,说明该值为成功的value返回一个promise,只要一个失败了立即返回失败的promise如果都成功时,值为一个成功值组成的数组如原创 2022-05-16 20:42:33 · 343 阅读 · 0 评论 -
JavaScript字符串常用方法
文章目录JavaScript字符串常用方法总结切片slice\substr\subtringJavaScript字符串常用方法总结切片slice\substr\subtring涉及到索引下标切割区间的都是左开右闭这三个方法不对原字符串做修改,返回截取之后新的字符串区别slice(start, end)substr(start, length)subtring(start, end)参数的意义开始的下标结束的下标开始的下标截取的长度同slice参数的范围可以为负原创 2022-05-13 09:46:01 · 97 阅读 · 0 评论 -
TS练习 贪吃蛇案例
文章目录TS练习 贪吃蛇案例环境配置ts编译文件tsconfig.jsonwebpack配置文件webpack.config.jsbabel 处理兼容问题编写ts代码食物类 Food.ts记分类 ScorePanel.ts蛇类snake游戏控制器 FanmeControl.ts蛇穿墙和吃食检测蛇身体的移动食物刷新问题TS练习 贪吃蛇案例环境配置使用npm管理包,初始化项目,生成包管理文件package.jsonnpm init -y安装打包工具webpackwebpack命令行工具webpac原创 2022-05-02 20:28:34 · 1585 阅读 · 1 评论 -
JavaScript 高频面试题
文章目录JavaScriptthis 指向问题,如何修改this指向引申1:模拟bind引申2:为什么多次绑定,只指向第一次绑定的obj对象?有没有解决办法?引申3:一般函数和箭头函数的区别数据类型有哪些引申1:如何判断数据类型JavaScriptthis 指向问题,如何修改this指向一般函数:在调用时向函数传递执行上下文对象以函数形式调用,指向window以方法形式调用,this指向调用的方法以构造函数的形式调用,this是新创建的对象箭头函数:本身没有this,它的this可以沿原创 2022-04-26 21:34:55 · 1313 阅读 · 0 评论 -
ES6 Proxy代理 与 Reflect反射
文章目录ES6 Proxy 与 ReflectProxy拦截操作set/get方法deleteProperty 删除属性Reflect 反射ES6 Proxy 与 ReflectProxyProxy 可以理解成在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy是window上自带的构造函数 let proxy = new Proxy(target, handler);target参数表示所要拦截的目标对象ha原创 2022-04-25 22:13:39 · 106 阅读 · 0 评论 -
牛客网ACM模式 JsV8和Java输入输出练习
文章目录牛客网ACM模式 JsV8和Java输入输出练习背景输入输出语法JS V8JAVAVS Code配置Java运行环境题目1 多行输入多行输出 行数列数确定JS题目2 由第一行输入确定行数 行数不确定列数确定JS题目3 由特定的输入表示输入结束 行数不确定列数确定js题目4 特定的输入结束符 列数不确定JS题目5 行数列数都不确定JS题目6 字符串排序JS题目7 字符串排序 多行输入牛客网ACM模式 JsV8和Java输入输出练习背景事情是这个样子,第一次笔试时发现笔试题是ACM模式,要自己写原创 2022-04-17 12:36:27 · 7501 阅读 · 8 评论 -
JavaScript 变量的解构赋值-为什么可以交换两个数
文章目录JavaScript 变量的结构赋值为什么可以交换两个数?JavaScript 变量的结构赋值什么是解构赋值ES6允许按照一定模式从数组和对象中提取值,对变量进行赋值//1.数组的解构let F = ['A','B','C'];let [a,b,c] = F; //相当于声明了3个变量,按照F的对应位置赋值let [a,b,c,d] = F; //不会报错,相当于d没有赋值,d=undefiend//2.对象的解构let F = {name:'ranan',age:12};原创 2022-04-14 19:03:34 · 722 阅读 · 0 评论 -
JavaScrip 判断数据结构中是否存在特定的值或属性
文章目录JavaScrip 判断数据结构中是否存在特定的值或属性对象inObject.prototype.hasOwnProperty(value)数组Array.prototype.indexOf(value,start)/lastIndexOf(value,start)Array.prototype.find((function(value,index,arr))/ findIndex((function(value,index,arr))Array.prototype.includes(val,sta原创 2022-04-10 20:32:17 · 1202 阅读 · 0 评论 -
JavaScrip 正则表达式及字符串相关方法
文章目录JavaScrip 正则表达式及字符串相关方法正则表达式的创建正则方法 reg.test(str)字符串可以使用正则的方法str.split() 按规则拆分str.search(搜索的内容) 按规则查找string.match(条件) 按规则提取ES2020 String.prototype.matchAll()string.replace(匹配的内容,替换的内容) 将匹配的内容进行替换ES6之后的正则扩展方法 RegExpObject.exec(string) 分别获取匹配结果命名捕获分组grou原创 2022-04-10 20:27:30 · 552 阅读 · 0 评论 -
JavaScript DOM操作
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派JavaScript DOM操作事件的冒泡和事件的委托事件冒泡同一片区域,给其中的元素都绑定了点击事件,点击公共区域时,触发顺序?假设如图,从span->box1->body依次触发事件的冒泡(Bulle):事件的向上传导,事件在目标元素处理后,会由内向外的一层层传递在开发中大部分情况冒泡都是有用了,如果不需要可以通过事件对象event.cancelBubbl取消冒泡。let span = docum原创 2022-03-27 20:35:06 · 5111 阅读 · 0 评论 -
JavaScript 自定义工具函数库
文章目录自定义工具函数库函数相关call()&apply()&bind()call(Fn,obj,.....args)apply(Fn,obj,args)bind(Fn,obj,...args)函数节流与函数防抖相关理解实现数组相关数组去重数组合并和切片数组扁平化数组分块删除数组中部分元素得到数组的部分元素自定义工具函数库函数相关call()&apply()&bind()call(Fn,obj,…args)语法:call(Fn,obj,…args)功能: 执行Fn原创 2022-03-25 16:56:51 · 1440 阅读 · 0 评论 -
JavaScript 异步之宏队列与微队列
文章目录js 异步之宏队列与微队列js 异步之宏队列与微队列异步执行的函数(回调函数)放入队列中执行。队列分为宏队列与微队列。宏队列:用来保存执行的宏任务(回调),比如:dom事件回调,ajax回调,定时器回调微队列:用来保存执行的微任务(回调),比如:promise回调,mutation回调1.JS为单线程引擎,必须先执行所有的初始化同步任务代码。2.每次取出第一个宏任务执行前,都要将所有的微任务执行完毕。同步->微队列->宏队列 setTimeout(()=>{ //原创 2022-03-21 21:24:30 · 1885 阅读 · 0 评论 -
JavaScript 线程机制与事件循环机制
是进程内的一个独立执行单元,一个进程中可以有多个线程,多个线程共享进程的数据。进程中的任意一线程执行出错,都会导致整个进程的崩溃。启动一个程序时,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,我们把这个运行环境叫进程。ring3仅能使用常规CPU指令集,不能使用操作硬件资源的CPU指令集,比如IO读写等。JS是单线程运行的,但使用H5中的WebWorkers可以多线程运行。ring0可以使用所有CPU指令集,ring0被叫做内核态,完全在。.........原创 2022-03-08 20:26:26 · 947 阅读 · 0 评论