JavaScript
文章平均质量分 90
殘血★戰狼王
这个作者很懒,什么都没留下…
展开
-
js单线程,事件循环,微任务宏任务
JavaScript 事件循环(含宏任务与微任务)JavaScript 特点JavaScript 是单线程非阻塞的一门语言。单线程意味着:JavaScript 代码在执行的时候只有一个主线程去处理所有的任务,即同一时间只能做一件事情。非阻塞则表示:当执行到一项异步任务的时候,主线程会挂起当前这个异步任务,然后在异步任务返回结果的时候再跟进一定的规则去执行相应的回调。思考: 为什么 JavaScript 要设计成单线程?单线程是必要的,也是 Javascript 这门语言的基石,原因之一在其最初原创 2021-01-14 19:29:16 · 124 阅读 · 0 评论 -
js单线程
js 单线程一、为什么JavaScript是单线程?JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该原创 2021-01-14 19:15:22 · 136 阅读 · 0 评论 -
深拷贝 与 浅拷贝 原型 类型校验
前提:深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。1. 堆栈内存具体看另一篇博客数据类型、堆栈存储2. 浅拷贝与深拷贝深拷贝和浅拷贝的示意图大致如下:浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。赋值和浅拷贝的区别赋值:把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向的是同一个存储空原创 2021-01-13 19:39:52 · 147 阅读 · 0 评论 -
冒泡排序和递归
冒泡排序1、比较相邻的两个元素,如果前一个比后一个大,则交换位置。2、比较完第一轮的时候,最后一个元素是最大的元素。3、这时候最后一个元素是最大的,所以最后一个元素就不需要参与比较大小。实现原理数组中有n个数,比较每相邻两个数,如果前者大于后者,就把两个数交换位置;这样一来,第一轮就可以选出一个最大的数放在最后面;那么经过n-1(数组的 length - 1) 轮,就完成了所有数的排序。好的,我们先来实现找数组中的最大数,并把他放到数组最后。var arr = [3,4,1,2];//原创 2021-01-11 17:59:23 · 612 阅读 · 0 评论 -
Promise === async、await === es6中的generator函数详解
Promise当面试官问你:1.什么是promise?2.你对promise的理解?3.promise用过吗?4.什么是promise1.解决地狱回调2.可以链式调用3.有三种状态。4.promise有哪些API.5.应用场景:封装ajax,axios的get,post封装,微信小程序中封装wx.request(),uniapp开发中uni.request().名词约定一般来讲,有以下的名词约定:promise(首字母小写)对象指的是“Promise实例对象”Pr原创 2020-12-31 14:23:45 · 304 阅读 · 0 评论 -
箭头函数与普通函数区别 == es6中的class与继承
箭头函数与普通函数区别一、箭头函数是匿名函数,不能作为构造函数,不能使用new箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式:一种只包含一个表达式,连{ … }和return都省略掉。还有一种可以包含多条语句,这时候就不能省略{ … }和return。不能作为构造函数,不能使用new二、箭头函数内没有arguments,可以用展开运算符…解决三、箭头函数的this,始终指向父级上下文(箭头函数的this取决于定义位置父级的上下文,跟使用位置没关系,普通函数this指向调用的原创 2020-12-15 17:14:15 · 524 阅读 · 1 评论 -
cookie、localStorage、sessionStorage区别 == JavaScript中let、const、var 的区别 == es6解构赋值
cookie、localStorage、sessionStorage区别CookieCookie设计初衷是用来和服务器通讯,而不是本地存储,他只是被‘借用’到本地存储。如下图,每次http请求,header都携带cookie;localStorage、sessionStorage在HTML5中,新加入了一个localStorage/sessionStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),原创 2020-12-12 18:21:08 · 207 阅读 · 0 评论 -
原生Ajax的创建过程 == jsonp原理
原生Ajax的创建过程1、创建xhr 核心对象var xhr=new XMLHttpRequest();2、调用open 准备发送参数一:请求方式参数二: 请求地址参数三:true异步,false 同步xhr.open('post','http://www.baidu.com/api/search',true)3、如果是post请求,必须设置请求头。xhr.setRequestHeader('Content-Type', 'application/x-www-原创 2020-12-09 20:40:11 · 122 阅读 · 0 评论 -
事件绑定、事件传播、事件捕获、事件冒泡、自定义事件 == js中事件委托 == 封装一个通用的事件绑定函数
事件绑定、事件传播、事件捕获、事件冒泡、自定义事件DOM事件三种级别DOM0级事件DOM0 级时间分两种,一是直接在标签内直接添加执行语句,二是定义执行函数。<input type="text" id="test"><input type="button" value="button" onclick="alert(document.getElementById('test').value)"><script> document.getEl原创 2020-12-08 18:53:44 · 146 阅读 · 0 评论 -
DOM面试题 ==
DOM面试题DOMJavaScript操作网页的接口,全称为“文档对象模型(Document Object Model)。 有这几个概念:文档、元素、节点整个文档是一个文档节点每个标签是一个元素节点包含在元素中的文本是文本节点元素上的属性是属性节点文档中的注释是注释节点DOM本质 DOM树:DOM树是结构,树是由DOM元素和属性节点组成的,DOM的本质是把html结构化成js可以识别的树模型;有了树模型,就有了层级结构,层级结构是指元素和元素之间的关系父子,兄弟。下图为htm原创 2020-12-08 18:37:47 · 1538 阅读 · 0 评论 -
js之继承 ==== js设计模式
js之继承前言继承在js中占有非常重要的地位,那么在js中有很多中继承的方式,不过每一种继承方式都有优缺点。下面就列举几种继承的方式。实现继承首先需要一个父类,在js中实际上是没有类的概念,在es6中class虽然很像类,但实际上只是es5上语法糖而已function People(name){ //属性 this.name = name || 'Annie' //实例方法 this.sleep=function(){ console.log(this.name + '正原创 2020-12-07 19:23:05 · 107 阅读 · 0 评论 -
for···in和for···of的区别 == null和undefined区别 == 一图搞懂javascript中的this与call/apply/bind的6中关系
for···in和for···of的区别for···in和for···of的区别:首先一句话:(for···in取key,for··of取value)①从遍历数组角度来说,for···in遍历出来的是key(即下标),for···of遍历出来的是value(即数组的值)...原创 2020-12-07 19:04:30 · 117 阅读 · 0 评论 -
深拷贝浅拷贝
深拷贝浅拷贝深拷贝和浅拷贝的区别1.浅拷贝: 将原对象或原数组的引用直接赋给新对象,新数组,新对象/数组只是原对象的一个引用2.深拷贝: 创建一个新的对象和数组,将原对象的各项属性的“值”(数组的所有元素)拷贝过来,是“值”而不是“引用”为什么要使用深拷贝?我们希望在改变新的数组(对象)的时候,不改变原数组(对象)内存模型JS内存空间分为栈(stack)、堆(heap)、池(一般也会归类为栈中)。 其中栈存放变量,堆存放复杂对象,池存放常量。基本数据类型与栈内存JS中的基础数据类型,这些值原创 2020-12-05 11:08:57 · 55 阅读 · 0 评论 -
javascript数组方法 == js数组去重 == js中数组排序(冒泡、快速、插入)== js中数组扁平化处理
javascript数组方法 == js数组去重参看如下链接:1.https://www.cnblogs.com/cauliflower/p/11267809.html2.https://www.cnblogs.com/zyfeng/p/10541133.html情境:将数组var arr = [1,1,‘true’,‘true’,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,‘NaN’, 0, 0, ‘原创 2020-12-05 10:57:23 · 236 阅读 · 0 评论 -
闭包
闭包1. 如何产生闭包(closure)上图代码:// 函数作为返回值function create() { const a = 100 return function () { console.log(a) }}const fn = create()const a = 200fn() // 100// 函数作为参数被传递function print(fn) { const a = 200 fn()}const a =原创 2020-11-30 21:24:35 · 356 阅读 · 0 评论 -
一文彻底搞懂js垃圾回收和内存泄露
一文彻底搞懂js垃圾回收和内存泄露垃圾回收机制浏览器的 Javascript 具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。其原理是:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大并且GC时停止响应其他操作,所以垃圾回收器会按照固定的时间间隔周期性的执行。只有函数内的变量才可能被回收不再使用的变量也就是生命周期结束的变量,当然只可能是局部变量,全局变量的生命周原创 2020-11-30 21:37:40 · 155 阅读 · 0 评论 -
js异步之宏任务(marcroTask)和微任务(microTask)
js异步之宏任务(marcroTask)和微任务(microTask)先看一到面试题写出console.log的输出顺序console.log(100);setTimeout(()=>{ console.log(200);})setTimeout(()=>{ console.log(201);})Promise.resolve().then(()=>{ console.log(300);})console.log(400);// 1原创 2020-12-01 21:22:44 · 101 阅读 · 0 评论 -
es6解构赋值
es6解构赋值定义:解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。语法//数组结构var a, b, rest;[a, b] = [10, 20];console.log(a); // 10console.log(b); // 20//对象解构({ a, b } = { a: 10, b: 20 });console.log(a); // 10console.log(b); // 20// ...rest原创 2020-11-27 21:19:44 · 91 阅读 · 0 评论 -
作用域和自由变量
作用域和自由变量作用域(定义)变量作用域:就是一个变量可以使用的范围。作用域 (种类)1、js中首先有一个最外层的作用域,全局作用域;2、js中可以通过函数来创建一个独立作用域称为函数作用域,函数可以嵌套,所以作用域也可以嵌套;3、es6中新增了块级作用域(大括号,比如:if{},for(){},while(){}…);如下图所示:es6作用域,只适用于const,let自由变量自由变量的概念: 当前作用域没有定义的变量作用域链自由变量的向上级作用域一层一层查找,直到找到为止原创 2020-11-27 21:06:59 · 145 阅读 · 1 评论 -
javascript原型与原型链
javascript原型与原型链===============================================================================1. prototype每个函数都有一个prototype属性,被称为显示原型===============================================================================2._ proto _1、每个实例对象都会有_ proto _属性,其被称原创 2020-11-26 20:41:11 · 70 阅读 · 0 评论 -
递归手写深拷贝 ===== js数据类型判断
递归手写深拷贝前提:深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的。1. 堆栈内存具体看另一篇博客数据类型、堆栈存储2. 浅拷贝与深拷贝深拷贝和浅拷贝的示意图大致如下:浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。赋值和浅拷贝的区别赋值:把一个对象赋值给一个新的变量时,赋的其实是该对象的在栈中的地址,而不是堆中的数据。也就是两个对象指向原创 2020-12-04 20:42:08 · 252 阅读 · 0 评论 -
js的数据类型、堆栈存储、多数据类型计算
js的数据类型、堆栈存储、多数据类型计算js数据类型有哪些基本数据类型(值类型): Number、String、Boolean、Undefined、Null、Symbol(es6新增独一无二的值) 和 BigInt(es10新增);引用数据类型: Object。包含Object、Array、 function、Date、RegExp。备注: 基本数据类型,又称值类型。栈堆存储值类型栈存储: 主要针对(Number、String、Boolean)三种数据。直接存储在栈(stack)中,占据空间原创 2020-12-04 20:31:40 · 113 阅读 · 0 评论