![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
哈娄
前端开发
展开
-
多个文案用符号拼接,最后一个不要符号(防空)
【代码】多个文案拼接符号,最后一个不要符号(防空)原创 2022-08-23 17:32:10 · 228 阅读 · 0 评论 -
JS 树结构 通过子id返回所有父节点id
树结构 返回父节点信息原创 2022-08-11 11:11:19 · 1413 阅读 · 0 评论 -
ant design V3 实现table表格 添加底部合计行
实现atnd v3实现合计行原创 2022-07-19 12:06:07 · 1015 阅读 · 0 评论 -
antd RangePicker/DatePicker 动态满足多个条件禁用
DatePicker的disabledDate动态满足多个条件禁用原创 2022-06-27 09:00:00 · 555 阅读 · 0 评论 -
关闭/刷新浏览器,刷新页面发送请求解决方案
目录需求背景:踩坑记录:最终方案:记录登录时长,退出/异常退出的时候进行退出接口请求,完成退出标记,后端统计时长。navigator.sendBeacon(url, data)。使用blob方法传对象格式参数给后端。 参数表明 将要被发送到的网络地址。 可选 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据..................原创 2022-06-21 12:18:27 · 1183 阅读 · 0 评论 -
lodash好用系列- json数组,根据指定key去重
指定key去重原创 2022-06-02 19:08:39 · 846 阅读 · 0 评论 -
JavaScript预编译
预编译分为两种:函数预编译 (函数执行的前一刻执行) 全局预编译 (页面加载完成时执行)函数执行编译步骤:创建Activation Object 找形参和变量声明, 将变量声明和形参作为AO的属性名, 值为undefined 将实参和形参值统一 在函数体内找函数声明,将函数名作为AO对象的属性名,值赋予函数体代码Demo:function fn(a) { var a = 123 function a() {} var b = function () {}原创 2021-11-15 16:26:43 · 1079 阅读 · 0 评论 -
setTimeout第三个参数
平时都是用setTimeout做一个延时,都是使用两个参数,第一个是个函数,第二个是延时的时间。但是他第三个参数也是很好用的。场景:有循环中需要用setTimeout处理的,但是for循环是同步,setTimeout是异步,这样的结果就是输出5次5for (let i=0;i<4;i++) { setTimeout(() => { console.log(i) }, 1000)}闭包解决:常规的解决办法就是写个闭包来解决这个问题。输出0,1原创 2021-11-08 13:56:47 · 2038 阅读 · 0 评论 -
let const 暂时性死区问题
都知道let 和 const不会变量提升,但是下面这段代码 是很有意思的一个小问题var a = 1;if(1){ a = 10; //在当前块作用域中存在a使用let/const声明的情况下,给a赋值10时,只会在当前作用域找变量a, // 而这时,还未到声明时候,所以控制台Error:a is not defined let a = 1;}...原创 2021-11-01 09:14:43 · 171 阅读 · 0 评论 -
ajax实现
var xhr = new XMLHttpRequest();xhr.onreadystatechange = () => { if (xhr.readyState === 4 && xhr.status == 200) { var data = xhr.responseText; console.log(data); ...原创 2019-08-05 16:15:26 · 107 阅读 · 0 评论 -
js垃圾回收机制
js垃圾回收机制引用计数此算法把 ”对象是否不再需要“ 简化定义为 “对象有没有其他对象引用到它” 。如果没有引用指向该对象(零引用), 对象将垃圾回收机制回收限制: 无法处理循环引用。两个对象被创建,并互相引用,形成一个循环,它们被调用之后不会离开函数作用域,所以它们已经没有用了, 可以被回收了。然而引用计数算法考虑到它们互相都有至少一次引用,所以不会被回收标记清除当变量进入环境...原创 2019-10-24 10:59:46 · 160 阅读 · 0 评论 -
前端 xlsx 读取excel文件转成json数据给接口
1.安装依赖yarn add xlsx2.项目引入import * as XLSX from 'xlsx';3.在上传文件函数内执行 ( 根据场景自定义处理时机 )const uploadChange = (uploadFile) => { // 通过FileReader对象读取文件 const fileReader = new FileReader(); // readAsArrayBuffer之后才会启动onload事件 fileRea原创 2021-07-15 12:22:56 · 2341 阅读 · 3 评论 -
前端axios请求, 后端接口返回文件流,完成下载
(设置相应数据的类型,设置后后台返回的数据会被强制转为blob类型)2.声明a标签, 完成下载功能函数。得到接口的 文件流返回值res.data, 调用此函数 downloadFn(res.data) 完成下载原创 2021-05-31 10:23:12 · 4653 阅读 · 4 评论 -
javascript设计模式---发布订阅模式
发布订阅模式订阅方对这个对象发起一个订阅的需求,当这个对象变化时,第三方会告诉订阅方,触发函数逻辑 -----主动权在第三方。(这也就是和观察者的区别)原创 2021-05-21 17:05:51 · 146 阅读 · 0 评论 -
h5页面实现浏览器全屏显示
目录开启全屏显示退出全屏显示获取当前是否全屏状态开启全屏显示let el = document.documentElement;// 不同浏览器兼容方法调用if(el.requestFullScreen){ el.requestFullScreen();}else if(el.webkitRequestFullScreen){ el.webkitRequestFullScreen();}else if(el.mozRequestFullScreen){ el.moz原创 2021-05-20 14:38:33 · 2772 阅读 · 0 评论 -
javascript设计模式---观察者模式
观察者模式观察对象状态,一旦对象发生变化,观察者定义的动作行为被触发(需要一个观察者角色,需要一个被观察者角色。 --------------主动权在被观察者手中)大体思路:观察者进行定义方法 被观察者改变状态,触发观察者的方法观察者:class Observer { constructor(name, fn=() => {}) { this.name=name this.fn = fn }}const bzr = ne.原创 2021-05-18 10:43:35 · 115 阅读 · 0 评论 -
javascript设计模式---单例模式
单例模式单:单一,一个 例:实例核心思路:用一个变量保存第一个实例,然后把该实利直接返回 给外部的调用function person() { this.name='test'}// 正常实例let p1 = new person()let p2 = new person()console.log(p1==p2) // false, 会得到两个实例// 单例模式核心代码const getSingle = (function() { let instance =原创 2021-05-11 16:23:16 · 151 阅读 · 0 评论 -
为什么javascript不能有多个线程
作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?所以,为了避免复杂性,JavaScript就是单线程。为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变原创 2021-03-22 09:44:08 · 388 阅读 · 0 评论 -
面试--JavaScript单线程
GUI 渲染线程绘制页面,解析 HTML、CSS,构建 DOM 树,布局和绘制等 页面重绘和回流 与 JS 引擎线程互斥,也就是所谓的 JS 执行阻塞页面更新JS 引擎线程负责 JS 脚本代码的执行 负责准执行准备好待执行的事件,即定时器计数结束,或异步请求成功并正确返回的事件 与 GUI 渲染线程互斥,执行时间过长将阻塞页面的渲染事件触发线程负责将准备好的事件交给 JS 引擎线程执行 多个事件加入任务队列的时候需要排队等待(JS 的单线程) 定时器触发线程 负责执行异步的定时原创 2021-03-18 09:43:09 · 111 阅读 · 0 评论 -
_转驼峰
copyItem.replace(/([^_])(?:_+([^_]))/g, ($0, $1, $2) => { return $1 + $2.toUpperCase();});原创 2021-03-18 08:25:34 · 416 阅读 · 0 评论 -
JS的事件循环机制eventloop
一. Eventloop是什么? javascript中事件任务分为宏任务和微任务,执行顺序是先执行宏任务再执行微任务。(异步顺序也是如此) 任务分为同步和异步, 同步放入主线程立即执行,异步的进入event Table并注册函数,之后放入到event Queue中,等待同步执行完后执行。宏任务的主线程执行完之后, 执行微任务主线程的中的事件,这样算是完成了一次事件循环。接下来查...原创 2018-09-14 10:42:13 · 352 阅读 · 0 评论 -
对象参数转成url参数拼接
const obj2strUrl = (obj) => { let str=""; for (let key in obj) { str = `${str}${key}=${obj[key]}&` }; str = str.substring(0, str.length-1); return str; }原创 2021-01-12 18:33:49 · 1870 阅读 · 1 评论 -
面试-js实现 手写new实例过程
1.new的使用function Person(name, age){ this.name = name; this.age = age;}var person = new Person("halou", 25);console.log(person); // Person{name: "halou", age: 25}2.手写newfunction new2(fn, ...args) { // 1. 判断是否是函数 if (typeof fn !== 'funct..原创 2020-11-19 16:28:19 · 438 阅读 · 1 评论 -
获取url参数并转成对象结构
const search = window.location.href.split('?')[1];let snVal = search ? JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g, '":"') + '"}') : {};snVal.XX获取参数原创 2019-01-21 10:51:46 · 1142 阅读 · 0 评论 -
基本类型和引用类型区别和指向问题
基本类型: null, undefined, string, boolean, number (存放在栈内存中)引用类型: array, object (存放在堆内存中)1. 基本类型指针问题var a=2; var b=a; b=3; console.log(a);//2 console.log(b);//3 第二句b=a,在这里b只是一个指向a的指针,指针的指向可以改...原创 2018-11-05 20:33:05 · 411 阅读 · 0 评论 -
获取dom距离窗口距离getBoundingClientRect
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。1.语法:这个方法没有参数。objVal = object.getBoundingClientRect(); objVal.top:元素上边到视窗上边的距离; objVal.right:元素右边到视窗左边的距离; objVal.bo...原创 2018-10-18 11:04:27 · 993 阅读 · 0 评论 -
setTimeout实现setInterval效果
let status;function time() { if (status) { clearTimeout(status); } console.log(1) // 执行代码 status = setTimeout(time, 2000);}tiem();原创 2018-10-26 15:57:39 · 368 阅读 · 0 评论 -
数组去重与多维数组扁平化处理
通过对象的属相去重function unique(arr) { let res = []; let json = {}; for (let i = 0; i< arr.length; i++) { if (!json[arr[i]]) { res.push(arr[i]); ...原创 2018-11-12 19:47:01 · 187 阅读 · 0 评论 -
js生成指定长度的数组
let a = new Array(100).join(',').split(',')原创 2019-05-30 10:17:44 · 31855 阅读 · 0 评论 -
函数防抖和节流实现
函数防抖function debouce(func, delay) { let start; return (...args) => { clearTimeOut(start) start = setTimeout(() => {func(...args)}, dealy) }}函数节流function throttle(func, delay) { let lock = false; return (..原创 2021-03-18 08:24:42 · 175 阅读 · 0 评论 -
使用ES2020优化冗余代码
目录可选链空值合并运算符dynamic-import可选链用途:可选链可让我们在处理多层级对象时不再需要进行冗余的前置防空校验之前:let name = user && user.info && user.info.name使用后:let name = user?.info?.name;可选链中的?表示如果问号左边表达式有值,就会继续查询后面的字段。空值合并运算符用途:数值处理时,对0,''也正常进入逻辑判断赋值// 如果变量l原创 2020-05-22 10:10:45 · 283 阅读 · 0 评论 -
面试--手写实现call, apply, bind函数
call函数let obj = {value: 'hah'}function test(name) { console.log('我是' + name + this.value)}Function.prototype.myCall = function(obj, ...args) { obj.fn = this; // obj是obj变量,...args是剩余其他参数 let result = obj.fn(...args); delete obj.fn;原创 2020-07-23 16:49:03 · 238 阅读 · 0 评论 -
h5拖拽div排序 draggable方法实现
利用h5的draggable属性实现拖放排序 <div draggable="true" ondragstart="dragStart(event)" id="woshi1" ondragover="allowDrop(event)" ondrop="drop(event)"> 我是1</div> <div draggable="true" ondragstart="dragStart(event)" id="woshi2" ondragover="allowDrop.原创 2020-07-27 18:03:26 · 1667 阅读 · 0 评论