![](https://img-blog.csdnimg.cn/399012fefc7b4a49be064c57f81027cf.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JS
文章平均质量分 66
JS
与宇宙对视
freedom.
展开
-
js事件委托(事件代理)
事件委托的使用以及原理原创 2023-03-16 11:27:55 · 2388 阅读 · 0 评论 -
script 标签中的 async 和 defer 属性
defer 适合与dom有关联的脚本异步加载 文档解析完成执行async 比较适合第三方的脚本异步加载 立即执行双方都只适用于外部脚本。原创 2022-09-16 21:07:41 · 507 阅读 · 0 评论 -
for...in...和for...of...的区别是什么
会遍历数组所有的可枚举属性,包括原型,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,使用hasOwnProperty()方法可以判断某属性是不是该对象的实例属性。forof不同于forEach,forof是可以break,continue,return配合使用,forof循环可以随时退出循环。一个数据结构只要部署了Symbol.iterator属性,就被视为具有iterator接口,可以使用for…遍历的是数组元素的值,而且forof遍历的只是数组内的元素,不包括原型属性和索引。...原创 2022-07-17 22:44:02 · 607 阅读 · 0 评论 -
ES6——扩展运算符的作用以及使用场景
对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有、,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。上面这段代码,变量z是解构赋值所在的对象。它获取等号右边的所有尚未读取的键(a和b或者y和b),将它们连同值一起拷贝过来。由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就会报错,因为它们无法转为对象。,如果一个键的值是复合类型的值(数组、对象、函数)、那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。另外,扩展运算符的解构赋值,不原创 2022-07-10 21:49:22 · 1137 阅读 · 0 评论 -
JS高级之单例内置对象——Global、Math
文章目录Global对象1、URL编码方式2、eval() 方法3、Global对象属性4、window对象Math对象1、Math对象属性2、min() 和 max() 方法3、舍入方法4、random()方法5、其他方法ES对内置对象的定义是“任何由ES实现提供、与宿主环境无关,并在ES程序开始执行时就存在的对象。” 内置对象不用显示的去实例化,因为它们已经实例化好了。这次我们一起来了解一下两个单例内置对象叭😄Global对象Global 对象是ES中最特别的对象,因为代码不会显式地访问它。G原创 2022-05-06 22:44:45 · 582 阅读 · 0 评论 -
JS高级之String对象
文章目录基本概念:字符串的操作方法:concat() 拼接字符串并返回新的字符串,可以接受任意多个参数提取子字符串的方法:slice()、substring()、substr()、均接受一到两个参数字符串的位置方法indexOf():从字符串开头查找子字符串lastIndexOf():从字符串末尾开始查找子字符串字符串包含方法startsWith() 方法 :检查开始于索引0的匹配项endsWith() 方法 :检查开始于索引(string.length - substring.length)include原创 2022-05-05 22:40:03 · 292 阅读 · 1 评论 -
JS中函数传参按照值传递
ES语法中所有函数的参数都是按值传递的。探讨函数参数按值传递问题://1、参数被赋值为原始值function add(num){ num += 10; return num;}let count = 20;let result = add(count);console.log(result) //30console.log(count) //20//2、参数被赋值为引用类型function setName(obj){ obj.name = "hihihi"; obj.age原创 2022-05-04 22:41:39 · 432 阅读 · 0 评论 -
JS之“==“强制转换规则
[] == ![] 为什么是true?== 在进行比较的时候会进行强制转换,转换规则如下:流程:1、首先会判断两者类型是否相同,相同的话就比较两者的大小2、类型不相同的话,就会进行类型转换3、会先判断是否在对比 null 和 undefined ,是的话就返回true4、判断两者类型是否为 string 和 number,是的话就会将字符串转换为number5、判断其中一方是否为boolean,是的话就会把 boolean 转为 number 再进行判断6、判断其中一方是否为object原创 2022-04-30 21:52:16 · 903 阅读 · 0 评论 -
JS高级程序设计学习之——变量、作用域与内存
文章目录一、原始值与引用值1、动态属性2、复制值3、传递参数⭐⭐二、执行上下文与作用域1、作用域链增强2、变量声明三、垃圾回收1、标记清理(最常用)2、引用计数3、 内存管理a、通过const和let声明提升性能b、隐藏类和删除操作c、内存泄漏4、静态分配与对象池(不展开讨论)总结:一、原始值与引用值ES 变量可以包含两种不同类型的数据:原始值和引用值。原始值就是最简单的数据,保存原始值的变量是按值访问的。引用值则是由多个值构成的对象,引用值是保存在内存中的对象,JS不允许直接访问内存位置,因此也就不原创 2022-04-30 16:46:22 · 197 阅读 · 1 评论 -
ES6&tip1——forEach()能不能改变原数组?
文章目录forEach()介绍forEach()能不能改变原数组?1、数组的元素是基本数据类型2、数组的元素是引用数据类型(直接修改整个元素对象时,无法改变原数组)3、数组的元素是引用数据类型:(修改`元素对象`里的某个属性时,可以改变原数组)如果你需要通过 forEach 修改原数组,建议用 forEach 里面的参数 2 和参数 3 来做,具体请看下面的标准做法forEach()介绍forEach()方法需要一个回调函数(这种函数,是由我们创建但不是由我们调用的)作为参数回调函数中传递三个参数:原创 2022-04-27 22:53:38 · 777 阅读 · 0 评论 -
为Array实现一个Reader,通过接口getReader获取,Reader 有一个接口 read(n)
为Array实现一个Reader,通过接口getReader获取,Reader 有一个接口 read(n)每次调用会按顺序读区数组的n(默认为1)个元素,调用不会改变数组本身的值,若数组已全部读取完则返回空数组,若传入的参数不为正整数则抛出异常例:const arr = [1, 2, 3, 4, 5, 6]const reader = arr.getReader()console.log(reader.read(‘1’)) // Errorconsole.log(reader.read(-1).原创 2022-04-25 09:26:56 · 363 阅读 · 0 评论 -
算法之快慢指针
文章目录删除有序数组中的重复项删除排序链表中的重复元素移除元素移动零删除有序数组中的重复项26. 删除有序数组中的重复项这道题我们尝试使用快慢指针来解题:快指针在前面进行对数组元素的遍历,慢指针判断,如果与快指针所指的元素不同,那么指针向右移动,然后进行赋值,最后新数组的长度等于慢指针的索引加1。//这里我们使用快慢指针/** * @param {number[]} nums * @return {number} */var removeDuplicates = function(n原创 2022-04-21 11:29:47 · 440 阅读 · 3 评论 -
用数组的reduce方法实现map方法
what首先我们需要理解reduce这个方法的语法:arr.reduce(callback,init)//详细写法arr.reduce((prev,cur,index,arr)={ ...},[])* callback (执行数组中每个值的函数,包含四个参数) 1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue)) 2、currentValue (数组中当前被处理的元素) 3、index (当前元素在数组中的索引) 4、ar原创 2022-04-06 11:11:32 · 1930 阅读 · 0 评论 -
扁平数据结构转Tree
直接上代码let arr = [{ id: 1, name: '部门1', pid: 0 }, { id: 2, name: '部门2', pid: 1 }, { id: 3, name: '部门3', pid: 1 }, { id: 4, name: '部门4', p原创 2022-04-01 08:33:41 · 1434 阅读 · 2 评论 -
JS数组常用的方法总结
文章目录对象继承方法toString( )valueOf()数组转换方法join()栈和队列方法pushpopshiftunshift数组排序方法sort()reverse()对象继承方法数组是一种特殊的对象,继承了对象的Object的toString()和valueOf() 方法toString( )toString() 方法返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串[注意]该方法的返回值与不使用任何参数调用join()方法返回的字符串相同[1,2,3].toString(原创 2022-03-31 21:02:31 · 2610 阅读 · 1 评论 -
Web性能监测——Performance对象
文章目录一、前言二、简述1、memory2、navigation3、timing4、getEntries()5、now()6、性能指标♥(ˆ◡ˆԅ)一、前言Web Timing API让开发人员通过javascript就能使用浏览器内部的度量结果,给出了页面加载和渲染过程的很多信息,对性能优化非常有价值。本文将详细介绍web Timing API——performance对象。二、简述Web计时机制的核心是window.performance对象。对页面的所有度量信息,包括那些规范中已经定义的和将来原创 2022-03-14 11:37:07 · 1231 阅读 · 0 评论 -
JS数组遍历的方法
文章目录for优化for (效率最高)forEach(增强for循环)for...in... (效率最低)for...of...(ES6)map(ES6)filter(ES6)some(ES6)erevy (ES6)find(ES6)findIndex(ES6)forvar arr = [1,2,3,4,5]for(var i = 1;i < arr.length;i++){ console.log(arr[i])}优化for (效率最高)使用临时变量,将长度缓存起来,避免重复获取原创 2022-03-08 17:49:58 · 537 阅读 · 0 评论 -
如何判断变量是否为数组?
Array.isArray(arr); // true arr.__proto__ === Array.prototype; // true 实例对象的隐式原型等于其构造函数的显示原型arr instanceof Array; // trueObject.prototype.toString.call(arr); // "[object Array]"执行结果如下:补充:数据类型的判断1、typeof : 能判断所有值类型,函数。不可对null、对象、数组进行精确判断,因为都返回obje原创 2022-03-05 22:30:06 · 341 阅读 · 0 评论 -
JS浅拷贝深拷贝——赋值VS浅拷贝深拷贝
文章目录什么是深/浅拷贝,他们跟赋值有何区别?赋值和深/浅拷贝的区别实现一个深拷贝简单版考虑数组循环引用考虑其他类型什么是深/浅拷贝,他们跟赋值有何区别?浅拷贝: 浅拷贝是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果对象的属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址。所以如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷贝: 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放对象,且修改新对象不会影响原对象。赋值原创 2022-03-05 22:17:01 · 635 阅读 · 0 评论 -
深拷贝浅拷贝的区别?如何实现一个深拷贝?
深拷贝浅拷贝的区别?如何实现一个深拷贝?一、数据类型存储二、浅拷贝Object.assignslice()concat()拓展运算符三、深拷贝_.cloneDeep()JQuery.extend()JSON.stringify()循环递归四、区别五、总结一、数据类型存储前面文章我们讲到,JavaScript中存在两大数据类型:基本类型引用类型基本类型数据保存在在栈内存中引用类型数据保存在堆内存中,引用数据类型的变量是一个指向堆内存中实际对象的引用,存在栈中二、浅拷贝浅拷贝,指的是创建新的原创 2022-03-02 12:41:44 · 470 阅读 · 0 评论 -
说说JavaScript中的数据类型
JS数据类型一、基本类型NumberStringBooleanUndefinedNullSymbol二、引用类型三、存储区别基本类型引用类型在js中,我们可以分成两种类型:基本类型复杂类型区别:存储位置不同一、基本类型Number数值最常见的整数类型格式则为十进制,还可以设置八进制(零开头)、十六进制(0x开头)let intNum = 55 // 10进制的55let num1 = 070 // 8进制的56let hexNum1 = 0xA //16进制的10浮点类型则在数.原创 2022-03-01 21:38:52 · 502 阅读 · 1 评论 -
JS原型及原型链总结
原型&原型链一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点2、`工厂函数`3、构造函数二、使用原型三、原型概念辨析原型链练习一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点想要介绍原型,就不得不提为什么我们要使用原型,在js早期,我们创建一个对象,比较流行的做法是使用对象字面量去创建一个对象,例如:const person = { name: "wywy", age: 21,原创 2022-03-01 09:09:44 · 1027 阅读 · 7 评论 -
用js实现简单的防抖节流
let timer;//防抖:在n秒时间内,不停的被触发,只执行最后一次function shake(param) { console.log(timer, "111") if (timer) { console.log(timer, "222") clearTimeout(timer) } timer = setTimeout(() => { console.log('防抖') }, 1000)}//节原创 2022-02-19 21:08:58 · 2267 阅读 · 1 评论 -
为什么使用 setTimeout 实现 setInterval?怎么模拟?
Why?setInterval 的作用是每隔一段指定时间执行一个函数,但是执行不是真的到了时间立即执行,它真正的作用是每隔一段时间将事件加入事件队列中去,只有当 当前的执行栈为空的时候,才能去从事件队列中取出事件执行。所以可能会出现这样的情况,就是当前执行栈执行的时间很长,导致事件队列中累积了多个定时器加入的事件,当执行栈结束的时候,这些事件会依次执行,因此就不能到间隔一段时间执行的效果。针对 setInterval 的这个缺点,我们可以使用 setTimeout 递归调用来模拟 setInterval原创 2022-02-19 17:35:40 · 795 阅读 · 2 评论 -
JS运行机制单线程
js单线程Why?js是单线程How?单线程的JS是怎么工作的?Why?js是单线程首先我们说一下JS 为什么是单线程, 这就要从它的用途谈起。作为浏览器脚本语言,JS的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,复杂的多线程并不适用于JS,假如现在使用了两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个DOM节点,这时应该以哪一个线程为主呢?所以呢,JS 便采用了单线程,这已经成了JS的核心特征!How?单线程的JS是怎么工作的?这里我们要补充几个概念:同步任原创 2022-02-18 20:36:42 · 702 阅读 · 0 评论 -
Object.keys()获得对象属性名组成的数组
Object.keys( ) 用于获得由对象属性名组成的数组,可以与数组遍历相结合使用。分别展示for( ) 与 forEach( )1、for( ) 循环var person = { name:"wy", age:20, gender:"女",}//获得对象属性名组成的数组var keys = Object.keys(person);for(let i = 0;i < keys.length;i++){ let key = keys[i]; console.log("pers原创 2022-01-15 16:15:31 · 724 阅读 · 2 评论 -
JS脑图思维总结
博主总结了有关JS的脑图,有关JS对象以及正则会单独拿出来作为模块分享。有需要xmind文件原件可以私信我~~,如有不足之处欢迎大家提出哦~????原创 2021-09-26 11:05:17 · 288 阅读 · 0 评论 -
JS 异步编程——一道面试题
async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); return 'async1 return';}async function async2() { console.log("async2");}setTimeout(() => { console.log("setTimeout");}, 0);async1().t原创 2021-08-14 21:25:02 · 176 阅读 · 0 评论 -
解释代码VS编译代码
解释型语言和编译型语言解释型语言:在解释型语言中,代码自上而下运行,且实时返回运行结果。代码在由浏览器执行前,不需要将其转化为其他形式。代码将直接以文本格式被接受和处理。编译型语言需要先将代码转化(编译)成另一种形式才能运行。比如 C/C++ 先被编译成汇编语言,然后才能由计算机运行。程序将以二进制的格式运行,这些二进制内容是由程序源代码产生的。现在我们来说说JS属于什么语言?JavaScript 是 轻量级解释型语言 。浏览器接受到JavaScript代码,并以代码自身的文本格式运行它。技术上原创 2021-08-05 09:29:04 · 378 阅读 · 0 评论