![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 53
过往深处少年蓝
你是我落斓星河长风贯过北极,遥坠故里又仓惶离去难得的盈盈笑意。你让我诗引九霄落笔惊雷又写下惆怅,这相思易起锦书难寄苦了谁的白月光。
展开
-
对象Object方法学习记录(一)
一、 Object.assign() 拷贝一个对象属性到另一个对象,有相同属性则会覆盖,后面覆盖前面的属性 拷贝对象中的普通数据类型,不可拷贝引用类型,如对象中的对象 即拷贝普通数据类型:改变原对象和新对象的值不会相互影响 不可深拷贝:即为拷贝对象中的对象时,改变原对象的该值,新对象也会受影响,只是拷贝了原对象的引用地址而已,所以会相互影响 var target = {a:1,b:2} var obj2 = {a:5, c:2} var obj3 =原创 2021-07-01 15:19:06 · 103 阅读 · 0 评论 -
elementui的树形结构实现单选
原本树形结构是没有参数去设置单选的,但可以自己用代码实现 el-tree :data="tree" show-checkbox accordion :filter-node-method="filterNode" node-key="id" ref="tree" highlight-current :props="default原创 2021-04-29 09:38:33 · 1032 阅读 · 0 评论 -
forEach和map的兼容性写法
一、map和forEach的用法 var arr2 = [2,4,6,8] // item:数组每一项 // index:下标 // arr:遍历的数组 arr2.forEach(function(item,index,arr) { console.log('item', item) // 2,4,6,8 }) var arr3 = arr2.map(function(item,index,arr) { return item*原创 2021-04-19 17:37:36 · 492 阅读 · 0 评论 -
js系列——call、apply、bind的用法区别
一、上下文、作用域在js中,代码块是有上下文和作用域的概念的,我们看一个简单的例子: var name = 'lili', age = 20 var obj = { name: 'allen', objAge: this.age, show: function () { console.log('姓名:', this.name, '年龄:', this.age) } } console.log(obj.objAge)原创 2021-04-16 17:31:39 · 94 阅读 · 0 评论 -
js系列—继承
继承父类: // 父类 function Person(name) { this.name = name this.show = function() { console.log('名字', this.name) } } Person.prototype.age = 20 var p = new Person('aron')一、原型链继承 // 原型链继承 function Son(n原创 2021-04-15 17:16:14 · 79 阅读 · 0 评论 -
JS系列——js原型链
一、js的数据类型js的数据类型分为基本数据类型和引用数据类型,其中基本数据类型有:Undefined、Null、Boolean、String、Number;引用数据类型:Object、Array、Function,其中要注意的是:typeof(null)的值为object,而typeof(undefined)的值为undefinedconsole.log(undefined==null) // trueconsole.log(undefined===null) // falsenull表示原创 2021-04-14 17:22:05 · 421 阅读 · 0 评论 -
JS深拷贝与浅拷贝、for循环优化、装箱拆箱
一、深拷贝与浅拷贝深拷贝与浅拷贝概念:如果A复制了B,当改变A时,B也跟着改变,则是浅拷贝,B不变,则是深拷贝,深拷贝和浅拷贝一般都是针对于object的引用数据类型来说的,像基本数据类型:var a = ‘1’,var b = a,虽然是改变b的值不影响a的值,是因为a,b都开辟了自己独立的内存,和深浅拷贝并没有关系引用类型的数据存储关系与深浅拷贝的原理:解决深浅拷贝的方法:浅拷贝:赋值,遍历都是可以实现浅拷贝深拷贝的两种方法:深层遍历,JSON.parse()和JSON.stri原创 2021-04-08 14:59:00 · 276 阅读 · 0 评论 -
canvas学习-------画箭头
原文出处: https://www.w3cplus.com/canvas/drawing-arrow.html另外推荐一个学习canvas的地方:http://canvas.migong.org/category/canvas-images在这篇文章中主要来聊在Canvas中怎么绘制箭头。在Canvas的CanvasRenderingContext2D对象中是没有提供绘制箭头的方法,言外之...转载 2018-12-26 13:44:46 · 1654 阅读 · 1 评论 -
var与let,const的区别详解
自从ES6新增后给前端的js代码书写带来很大的变化或者便利性。其中对于变量的定义var,let,const我们就来说说之间的区别吧。let声明变量有以下几个特点:1.没有预解析过程(即没有变量提升,var有变量提升)2.不可以重复声明。3.{}代表块级作用域,let有块级作用域,var只有函数作用域。下面我们就一一举例来说明这些问题。预解析问题:function sa...原创 2019-06-20 16:17:44 · 3750 阅读 · 0 评论 -
妙用ES6解构和扩展运算符
Javascript ES6/ES2015尘埃落定,其中许多特性其实是为了简化代码。解构运算符,扩展运算符,和rest运算符就是其中很好的特性,它们可以通过减少赋值语句的使用,或者减少通过下标访问数组或对象的方式,使代码更加简洁优雅,可读性更佳。现在各浏览器及node.js都加快了部署ES6的步伐。ES6的学习正当其时。解构解构的作用是可以快速取得数组或对象当中的元素或属性,而无需使用ar...转载 2019-01-14 17:30:19 · 228 阅读 · 0 评论 -
JS系列——学习JS的运行机制
一、js的单线程概念众所周知,js语言是一个单线程语言,单线程也就是说同一时间只能做一件事,这个特点与他的用途有关,JS语言是运行在浏览器端的脚本语言,主要是与客户进行交互和操作DOM,所以单线程也就很好理解了。如果是多线程则会出现问题,例如,有两个线程同时对同一DOM进行添加和删除,那浏览器到底该以哪个线程为主呢?所以,单线程就避免了这个问题。但是,单线程是不是运行效率太低了?为了解决这个问题,设计师引出了同步与异步任务队列的概念。二、同步与异步任务队列同步任务(synchronous)就是在原创 2020-08-08 14:07:55 · 151 阅读 · 0 评论 -
实现vue项目下多元素限定边界的拖拽功能
要求:实现多个元素在限定的范围内自由拖拽(除vue的其他项目也可以用,稍微修改下即可)拖拽原理:onmousedown(鼠标左键点下),onmousemove(鼠标移动),onmouseup(鼠标松开)三个事件的顺序执行,在移动过程中去获取需要定位的值,然后改变该元素定位的left,top值。限定边界原理:做相应的边界判断直接上代码,代码注释的非常详细:<template> <div> <div id="dragBox"> <原创 2020-05-13 16:28:52 · 3785 阅读 · 0 评论 -
解决vue中双击事件会触发两次单击事件问题
问题描述:当在dom上同时绑定单击事件和双击事件时,点击双击事件会触发两次单击事件,这是我们不想看到的,而是应该单击事件与双击事件分开。分析:单击事件和双击事件区别就在间隔时间,当我们点击一次时,设置一个延时器,延时一定时间(300ms为好),在这300ms之内,在此点击,认定执行的是双击事件,如果超过300ms再点击第二次,执行的是单击事件。方案:单击事件代码:handleNodeClick(data) { var that = this // 开启定时器,300原创 2020-05-09 10:59:05 · 6120 阅读 · 0 评论 -
解决IE不兼容Date.parse()方法的问题
问题描述:在IE中调用Date.parse('2019-2-3')时报错,得到的是NAN,严格的说,IE不是不兼容Date.parse(),不是不兼容这个方法接收2019-2-3这种格式的参数。解决方法:把2019-2-3改成2019/2/3即可:var date = '2019-2-1'Date.parse(date.replace(/-/g, '/')) //15489...原创 2019-12-27 17:16:16 · 999 阅读 · 0 评论 -
js解决递归函数超出调用栈最大次数问题
我们定义一个求和的递归函数,用y来计数,正常情况下,如果传参sum(1,1000),是可以输出1001的,但是当计数次数超过一定范围时,如10000000,就会报错。 function sum(x,y){ if(y>0){ return sum(x+1,y-1) }else{ return x } } var...原创 2019-11-06 16:13:20 · 4192 阅读 · 0 评论 -
【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子:let a=[0,1,2,3,4], b=a;console.log(a===b);...转载 2019-11-01 15:49:21 · 146 阅读 · 0 评论 -
二分法查找与对象方法查找出现次数最多字符
二分法查找:原理:对已经排序的数组进行查找,进行下标的二分(对首尾下标取中间值,不断缩小查找范围,比起全循环性能要好,不必每项都去循环)function foundNum(arr,num){ var len=arr.length var st=0 var end=len-1 while(st<end){ var mid=Math.floor...原创 2019-11-01 15:09:12 · 773 阅读 · 0 评论 -
遍历数组的常用方法总结
1.最常用的方式for循环说明:可以设置循环次数var a = [{a:1, b:2},{a:'张三', b:55},{a:5, b:'lisi'}]// for(var i = 0; i < a.length; i++) {// console.log('aa', a[i])// } // 另一种写法:使用临时变量,将长度缓存起来...原创 2019-08-30 17:06:52 · 765 阅读 · 0 评论 -
解析JS如何运用断点进行调试
在我们项目开发时,往往会出现未知的bug,有时候这些bug我们很难发现,所以我们就需要借助断点调试,让程序运行到某处停下来逐个排查程序是否有错误之处,我们断点调试都是在chrome浏览器下进行。首先把项目用谷歌浏览器打开。按F12打开谷歌调试界面,然后选择Sources,这里会显示项目的JS代码,选择我们需要调试的js文件首先我们用手动添加断点的方式:添加断点:介绍下下面一些按...原创 2018-08-10 15:57:39 · 8507 阅读 · 0 评论 -
详解Ajax的使用
1.ajax翻译过来就是:异步javascript和XML,是一种异步动态局部刷新网页的技术,因为不使用AJAX的话更新内容是需要刷新整个网页的。ajax工作的原理就是:用户操作时,浏览器创建一个XMLHttpRequest对象,并且向服务器发送一个请求,服务器接受这个响应并且创建一个response发送数据返回给浏览器,浏览器用JS处理返回的数据并且渲染在页面。2.AJAX请求:创建XM...原创 2018-08-07 17:40:30 · 164 阅读 · 0 评论 -
正则常用
1. 字符串操作去除字符串两边的空格 trimString.prototype.trim = function() { return this.replace(/(^\s+)\|(\s+$)/g, '')}HTML编码,对< / > " & \等字符转义,避免XSS攻击function htmlEncode(str) { return str....转载 2018-08-22 16:21:56 · 165 阅读 · 0 评论 -
JavaScript 的 this 原理
一、问题的由来学懂 JavaScript 语言,一个标志就是理解下面两种写法,可能有不一样的结果。var obj = { foo: function () {}};var foo = obj.foo;// 写法一obj.foo()// 写法二foo()上面代码中,虽然obj.foo和foo指向同一个函数,但是执行结果可能不一样。请看下面的例子。...转载 2018-09-26 14:40:25 · 84 阅读 · 0 评论 -
正则表达式浅析
正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。创建方式:1.var box = new RegExp("box")2.字面量方式:var box = /box/正则表达式一些常见的符号意义:1. . 表示除了换行以外的任意单个字符2. * 表示前面的...原创 2018-11-27 14:24:07 · 154 阅读 · 0 评论 -
ES6 使用手册
转载:https://juejin.im/post/5bfe05505188252098022400前言这里的 "ES6" 泛指 ES5 之后的新语法 这里的 "完全" 是指本文会不断更新 这里的 "使用" 是指本文会展示很多 ES6 的使用场景 这里的 "手册" 是指你可以参照本文将项目更多的重构为 ES6 语法此外还要注意这里不一定就是正式进入规范的语法。1. let 和 ...转载 2018-12-08 14:06:09 · 177 阅读 · 0 评论 -
JavaScript 遍历、枚举与迭代的骚操作
标准操作 for循环相信大部分搬砖工作者都写过类似的代码: var arr = ['element1', 'element2', 'element3']; for (var i = 0, len = arr.length; i < len; i++) { console.log(arr[i]); } // element1 ...转载 2018-12-06 16:27:24 · 815 阅读 · 0 评论 -
js中生成唯一id的方法
1.随机数长度控制,定义一个长度变量(length),生成可控长度的随机数:Math.random().toString(36).substr(3,length)2.引入时间戳:Date.now().toString(36)3.合在一起最终办法:genID(length){ return Number(Math.random().toString().substr(3...原创 2019-01-28 11:14:21 · 7677 阅读 · 0 评论 -
树形结构的数据与一维数组数据的相互转换
在我们做项目时,我们有时需要树形结构的数据进行数据的树形层级展示,或者需要把返回的数据结构数据进行拆解成单层数组形式。下面我们就来总结下这两种方法。数组转树形结构:var data = [ {"id":2,"name":"第一级1","pid":0}, {"id":3,"name":"第二级1","pid":2},原创 2019-02-15 15:47:43 · 7531 阅读 · 2 评论 -
javascript如何用递归写一个简单的树形结构
现在有一个数据,需要你渲染出对应的列表出来:var data = [ {"id":1}, {"id":2}, {"id":3}, {"id":4}, ];var str="<ul>";data.forEach(function(v,i){ str+="<li><span>&quo转载 2019-02-13 17:48:24 · 532 阅读 · 0 评论 -
call、apply和bind方法的用法以及区别
call、apply、bind的作用是改变函数运行时this的指向,所以先说清楚this。以下是函数的调用方法:方法调用模式:当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象。 var a = 1 var obj1 = { a:2, fn:function...转载 2019-02-20 16:41:17 · 111 阅读 · 0 评论 -
根据某一个字段组装成父子级关系的数据
需求:在拿到后端的数据后我们往往需要根据某一字段的值相同来整合成一条数据,且其中某一些字段为的值相同,成为一条数据,另外一些值不同,成为该数据下一个字段的子级。如下图:处理之前:处理之后:处理方法如下:function formateTableData(data) { var listArr = [] data.forEach(function(el, inde...原创 2019-05-29 16:04:53 · 935 阅读 · 0 评论 -
运用数组索引变为复用函数的技巧
问题描述:在vue开发过程中,点击不同按钮,调用接口下发指令,由于接口是一样的,但是不同指令的参数不一样,在调用指令的同时会开启定时器重复调用接口,直到有轮询返回数据即清除定时器,而且要做到点击一个按钮的同时,有可能点击别的按钮下发另外一个指令,那么相当于我每写一个指令,就需要一个点击事件加上两个接口函数,那么多指令,我怎么让那两个函数复用呢?问题分析:每个指令因为会同时调用,那就肯定...原创 2019-06-14 09:59:16 · 175 阅读 · 0 评论 -
js中的栈与堆的讲解/基本数据类型与引用类型的讲解
1、栈(stack)和堆(heap) stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小不定也不会自动释放。 2、基本类型和引用类型 基本类型:存放在栈内存中的简单数据段,数据大小确定,内存空间大小可以分配。 5种基本数据类型有Undefined、Null、Boolean、Number和String,它们是直接按值存放的,所以...转载 2019-06-20 16:22:26 · 277 阅读 · 0 评论 -
解读ES6之Promise的使用
Promise 是ES6中的异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大,所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理(因为js是单线程的,那我们要解决线程阻塞的问题则...原创 2018-08-09 15:48:59 · 1563 阅读 · 0 评论