随笔分类 - JavaScript随笔
base64转file上传
摘要：base64图片转file上传 base64ToFile(dataurl, filename) { const arr = dataurl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let
阅读全文
split 截取分割字符串
摘要：JavaScript中拆分字符串 1，Split拆分字符串 eg： 1, 以字符串本身分割 ‘asfk#dsaklfjdslakf ‘.split('#') //结果：[ 'asfk', 'dsaklfjdslakf '] 2, 以正则表达式分割 ‘asfk#dsaklfjdslakf ‘.spli
阅读全文
使用 canvas 重画文字重影问题
摘要：刷新canvas，有时会出现上次的内容无法清除而造成重影，需要进行以下步骤的处//在手机上，需加上这步，先隐藏再显示，类似刷新 const oldWidth = canvasRef.current.width; const oldHeight = canvasRef.current.height;
阅读全文
canvas适配（图片、文字在移动端显示模糊问题）
摘要：canvas图片、文字在移动端显示模糊问题 因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一
阅读全文
重排(reflow)和重绘(repaint)
摘要：重排(reflow)和重绘(repaint) 页面生成的过程： 1.HTML 被 HTML 解析器解析成 DOM 树； 2.CSS 被 CSS 解析器解析成 CSSOM 树； 3.结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment； 4.
阅读全文
将文本复制到粘贴板上
摘要：将文本复制到粘贴板上 js也是有复制命令的，那就是document.execCommand('copy'); 这个命令会将选中的内容复制到粘贴板中； input和textarea元素有一个select()方法，这个方法可以帮我们自动选中。 function copy(text) { var text
阅读全文
js——原生js借助Cavas自动下载保存图片
摘要：1 function downFile (imgsrc, name) { //下载图片地址和图片名 2 let image = new Image(); 3 // 解决跨域 Canvas 污染问题 4 image.setAttribute("crossOrigin", "anonymous"); 5
阅读全文
JavaScipt-Object-可选链 "?."
摘要：可选链 "?." “不存在的属性”的问题 我们大多数用户的地址都存储在 user.address 中，街道地址存储在 user.address.street 中，但有些用户没有提供这些信息。 在这种情况下，当我们尝试获取 user.address.street，而该用户恰好没提供地址信息，我们则会收
阅读全文
javaScript遍历数组总结
摘要：javaScript遍历数组总结 1、使用forEach遍历 2、使用for..in..遍历 3、使用for-of遍历 不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象. 也支持字符串遍历，它将字符串视为一系列的Unicode字符来进行遍历.
阅读全文
JavaScript遍历对象的常见方法
摘要：js es6遍历对象的6种方法（应用中推荐前三种） 1.for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).). 2、使用Object.keys()遍历 (返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性
阅读全文
JS中的可枚举属性与不可枚举属性
摘要：JS中的可枚举属性与不可枚举属性 什么是枚举？枚举是指对象中的属性是否可以遍历出来，再简单点说就是属性是否可以以列举出来。 一、怎么判断属性是否可枚举 在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查
阅读全文
JavaScript中深拷贝的实现方法
摘要：js实现递归深拷贝的demo 1.Object.assin()此方法不适合业务复杂场景拷贝 2.lodash中的deepClone方法 3.JSON.parse（JSON.Stringfy（obj））注意此方法的特殊应用场景 4.jQuery 中的extentd方法 5.递归（见下列）： 1 <!D
阅读全文
闭包
摘要：一、变量的作用域 要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n=999; function f1(){ alert(n); } f1(); // 9
阅读全文
call、apply、bind的作用
摘要：call、apply、bind的作用是改变函数运行时this的指向，所以先说清楚this。以下是函数的调用方法：方法调用模式：当一个函数被保存为对象的一个方法时，如果调用表达式包含一个提取属性的动作，那么它就是被当做一个方法来调用，此时的this被绑定到这个对象。 var a = 1 var obj
阅读全文
Javascript非构造函数的继承
摘要：一、什么是"非构造函数"的继承？ 比如，现在有一个对象，叫做"中国人"。 var Chinese = { nation:'中国' }; 还有一个对象，叫做"医生"。 var Doctor ={ career:'医生' } 请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生
阅读全文
Javascript构造函数的继承
摘要：对象之间的"继承"的五种方法。比如，现在有一个"动物"对象的构造函数。 function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数。 function Cat(name,color){ this.name = name; this.color =
阅读全文
JavaScript 的 this 原理
摘要：JavaScript 的 this 原理 一、问题的由来 学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。 var obj = { foo: function () {} }; var foo = obj.foo; // 写法一 obj.foo() // 写法二
阅读全文
js—BOM：浏览器对象模型
摘要：1 BOM：浏览器对象模型 2 load等页面全部加载完毕，包含页面dom元素，图片，flash，css等 3 window.onload = function(); // 当页面 DOM 结构中的 js、css、图片，以及 js 异步加载的 js、css 、图片都加载完成之后，才会触发 load
阅读全文
jsDOM事件流
摘要：1 DOM事件流： 2 事件流描述的是从页面中接受事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个过程即DOM事件流。 3 DOM事件流分为三个阶段： 4 1，捕获阶段 5 2，当前目标阶段 6 3，冒泡阶段 7 事件冒泡：IE最早提出，事件开始是由最具体的元素接收，然后逐级向上传播到
阅读全文
js监听事件
摘要：1 监听事件： 2 传统监听事件： 3 添加监听事件： 4 elementTarget.onclick = function(){} 5 移除监听事件： 6 elementTarget.onclick = function(){ 7 elementTarget.onclick = null; //当
阅读全文
