![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
文章平均质量分 51
前端同学
学习为主,兴趣为辅,致力于向前端更深层次发展。
展开
-
进度条计算(上传或者下载文件的时候)
调用后台websoket接口,会返回下载的文件大小和文件总大小,进度就很好计算;原创 2023-02-20 10:55:48 · 302 阅读 · 0 评论 -
js注意点
const a = b = 3 实际上等于 const a = 3 ,b = 3。又因为这是自执行函数,所以 在作用域外访问,首先先看a和b的值为多少,a 为 undefined。原创 2023-02-06 19:26:20 · 50 阅读 · 0 评论 -
基础类型存放在栈上,引用类型存放在堆上,请问是为什么? 字符串是存放在栈上么?
记住一句话:能量是守衡的,无非是时间换空间,空间换时间的问题堆比栈大,栈比堆的运算速度快,对象是一个复杂的结构,并且可以自由扩展,如:数组可以无限扩充,对象可以自由添加属性。将他们放在堆中是为了不影响栈的效率。而是通过引用的方式查找到堆中的实际对象再进行操作。相对于简单数据类型而言,简单数据类型就比较稳定,并且它只占据很小的内存。不将简单数据类型放在堆是因为通过引用到堆中查找实际对象是要花费时间的,而这个综合成本远大于直接从栈中取得实际值的成本。所以简单数据类型的值直接存放在栈中。原创 2022-11-16 17:18:41 · 908 阅读 · 0 评论 -
JS 0.1+0.2为什么不等于0.3
简单地说,number在内存中是以64位二进制存储的,所以0.1 和 0.2 的二进制表示形式是不精确的,所以它们相加时,结果不是精确地 0.3。而是 非常 接近的值:0.30000000000000004,但是如果你的比较失败了,“接近”是无关紧要的。最常见的做法是使用一个很小的“错误舍入”值作为比较的 容差。这个很小的值经常被称为“机械极小值(machine epsilon)”, 对于 JavaScript 来说这种 number 通常为 Number.EPSILON。原创 2022-11-16 15:41:17 · 728 阅读 · 0 评论 -
js对象传值传的是引用
答案为:{name: 123, siteUrl: ‘http://www.baidu.com’}因为 对象传值传的是引用,引用是copy给函数形参。原创 2022-10-10 10:26:31 · 137 阅读 · 0 评论 -
js类数组及其调用push方法解析
js类数组调用push方法解析原创 2022-09-27 16:51:01 · 1744 阅读 · 1 评论 -
js非匿名自执行函数,函数名只读
这里输出就是20了,因为 b = 20;相当于替换掉全局变量的 b 的值。这里 b = 20;实际上是更改b函数名,但是又修改不了,所以也是无效语句。所以答案显而易见, 为 [Function b]类似于const,不能被修改;原创 2022-09-27 10:33:48 · 179 阅读 · 0 评论 -
JavaScript 中如何取消请求
众所周知,JavaScript实现异步请求就靠浏览器提供的两个API——XMLHttpRequest和Fetch。我们平常用的较多的是Promise请求库axios,它基于XMLHttpRequest。原创 2022-07-27 10:29:37 · 3698 阅读 · 0 评论 -
JS 数组的排序 sort方法详解
Array.prototype.sort()sort() 方法用于对数组的元素进行排序,并返回数组。如果省略,sort方法会调用数组中每一项的toString()方法,然后按照unicode编码进行排序,如果数组含有undefined元素,它们将会被排到尾部。数组元素超过2位数排序就出了问题,上面已经说过了sort排序是按照元素的unicode码来进行排序了,先对每一项的第一位按照ascii从小到大进行排序,如果第一位相同再将第二位按照unicode从小到大进行排序。因为 1、2、3、6、7的unic原创 2022-06-29 14:06:43 · 6887 阅读 · 0 评论 -
实现JavaScript对象迭代(iterator)功能
当我们需要对一个对象进行使用for of进行遍历时,这个时候就会出现错误,如下:对于这种报错是由于:js的内置类型并没有实现iterable接口譬如:String、Array、TypedArray、Map 和 Set,都是可迭代对象。可迭代对象, 需要具备 Symbol.iterator 和 next 这两个函数,即可用 for…of 进行迭代,...原创 2022-06-27 17:51:52 · 985 阅读 · 0 评论 -
canvas 实现图片、页面新增水印
给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实就是一个画布,我们可以很方便地绘制一些文字、线条、图形等,它也可以将一个img标签里渲染的图片画在画布上。在上传文件到后端的时候,使用input标签读取用户本地文件后得到的其实是一个Blob对象(更精确的说是File对象,特殊的Blob对象);而在页面上展示一个图片使用的是img标签;绘制功能用canvas实现。添加水印的功能需要在img标签、ca原创 2022-06-23 17:44:35 · 1068 阅读 · 1 评论 -
深入理解web Worker
我们都知道js是单线程模型。也就是说一次只能处理一件事情,前面的事情没有完毕,后面的事情要等待前面的事情处理完毕后才能执行。随着多核CPU的出现,我们可以最大限度的利用cpu多核,来提高js的性能。Worker接口可以创建后台任务。即可以给js运行新增线程。用于处理一些耗时、耗费性能的任务(异步的除外)。要解决的问题是:1.解决页面卡死问题。2.发挥多核CPU的优势,提高js性能。1.非同源限制(本地代码如果以盘符的方式打开也不行,因为没有源啦)主线程代码与Worker线程代码必须同源才能一起正常工作。2原创 2022-06-14 17:51:17 · 656 阅读 · 0 评论 -
前端实现断点下载
当下载一个很大的文件时,如果下载到一半暂停,如果继续下载呢?断点下载就是解决这个问题的。所谓断点下载就是可以一部分一部分的下载,不用一次性把文件数据全部拿到。If-Range 请求头字段用来使得 Range 头字段在一定条件下起作用If-None-Match:如果ETag不匹配If-Match:如果ETag匹配HTTP HEAD方法(因为安全策略,浏览器中通过XMLHttpRequest只能获取部分头部信息)请求资源的头部信息, 并且这些头部与 HTTP GET 方法请求时返回的一致。 该请求方法的一个使原创 2022-06-10 11:27:45 · 1723 阅读 · 6 评论 -
Object与Map区别
概念Object在ECMAScript中,Object是一个特殊的对象。它本身是一个顶级对象,同时还是一个构造函数,可以通过它(如:new Object())来创建一个对象。我们可以认为JavaScript中所有的对象都是Object的一个实例,对象可以用字面量的方法const obj = {}即可声明。MapMap是Object的一个子类,可以有序保存任意类型的数据,使用键值对去存储,其中键可以存储任意类型,通过const m = new Map();即可得到一个map实例。访问map原创 2022-05-18 09:58:28 · 3441 阅读 · 0 评论 -
forEach和map和for...in 和 for...of的区别
说一下for…in 和 for…of的区别?for…of遍历获取的是对象的键值, for…in获取的是对象的键名;for…in会遍历对象的整个原型链, 性能非常差不推荐使用,而for…of只遍历当前对象不会遍历原型链;对于数组的遍历,for…in会返回数组中所有可枚举的属性(包括原型链上可枚举的属性),for…of只返回数组的下标对应的属性值;总结:for…in循环主要是为了遍历对象而生,不适用遍历数组; for…of循环可以用来遍历数组、类数组对象、字符串、Set、Map以及Generator对象原创 2022-04-14 15:55:30 · 400 阅读 · 0 评论 -
JavaScript 矩形碰撞检测
有两个矩形rectA(x,y,width,height)、rectB (x,y,width,height)检测A,B是否发生重叠,在讨论是否发生重叠时我们可以先看看没有重叠的四种情况,如下图:以下是对这四种状态的判断:1、rectB.y+rectB.height < rectA.y2、rectB.x > rectA.x +rectA.width3、rectB.y > rectA.y + rectA.height4、rectB.x+rectB.width < rectA.原创 2022-03-16 14:53:02 · 1580 阅读 · 0 评论 -
手写事件总线 EventBus
EventBus 简化了各个组件之间进行通信的复杂度,其工作原理在于对事件的监听与手动触发:作为一个事件总线,它应当具备一个任务队列,以及三个方法:订阅方法、发布方法、取消订阅上代码class EventBus { constructor() { this.tasks = {}; // 按事件名称创建任务队列 } /** * 注册事件(订阅) * @param {String} type 事件名称 * @param {Function} fn 回调函数原创 2022-03-02 10:32:20 · 412 阅读 · 0 评论 -
Object.fromEntries()
介绍方法 Object.fromEntries() 把键值对列表转换为一个对象,这个方法是和 Object.entries() 相对的。Object.fromEntries([ ['foo', 1], ['bar', 2]])// {foo: 1, bar: 2}1、Object 转换操作const obj = { name: 'jimmy', age: 18}const entries = Object.entries(obj)console.log(e原创 2022-02-14 11:01:40 · 8765 阅读 · 0 评论 -
tostring( ) 与 valueOf( )方法
说明所有的对象都继承有toString() 和 valueOf() 方法,对象到字符串,对象到数字的转换,会通过调用待转换对象的这两个方法中的一个来完成。toString( )方法返回一个反映这个对象的字符串,而很多类都定义了不同版本的toString( )。({}.toString()); //=> "[object Object]" [1,2].toString(); //=> "1,2" true.toString(); //=&g原创 2022-02-11 17:18:46 · 327 阅读 · 0 评论 -
分析a.x = a = {n: 2}
var a = {n: 1};var b = a;a.x = a = {n: 2};console.log(a,b)解析器在接受到a = a.x = {n:2}这样的语句后,会这样做:找到 a 和 a.x 的指针。如果已有指针,那么不改变它。如果没有指针,即那个变量还没被申明,那么就创建它,指向 null。a 是有指针的,指向{n:1};a.x 是没有指针的,所以创建它,指向 null。然后把上面找到的指针,都指向最右侧赋的那个值,即{n:2}。...原创 2022-02-11 16:51:12 · 598 阅读 · 0 评论 -
实现es5和es6的类
类的由来JavaScript语言的传统方法是通过构造函数定义并生成新对象,这种写法和传统的面向对象语言差异较大。所以,ES6引入了Class这个概念作为对象的模板。class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到。es5 中的构造函数function Person(name, age) { this.name = name; this.age = age;}Person.prototype.toString = function () { retu原创 2022-01-13 16:14:37 · 221 阅读 · 0 评论 -
js 五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解
this默认绑定this默认绑定我们可以理解为函数调用时无任何调用前缀的情景,它无法应对我们后面要介绍的另外四种情况,所以称之为默认绑定,默认绑定时this指向全局对象(非严格模式):在严格模式环境中,默认绑定的this指向undefinedfunction fn1() { let fn2 = function () { console.log(this); //window fn3(); }; console.log(this); //windo原创 2022-01-12 17:43:36 · 1305 阅读 · 2 评论 -
深入解析CommonJS和ES6模块区别
一、差异CommonJS1、对于基本数据类型,属于复制。即会被模块缓存。同时,在另一个模块可以对该模块输出的变量重新赋值。2、对于复杂数据类型,属于浅拷贝。由于两个模块引用的对象指向同一个内存空间,因此对该模块的值做修改时会影响另一个模块。3、当使用require命令加载某个模块时,就会运行整个模块的代码。4、当使用require命令加载同一个模块时,不会再执行该模块,而是取到缓存之中的值。也就是说,CommonJS模块无论加载多少次,都只会在第一次加载时运行一次,以后再加载,就返回第一次运行的结原创 2022-01-04 14:32:40 · 162 阅读 · 0 评论 -
js通过QRCode生成二维码并下载
html<div v-show="false" id="qrcode"></div>jsnpm i qrcodejs2import QRCode from 'qrcodejs2';download() { let qrcode = new QRCode('qrcode', { width: 132, height: 132, text: ``, // 二维码地址 colorDark: '#000', colorLigh原创 2021-12-31 16:05:47 · 2275 阅读 · 0 评论 -
javascript设计模式之单例模式
定义单例就是单一的意思,单例模式的定义是:保证一个类仅有一个一个实例,并提供一个访问它的全局访问点。思路新建对象时判断全局是否有该对象,如果有,就返回该对象,没有就创建一个新对象返回。特点单例模式,永远指向的都是同一个实例,改变其属性值,会影响到所有实例单例模式的优势: 因为只创了一个实例,这样大大节省了空间场景1 多次点击同一个弹窗2 下载多份材料的时候实现1、使用闭包<!DOCTYPE html><html lang="en"><head&g原创 2021-12-30 21:41:55 · 708 阅读 · 0 评论 -
深入理解js作用域
一、作用域说明一般理解指一个变量的作用范围二、作用域种类1、全局作用域全局作用域在页面打开的时候创建,页面关闭的时候摧毁缩写在script标签中的变量和函数,作用域为全局,而页面在任意位置可以访问到在全局作用域中有全局对象window,代表一个浏览器窗口,由浏览器创建,可以直接用全局作用域中声明的变量和函数会作为window的属性和方法保存2、函数作用域调用函数时,函数作用域会被创建,函数执行完毕,函数作用域会被摧毁每调用一次函数就会创建一次新的函数作用域,他们是互相独立的在函数作用域原创 2021-12-27 21:52:58 · 308 阅读 · 0 评论 -
箭头函数和普通函数有什么区别?
function giveLydiaPizza() { return "Here is pizza!"}const giveLydiaChocolate = () => "Here's chocolate... now go hit the gym already."console.log(giveLydiaPizza.prototype)console.log(giveLydiaChocolate.prototype)A: { constructor: …} { constru原创 2021-05-06 16:48:35 · 147 阅读 · 0 评论 -
在vue中使用装饰器
1、什么是装饰器器是一种与类相关的语法糖,用来包装或者修改类或者类的方法的行为,其实装饰器就是设计模式中装饰者模式的一种实现方式2、场景举一个例子在日常开发写bug过程中,我们经常会用到防抖和节流,比如像下面这样class MyClass { follow = debounce(function() { console.log('关注我') }, 100)}const myClass = new MyClass()// 多次调用只会输出一次myClass.follow()原创 2021-12-21 13:48:48 · 4673 阅读 · 0 评论 -
vue使用 iframe + postMessage 实现通信
1、在本地起两个工程 方便我们测试父:http://172.16.150.72:8080 this.$refs.iframe.contentWindow.postMessage(‘消息’,目标src)子:http://172.16.150.72:8081 window.addEventListener(‘message’,(e)=>{console.log(‘接收信息’)})2、父页面代码<template> <div class="box"> &l原创 2021-12-16 21:58:49 · 1768 阅读 · 0 评论 -
vue: 实现打印前端功能打印(可自定义区域)
1、新建一个打印模板,打印内容包在ref中 <template> <el-button type="primary" @click="print">打印</el-button> <div ref="print">我是打印哈哈哈</div> </template> <script>export default { data() { return {}; }, methods: {原创 2021-12-13 17:07:49 · 1638 阅读 · 0 评论 -
JS模板字符串的简单实现
模板数据let templateStr = 'i am {{name}},age {{age}},job {{job}} ';let data = { name:'xbd', age:18, job:'CTO'}实现方法function templateFunc(str,data){ let computed = str.replace(/\{\{(\w+)\}\}/g,function (match,key) { console.lo原创 2021-12-06 14:37:49 · 270 阅读 · 0 评论 -
vue实现div拖拽互换位置
<template> <transition-group tag="div" class="container"> <div v-for="(item,index) in items" :key="item.key" class="item" :style="{background:item.color,width:'80px',height:'80px'}" draggable="true" @dragstart="handleDragStart($event, .原创 2021-09-09 15:59:05 · 1231 阅读 · 0 评论 -
移动端适配方案
使用动态设置html font-size的方式 来适配rem是相对于HTML的根元素,em相对于自身元素的字体大小。VW,VH 屏幕宽度高度的高分比//按照宽度375图算, 1rem = 1px;(function (win, doc) { function changeSize() { doc.documentElement.style.fontSize = doc.documentElement.clientWidth / 375 + 'px'; } changeSiz原创 2021-09-02 16:34:58 · 125 阅读 · 0 评论 -
如何判断JS类型
一、JS的类型JS的基本类型共有七种:bigInt(bigInt是一种内置对象,是处symbol外的第二个内置类型)、numberstringboolensymbolundefinednull复杂数据类型有对象(object)包括基本的对象、函数(Function)、数组(Array)和内置对象(Data等)。二、判断JS的类型typeof基本数据类型除了null外都返回对应类型的字符串。typeof 1 // "number" typeof 'a' // "string"原创 2021-08-30 20:25:52 · 877 阅读 · 0 评论 -
Javascript垃圾回收机制
标记清除(mark and sweep)这是JavaScript最常见的垃圾回收方式,当变量进入执行环境的时候,比如函数中声明一个变量,垃圾回收器将其标记为“进入环境”,当变量离开环境的时候(函数执行结束)将其标记为“离开环境”。垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记,然后去掉环境中的变量以及被环境中变量所引用的变量(闭包),在这些完成之后仍存在标记的就是要删除的变量了引用计数(reference counting)在低版本IE中经常会出现内存泄露,很多时候就是因为其采用引用计原创 2021-08-26 16:25:30 · 128 阅读 · 0 评论 -
深入理解变量声明提升和函数声明提升
变量声明提升1、变量定义可以使用var定义变量,变量如果没有赋值,那变量的初始值为undefined。2、变量作用域变量作用域指变量起作用的范围。变量分为全局变量和局部变量。全局变量在全局都拥有定义;而局部变量只能在函数内有效。在函数体内,同名的局部变量或者参数的优先级会高于全局变量。也就是说,如果函数内存在和全局变量同名的局部变量或者参数,那么全局变量将会被局部变量覆盖。所有不使用var定义的变量都视为全局变量3、函数作用域和声明提前JavaScript的函数作用是指在函数内声明的所有变量原创 2021-08-26 10:38:24 · 112 阅读 · 0 评论 -
js实现通知弹屏 Notification
样式实现代码let notification;// 可能的值包括:denied (用户拒绝了通知的显示), granted (用户允许了通知的显示), 或 default (因为不知道用户的选择,所以浏览器的行为与 denied 时相同).if (window.Notification && Notification.permission === 'granted') { notification = new Notification('您有一条新的来电', { dir: '原创 2021-08-19 17:40:52 · 2241 阅读 · 0 评论 -
哔哩哔哩:JS 异步笔试题
引入var date = new Date() console.log(1, new Date() - date) setTimeout(() => { console.log(2, new Date() - date)}, 500) Promise.resolve().then(console.log(3, new Date() - date)) while(new Date() - date < 1000) {} console.log(4, new Date原创 2021-08-18 13:35:26 · 280 阅读 · 0 评论 -
深入理解js防抖和节流
前言在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。通常这种情况下我们怎么去解决的呢?一般来讲,防抖和节流是比较好的解决方案。防抖(debounce)所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。非立即执行版:function debounce(func, wait) { let timeo转载 2021-08-13 16:25:29 · 137 阅读 · 0 评论 -
前端实现导出Excel文件
直接上代码//exportData是后台api接口exportData({ ...this.queryParams }).then(res => { const fileName = `文件名字.xlsx`; const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=utf-8' }); let link = document.createElement('a'); link.href = URL.cre原创 2021-08-12 20:59:36 · 439 阅读 · 1 评论