JavaScript
文章平均质量分 56
JavaScript中的各种知识点
二九君
这个作者很懒,什么都没留下…
展开
-
手写Promise.all
一、Pormise.all它接受一个Promise对象组成的数组。返回一个新的Promise,只有所有的Promise都成功才成功,只要有一个失败了就直接失败。成功的结果是每个Promise成功结果组成的数组,失败的结果是Promise数组中失败的结果。传入一个 Iterable,但大部分情况下是数组,以下以数组代替传入一个数组,其中可包含 Promise,也可包含普通数据数组中 Prmise 并行执行但凡有一个 Promise 被 Reject 掉,Promise.all 失败保持输出数组位原创 2021-05-24 18:17:10 · 257 阅读 · 0 评论 -
JavaScript中new操作符到底做了什么
做了什么?创建了一个空的js对象(即{})将空对象的原型__prototype__指向构造函数的原型(prototype)将空对象作为构造函数的上下文(改变this指向 使用apply)对构造函数有返回值的判断怎么实现?/* create函数要接受不定量的参数,第一个参数是构造函数(也就是new操作符的目标函数),其余参数被构造函数使用。 new Create() 是一种js语法糖。我们可以用函数调用的方式模拟实现*/function create(Con,...原创 2021-05-22 21:01:28 · 232 阅读 · 0 评论 -
JavaScript中instanceof实现原理(判断obj.__proto__ === proto)
一、instanceof是干什么的instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。二、代码实现function instance_of (obj, Fn) { // 判断传入的构造函数是不是函数类型 if (typeof Fn !== 'function') { throw new TypeError('不是函数'); } // 实例不是对象, 返回false if (!obj ||原创 2021-05-22 20:37:39 · 244 阅读 · 0 评论 -
JavaScript原生实现图片懒加载
一、懒加载原理一张图片就是一个<img>标签,浏览器是否发起请求图片是根据<img>的src属性,所以实现懒加载的关键就是,在图片没有进入可视区域时,先不给<img>的src赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。二、懒加载思路及实现实现懒加载有四个步骤,如下:加载loading图片判断哪些图片要加载【重点】隐形加载图片替换真图片注意:判断clientHeight+scrollTop>offsetTop这一步是原创 2021-05-22 14:23:12 · 190 阅读 · 0 评论 -
JavaScript中的浅拷贝与深拷贝(手写浅拷贝和深拷贝)
一、简介数据分为基本数据类型和引用数据类型。基本数据类型:String、Number、Boolean、Null、Undefined、Symbol。基本数据类型是直接存储在栈中的数据。引用数据类型:Array、Object。引用数据类型存储的是该对象在栈中引用,真实的数据存储在内存中。由于基本数据类型是直接存储的,所以如果我们对基本数据类型进行拷贝,然后修改新数据后,不会影响到原数据。而当你对引用数据类型进行拷贝,然后修改新数据后,它就会影响到原数据。二、浅拷贝、深拷贝与赋值的区别赋值原创 2021-05-19 22:55:57 · 806 阅读 · 10 评论 -
浏览器页面渲染机制
一、前言浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。目前市面上常见的浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)。这里面大家最耳熟能详的可能就是 Webkit 内核了,Webkit 内核是当下浏览器世界真正的霸主。本文我们就以 Webkit 为例,对现代浏览器的渲染过程进行一个深度的剖析。二、页面加载过程在介绍浏览转载 2021-05-15 17:25:21 · 2105 阅读 · 0 评论 -
JavaScript中typeof、instanceof与===进行数据类型的判断
一、JS中的数据类型NumberBooleanStringNullUndefinedObject// BigInt和Symbol暂且不谈BigIntSymbolBigInt和Symbol暂且不谈二、typeoftypeof(注:typeof返回的值都是小写的数据类型的字符串表达,如:‘object而不是Object’) 其实就是判断参数是什么类型的实例,就一个参数,例:typeof A其返回值(只能是这6个):string/number/boolean/undefined原创 2021-05-11 17:34:06 · 247 阅读 · 0 评论 -
为什么说ES6的class是语法糖?
一、前言为什么说ES6的class是语法糖?class是原型的语法糖吗?那又是如何使用原型来实现class这一语法糖的呢?二、基于Prototype的OOP(面向对象)先来看个例子:function Person (name, sex) { this.name = name this.sex = sex} function Man (name) { this.name = name} Man.prototype = new Person('', 'male') let转载 2021-05-11 11:16:59 · 398 阅读 · 0 评论 -
JavaScript通过Promise来控制并发请求个数
一、场景假设现在有这么一种场景:现有 30 个异步请求需要发送,但由于某些原因,我们必须将同一时刻并发请求数量控制在 5 个以内,同时还要尽可能快速的拿到响应结果。如图所示:上图这样的排队和并发请求的场景基本类似,窗口只有三个,人超过三个之后,后面的人只能排队了。二、串行和并行串行:一个异步请求完了之后在进行下一个请求并行:多个异步请求同时进行串行举例:var p = function () { return new Promise(function (resolve, rejec原创 2021-05-10 19:24:58 · 1014 阅读 · 1 评论 -
JavaScript中的Map和Set
一、MapMap对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。构造函数Map可以接受一个数组作为参数。Map对象的属性:size:返回Map对象中所包含的键值对个数Map对象的方法:set(key, val): 向Map中添加新元素get(key): 通过键值查找特定的数值并返回has(key): 判断Map对象中是否有Key所对应的值,有返回true,否则返回falsedelete(key): 通过键值从Map中移除对应的数据clear(): 将这个Map中的原创 2021-05-06 15:39:07 · 383 阅读 · 0 评论 -
JavaScript中的宏任务和微任务
一、宏任务和微任务宏任务(macrotask)微任务(microtask)由谁发起宿主(Node、浏览器)JS引擎具体事件1. script (可以理解为外层同步代码) 2. setTimeout/setInterval 3. UI rendering/UI事件 4. postMessage,MessageChannel 5. setImmediate,I/O(Node.js)1. Promise 2. MutaionObserver 3. Object.obse原创 2021-05-05 15:27:53 · 164 阅读 · 0 评论 -
JavaScript根据某个相同的字段进行数据分组
一、为什么进行数据的分组后端返回的数据往往有可能是未按照某个相同字段值所分好组。而前端有时候的需求是对数据进行分组展示。(其实这个工作前后端都可以完成)二、实现方式数据示例:var arr = [{ "categoryId":123456, "parentId":2010105, "name":"Web解决方案"},{ "categoryId":2010106, "parentId":2010105, "name":"IT解决方案"},{原创 2021-04-14 18:38:17 · 3158 阅读 · 1 评论 -
原生JavaScript实现上拉加载更多
实现的主要参数:scrollTop:滚动视窗的高度距离window顶部的距离,它会随着往上滚动而不断增加,初始值是0,它是一个变化的值。clientHeight:它是一个定值,表示屏幕可是区域的高度。scrollHeight:页面不能滚动时是不存在的,body长度超过window时才会出现,所表示body所有元素的长度。由上面的三个值所产生一个原理公式:scrollTop + clientHeight >= scrollHeight(个人理解这里会有个大于号是因为移动端可能会有当到底还可以下原创 2021-03-04 19:41:55 · 667 阅读 · 2 评论 -
Vue-router中的导航守卫(全局守卫、路由独享守卫、组件内守卫)
一、全局守卫1.router.beforeEach((to,from,next)=>{})2.回调函数中的参数,to:进入到哪个路由去,from:从哪个路由离开,next:函数,决定是否展示你要看到的路由页面。3. 如下例:main.js中设置全局守卫在main.js中,有一个路由实例化对象router。在main.js中设置守卫已是全局守卫。如下,判断to.path当前将要进入的路径是否为登录或注册,如果是就执行next(),展示当前界面。如果不是,就弹出alert,然后移至登录界面。转载 2021-03-02 10:53:47 · 568 阅读 · 0 评论 -
Axios框架的基本使用
一、什么是AxiosAxios就是一个基于Promise的,发送http请求的一个工具库。特点:支持Promise API拦截请求和响应。拦截请求,可以过滤请求参数;拦截响应,可以处理响应异常取消请求。请求可以手动取消二、在Vue中使用Axios1、安装Axios模块npm install --save-dev axios2、在index.js文件中引入Axiosimport axios from 'axios'new Vue({ // el: '#app', // ro原创 2021-03-02 00:07:27 · 227 阅读 · 0 评论 -
Vue中this.$set的用法(解决数组、对象修改后不更新问题)
一、this.$set实现什么功能,为什么要用它?当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了,简单来说this.$set的功能就是解决这个问题的啦。官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi’).二、怎么用它?举个例子:1.Vu原创 2021-03-01 21:53:19 · 29304 阅读 · 1 评论 -
浏览器重排和重绘
重排:浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM树和渲染树),DOM树表示页面结构,渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化,DOM树的结构变化,渲染树需要重新计算。重绘:重绘是**一个元素外观的改变所触发的浏览器行为**,例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。由于浏览器的流布局,对渲染树的计算通常只需要遍历一次就可以完成。但table原创 2021-03-01 20:57:36 · 191 阅读 · 0 评论 -
export和export default的区别
一、export的使用1.直接输出export let words = 'hello world!!!' export function output() { // ... }2.先定义再输出let firstWords = 'hello'let secondWords = 'world'let thirdWords = '!!!'function output() { // ...}export {firstWords, secondWords, thirdWor原创 2021-03-01 18:12:00 · 302 阅读 · 0 评论 -
Promise的基本使用
一、什么是PromisePromise是异步编程的一种解决方案,在ES6中Promise被列为了正式规范,统一了用法,原生提供了Promise对象。它支持链式调用,同时解决了回调地狱的问题。二、Promise的基本用法Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。let p = new Promise(function(resolve, reject){ //做一些异步操作原创 2021-02-28 22:47:52 · 283 阅读 · 0 评论 -
防抖(debounce)和节流(throttle)
一、应用场景在进行窗口的resize、scroll,输入框内容校验等操作时,如果事件处理函数调用的频率无限制,会加重浏览器的负担,导致用户体验非常糟糕。此时我们可以采用debounce(防抖)和throttle(节流)的方式来减少调用频率,同时又不影响实际效果。两种函数都用到了闭包。二、函数防抖(debounce)当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。代码如下:// 过N秒后函数执行一次 如果一直触发原创 2021-02-27 15:38:03 · 160 阅读 · 0 评论 -
JavaScript中string为什么可以有方法?(基本包装类型)
基本包装类型在基本数据类型中有3个特殊的存在:String Number Boolean这三个基本类型都有自己对应的包装对象。包装对象,其实就是对象,有相应的属性和方法。调用方法的过程,是在后台偷偷发生的,所以我们称作为基本包装类型。举个例子://我们平常写程序的过程:var str = 'hello'; //string 基本类型var s2 = str.charAt(0); //在执行到这一句的时候 后台会自动完成以下动作 ://后台偷偷发生的( var _str = new Str原创 2021-02-26 22:41:42 · 614 阅读 · 0 评论 -
JavaScript中==和===的区别
一、==对于 == 来说,如果对比双方的类型不一样的话,就会进行类型转换:1. 首先会判断两者类型是否相同。相同的话就是比大小了2. 类型不相同的话,那么就会进行类型转换3. 会先判断是否在对比 null 和 undefined`,是的话就会返回 true4. 判断两者类型是否为 string 和 number ,是的话就会将字符串转换为 number5. 判断其中一方是否为 boolean ,是的话就会把 boolean 转为 number 再进行判断6. 判断其中一方是否为 object原创 2021-02-26 17:49:20 · 116 阅读 · 0 评论 -
JavaScript中call()、apply()、bind()的区别以及手写apply
call()、apply()、bind()是用来改变this的指向的。一、call和apply直接举例子:var cat = { name:"喵喵", eatFish:function(param1,param2){ console.log("吃鱼"); console.log("this的指向=>"); console.log(this); console.log(param1,param2); }} var dog = { name:"汪汪", eatB原创 2021-02-26 15:28:52 · 155 阅读 · 1 评论 -
JavaScript中的对象类型检测
核心:Object.prototype.toString.call用 typeof 是否能准确判断一个对象变量,答案是否定的,null 的结果也是 object,数组的结果也是 object,有时候我们需要的是 “纯粹” 的 object 对象。如何避免呢?比较好的方式是:console.log(Object.prototype.toString.call(obj) === "[object Object]");使用以上方式可以很好的区分各种类型:console.log(Object.protot原创 2021-02-24 10:31:27 · 151 阅读 · 0 评论 -
JavaScript判断数组的方法
一、Array.isArrayES5新增的数组方法,Array.isArray应该是我们最先想到的判定方式,现在应用的也比较广泛。const arr = [1,2,3,4]Array.isArray(arr) // true二、instanceof一般来说,instanceof关键字,是用来判断某个元素是否某对象构造函数实例。在数组判断上,instanceof关键字也可以进行数组的判定。const arr = [1, 2, 3, 4]arr instanceof Array //原创 2021-02-24 10:17:31 · 311 阅读 · 0 评论 -
JavaScript中常见的排序算法(冒泡、选择、插入、快速)
一、排序算法类别常见比较排序:冒泡排序选择排序(普通选择排序、堆排序)插入排序(普通插入排序、希尔排序)快速排序归并排序常见非比较排序:计数排序基数排序桶排序复杂度表:二、冒泡排序 Bubble Sort大致流程:1.从第一个元素开始,比较每两个相邻元素,如果前者大,就交换位置2.每次遍历结束,能够找到该次遍历过的元素中的最大值3.如果还有没排序过的元素,继续1演示图:代码实现:function bubbleSort(arr) { for (let i原创 2021-02-23 23:56:31 · 146 阅读 · 0 评论 -
Vue插件的简单封装与使用(Toast插件)
一、组件和插件的区别与联系区别组件的使用频率往往大于插件组件的作用范围往往小于插件联系插件可以封装组件,组件可以暴露数据给插件二、 创建目录结构并初始化插件└── components └── toast ├── Toast.vue └── index.js Toast.vue:<!-- Toast.vue --><template> <div class="toast" v-show='isshow'> <div>原创 2021-02-23 20:14:54 · 585 阅读 · 0 评论 -
JavaScript中async和await的基本用法
一、async语句的用法:async是ES8的新语法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数:async function timeout() { return 'hello world'}console.log(timeout());console.log('虽然在后面,但是我先执行');输出结果:可以看出async函数返回的是promise函数,所以原创 2021-02-23 14:30:55 · 6148 阅读 · 0 评论 -
JavaScript中filter、map、reduce、find和findIndex的基本使用
一、filter函数filter(过滤器)起到一个过滤数据的作用,filter中的回调函数有一个要求:必须返回一个布尔值。当返回true时,函数内部会自动回调n进入数组,当返回false时,函数内部会过滤掉这次的n。filter() 不会对空数组进行检测。filter() 不会改变原始数组。const nums = [10, 20, 30, 40, 100, 510, 300, 70, 999, 60]let NewNum1 = nums.filter(n => n < 100)原创 2021-02-23 11:52:01 · 355 阅读 · 0 评论 -
vue-router使用路由嵌套,二级路由
一、嵌套路由的使用场景:在选项卡中,顶部有多个导航栏,中间的主体显示的是内容;这个时候,整个页面是一个路由,然后点击选项卡切换不同的路由来展示不同的内容,就是中间的主体显示的是内容就是页面路由下的子路由,这就是路由中嵌套路由。二、使用方法:1.在router下的index.js配置路由映射,使用children数组来定义子路由{ path: '/home', component: Home, meta:{ title:'首页' }, // 路由嵌套原创 2021-02-19 23:11:50 · 666 阅读 · 0 评论 -
JavaScript 中 var 和 let 和 const 关键字的区别
一、var1.var定义的变量会提前声明,如果变量没有定义就直接使用的话,JavaScript回去解析这个变量,代码不会报错,只会输出undefined2.var定义的变量可以反复去定义,后面的会覆盖前面的3.var在循环中使用的时候,循环体外依然可以使用二、let1.let定义的变量不会预解析,必须先声明再使用,否则会报错(暂时性死区)2.let不能定义已经定义过的变量(无论之前是用var定义的还是let或者const定义的)3.let是块级作用域,函数内部使用let定义后,对函数原创 2021-02-19 22:42:25 · 173 阅读 · 0 评论 -
JavaScript中箭头函数和普通函数的区别
一、箭头函数:箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ … }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ … }和return。let fun = () => { console.log('123');}二、普通函数:function fun() { console.log('123');}三、箭头函数和普通函数的区别1. 箭头函数是匿名函数,不能作为构造函数,不能使用new:let原创 2021-02-19 22:24:01 · 1049 阅读 · 0 评论 -
JavaScript中的for...in、for...of和forEach
一、for…in循环for…in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。它循环遍历的值都是数据结构的键值let obj = {a: '1', b: '2', c: '3', d: '4'}for (let o in obj) { console.log(o) //遍历的实际上是对象的属性名称 a,b,c,d console.log(obj[o]) //这个才是属性对应的值1,2,3,4}for in也可以遍历数组,但不推荐,如果遍历数组则会原创 2021-02-19 20:04:28 · 138 阅读 · 0 评论 -
JavaScript判断对象是否为空
一、for…in…遍历属性:for…in…遍历属性,为真则为“非空数组”;否则为“空数组”for (let i in obj) { // 如果不为空,则会执行到这一步,返回true return true}return false // 如果为空,返回false二、通过JSON自带的stringify()方法来判断:const data = {}if (JSON.stringify(data) === '{}') { return false // 如果为空,返回fals原创 2021-02-19 18:13:55 · 342 阅读 · 0 评论 -
indexOf和includes的区别
indexOf和includes相比较:相同点:二者所传的参数是一样的,第一个参数传要判断的元素,第二个参数传开始检索的下标位置,两者都在数组和字符串上使用不同点:返回值不同indexOf:返回的是元素的所在下标,如果不存在则返回-1**优点:**元素存在可获取到元素的位置缺点:(1)无法判断是否有NaN的元素(2)返回的值不够语义化,需要我们进行处理includes:返回一个Boolean值,有:true,没有:false优点:(1)可判断NaN元素(2)返回值十分语义化,不需要再原创 2021-02-19 15:45:52 · 540 阅读 · 0 评论 -
ES5实现继承及优缺点
一、ES5实现继承原型链的核心只需要记住三点:每个实例对象都有__proto__属性,该属性指向其构造函数的原型对象,在调用实例的方法和属性时,如果在实例对象上找不到,就会往原型对象上找。构造函数的prototype属性也指向实例的原型对象原型对象的constructor属性指向构造函数。①原型链继承:原型链继承的原理很简单,直接让子类的原型对象指向父类实例,当子类实例找不到对应的属性和方法时,就会往它的原型对象,也就是父类实例上找,从而实现对父类的属性和方法的继承。// 父类funct原创 2021-02-09 21:25:52 · 260 阅读 · 0 评论 -
JavaScript事件循环的理解(Event Loop)
一、JavaScript是单线程工作的JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。为什么JavaScript是单线程的?JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?为了利用多核CPU的计转载 2020-12-10 16:38:17 · 120 阅读 · 0 评论 -
JavaScript中闭包的理解
一、为什么引入闭包需求:给按钮添加监听,要求每次点击时提示点击的是第几个按钮for (var i = 0,length=btns.length; i < length; i++) { var btn = btns[i] btn.onclick = function () { alert('第'+(i+1)+'个') } }上面这段代码效果如下给每个btn标签的onclick事件执行时,本身onclick绑定的function的作用域中没有变量i,i为原创 2020-12-09 17:15:01 · 173 阅读 · 0 评论 -
JavaScript中原型和原型链的深入理解
一、先来说说栈内存和堆内存概念 堆和栈都是运行时内存中分配的一个数据区,因此也被称为堆区和栈区, 但二者存储的数据类型和处理速度不同。堆(heap) 队列优先,先进先出。用于复杂数据类型(引用类型)分配空间,例如数组对象、 object对象(引用类型的值通常大小不固定,所以被存储在堆内存中,不会自动释放); 它是运行时动态分配内存的,因此存取速度较慢。栈(stack) 先进后出。主要存放一些基本类型(Undefined、Null、Boolean、Nu原创 2020-11-30 16:57:33 · 517 阅读 · 0 评论 -
JavaScript中定时调用和延时调用(setInterval()、setTimeout())
一、定时调用如果希望一段程序每间隔一段时间执行一次,可以使用定时调用 setInterval(function, milliseconds) 定时调用 可以将一个函数每隔一段时间执行一次 参数: 1.回调函数,该函数每隔一段时被调用一次 2.每次调用间隔的时间 单位是ms 这个方法返回一个Number类型的数据 这个原创 2020-11-24 09:39:08 · 1372 阅读 · 0 评论