![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 72
maidu_xbd
核心算法+大量的重复实践
展开
-
javaScript---箭头函数和普通函数的区别
1、定义区别:箭头函数语法比普通函数更加简洁普通函数使用关键字function定义。箭头函数:如果没有参数,直接写一个();如果一个参数,可以省略();如果多个参数,逗号分割。如果函数体中只有return返回语句或者只有一句代码,return和{}可以省略。2this指向区别箭头函数没有自己的this,箭头函数内部 this 始终指向创建时所在作用域指向的对象。call,apply,bind方法改变不了箭头函数的指向。普通函数:直接调用时指向全局对象;原创 2024-02-29 13:09:17 · 624 阅读 · 0 评论 -
javaScript---javaScript面试题
函数A内部有一个函数B,函数B可以访问到函数A中的变量,那么函数B就是闭包。原创 2023-05-31 13:14:43 · 106 阅读 · 0 评论 -
vue---大文件分片上传
思路:将大文件切成小片异步上传可以解决大文件上传过慢的问题,但如果文件很大时,采用一次性异步上传,会在同一时间产生过多的请求,后端服务器处理不过来,导致请求异常。因此将文件切成小片后,再分组上传,比如一组10个切片,等待10个切片的请求上传完成后,再接着下一组,以此减轻对服务器的压力。原创 2023-06-05 12:06:33 · 3090 阅读 · 0 评论 -
javaScript---设计模式-提高复用性
(1)JavaScript最初没有专门的继承,所以最初JavaScript推崇函数式的编程,然后进行统一组合桥接到一起。(2)express中创建get等方法:express中有get,post,put等七八个方法,如何方便快速地创建。应用示例:(1)创建不同的选项效果,有一组菜单,上面每种选项都有不同的选中效果。,继承的好处是可以自动获得父类的内容与接口,方便统一化。一系列弹窗,每个弹窗的行为,大小,文字都不同;,组合的好处是耦合低,方便方法复用,方便扩展。定义一系列的骨架,简化后面类似操作的内容。原创 2023-05-08 08:38:56 · 489 阅读 · 0 评论 -
javaScript---设计模式-封装与对象
把不同的模块拆分为不同的类,给类定义不同的方法;最后把不同的类组合在最终的使用类里。好的封装(不可见、留接口):①变量外部不可见;封装的目的:①定义变量不会污染外部;②能作为一个模块调用;(1)多彩的弹窗:弹窗有多种,它们之间存在内容和颜色上的差异。为了避免重复新建,避免多个对象存在互相干扰。vue-router。当某一个对象需要经常创建的时候。当要创建单个、庞大的组合对象时。需要确保全局只有一个对象。需要组合出一个全局对象。原创 2023-05-08 08:34:19 · 655 阅读 · 0 评论 -
javaScript---设计模式-设计模式概论
建造者模式-精细化组合对象,需要大量参数,且内部模块庞大;桥接模式-独立出来,然后再对接过去,减少耦合度;单例模式-全局只能有一个实例化对象;数据访问模式-一个方便的数据管理器。职责链模式-像生产线一样组织模块;等待者模式-等你们都回来再吃饭;观察者模式-我作为第三方转发;委托模式-让别人代替你收快递;适配器模式-用适配代替更改;外观模式-给你的一个套餐;享元模式-共享来减少数量;状态模式-用状态代替判断;惰性模式-我要搞机器学习;工厂模式-大量创建对象;命令模式-用命令解耦;策略模式-算法工厂;原创 2023-05-08 08:30:44 · 633 阅读 · 0 评论 -
javaScript---toString()与Object.prototype.toString()
当我们把Array自身的toString()方法通过delete Array.prototype.toString删除之后,再次使用它时,发现Array原型上没有toString()方法,会往__proto__属性指向的对象上去找,找到并使用了Object原型上的toString(),也便将Object上的toString()方法作用在数组上,得出其数据类型[object Array]Object.toString最终通过原型链调用的是Function.prototype.toString。原创 2023-05-07 00:07:33 · 516 阅读 · 0 评论 -
javaScript---EventLoop事件循环机制
学习EventLoop机制帮助我们理解代码执行顺序。event loop 的机制,就是任务队列、js主线程、异步操作之间的互相协作。原创 2023-04-20 00:28:12 · 222 阅读 · 0 评论 -
javaScript---js如何实现继承
js实现继承的方法:构造函数继承、原型链继承、组合继承、class继承、实例继承 、拷贝继承 、寄生组合继承。原创 2023-04-18 18:56:13 · 556 阅读 · 0 评论 -
javaSccript---call()、 bind()、 apply()的区别
/ 17 obj.myFun() // 小张年龄 undefined 例 2 shows() // 盲僧 比较一下这两者 this 的差别,第一个打印里面的 this 指向 obj,第二个全局声明的 shows() 函数 this 是 window;arg1、arg2、... 是一些可选的参数,这些参数将在调用新函数时作为参数列表传递给原函数。call()、apply()、bind() 都是用来重定义 this 这个对象的。是用来改变函数this指向的,第二个参数是是用于传参。原创 2023-04-17 10:35:11 · 204 阅读 · 0 评论 -
javaScript---读懂promise、async/await
catch 只捕获最近的 then 的回调函数,前面的then的执行不成功的结果,有后面 then 的 reject 回调函数执行,如果没有后续 then 回调函数执行,则会被 catch 捕获执行;catch 方法,该方法相当于 最近的then 方法的第二个参数,指向 reject 的回调函数,另一个作用是,在执行resolve回调函数时,如果出错,抛出异常,进入catch 方法中。promise是如何解决问题的?then、catch返回的promise是新的promise,不是原来的promise。原创 2023-04-08 12:22:59 · 348 阅读 · 0 评论 -
javaScript---理解异步
同步:调用之后得到结果再干别的任务。异步:调用之后先不管结果,继续干别的任务。原创 2023-04-08 10:58:12 · 309 阅读 · 0 评论 -
javaScript---代码性能指标
代码性能指标包括:健壮性、可读性、可复用性、可扩展性。原创 2023-04-07 18:21:42 · 1039 阅读 · 0 评论 -
javaScript---如何判断一个对象为数组
判断一个对象为数组的7种方法原创 2023-04-06 12:21:00 · 421 阅读 · 0 评论 -
javaScript---内存管理
内存泄漏内存泄漏:任何一个程序的运行都需要分配内存空间,而对于一个页面来说,如果一些不再需要使用的内存没有得到及时释放,我们称这种现象为内存泄漏。一次内存泄漏似乎不会有太大的影响,但内存泄漏堆积会造成内存溢出,内存溢出,简单来说就是我们所需要使用的内存空间大于可用内存,此时我们的程序就会出现内存溢出错误。为什么要管理内存(1)减少浏览器的负担:内存过大会让浏览器压力过大,导致浏览器卡顿(2)Node端:内存如果不够,服务就会中断,而nodejs开启的服务,如果不管理内存,就会中断.原创 2022-02-04 10:23:10 · 3394 阅读 · 0 评论 -
javaScript---防抖Debounce和节流Throttle
防抖是多次触发只生效最后一次。适用于只需要一次触发生效的场景节流是让操作每隔一段时间才能触发一次。适用于多次触发要多次生效的场景原创 2022-02-04 10:01:45 · 727 阅读 · 0 评论 -
javaScript---复杂三目运算符解析
记录下小知识,第一次接触还整的有些懵。var a=""b=a?a.map? a.map((item)=>({url:item})):[{key:a}]:[];以上三目运算符解析:将a?a.map? a.map((item)=>({url:item})):[{key:a}]:[]赋值给b情况一(a条件为假):如果a=[]或a=0或a=“”或a=false;则b=[]情况二(a条件为真且a为非空字符串):如果a为非空字符串,a.map条件为假,...原创 2021-05-26 17:21:53 · 558 阅读 · 1 评论 -
JavaScript---var与let、const的区别
var与let、const的区别1、var声明的变量会挂载在window上,而let和const声明的变量不会 2、var声明变量存在变量提升,let和const不存在变量提升console.log(a); //undefined a已声明还没赋值,默认得到undefined值var a = 10;var b;console.log(b); //undefined b已声明还没赋值,默认得到undefined值console.log(c); //报错let c = 5..原创 2021-03-01 23:14:29 · 262 阅读 · 0 评论 -
vue---vue使用原型链存储数据,实现定时向后台发送请求
问题描述:当后台进行一个比较费时的任务,比如前台创建爬虫任务,当创建完成后,后台进行数据爬取,爬取过程需要耗费一些时间。为了及时获知爬虫任务完成,前端需要定时向后端发送查询爬虫任务状态(爬取中或已完成)的请求,如果爬取状态为“爬取中”,则继续向后台发送查询状态请求;如果爬取状态为“已完成”,则结束该请示请求任务。解决方法:(1)使用原型链存储定时器相关数据:防止爬虫页面跳转到其他页面,再跳转爬虫页面时,数据被初始化的问题。在【main.js】定义变量timerArr,挂载在原型链上。//原创 2020-10-14 15:15:28 · 1138 阅读 · 1 评论 -
javaScript---getElementBy与querySelector区别及querySelectorAll坑
获取DOM元素的方法有:通过id获取---【document.getElementById("id");】 通过类名---【document.getElementsByClassName("class")[0];】 通过标签名---【 document.getElementsByTagName("标签名")[0];】 通过name属性---【document.getElementsByName("name");】 查询选择器---【document.querySelector("id/...原创 2020-08-27 21:40:47 · 542 阅读 · 0 评论 -
JavaScript---解决单击、双击鼠标冲突
问题描述:一般情况下,双击鼠标一次会执行两次单击鼠标事件和一次双击鼠标事件,那么在双击鼠标时如何阻止两次单击鼠标事件的发生呢?解决方法:设置定时器,当第一次点击鼠标时,记录下点击的时间,并设置单击事件的Timeout(这里设置为300ms),第二次点击时判断此时点击的时间与上次点击的时间间隔,如果小于指定的时间间隔(300ms),则判定为双击事件,并清除已设置的Timeout,避免触发单击事件。 // 单击鼠标事件 this.network.on("click", (e) =&原创 2020-08-02 11:57:38 · 636 阅读 · 0 评论 -
vue---新增用户之拍照或本地上传照片
功能展示:点击【添加用户】按钮弹出对话框如图,头像上传分为两种方式(1)本地上传(2)打开摄像头拍照上传。最多可上传三张照片,当超过三张,则提示“只能上传三张照片”,如对选择的照片不满意,可将鼠标移入图片,图片右上角即出现红色删除图标,点击删除图标即可删除当前选中的照片。 一、本地上传二、打开摄像头拍照上传完整代码:<template> <div> <el-button type="primary" size="mini"...原创 2020-07-28 16:04:22 · 1703 阅读 · 1 评论 -
JavaScript---文件下载&处理文件下载失败&兼容IE11文件下载
文件下载分为两种形式 如果后台服务器的静态目录有可供下载的静态资源,则通过【window.location.href=“文件路径”】方式获取即可; 如果后台服务器无可供下载的静态资源,返回的是一个文件流,则通过将文件写入内存,并且创建a元素,a链接href属性指向内存中的文件,download属性指向要下载的文件名,模拟a元素的点击事件,进行下载; 具体使用哪种方式下载文件,取决于后台。下面举例讲第二种方式文件下载前后端接口如下:一、下载文件IE11文件下载:【.原创 2020-07-27 19:42:57 · 2864 阅读 · 0 评论 -
javaScript----js全屏及退出全屏
需求描述:需要放大至全屏展示页面某块区域,并能退出全屏;解决方案:案例使用vue实现,具体实现步骤如下(1)数据定义【fullscreen】(2)全屏方法定义(3)方法绑定至元素点击事件代码:// 全屏事件 handleFullScreen(i) { let element = document.getElementsByClassName("graph")[i]; let bottomEle = document.getElements原创 2020-07-15 10:52:09 · 486 阅读 · 0 评论 -
JavaScript---json文件下载-JSON.stringify()参数解决缩进问题
需求描述:后端传过来的json文件如下。要求下载后按此格式缩进显示。按照如下方式进行下载,(下载代码参考:https://www.jianshu.com/p/40cfe9a12f9e)问题来了,按这种方式下载后,打开文件显示为解决方法:将后台返回的数据通过【JSON.stringify()】转化为JSON字符串后下载,打开文件显示为发现,数据全部显示在一行,极其不利于查看数据。那么,重点来了,通过【JSON.stringify()】参数可以拯救这难堪的数据。具体做法如下:原创 2020-07-02 19:56:44 · 478 阅读 · 0 评论 -
vue----el-form-item动态生成表单名称和表单内容项
需求描述:由于后台返回的json对象中的key(属性)值不都是一样的,所以要求动态的把json对象中的key(属性)返显到表单的label,json对象中的value(值)返显到表单的input里。如左图的json对象,动态生成表单如右图。 解决思路:①将json对象的key(即属性)转化为一个数组:Object.keys();②利用v-for遍历key组成的数组,取到所有的key;③使用nodeForm[key]取到对应的value知识点:Object.keys()...原创 2020-07-01 18:42:08 · 5034 阅读 · 2 评论 -
vue---vis.js动态加载图谱之unshift踩坑记
问题描述:用vue做一个类似于如下图的neo4j的图谱管理系统,当每一次点击左侧标签时,往右侧搜索框下的顶部位置插入一个图。解决方案:图谱数据通过数据驱动【<divclass="graph"v-for="(item,index)ingraphData":key="item.index">...</div>】当每一次点击左侧标签时,往右侧搜索框下的顶部位置插入一个图,即在graphData中顶部插入一条数据【this.graphData.unshift(dat...原创 2020-06-26 21:50:04 · 1623 阅读 · 8 评论 -
JavaScript---为json数组中同一类别的数据添加相同的参数
要求如图:为相同category的项中加入相同的color参数:var arr = [ { id: 1, label: "苹果", category: "水果" }, { id: 2, label: "猴子", category: "动物" }, { id: 3, label: "大象", category: "动物" }, { id: 4, label: "火龙果", category: "水果" }, { id: 5, label: "芭蕉树", category:原创 2020-06-26 21:03:03 · 455 阅读 · 0 评论 -
JavaScript---json数组操作
【1】如下要求,将users对象中的name属性的value值分别提取出来变成一个新的数组。['小桐ctwq','小阳郎朗','小浩','','','lc小云']解决方法:var users = [ [{ id: 2, name: "小桐" }, { id: 2, name: "ct" }, { id: 2, name: "wq" }], [{ id: 2, name: "小阳" }, { id: 2, name: "郎朗" }], [{ id: ...原创 2020-05-18 19:13:21 · 247 阅读 · 0 评论 -
javascript---踩坑-forEach无法跳出整个循环
原来是想着写用forEach实现循环比较简单一些,结果发现居然无法跳出循环!!!把【return】改成【break】也不行,并报SyntaxError:Illegalbreakstatement语法错误好吧,我们把循环语句换个位置:总结:forEach中的【return】只用于跳出本次循环,不能跳出整个循环。for in/of:使用【return】实现跳出整个循环...原创 2020-03-31 11:18:36 · 259 阅读 · 0 评论 -
javaScript---js显示日期、星期、时间
实现效果:获取星期:【newArray("星期日","星期一","星期二","星期三","星期四","星期五","星期六")[date.getDay()]】时间显示优化(补“0”):【date.getHours()<10?"0"+date.getHours():date.getHours()】js动态添加html:【document.getEl...原创 2020-03-23 10:51:21 · 2187 阅读 · 0 评论 -
JavaScript---递归遍历json对象,删除status为0的项
需求说明:递归遍历list,删除status为0的节点,如果一级节点status为0,其下面的节点都删除。(ps:会用在系统的权限控制中,当状态为0(不可见),不显示该节点)解决方法:var List = [ { name: "节点1", status: 0 }, { name: "节点2", status: 1, children: [ ...原创 2020-03-12 00:55:44 · 677 阅读 · 0 评论 -
JavaScript---深度遍历数组中的所有的id
要求:遍历数组中的所有id,遍历数组第一层第二层的idvar companyData = [ { name: "A公司", id: 1, childList: [{ name: "部门1", id: 4, childList: [{ name: "部门2", id: 5 }] }] }, { name: "B公司", id: 2 },...原创 2020-02-25 23:28:13 · 2797 阅读 · 0 评论 -
JavaScript---offset/scroll/client总结
offset/scroll/client属性表类别 属性 说明 注意 offset offsetWidth 获取对象自身的宽度:内容+边框+内边距 包括内容、边框和内边距,即:offsetWidth(Height)= width(Height)+ border + padding offsetHeight 获取对象自身的高度:内容+边框+内...原创 2020-01-21 11:35:27 · 208 阅读 · 0 评论 -
JavaScript---遍历json对象分别取出key和value放于数组中
var obj = { name: "buding", age: "23", hobby: "dance" }var obj_key = []var obj_value = []for (var key in obj) { obj_key.push(key) obj_value.push(obj[key])}console.log("输出obj_key", obj_key...原创 2019-12-24 11:54:59 · 1866 阅读 · 2 评论 -
JavaScript---设置post application/x-www-form-urlencoded提交方式
在项目联调中,由于后端要求传输数据的headers为application/x-www-form-urlencoded方式,解决方法如下:对于其他请求方式参考:https://www.npmjs.com/package/axios#axiosposturl-data-config...原创 2019-12-07 22:09:09 · 2805 阅读 · 0 评论 -
JavaScript---从json数组中查找出满足指定条件的数据
问题描述:从json数组中,查找出满足指定定条件的数据。解决方法:【filter()】var employeesData = [ { name: "王小明", mobile: "13900008789" }, { name: "陈霞", mobile: "13900008789" }, { name: "张悦", mobile: "13900008789" }]va...原创 2019-11-21 20:01:12 · 11412 阅读 · 1 评论 -
JavaScript---event对象及冒泡事件、鼠标事件、键盘事件、默认行为
event对象event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!获取event对象(兼容性写法)-----var oEvent=ev||event;event 对象用来获取事件的详细信息: 获取鼠标位置:【oEvent.clientX】、【oEvent.clientY】 ...原创 2019-10-31 22:46:27 · 289 阅读 · 0 评论 -
JavaScript---闭包技术 迈向高级JS程序员的必经之路
局部变量无法共享和长久的保存,而全局变量可能造成变量污染,所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。闭包就实现了上述的功能,闭包使得函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期),让函数外部可以操作(读写)到函数内部的数据(...原创 2019-10-30 23:55:55 · 191 阅读 · 1 评论 -
JavaScript---left与offsetLeft
left 属性:获取或设置具有定位属性(position: absolute)的子元素 相对于 具有定位属性(position:relative)的父对象的左边距【子绝父相原则】,如果具有定位属性(position: absolute)找不到具有定位属性(position:relative)的父对象,则将相对于body定位。【补充:绝对定位与相对定位说明】绝对定位(position: a...原创 2019-10-30 11:03:43 · 924 阅读 · 0 评论