JavaScript
文章平均质量分 83
程序媛小y
一枚前端程序媛
展开
-
【JavaScript】string类型字符串常见算法题
前端string类型常见算法题:字符串逆序输出;统计字符串中出现次数最多的字符及出现的次数;去除字符串中重复的字符;判断一个字符串是否为回文字符串原创 2022-06-29 15:11:23 · 640 阅读 · 2 评论 -
【JavaScript】Map和ForEach的区别:返回值?修改原数组?
Map和ForEach的区别:返回值?修改原数组?文章目录Map和ForEach的区别:返回值?修改原数组?返回值?修改原数组?ForEach的🌰基本数据类型对象Map的🌰返回值?第一个区别就是forEach没有返回值,而Map返回一个新数组修改原数组?第二个区别在于:是否会修改原数组。这个问题得分情况讨论,需要看数组的每一项是基本数据类型,还是对象。ForEach的🌰基本数据类型let arr = [1,2,3];arr.forEach((item) => { item原创 2022-05-14 01:18:23 · 843 阅读 · 2 评论 -
【JavaScript】EventLoop
【JavaScript】EventLoop文章目录【JavaScript】EventLoop一、浏览器中的事件循环执行栈与任务队列一个🌰宏任务和微任务宏任务微任务执行过程:async/await(微任务)执行顺序一个🌰另一个🌰二者对比二、NodeJS 中的异步方法事件循环各阶段pollprocess.nextTick()一个🌰三、node 和 浏览器 eventLoop的主要区别一、浏览器中的事件循环执行栈与任务队列JS在解析一段代码时,会将同步代码按顺序排在执行栈中,然后依次执行里面的函数。当遇到原创 2022-05-04 11:44:57 · 629 阅读 · 2 评论 -
「万字总结」JavaScript查漏补缺 --> 具体面试题目
【JS】查漏补缺 --> 具体面试题目✍🏻文章目录【JS】查漏补缺 --> 具体面试题目✍🏻前言一、数据类型相关1.null 是对象吗?2. 0.1+0.2为什么不等于0.3?3.BigInt 注意点4. [] == ![]结果是什么?为什么?5.JS中类型转换有哪几种,以及对应的Object转换规则6.如何让if(a == 1 && a == 2)条件成立7.JS判断数组中是否包含某个值方法一:array.indexOf方法二:array.includes()方法三:arra原创 2022-05-03 19:11:56 · 1242 阅读 · 3 评论 -
【JavaScript】循环语法比较及使用场景(for、forEach、map、for...in、for...of)
循环语法比较及使用场景(for、forEach、map、for…in、for…of)文章目录循环语法比较及使用场景(for、forEach、map、for...in、for...of)for...in和for...of的区别forEach和map方法有什么区别forEach 的中断for…in和for…of的区别for…of 遍历获取的是对象的键值,for…in 获取的是对象的键名;for… in 会遍历对象的整个原型链,性能非常差不推荐使用,而 for … of 只遍历当前对象不会遍历原型链;原创 2022-05-03 16:02:00 · 1105 阅读 · 3 评论 -
【JavaScript】关于坐标和距离的属性
【JavaScript】关于坐标和距离的属性文章目录【JavaScript】关于坐标和距离的属性JS中鼠标事件的各个坐标MouseEvent 接口常见属性MouseEvent.offsetX 和 MouseEvent.offsetYMouseEvent.clientX VS MouseEvent.pageXWindow视图的各个尺寸属性方法window.scrollTo() , window.scroll() , window.scrollBy()JS中元素(Element)的各个尺寸Element.cl原创 2022-05-03 10:05:52 · 418 阅读 · 1 评论 -
前端常见手写题
前端常见手写题文章目录前端常见手写题手写 new 操作符call/bind/applycall:apply:bind:实现 instanceof 操作符compose(组合函数)柯里化函数实现AJAX请求使用Promise封装AJAX请求实现数组去重ES6方法:使用数据结构set空对象 let obj ={}利用对象属性不能重复的特性Map去重使用 indexOf / includes使用 filter实现数组元素求和数组排序 --> 常见排序算法冒泡排序--时间复杂度 n^2选择排序--时间复杂度原创 2022-05-02 09:30:21 · 278 阅读 · 1 评论 -
【JavaScript】isNaN 和 Number.isNaN 函数的区别?
isNaN 和 Number.isNaN 函数的区别?文章目录isNaN 和 Number.isNaN 函数的区别?isNaNNumber.isNaN二者对比isNaN该函数接收一个参数,可以是任意数据类型,然后判断这个参数是否“不是数值”。把一个值传给isNaN()后,该函数会尝试把它转换为数值。某些非数值的值可以直接转换成数值,如字符串"10"或布尔值。任何不能转换为数值的值都会导致这个函数返回true。console.log(isNaN(NaN)); // trueconsole.log(原创 2022-04-24 09:06:55 · 1200 阅读 · 2 评论 -
【JavaScript】实现数组扁平化
【JavaScript】实现数组扁平化文章目录【JavaScript】实现数组扁平化一、扁平化的实现二、实现扁平化的六种方法方法一:普通递归实现方法二:利用 reduce 函数迭代方法三:扩展运算符实现方法四:split 和 toString 共同处理方法五:调用 ES6 中的 flat方法六:正则和 JSON 方法共同处理一、扁平化的实现数组的扁平化其实就是将一个嵌套多层的数组 array(嵌套可以是任何层数)转换为只有一层的数组。其实就是把多维的数组“拍平”,输出最后的一维数组。[1,[2,[原创 2022-04-05 14:26:23 · 1527 阅读 · 5 评论 -
【JavaScript】再学数组相关方法
【JavaScript】再学数组相关方法文章目录【JavaScript】再学数组相关方法一、声明数组Array 构造器对象字面量ES6 新增的构造方法:Array.of 和 Array.fromArray.ofArray.from二、Array的判断Array.isArray 方法三、数组与其他类型的转换数组 --> 字符串字符串 --> 数组类数组 --> 数组Array.from四、数组元素的处理pushpopshiftunshiftfillslicesplice总结五、数组的合并拆原创 2022-04-05 13:56:10 · 998 阅读 · 1 评论 -
【JavaScript】类数组详解
【JavaScript】类数组详解文章目录【JavaScript】类数组详解什么是类数组类数组转换成数组ES6 的方法转数组callee属性箭头函数没有argumentsHTMLCollectionNodeList什么是类数组类数组对象,就是指可以通过索引属性访问元素并且拥有 length 属性的对象。JavaScript 中有哪些情况下的对象是类数组呢?函数里面的参数对象 arguments;用 getElementsByTagName/ClassName/Name 获得的 HTMLC原创 2022-04-03 09:02:42 · 3515 阅读 · 2 评论 -
【JavaScript】数组常用API
【JavaScript】数组常用API文章目录【JavaScript】数组常用APIArray 的构造器普通方法ES6 新增的构造方法:Array.of 和 Array.fromArray.ofArray.fromArray 的判断常用API(一):改变自身的方法常用API(二):不改变自身的方法常用API(三):数组遍历的方法总结Array 的构造器普通方法// 使用 Array 构造器,可以自定义长度var a = Array(6); // [empty × 6]// 使用对象字面量原创 2022-04-03 00:39:49 · 299 阅读 · 3 评论 -
【JavaScript】模块化规范
文章目录JavaScript 模块化规范CommonJS定义和引用特性举例require文件查找规则模块的加载过程CommonJS规范缺点AMD定义和引用CMD定义和引用ES6 模块定义和引用exports关键字(导出)import关键字(导入)export和import结合使用default用法JavaScript 模块化规范JavaScript 模块化规范,包括原生规范 ES6 模块、Node.js 采用的 CommonJS,以及开源社区早期为浏览器提供的规范 AMD,具有 CommonJS 特性和原创 2022-04-01 13:56:48 · 3328 阅读 · 1 评论 -
【JavaScript】深拷贝与浅拷贝
【JavaScript】深拷贝与浅拷贝文章目录【JavaScript】深拷贝与浅拷贝浅拷贝的原理和实现方法一:object.assign方法二:扩展运算符方式方法三:concat 拷贝数组方法四:slice 拷贝数组手工实现一个浅拷贝深拷贝的原理和实现方法一:JSON.stringify 实现深拷贝方法二:手写递归 实现深拷贝基础版改进版(增加对其他类型的判断)方法三:最终改进版(改进后递归实现)浅拷贝的原理和实现浅拷贝的定义:自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是原创 2022-04-01 11:27:44 · 721 阅读 · 2 评论 -
JavaScript 引擎的工作机制
JavaScript 引擎的工作机制文章目录JavaScript 引擎的工作机制解析解释优化JavaScript 引擎的基本工作流程,可分为解析、解释和优化 3 个步骤。解析解析步骤又可以拆分成 2 个小步骤:词法分析,将 JavaScript 代码解析成一个个的令牌(Token);语法分析,将令牌组装成一棵抽象的语法树(AST)。下面是一段简单的代码,声明了一个字符串变量并调用函数 console.log 进行打印。var name = 'web'console.lo原创 2022-03-30 21:31:18 · 720 阅读 · 2 评论 -
【JavaScript】基本数据类型注意点
【JavaScript】基本数据类型注意点文章目录【JavaScript】基本数据类型注意点undefined① 可以通过下面几种方式来得到 undefined:② 如何判断一个变量的值是否为 undefined 呢?Number① typeof NaN 的结果是什么?② isNaN 和 Number.isNaN 函数的区别?③ 精度问题undefinedUndefined 只有一个值,就是 undefined.① 可以通过下面几种方式来得到 undefined:引用已声明但未初始化的变量;原创 2022-03-30 17:50:21 · 377 阅读 · 2 评论 -
【JavaScript】再学数据类型转换
【JavaScript】数据类型转换文章目录【JavaScript】数据类型转换强制类型转换Number() 方法的强制转换规则parseInt()方法的强制转换规则parseFloat()方法的强制转换规则Boolean() 方法的强制转换规则String()方法 与 toSring() 方法 的强制转换规则隐式转换规则== 的隐式类型转换规则+ 的隐式类型转换规则Object 的转换规则强制类型转换强制类型转换方式包括 Number()、parseInt()、parseFloat()、toStri原创 2022-03-30 13:54:47 · 555 阅读 · 1 评论 -
【JavaScript】再学数据类型及判断
【JavaScript】再学数据类型及判断文章目录【JavaScript】再学数据类型及判断数据类型数据类型检测第一种判断方法:typeof第二种判断方法:instanceof第三种判断方法:constructor第四种判断方法:Object.prototype.toString相关问题引出① undefined 与 null 的区别?② 什么时候给变量赋值为 null ?③ typeof null 的结果是什么,为什么?④ intanceof 操作符的实现原理及实现⑤ === 与 ==1. ==2. =原创 2022-03-30 11:19:11 · 362 阅读 · 1 评论 -
【JavaScript】实现 instanceof 操作符
实现 instanceof 操作符instanceof原理:instanceof可以正确判断对象的类型,其内部运行机制是判断在其原型链中能否找到该类型的原型。instanceof 主要的实现原理就是只要右边变量的 prototype 在左边变量的原型链上即可。instanceof 在查找的过程中会遍历左边变量的原型链,直到找到右边变量的 prototype,如果查找失败,则会返回 false。function myInstanceof(left,right) { //先用typeof判断基础数原创 2022-03-30 10:34:23 · 472 阅读 · 1 评论 -
【JavaScript】再学JS事件循环
【JavaScript】再学JS事件循环文章目录【JavaScript】再学JS事件循环一、浏览器中的事件循环执行栈与任务队列宏任务和微任务宏任务微任务二、NodeJS 中的异步方法事件循环模型事件循环各阶段process.nextTick()一、浏览器中的事件循环执行栈与任务队列JS 在解析一段代码时,会将同步代码按顺序排在某个地方,即执行栈,然后依次执行里面的函数。当遇到异步任务时就交给其他线程处理,待当前执行栈所有同步代码执行完成后,会从一个队列中去取出已完成的异步任务的回调加入执行栈继续执原创 2022-03-29 11:18:19 · 671 阅读 · 2 评论 -
JavaScript 引擎如何执行 JavaScript 代码?
JavaScript 引擎如何执行 JavaScript 代码?文章目录JavaScript 引擎如何执行 JavaScript 代码?一、JavaScript 代码运行的各个阶段二、编译阶段介绍:执行上下文的创建创建变量对象建立作用域链确定 this 的指向三、执行阶段一、JavaScript 代码运行的各个阶段JavaScript 引擎在执行 JavaScript 代码时,也会从上到下进行词法分析、语法分析、语义分析等处理,并在代码解析完成后生成 AST(抽象语法树),最终根据 AST 生成 CP原创 2022-03-29 00:58:36 · 334 阅读 · 1 评论 -
【JavaScript】闭包的存储位置
闭包的存储位置文章目录闭包的存储位置闭包理解闭包是怎么回收的闭包的内存模型:堆闭包理解结合下面这段代码来理解什么是闭包:function foo() { var myName = " 极客时间 " let test1 = 1 const test2 = 2 var innerBar = { getName:function(){ console.log(test1) return myName原创 2022-03-22 00:54:40 · 1784 阅读 · 1 评论 -
【javascript】的 事件流&&冒泡捕获&&事件委托
javascript 事件文章目录javascript 事件一、事件监听事件监听方式一:在script中直接监听;事件监听方式二:通过元素的on来监听事件;事件监听方式三:通过EventTarget中的`addEventListener`来监听;addEventListener 事件监听的优点二、事件冒泡三、事件捕获四、DOM事件流事件捕获阶段(Capture Phase)目标阶段(Target Phase)冒泡阶段(Bubble Phase)五、DOM 中的事件对象六、阻止事件传播(捕获或冒泡)(Sto原创 2022-03-13 04:24:27 · 298 阅读 · 2 评论 -
【JavaScript】的 BOM总结
BOM文章目录BOM一、认识BOMWindow全局对象Window窗口对象二、Navigator三、History四、Location五、windowwindow常见的属性window常见的方法window常见的事件一、认识BOMJavaScript有一个非常重要的运行环境就是浏览器,而且浏览器本身又作为一个应用程序需要对其本身进行操作,所以通常浏览器会有对应的对象模型(BOM,Browser Object Model)。我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。BOM原创 2022-03-13 01:00:48 · 635 阅读 · 1 评论 -
JSON 详解
JSON 详解JSON是一种非常重要的数据格式,它并不是编程语言,而是一种可以在服务器和客户端之间传输的数据格式。文章目录JSON 详解一、JSON基本语法二、JSON序列化JSON序列化方法三、Stringify方法replacer参数四、parse方法五、使用JSON序列化深拷贝一、JSON基本语法JSON的顶层支持三种类型的值:简单值:数字(Number)、字符串(String,不支持单引号)、布尔类型(Boolean)、null类型;对象值:由key、value组成,key是字符串类型原创 2022-03-12 02:14:31 · 25708 阅读 · 2 评论 -
JS中的异常error处理
JS中的异常error处理1.错误的类型Error:所有错误的父类型ReferenceError:引用的变量不存在console.log(a) // ReferenceError:a is not definedTypeError:数据类型不正确let bconsole.log(b.xxx)// TypeError:Cannot read property 'xxx' of undefinedlet c = {}c.xxx()// TypeError:c.xxx i原创 2022-03-11 23:20:03 · 3655 阅读 · 1 评论 -
JavaScript中的对象继承
文章目录1.原型链继承2.借用构造函数(经典继承)3.组合继承4.原型式继承5.寄生式继承6.寄生组合式继承1.原型链继承套路定义父类型构造函数给父类型的原型添加方法定义子类型的构造函数创建父类型的对象赋值给子类型的原型将子类型原型的构造属性设置为子类型给子类型原型添加方法创建子类型的对象: 可以调用父类型的方法关键子类型的原型为父类型的一个实例对象//父类型function Supper() { this.supProp = '父亲的原型链'}//给父类型的原原创 2022-03-06 18:46:41 · 773 阅读 · 1 评论 -
JavaScript中的Object常用方法
Object常用方法文章目录Object常用方法Object.getPrototypeOf()Object.setPrototypeOf()Object.create()Object.prototype.isPrototypeOf()Object.assign()Object.is()Object.keys()Object.entries()Object.freeze()Object.getOwnPropertyNames(obj)Object.prototype.hasOwnProperty()prop原创 2022-03-06 18:16:40 · 515 阅读 · 1 评论 -
JavaScript的对象7种创建方式(总结)
文章目录ES5 创建对象直接对象字面量使用内置构造函数1.工厂模式2.构造函数模式认识构造函数3.原型模式4.构造函数和原型组合模式(组合模式)5.动态原型模式6.寄生构造函数模式7.稳妥构造模式ES5 创建对象直接对象字面量const obj = { name: 'dz', age: 23}使用内置构造函数const obj = new Object()obj.name = nameobj.age = age1.工厂模式套路: 通过工厂函数动态创建对象并返回适用场景:原创 2022-03-06 13:27:30 · 836 阅读 · 1 评论 -
JavaScript中的Object.defineProperty
Object.defineProperty在前面我们的属性都是直接定义在对象内部,或者直接添加到对象内部的:但是这样来做的时候我们就不能对这个属性进行一些限制:比如这个属性是否是可以通过delete删除的?这个属性是否在for-in遍历的时候被遍历出来呢?var obj = { name: "hhh", age: 18, height: 1.65}如果我们想要对一个属性进行比较精准的操作控制,那么我们就可以使用属性描述符。通过属性描述符可以精准的添加或修改对象的属性;属性描述符原创 2022-03-05 23:21:36 · 222 阅读 · 0 评论 -
JavaScript柯里化
JavaScript柯里化只传递给函数一部分参数来调用它,让它返回一个函数去处理剩余的参数。这个过程就称之为柯里化核心思想是把多参数传入的函数拆成单参数(或部分)函数,内部再返回调用下一个单参数(或部分)函数,依次处理剩余的参数。举例:function add1(x, y, z) { return x + y +z;}console.log(add1(10,20,30));//柯里化处理函数function add2(x) { return function(y) { r原创 2022-03-05 22:28:44 · 269 阅读 · 0 评论 -
JavaScript面试之闭包(详细总结)
文章目录闭包一、什么是闭包二、产生闭包的条件三、闭包变量存储的位置JS 堆栈内存释放四、常见的闭包闭包1:将一个函数作为另一个函数的返回值闭包2. 将函数作为实参传递给另一个函数调用闭包3.函数作为参数闭包4. IIFE(自执行函数)闭包5. 循环赋值闭包6.节流防抖闭包7.函数柯里化五、闭包的作用六、闭包的生命周期闭包何时被销毁?-垃圾回收机制七、闭包的缺点及解决八、内存溢出和内存泄露内存溢出内存泄漏九、经典面试题闭包提问:什么是闭包?闭包有哪些实际运用场景?闭包是如何产生的?闭包产生的变量原创 2022-03-05 21:33:51 · 6409 阅读 · 4 评论 -
JavaScript中的this绑定规则
文章目录一.绑定方式二.一些函数的this分析1.setTimeout2.div的点击3.数组的forEach三.this绑定优先级规则1.默认规则的优先级最低2.显示绑定优先级高于隐式绑定3.new绑定优先级高于隐式绑定4.new绑定优先级高于bind5.this规则之外– 忽略显示绑定6.this规则之外- 间接函数引用7.箭头函数简介this绑定规则四.面试题一.绑定方式1.this的5种绑定方式:默认绑定(非严格模式下this指向全局对象, 严格模式下this会绑定到undefined)原创 2022-03-04 11:55:53 · 779 阅读 · 0 评论 -
Event Loop(事件循环)
Event Loop(事件循环)Ⅰ基本概念javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的:与浏览器交互。单线程意味着,javascript代码在执行的任何时候,都只有一个主线程来处理所有的任务。非阻塞:而非阻塞则是当代码需要进行一项异步任务(无法立刻返回结果,需要花一定时间才能返回的任务,如I/O事件)的时候,主线程会挂起(pending)这个任务,然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。单线程是必要的:也是javascr原创 2022-02-09 23:14:38 · 380 阅读 · 0 评论 -
DOM简介和DOM操作(详细总结)
DOM简介和DOM操作文章目录DOM简介和DOM操作一、基本概念**JavaScript的组成**节点什么是DOMDOM可以做什么二、常用节点DOCUMENTIDlinksanchorsimages三、元素节点的获取getElementByIdgetElementsByNamegetElementsByTagNamegetElementsByClassNamequerySelectorAllquerySelectormatchesclosest区分getElementsBy... 和 quertSelec原创 2022-02-09 16:13:33 · 1175 阅读 · 0 评论 -
JavaScript中的组合(Compose)函数
组合(Compose)函数组合(Compose)函数是在JavaScript开发过程中一种对函数的使用技巧、模式:比如我们现在需要对某一个数据进行函数的调用,执行两个函数fn1和fn2,这两个函数是依次执行的;那么如果每次我们都需要进行两个函数的调用,操作上就会显得重复;那么是否可以将这两个函数组合起来,自动依次调用呢?这个过程就是对函数的组合,我们称之为组合函数(Compose Function);举例:function double(num){ return num*2;}原创 2022-01-13 01:15:29 · 1269 阅读 · 0 评论 -
JavaScript中 bind函数的实现
bind函数的实现bind可以分为多次传入参数,bind是返回绑定this之后的函数Function.prototype.mybind = function(thisArg,...argArray){ //1.获取到真实需要调用的函数 var fn = this; //2.绑定this //如果是null或undefined,就绑定window,如果不是,那就统一转换成Object类型(这里主要针对基本数据类型,但调用Object()对引用数据类型没有影响) t原创 2022-01-12 22:55:01 · 704 阅读 · 0 评论 -
JavaScript中对象的7种创建方式
文章目录1.工厂模式2.构造函数模式3.原型模式4.构造函数和原型组合模式5.动态原型模式6.寄生构造函数模式7.稳妥构造模式1.工厂模式套路: 通过工厂函数动态创建对象并返回适用场景: 需要创建多个对象问题: 对象没有一个具体的类型, 都是Object类型//返回一个对象的函数===>工厂函数function createPerson(name, age) { var obj = { name: name, age: age, setName: function原创 2022-01-11 01:11:18 · 83 阅读 · 0 评论 -
JavaScript数组常用方法
数组(Array)是属于内置对象。一.创建数组对象方式一:使用字面量创建数组举例:var arr1 = []; // 创建一个空的数组var arr2 = [1, 2, 3]; // 创建带初始值的数组方式二:使用构造函数创建数组语法:let arr = new Array(参数);let arr = Array(参数);如果参数为空,则表示创建一个空数组;如果参数是一个数值时,表示数组的长度;如果有多个参数时,表示数组中的元素。举例:// 方式一var arr1 = [1原创 2022-01-07 19:28:17 · 607 阅读 · 0 评论 -
JavaScript的原型及原型链总结
文章目录一.原型[prototype]1.函数的prototype属性2.显示原型与隐式原型3.constructor二.原型链三.原型链的属性问题四.instanceof判断五.相关方法1.Object.getPrototypeOf()2.Object.setPrototypeOf()3.Object.create()4.Object.prototype.isPrototypeOf()5.Object.prototype.hasOwnProperty()一.原型[prototype]1.函数的prot原创 2022-01-08 13:33:55 · 257 阅读 · 0 评论