JavaScript
文章平均质量分 72
01xm
慢慢又漫漫
展开
-
【ES6】阮一峰ES6学习之Module的加载实现
HTML 网页中,浏览器通过标签加载 JavaScript 脚本。默认情况下,浏览器是同步加载 JavaScript 脚本,也就是渲染引擎遇到标签就会停下来,等到执行完脚本,再继续向下渲染。如果是外部脚本,还必须加入脚本下载的时间。如果脚本体积很大,下载和执行的时间就会很长,因此造成浏览器堵塞,用户会感觉到浏览器“卡死”了,没有任何响应。用户体验感很差。所以浏览器允许脚本异步加载,下面就是两种异步加载的语法。或属性,脚本就会异步加载。渲染引擎遇到这一行命令,就会开始下载外部脚本,但不会等它下载和执行,而原创 2022-12-14 17:54:21 · 1107 阅读 · 2 评论 -
【ES6】阮一峰ES6学习之Module的语法
在 ES6 之前主要有CommonJS和AMD两种。CommonJS 用于服务器,AMD 用于用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。进入了大一统阶段。ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。// CommonJS模块 let {原创 2022-12-14 15:06:08 · 738 阅读 · 0 评论 -
【ES6】阮一峰ES6学习之编程风格
可能会有多线程的实现(比如 Intel 公司的 River Trail 那一类的项目),这时let表示的变量,只应出现在单线程运行的代码中,不能是多线程共享的,这样有利于保证线程安全。如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值。如果模块默认输出一个对象,对象名的首字母应该大写,表示这是一个配置值对象。如果对象的属性名是动态的,可以在创造对象的时候,使用属性表达式定义。另外,对象的属性和方法,尽量采用简洁表达法,这样易于描述和书写。,尤其是在全局环境,不应该设置变量,只应设置常量。原创 2022-12-12 17:24:11 · 676 阅读 · 0 评论 -
【ES6】阮一峰ES6学习之Class的继承
ES5 是先新建子类的实例对象this,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数。比如,Array构造函数有一个内部属性[[DefineOwnProperty]],用来定义新属性时,更新length属性,这个内部属性无法在子类获取,导致子类的length属性行为不正常。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,添加子类自己的实例属性和方法。作为对象时,在普通方法中,指向父类的原型对象;原创 2022-12-12 16:22:59 · 423 阅读 · 0 评论 -
【ES6】阮一峰ES6学习之Class(一)
基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面代码中,定义了一个空的类Point,JavaScript 引擎会自动为它添加一个空的constructor()方法。类的属性和方法,除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。类相当于实例的原型,所有在类中定义的方法,都会被实例继承。事实上,类的所有方法都定义在类的。原创 2022-12-08 17:18:07 · 862 阅读 · 0 评论 -
【ES6】阮一峰ES6学习之Generator 函数(一)
总结一下,调用 Generator 函数,返回一个遍历器对象,代表 Generator 函数的内部指针。ES6 没有规定,function关键字与函数名之间的星号,写在哪个位置。Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同。第二次调用,Generator 函数从上次yield表达式停下的地方,一直执行到下一个。方法才会遍历下一个内部状态,所以其实提供了一种可以暂停执行的函数。属性表示当前的内部状态的值,是。语句,就执行到函数结束)。方法,返回的都是这个值。原创 2022-12-08 15:47:09 · 183 阅读 · 0 评论 -
【ES6】阮一峰ES6学习之迭代器和for...of循环
并不是所有类似数组的对象都具有 Iterator 接口,一个简便的解决方法,就是使用Array.from方法将其转为数组。一种数据结构只要部署了 Iterator 接口,我们就称这种数据结构是“可遍历的”(iterable)。由于数组的遍历会调用遍历器接口,所以任何接受数组作为参数的场合,其实都调用了遍历器接口。属性本身是一个函数,就是当前数据结构默认的遍历器生成函数。循环调用遍历器接口,数组的遍历器接口只返回具有数字索引的属性。后面跟的是一个可遍历的结构,它会调用该结构的遍历器接口。原创 2022-12-08 14:54:29 · 615 阅读 · 0 评论 -
【ES6】阮一峰ES6学习之Promise(一)
Promise 是异步编程的一种解决方案简单来说就是一个容器,里面保存着未来才会结束的事件( 通常是一个异步操作 )的结果。从语法上来说,Promise是个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。一旦状态改变,就不会再改变,任何时候都可以得到这个结果。状态改变只有两种状态从变为和从变为。ES6原创 2022-12-07 18:30:03 · 9562 阅读 · 1 评论 -
【ES6】阮一峰ES6学习(六) Proxy
es6中全新设计了一个叫的类型,Proxy这个词的原意是代理,用在这里表示由它来”代理“某些操作,可以译为”代理器“,Proxy就是专门为对象设置访问代理器的,无论是读还是写都要经过代理,通过proxy就能轻松监视对象的读写过程。如何使用监视对象的读写过程呢?定义一个对象,对象当中有一个属性和属性,然后通过的方式为创建一个代理对象的构造函数需要2个参数,一个是需要代理的目标对象,另一个是代理的处理对象,在这个处理对象中可以通过方法监视对象属性的访问,通过方法监视对象设置属性的过程1. get()方法ge原创 2022-12-07 17:22:12 · 6323 阅读 · 0 评论 -
【JavaScript】数组的方法汇总(更新至ES7~)
向数组的末尾添加一个或多个元素,并返回新的数组长度。原数组改变。参数可以添加一个至多个。2. ,向数组的开头添加一个或多个元素,并返回新的数组长度。原数组改变。3. 删除并返回数组的最后一个元素,若该数组为空,则返回。原数组改变。 方法从数组中删除最后一个元素。的返回值是已删除的项目。4. 删除数组的第一项,并返回第一个元素的值。若该数组为空,则返回。原数组改变。5. 方法返回通过测试(函数内判断)的数组的第一个元素的值。方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时原创 2022-12-07 11:54:33 · 727 阅读 · 0 评论 -
【JavaScript】字符串方法汇总(方法最新至ES7~)
方法一: 查找某个字符,有则返回第一次匹配到的位置,否则返回-1方法二: 返回第n个位置字符方法三:返回第n个位置字符的ASCII值对于 方法来说,如果参数不在 和字符串的 之间,则返回;而对于 方法来说,则返回 ,而不是 或。方法四:从后向前检索一个字符串方法五:检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串,则返回 -1。方法六:返回布尔值,表示是否找到了参数字符串。2. 增方法一:用于将一个或多个字符串拼接成一个新字符串3. 删这原创 2022-12-07 10:50:08 · 254 阅读 · 0 评论 -
【ES6】阮一峰ES6学习(五)Set和Map联系及区别
:Set对象允许你存储任何类型的值,无论是原始值或者是对象引用。类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。2. 属性和方法:添加某个值,返回Set结构本身。:删除某个值,返回一个布尔值,表示删除是否成功。:返回一个布尔值,表示该值是否为的成员。:清除所有成员,没有返回值。方法可以将 结构转为数组。这就提供了去除数组重复成员的另一种方法。3. 遍历:返回键名的遍历器;:返回键值的遍历器;:返回键值对的遍历器;:使用回调函原创 2022-12-06 17:02:42 · 1232 阅读 · 1 评论 -
【ES6】阮一峰ES6学习(四) 对象的扩展
允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。上面代码中,变量直接写在大括号里面。这时,属性名就是变量名, 属性值就是变量值。下面是另一个例子。除了属性简写,方法也可以简写。下面是一个实际的例子。这种写法用于函数的返回值,将会非常方便。 模块输出一组变量,就非常合适使用简洁写法。简洁写法在打印对象时也很有用。2. 属性名表达式JavaScript 定义对象的属性,有两种方法。方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号原创 2022-12-06 11:21:25 · 533 阅读 · 1 评论 -
【ES6】阮一峰ES6学习(三) 数组的扩展
扩展运算符(spread)是三个点扩展运算符的应用(1)复制数组 (浅拷贝)(2)合并数组 (浅拷贝)(3)字符串扩展运算符还可以将字符串转为真正的数组。方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。类似数组:本质特征只有一点,即必须有属性,所以任意有length属性的对象,都可以通过方法转为数组。一般实际应用中,常见的类似数组的对象是 DOM 操作返回的 Node原创 2022-12-06 09:56:04 · 264 阅读 · 0 评论 -
【ES6】阮一峰ES6学习(二)模板字符串、新增的字符串方法、函数扩展、rest参数、箭头函数
如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。字符串新增方法传统上,JavaScript 只有方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。方法返回一个新字符串,表示将原字符串重复次。参数如果是小数,会被取整。如果的参数是字符串,则会先转换成数字。用于头部补全,用于尾部补全。和一共接受两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符原创 2022-12-05 18:39:25 · 497 阅读 · 0 评论 -
【ES6】阮一峰ES6学习(一) let、const、解构赋值
上面代码中,在let命令声明变量tmp之前,都属于变量tmp的“死区”。4. 不允许重复声明:允许在相同作用域内,重复声明同一个变量。第一种场景,内层变量可能会覆盖外层变量。上面代码的原意是,代码块的外部使用外层的,内部使用内层的。但是,函数f执行后,输出结果为,原因在于变量提升,导致内层的变量覆盖了外层的变量。第二种场景,用来计数的循环变量泄露为全局变量。(很常见)上面代码中,变量只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。为 JavaScript 新增了块级作用域。运行后输出原创 2022-12-05 17:03:33 · 463 阅读 · 0 评论 -
【JavaScript】常见的性能优化方法
浏览器从服务器上下载CSS、js和图片等文件时都要和服务器连接,而大部分服务器的带宽有限,如果超过限制,网页就半天反应不过来。而CDN可以通过不同的域名来加载文件,从而使下载文件的并发连接数大大增加,且CDN具有更好的可用性,更低的网络延迟和丢包率。为了提高用户加载页面的速度,对静态资源进行缓存是非常必要的,根据是否需要重新向服务器发起请求来分类,将HTTP缓存规则分为两大类(强制缓存,对比缓存)缓存:对DOM查询进行缓存、频繁DOM操作,合并到一起插入DOM结构。懒加载:组件/路由的懒加载。原创 2022-10-14 13:00:00 · 217 阅读 · 1 评论 -
【JavaScript】循环优化
可以看到,倒序操作实际上就是将i和数组长度的比较和判断为true或false这两步合并,不用比较长度了,也不用判断了,以此来得到性能上的优化。每次我们都要去查找一次length的值,那么我们为什么不先在设置初始条件时使用一个变量来存储arr的length值呢。2、把能在循环外计算的,尽量在循环外计算,减少在内层的运算,有判断条件的语句和与循环不相关的操作语句尽量放在for外面。3、应当将最长的循环放在最内层,最短的循环放在最外层,以减少CPU跨切循环层的次数。1.i==true的判断(i为0时等式即成立)原创 2022-09-19 16:00:00 · 1487 阅读 · 0 评论 -
【JavaScript】ES6之面向对象的对象、类、构造函数、原型对象、对象原型、原型链
ES6面向对象1、面向对象1.1、对象1.2、类1.2.1、创建类1.2.2、构造函数1.2.3、类中添加方法1.3 、类的继承1.4、super关键字1.4.1、调用父类的构造函数1.4.2、调用父类的普通函数1.4、三个注意点2、构造函数和原型2.1、概述2.2、构造函数2.2.1、静态成员和实例成员2.2.2、构造函数的问题2.3、构造函数原型 prototype2.4、对象原型 __ proto __constructor 构造函数2.6、构造函数、实例、原型对象三者关系2.7、原型链查找规则2.8原创 2021-11-30 20:29:26 · 1065 阅读 · 0 评论 -
【JavaScript】深度解析深拷贝和浅拷贝的区别
深拷贝和浅拷贝深拷贝和浅拷贝赋值和深/浅拷贝的区别浅拷贝的实现方式1. Object.assign()2. Array.from()3. 展开运算符...4. Array.prototype.concat()5. Array.prototype.slice()深拷贝的实现方式1.JSON.parse(JSON.stringify())深拷贝和浅拷贝浅拷贝是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址,所以如原创 2021-11-21 09:58:21 · 922 阅读 · 1 评论 -
【JavaScript】详解 for...in循环方法
for...in循环for…in 语句用于遍历数组或者对象的属性.一般情况下,for in 循环只会遍历我们自定义的属性,原型上默认的属性不会遍历出来。例如Object.prototype.toString()、Object.prototype.hasOwnProperty()是不会被遍历出来的。但在实际应用中,如果是在原型中新增属性或者方法,for…in会将原型中新增的属性和方法遍历出来。举个例子:Object.prototype.score = '97';let people = {原创 2021-11-18 09:05:13 · 3813 阅读 · 0 评论 -
【JavaScript】深度详细理解原始值类型和引用值类型
深度理解原始值类型和引用值类型数据类型基本数据类型引用值类型特点栗子栗子在内存中的存储复制总结数据类型基本数据类型StringNumberBooleanNullUndefinedSymbol引用值类型ObjectArrayFunction…前五个是ES5之前的,第六个是ES6之后出现的。引用数据类型如果不太严谨的来说,几乎全是引用数据类型,也就是一切皆对象。因为JavaScript语言,本就是一个趋向面向对象的脚本语言,可以看出,它受Java的影响很深,借鉴了Java原创 2021-11-17 21:02:04 · 1278 阅读 · 0 评论 -
【JavaScript】简单理解JSON、JSON和JS对象的转换及区别
简单理解JSON引入概念基础结构JSON对象和JSON字符串的转换JSON和JS对象的区别引入简单来说:有三个人,小明,小亮,小红,小红是小亮的妹妹,小明喜欢小红,小明为了得到小亮妹妹的欢心,小明主动曝出了自己的重要信息给小亮,{ name:'小明', height:'185cm', weight:'70kg',}希望小亮可以把这些信息给到他妹妹。小亮在中间起到了一个沟通桥梁的作用,类似于JSON的作用。我们现在把小明看作JS,把小红看作C++。我们知道JS是前端语言,而后端语言又有很多种原创 2021-11-14 11:52:32 · 1236 阅读 · 0 评论 -
【JavaScript】超详细版作用域解析
JavaScript函数作用域作用域和变量作用域和变量var a = "apple";console.log(a); //applevar a = "apple";function fighting() { var a = 'angel';}console.log(a); // apple原创 2021-11-13 11:10:49 · 1406 阅读 · 0 评论 -
【JavaScript】页面重定向和请求转发的区别
JS的页面重定向和请求转发页面重定向: HttpServletResponse.sendRedirect请求转发: RequestDispatcher.forward先用一个例子来简单说明两者的区别:假设你去办理某个执照页面重定向:你先去了A局,A局的人说:“这个事情不归我们管,去B局”,然后,你就从A退了出来,自己乘车去了B局。请求转发:你先去了A局,A局看了以后,知道这个事情其实应该B局来管,但是他没有把你退回来,而是让你坐一会儿,自己到后面办公室联系了B的人,让他们办好后,送了过来。页原创 2021-11-11 09:30:52 · 875 阅读 · 0 评论 -
【JavaScript】详细解析跨域,同源与跨域的区别,跨域的方式
跨域的几种方式1. 什么是跨域?2. 为什么出现跨域?3. 什么是同源策略?4. 同源策略的限制5. 同源策略的天然支持跨域请求的特性属性6. 解决同源策略的方法方法一:处理跨域的jsonp方法方法二:处理跨域的CORS方法1. 什么是跨域?跨域: 就是不同域之间进行相互资源请求,也叫非同源策略请求。例如:http://baidu.com 请求:http://taobao.com 即进行不同的域名下的资源调用。注意:域名对应的IP地址也算是跨域操作;例:127.0.0.1 和 localhost 虽原创 2021-11-02 17:27:57 · 988 阅读 · 0 评论 -
【React】路由(二)
React路由1. Switch的使用2. 样式错误3. 模糊匹配和精准匹配4. Redirect的使用(初始化路由)5. 嵌套路由1. Switch的使用1.通常情况下,path和component是一一对应的关系。2.Switch可以提高路由匹配效率(单一匹配) ---- 即匹配到一个后将不再往下匹配<Switch> <Route path="/about" component={About}/> <Route path="/home" component=原创 2021-10-31 11:55:12 · 384 阅读 · 0 评论 -
JavaScript 数组去重
方法一:利用indexOf、filterArray.prototype.indexOf()、Array.prototype.filter()属于ES5filter() 方法:创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];const result = words.filter(word => word.length &g原创 2021-10-17 14:29:49 · 83 阅读 · 0 评论 -
JS字符串反转的几种方式
第一种:字符串转数组,反转数组,数组转字符串。split(""):根据空字符串拆分数组reverse():数组反转元素位置join(""):数组转回字符串,且不带分隔符let str = "hello world";let newStr = str.split("").reverse().join("");console.log(newStr);实现效果如图:第二种:定义新的空字符串,遍历str,charAt()是取字符串的一个字符(charAt() 方法可返回指定位置的字符。)原创 2021-10-16 17:24:26 · 21275 阅读 · 2 评论 -
JavaScript对象
JavaScript对象,在JavaScript中,对象是一种数据类型,它是由属性和方法组成的一个集合。属性是指事物的特征,使用“对象.属性名”访问;方法是指事物的行为,使用“对象.方法名()”进行访问。原创 2021-08-17 09:23:26 · 1436 阅读 · 0 评论 -
substring、substr、slice的具体方法区别
substring、substr、slice的具体方法区别原创 2021-08-01 20:56:55 · 168 阅读 · 2 评论 -
JS中的split( )--分隔
split():方法用于把一个字符串分割成字符串数组。原创 2021-08-01 19:44:53 · 4451 阅读 · 1 评论 -
map( )的简单使用
map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。原创 2021-07-29 00:48:09 · 690 阅读 · 0 评论 -
JS方法之slice()
-slice()通过索引位置获取新的数组,该方法不会修改原数组,只是返回一个新的子数组。原创 2021-07-27 21:45:14 · 642 阅读 · 0 评论 -
JavaScript-正则表达式
JavaScript-正则表达式:它通常被用来检索、替换那些符合某个模式(规则)的文本,例如:验证表单;也常用于过滤页面内容的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等。原创 2021-06-18 18:58:47 · 175 阅读 · 2 评论 -
JavaScript中 mouseenter 和 mouseover 的区别
mouseenter事件和mouseover事件的区别原创 2021-06-18 16:30:32 · 621 阅读 · 1 评论 -
offset、cilent、scroll三大系列总结
offset、cilent、scroll三大系列总结原创 2021-06-18 15:50:24 · 591 阅读 · 1 评论 -
元素滚动scroll系列
元素滚动scroll系列原创 2021-06-18 15:35:27 · 148 阅读 · 0 评论 -
JavaScript元素可视区client系列
JavaScript元素可视区client系列原创 2021-06-18 15:16:53 · 101 阅读 · 0 评论 -
offset元素偏移量
offset元素偏移量原创 2021-06-18 01:35:23 · 928 阅读 · 0 评论