js
文章平均质量分 90
一步一个脚印,为了学习而学习
Free Joe
我本微末凡尘,却也心向天空
展开
-
优化浏览器主线程执行的几个API,着重讲解 requestIdleCallback 与 requestAnimationFrame
为了提高浏览器的性能和用户体验,现代浏览器采用了一些技术来优化主线程的执行。本文将提供浏览器因JS耗时任务导致页面卡顿的部分解决方案。 - `setTimeout` 延迟加载 (使用不当可能适得其反) - `web worker` 多线程 (不能操作dom,主要计算密集型的任务) - `requestIdleCallback` 帧空闲时运行 (react18带🔥的,低优先级任务) - `requestAnimationFrame` 每帧都会运行 (主要做动画效果调优)原创 2024-04-22 12:05:56 · 1570 阅读 · 0 评论 -
了解JS中模块概念(前端模块规范与ES6 module)
在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。<font color=orange>ES6 在语言标准的层面上,实现了模块功能,</font>而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。原创 2020-12-11 01:17:49 · 1045 阅读 · 1 评论 -
开发中用得上的ES6比较运算符 ?. ??
链式运算符`?.`Null判断运算符 `??`Object.is() 同值相等链式运算符`?.`读取对象内部的某个属性,往往需要判断一下该对象是否存在。使用了`?.`运算符,直接在链式调用的时候判断,左侧的对象是否为null或者undefined。如果是,就不再往下运算,而是返回undefined。原创 2020-12-10 11:49:57 · 1528 阅读 · 0 评论 -
ES6 class
JavaScript 语言中,生成实例对象的传统方法是通过构造函数。相对于传统的面向对象语言,语义化等方面差强人意。ES6引入了 Class概念,作为对象的模板,<font color=afb4db>一定程度上可以将class视为构造函数的语法糖。原创 2020-12-10 11:30:55 · 150 阅读 · 0 评论 -
JS async await
async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例,函数内允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。 <font color=afb4db>Async 函数是 Generator 函数的语法糖。<font color=abc88b>async函数就是将 Generator 函数的星号(*)替换成async,将`yield`替换成`awai原创 2020-12-09 00:23:19 · 537 阅读 · 0 评论 -
JS Generator function* 生成器函数
生成器函数在执行时能暂停,后面又能从暂停处继续执行。调用一个生成器函数并不会马上执行它里面的语句,而是返回一个这个生成器的 迭代器 (iterator )对象。当这个迭代器的 next()方法 被首次(后续)调用时,其内的语句会执行到第一个(后续)出现yield的位置为止,yield 后紧跟迭代器要返回的值。或者如果用的是yield*(多了个星号),则表示将执行权移交给另一个生成器函数(当前生成器暂停执行)。原创 2020-12-08 00:40:48 · 1410 阅读 · 0 评论 -
JS Iterator(迭代器)
任何数据结构只要部署 Iterator 接口,就可以完成遍历操作,即依次处理该数据结构的所有成员。遍历器对象本质上,就是一个指针对象。指针对象的next方法,用来移动指针。next方法返回一个对象,表示当前数据成员的信息。这个对象具有value和done两个属性,value属性返回当前位置的成员,done属性是一个布尔值,表示遍历是否结束,即是否还有必要再一次调用next方法。对于遍历器对象来说,done: false和value: undefined属性都是可以省略的。原创 2020-12-07 11:37:14 · 9191 阅读 · 0 评论 -
ES6 Promise
Promise是异步编程的一种解决方案,相比与传统回调和事件,它可以让异步事件队列化,按照设计者预期处理异步事件。也可以简单的将Promise理解为一个容器,里面装载着某个未来才会结束的事件。Promise状态不受外界影响任何其他操作都无法改变这个状态,只有异步操作的结果,可以决定当前是哪一种状态。这就是它的承诺(Promise)Promise状态切换完成之后不可再次改变 。只要状态发生了改变,会一直保持这个结果,这时就称为 resolved(已定型)。之后你对其添加回调函数,得到也是这个原创 2020-12-06 20:05:16 · 211 阅读 · 0 评论 -
JS基本数据类型Symbol
背景:对象属性名都是字符串,这容易造成属性名的冲突。使用别人提供的对象,想给对象添加新的属性,新的属性名可能与现有的属性名产生冲突。ES6推出新的原始数据类型Symbol,表示独一无二的值。原创 2020-12-05 23:33:55 · 639 阅读 · 0 评论 -
JS深浅拷贝介绍与实现
<font color=afb4db>深浅拷贝主要针对对象而言的。</font><font color=abc88b>浅拷贝:只拷贝对象最外面一层的基本数据类型的数据;若属性是对象,只拷贝其引用。</font><font color=8f4b4a>深拷贝:拷贝多层数据;每一层级别的数据都会拷贝。</font><font color=50b7c1>深拷贝会把对象里所有的数据重新复制到新的内存空间,是最彻底的拷贝。</font>原创 2020-11-30 21:17:19 · 441 阅读 · 0 评论 -
js中闭包
在一个函数内可以访问到另一个函数(外层作用域)的局部变量时,<font color=afb4db>此时「函数」和「函数内部能访问到的变量」的总和,就是一个闭包。原创 2020-11-30 11:27:58 · 153 阅读 · 0 评论 -
JS执行过程与执行上下文(栈)
js代码的执行过程分为两个阶段,编译阶段与执行阶段。执行上下文可以理解为当前代码的执行环境,它会形成一个作用域。JS代码执行过程编译阶段词法、语法分析可执行代码生成作用域确认执行阶段执行上下文可执行代码的运行环境上下文对象变量对象变量对象 VO 与 活动对象 AO 关系变量对象属性变量对象创建过程作用域链执行上下文生命周期创建阶段执行阶段执行上下文栈原创 2020-11-29 19:25:52 · 300 阅读 · 0 评论 -
JavaScript 词法作用域&作用域链
<font color=afb4db>作用域是用来规定变量或函数访问其他数据的权限。<font color=50b7c1>静态作用域JavaScript 语言采用的是词法作用域(静态作用域)规则的。</font>这是否与我们常说JavaScript 中的全局作用域,函数作用域,块级作用域有冲突呢?没有冲突!JavaScript 语言采用的是词法作用域,是语言层面的,而全局作用域等是被包含的。原创 2020-11-28 16:09:34 · 216 阅读 · 0 评论 -
进一步了解JS对象:属性描述符&属性不变形
通过`Object.defineProperties()` 方法可直接在一个对象上定义新的属性或修改现有属性,并返回该对象。`Object.defineProperties()`就是用来为对象设置属性描述符的。从ES5开始,添加了对对象属性描述符的支持。现在JavaScript中支持6种属性描述符:原创 2020-11-25 15:03:38 · 191 阅读 · 0 评论 -
JavaScript对象内存模型&垃圾回收
JavaScript 基本数据类型的值是存放于栈内存,引用类型分别存储在栈和堆中——栈里面存的就是对象在堆中的地址,而堆里面存的是对象里的数据。原创 2020-11-24 01:07:02 · 384 阅读 · 0 评论 -
JS获取对象数组特定key对应的值数组
想获取对象数组特定key对应的值数组,发现JS并无相关函数。也可以理解,因为JS中的对象数组的里面的对象可能为null对象,操作此值直接抛异常,咋不这么极端,在正常对象数组的情况下,可以如下实现该功能。当然你也可以遍历处理掉null对象先,或抛异常捕获或直接排出队列。function getMappingValueArrayOfKey(array,keyName){ if(Object.prototype.toString.call(array)=='[object Array]'){ return原创 2020-11-22 23:01:35 · 9362 阅读 · 1 评论 -
JS常用的遍历方法及其区别
for, forEach, for in, for of,filter, mapsome, everyreduce原创 2020-11-21 20:35:30 · 561 阅读 · 0 评论 -
JavaScript对象中的可枚举属性和不可枚举属性
在JavaScript中,对象的属性有可枚举和不可枚举之分,它是由对象属性描述符`enumerable`决定的。如果该属性是可枚举性的那么这个属性就能被`for…in`查找遍历到。原创 2020-11-21 14:51:17 · 4073 阅读 · 1 评论 -
原型、原型链和原型继承及简述instanceof运算符
每一个 Javascript 对象(除`null`外)创建的时候,就会关联另一个对象——就是我们所说的原型,<font color=f15a22>每一个对象都会从原型中继承属性。<font color=afb4db> 每个实例对象都有一个私有属性(称之为 `__proto__` )指向它的构造函数的原型对象(prototype )。<font color=abc88b>该原型对象也有一个自己的原型对象( `__proto__` ) ,层层向上直到一个对象的原型对象为 `null`。原创 2020-11-17 01:12:09 · 214 阅读 · 0 评论 -
Javascript中严格模式和正常模式下this的指向
在 Javascript中 `this` 的指向不是固定不变的,它会随着执行环境的改变而改变。但它始终会指向该方法运行时所在的环境(调用函数的那个对象)。函数和方法区别: 方法依赖对象调用,函数不依赖对象。原创 2020-11-12 21:11:35 · 874 阅读 · 0 评论 -
JS变量声明·提升·函数提升
在ES6之前,声明变量的关键字只有`var`,作用域只有:<font color=afb4db>全局作用域和函数作用域;</font>到了ES6,引入`let,const`两个关键字声明变量和常量,同时引入新的作用域:<font color=afb4db>块级作用域。</font>ES5 只有两种声明变量的方法:`var`命令和`function`命令。ES6 除了添加`let`和`const`命令,另外两种声明变量的方式:`import`命令和`class`命令。所以ES6 一共有 6 种声明变量的原创 2020-11-11 20:41:17 · 441 阅读 · 0 评论 -
Javascript八种数据类型&如何判断数据类型?
<font color=afb4db>变量是用于存放数据的容器。</font>其本质是程序在内存中申请的一块用来存放数据的空间。JS中所有的变量的值都是保存在栈内存中的,只不过引用类型存储在栈中的是其在堆中的地址。原创 2020-11-08 11:53:55 · 1003 阅读 · 0 评论 -
前端js代码调试
前端代码调试:多种方式调试JS只做一个简单的Js调试案例,工具准备:1.WebStorm(等任意编辑器都可以) 2.Google Chrome第一步:创建一个HTML,写入js脚本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS DEBUG</title></head><body><原创 2020-06-05 09:03:41 · 1204 阅读 · 0 评论