JavaScript
文章平均质量分 67
狗换
保持热爱,奔赴山海
展开
-
webpack loader理解
loaderloader 用于对模块的源代码进行转换。loader 可以使你在import或 "load(加载)" 模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模中importCSS 文件!示例例如,你可以使用 loader ...转载 2021-06-17 18:15:01 · 262 阅读 · 0 评论 -
JS里的宏任务和微任务详解
宏任务(macrotask )和微任务(microtask )https://www.cnblogs.com/wangziye/p/9566454.html为什么要引入微任务,只有一种类型的任务不行么?面渲染事件,各种IO的完成事件等随时被添加到任务队列中,一直会保持先进先出的原则执行,我们不能准确地控制这些事件被添加到任务队列中的位置。但是这个时候突然有高优先级的任务需要尽快执行,那么一种类型的任务就不合适了,所以引入了微任务队列。macrotask 和 microtask 表示异步任务的两种分类转载 2021-05-13 09:22:39 · 468 阅读 · 0 评论 -
js 常见的6种继承(原型链继承,构造函数继承,组合继承,原型式继承,寄生式继承,寄生组合式继承)
继承是面向对象的,使用这种方式我们可以更好地复用以前的开发代码,缩短开发的周期、提升开发效率。那么,请你先思考几个问题:JS 的继承到底有多少种实现方式呢?ES6 的 extends 关键字是用哪种继承方式实现的呢?第一种:原型链继承原型链继承是比较常见的继承方式之一,其中涉及的构造函数、原型和实例,三者之间存在着一定的关系,即每一个构造函数都有一个原型对象,原型对象又包含一个指向构造函数的指针,而实例则包含一个原型对象的指针。重点:让新实例的原型等于父类的实例。特点:实例可继承的属性有:实例转载 2021-05-12 17:41:42 · 841 阅读 · 0 评论 -
JS Arguments对象详解
arguments是一个对应传递给函数参数的类数组对象;使用场景:针对同一个方法被多处调用,但是参数数量不确定的情况下,可以更具arguments索引进行判断。例如:function func1(a, b, c) { console.log(arguments[0]); // 1 console.log(arguments[1]); // 2 console.log(arguments[2]); // 3 } func1(1, 2, 3);1、arg.原创 2021-05-11 17:39:24 · 5553 阅读 · 0 评论 -
promise async\await详解
promisepromise是一个异步的解决方案;或者从语法上将,他是一个对象,可以获取异步操作的消息;从本意上讲,他是一种承诺,承诺过一段时间他会返回一个执行结果:resolve 或者reject;promise代表一个异步操作的执行返回状态,这个执行返回状态再创建是是未知的,允许我们为执行结果的成功或失败指定处理方法;functionpromise解决的问题回调地狱promise支持多个并发的请求,用promise.all,并按顺序获取请求后的返回数据promise可以解决异步的问题,但他翻译 2021-04-09 16:13:04 · 714 阅读 · 0 评论 -
js实现堆排序
堆排序:思想:创建大根堆或小根堆,然后将顶部节点移到数组已经排好的顺序之后,heapSort(){var a = [53, 17, 78, 9, 45, 65, 87, 32];let temp;for (let m=a.length -1;m>=0;m--) { temp = a[m]; a[m] = a[0]; a[0] = temp; this.creatDagendui(a)}console.log(a)},creatDagendui(a)原创 2021-04-08 15:23:12 · 137 阅读 · 0 评论 -
js实现选择排序
思想:每次在数组中找到最小的,放在已排序好的之后所以最后一个一定是最大的,只用排序len-1次实现:for循环n-1次,第二层循环从i+1开始,并且当前min = i;对比a[j]与a[min]的大小,记录min位置;第二层循环结束后,交换i与min位置的值,往复循环 n-1次xuanzeSort(){ var a = [53, 17, 78, 9, 45, 65, 87, 32]; // 找到最小的; for (let i = 0;i<a.length-1;原创 2021-04-08 15:20:37 · 88 阅读 · 0 评论 -
js实现插入排序
插入排序:思想:每次将关键字插入到已经排好序的子集中空间复杂度:O(1);时间复杂度:最好,已经排序好的:O(n)最坏,逆序:O(n^2)则平均为:O(n^2)稳定性:稳定实现:charuSort(){var a = [53, 17, 78, 9, 45, 65, 87, 32];// 每次将关键字插入到排好的子集中for (let i = 1;i<a.length;i++) { if (a[i]<a[i-1]){ // 只有当前元素比上一个元素小的时候才进行元素原创 2021-04-08 15:19:14 · 185 阅读 · 0 评论 -
js实现快速排序
思想:最主要的是要找到基准点,第一次快速排序之后,将数组分成两个,一个数组中所有的值都小于基准值,一个都大于;逐次递归对两个数组进行快排;直到 low == high == base实现:kuaisuSort(a,low,high){if (low < high) { let position = this.test(a,low,high); this.kuaisuSort(a,low,position); this.kuaisuSort(a,position+1,原创 2021-04-08 15:17:46 · 135 阅读 · 0 评论 -
js中的数据类型
1、数据类型数据类型主要包含有:number,boolean,null,undefine,string,symbol,BigInt,object:{array,object,function,Date,Math,RegExp};[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-miauP8wK-1617866092312)(https://s0.lgstatic.com/i/image2/M01/04/F0/CgpVE1_4DdGAJ_EXAAE38RQC0js096.png原创 2021-04-08 15:15:37 · 87 阅读 · 0 评论 -
js 闭包详解
JavaScript 中的闭包是相当重要的概念,并且与作用域相关知识的指向密切相关,在大厂的前端面试过程中经常会被提及。作用域基本介绍JavaScript 的作用域通俗来讲,就是指变量能够被访问到的范围,在 JavaScript 中作用域也分为好几种,ES5 之前只有全局作用域和函数作用域两种。ES6 出现之后,又新增了块级作用域,下面我们就来看下这三种作用域的概念,为闭包的学习打好基础。全局作用域在编程语言中,不论 Java 也好,JavaScript 也罢,变量一般都会分为全局变量和局部变量两种原创 2021-04-08 15:14:25 · 350 阅读 · 0 评论 -
js深浅拷贝-深拷贝,浅拷贝
浅拷贝的原理和实现自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果属性是引用数据类型,复制的就是内存中的地址,如果其中一个对象改变了这个内存中的地址,肯定会影响到另一个对象。浅拷贝只能拷贝一层浅拷贝,对象拷贝的时候,基本数据类型不会随之变化,拷贝对象中引用数据类型会出现拷贝后随之改变方法一:object.assignobject.assign 是 ES6 中 object 的一个方法,该方法可以用于 JS 对象的合并等多个原创 2021-04-08 15:12:46 · 222 阅读 · 0 评论 -
jsthis指向问题: new、apply、call、bind详解
JavaScript 中的 apply、call 和 bind 方法是前端代码开发中相当重要的概念,并且与 this 的指向密切相关 很多人对它们的理解还比较浅显,如果你想拥有扎实的 JavaScript 编程基础,那么必须要了解这些基础常用的方法。希望通过这一讲的学习,你可以彻底掌握它们。为了方便你更好地理解本讲的内容,在课程开始前请你先思考几个问题:1、用什么样的思路可以 new 关键词?2、apply、call、bind 这三个方法之间有什么区别?3、怎样实现一个 apply 或者 call原创 2021-04-08 15:08:54 · 159 阅读 · 0 评论 -
日期、Math、数组api及对象api
1、日期格式化var date = new Date();var year=date.getFullYear();var month=date.getMonth();var day=date.getDay();var hour=date.getHours();var minute=date.getMinutes();var second=date.getSeconds();if(m...原创 2019-10-31 19:57:29 · 151 阅读 · 0 评论 -
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-
vue 报错:Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being muta...原创 2019-10-31 19:41:19 · 325 阅读 · 0 评论 -
vue绑定样式、条件渲染
绑定样式有三种方法;1、类名绑定这里的类名有数据isActived决定;isActived为ture时,div类名为actived<div :class="{actived:isActived}"></div>2、数组绑定<div :class="[className1,className2]"></div>data:{ cl...原创 2019-07-29 20:57:27 · 432 阅读 · 0 评论 -
vue中动态改变对象或是数组数据,页面能够实时刷新数据
vue中动态改变对象或是数组数据,保证页面也是跟着随时改变的,现有三种方法实现:1、改变引用data:{ obj:{ name:'gou', age:18 }},直接更换变量引用obj = { name:'gou', age:18, address:'beijin'}2、 数组使用数组函数pop、push、...原创 2019-07-29 20:59:28 · 23084 阅读 · 0 评论 -
vue非父子组件之间的通信:bus总线(中央发布令)
1、bus总线中央发布令如图所示,加入组件:1–3需要进行数据传递,一般情况下会通过组件2作为中间者,进行传值;但如果组件:3–3也需要通信,这时候再通过3向上传,一层一层是非常复杂的;vue是一个轻量级的框架,遇到复杂的数据处理时,需要借助其他工具;这里我们使用 bus 总线(中央发布令)代码示例:已下代码中列举了两种组件之间通过change事件进行通信;首先将bus挂载到vue实例中...原创 2019-07-30 16:30:37 · 200 阅读 · 0 评论 -
vue组件插槽与作用域插槽
1、在组件中加入自定义的htmlslot标签为vue中特有标签,意为插槽,是指在组件中可以自定义插入dom;//使用组件:<box-content> <div slot="header">header</div> <div slot="footer">footer</div></box-content>...原创 2019-07-30 21:08:04 · 684 阅读 · 0 评论 -
js中this的指向、作用域和闭包
this指向问题1、this在执行的时候才会确定指向的是什么,不执行无法确定。this的几种不同的使用场景构造函数对象属性普通函数call、apply、bind构造函数:this先指向一个空对象,再对this赋值,最后返回this;function Foo(name){ //this = {}; this.name = name; //return...原创 2019-07-26 10:20:19 · 331 阅读 · 1 评论 -
构造函数、原型及原型链
1、构造函数funcion Foo (name,age){ this.name=name; this.age=age; this.class='class-1'; return this;//默认return this,可不用写}var f = new Foo('gouhuan',18);var f2 = new Foo('zhaohuanling',1...原创 2019-07-26 10:22:26 · 127 阅读 · 0 评论 -
js中异步和单线程使用场景及常见问题
使用异步的场景setTimeoutajax 请求数据图片load 加载点击事件setTimeout异步–结果:100、300、200console.log(100);setTimeout(function(){ console.log(200)},1000);console.log(300)同步–结果:100、200、300consol...原创 2019-07-26 10:23:40 · 216 阅读 · 0 评论 -
vue过滤器、计算属性及watch监听
过滤器1、vue中允许自定义过滤器,可用于一般文本常见的格式转换:(1)双花括号中插入值{{message | filterA}}(2)v-bind表达式<div v-bind:id="rawId |formatId"></div>过滤器应该被添加在js表达式的尾部,有管道符号filterseg:本地实例过滤器:竖线与字符串必须有空格<div ...原创 2019-09-27 13:52:16 · 521 阅读 · 1 评论 -
vue组件的性能优化
如果需要对一些组件反复的进行出现和消失的操作,着由几种方法可以实现1、v-if v-show,条件渲染<child-one v-if="type==child-one"></child-one><child-two v-if="type==child-two"></child-two>2、component中的is属性:这里type为...原创 2019-09-27 13:53:47 · 963 阅读 · 0 评论 -
初学vue组件应该注意的细节-子组件不可随意修改父组件数据
1、子组件中,data必须为function,否则报错;只有根组件data可为对象形式错误示范:Vue.compoent('row',{ data:{ }})正确示范:Vue.compoent('row',{ data:function(){ return{ } }, ...原创 2019-09-27 13:55:54 · 325 阅读 · 0 评论 -
js事件冒泡、代理及通用事件封装
1、通用事件封装及代理当动态数据很多时,如何给每个img绑定点击事件-代理;代理的好处:代码简洁,只会对父级dom做一次的事件绑定给浏览器的压力也比较小(内存或渲染的压力)事件冒泡过程:根据dom树形结构一层一层向上冒泡;(阻止冒泡)<div id="div1"> div1</div><div id="div2"> div2</d...原创 2019-07-28 22:38:10 · 213 阅读 · 0 评论