javascript学习笔记
文章平均质量分 68
ass_ace
选择你所喜欢的,爱你所选择的
展开
-
react —— 复制定制化带有标题的二维码
1. 生成二维码直接借助qrcode这个npm库即可生成二维码,但接到的需求要求是在鼠标点击的附近展示出二维码,点击弹窗里面的复制按钮即可赋值带标题的二维码图片到剪切板,实现效果如下图:...原创 2021-06-10 23:58:37 · 489 阅读 · 3 评论 -
js复制文本到剪切板中 支持换行
/** * 复制文本到剪切板中 * * @export * @param {*} value 需要复制的文本 * @param {*} cb 复制成功后的回调 */export function copy(value, cb) { // 动态创建 textarea 标签 const textarea = document.createElement('textarea') // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea.转载 2021-06-04 14:54:37 · 2370 阅读 · 0 评论 -
利用location或a标签解析URL字符串
1.如果url是直接获取地址栏上的,则可以直接使用location对象解析function geturlresult (){ var res ={ hostname: window.location.host, parameter: {}, pathname: window.location.pathname, port: window.location.port, protocol: window.location.protocol } if(原创 2021-04-02 20:59:47 · 427 阅读 · 0 评论 -
当前端查询回来的数据过多时,通过事件循环机制分成多批任务,缓解页面卡顿问题
由于js单线程的特性,同一时刻只会执行一个任务,假如当前实质性任务时间过程,那么其他等待执行的任务就会一直等待,直到当前任务执行完毕,才接着执行下一个任务,在日常的开发中如果代码处理的数据量适中,一般不会有什么性能问题,但有一种场景:比如查询数据回来,进行处理然后渲染页面,这是如果接口查询回来的数据是1000条,那么没啥影响,如果是1000万条数据,那么就可能需要运行相当一段时间了。这样的代码运行时,页面上的其他代码都不能运行,这样使得我们的应用在前端交互上体验极其不友好。解决方法:..原创 2021-01-24 23:05:53 · 1022 阅读 · 2 评论 -
防抖和节流的含义以及函数封装
防抖(debounce)所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。日常实例:比如搭电梯,电梯开门,过了一定时间会关门(这可以理解为一定时间内要执行函数),如果进来一个人,电梯会延迟关门的动作,在没到关门 的时间之前一直有人进来,就会一直延迟关门实现方式:1.利用闭包实现2.利用函数对象实现var delayFunc = (func,time) =>{ if(func.isSecond..原创 2021-01-20 23:08:47 · 285 阅读 · 0 评论 -
正则表达式核心要点
1.利用正则表达式(高亮匹配显示),输入的内容跟已有的字符串中相同的部分高亮显示;2.正则里面的.代表除了换行之外的所有字符,而普通的.号就是代表.,如果需要匹配.的时候需要加转义;正则对象里面的特殊字符转义需要加\\,而在字面量中则值需要一个\3.字符含义/d 表示数值 /D 非数值/s 代表空白,/n 和空格都是空白 ; /S 代表非空白/w 代表字母,数字,下划线 /W 非字母,数字,下划线[]中括号里面包含的字符,表示只要匹配上中括号中的任意一个规则就是满足的..原创 2021-01-17 22:12:18 · 173 阅读 · 0 评论 -
简单实现promise核心源码
class HD { static PENDING ="pending"; static FUFILLED = "fulfilled"; static RESJECT = "rejected"; constructor(executor){ this.status = HD.PENDING; this.value = null; this.callbacks =[]; //如果在executor的执行过程中出现错误,那么可以通过try-..原创 2020-12-06 23:53:47 · 136 阅读 · 0 评论 -
JS数组reduce()方法高级技巧
1.语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组。callback (执行数组中每个值的函数,包含四个参数)1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))2、currentValue (数组中当前被处理的元素)3、i原创 2020-11-26 00:18:03 · 380 阅读 · 0 评论 -
图解 Promise 实现原理(一)—— 基础实现
摘要很多同学在学习 Promise 时,知其然却不知其所以然,对其中的用法理解不了。本系列文章由浅入深逐步实现 Promise,并结合流程图、实例以及动画进行演示,达到深刻理解 Promise 用法的目的。图解 Promise 实现原理(一)—— 基础实现 图解 Promise 实现原理(二)—— Promise 链式调用 图解 Promise 实现原理(三)—— Promise 原型方法实现 图解 Promise 实现原理(四)—— Promise 静态方法实现前言本文适合对 Prom转载 2020-11-07 23:54:20 · 297 阅读 · 1 评论 -
javaScript学习笔记——遍历对象中属性的方法
遍历对象的属性一共有5中方法1. for…infor…in循环遍历对象自身和继承的可枚举属性【对象原型中enumerable的值为true的属性】。(不含Symbol属性)总的来说,操作引入继承属性会让问题复杂化,大多时候,我们只关心对象自身的属性。所以尽量不要用for…in循环,而用Object.keys()代替let obj ={[Symbol(1)]:0,b:0,10:0,2:0,a:0,[Symbol(2)]:0};for(let o in obj){ console.log(原创 2020-05-16 16:24:56 · 378 阅读 · 0 评论 -
JavaScript学习笔记——判断某个属性是否属于某个对象
1. 直接用.或[]判断var test = {name : 'lei'}test.name //"lei"test["name"] //"lei"// 获取原型上的属性test["toString"] //toString() { [native code] }// 新增一个值为undefined的属性test.un = undefined所以,我们可以根据 Obj.x !== undefined 的返回值 来判断Obj是否有x属性。这种原创 2020-05-16 15:38:26 · 1204 阅读 · 0 评论 -
利用正则表达式对手机号、身份证、姓名脱敏(**模糊化)
var phone ="13623021456";var idcode ="440582199612056666";var name ="陈妹";var name1 ="陈美美";var name2 ="欧阳美美";phone =phone.replace(/^(.{3}).+(.{4})$/,"$1****$2");idcode =idcode.replace(/^(.{4}).+(.{4})$/,"$1****$2");name = name.replace(/^(.).+$/,"$1.原创 2020-05-11 22:00:11 · 13133 阅读 · 1 评论 -
js——正则表达式
正则表达式是用于匹配字符串中字符组合的模式。创建正则表达式的两个方式:①使用一个正则表达式字面量var re = /ab+c/;正则表达式字面量为正则表达式提供了脚本加载后的编译②调用RegExp对象的构造函数var re = new RegExp("ab+c");使用构造函数为正则表达式提供了运行时的编译常见的特殊字符含义:字符 含义...原创 2019-12-09 22:33:43 · 163 阅读 · 1 评论 -
es6绚丽小球案例以及canvas设置width和height的问题
本例的实现思路如下: 1.首先创建画布,定义画布的样式,创建画布的上下文对象; 2.一个个的小球是一个对象,所以需要创建一个球类,定义球的基本属性 3.创建会移动的小球的类,继承球类,在这个类中继承球类的基本属性, 同时可以可以定义新的行为和属性;比如所有移动的变化的量,半径的 变化量; 4.而这些变量随机取得的效果则需要underscore.js(插件,百度下载一下就有)才...原创 2018-12-05 19:42:28 · 593 阅读 · 0 评论 -
javascript学习笔记——表单
表单的基础知识在HTML中表单是由<form>元素来表示的,而在js中表单对应的就是HTMLFormElement;HTMLFormElement的属性和方法:① acceptCharset:服务器能够处理的字符集;② action:接收请求的URL;③ elements:表单中所有的控件的集合;④enctype:请求的编码类型;⑤length:表单中控件...原创 2018-08-13 23:24:40 · 607 阅读 · 0 评论 -
javascript学习笔记——Ajax、跨资源共享(CORS)、图像Ping、JSONP、Comet、Web Socket
Ajax(Asynchronous JavaScript+XML)虽然Ajax名字包含XML成分,但是Ajax通信与数据格式无关;从服务器取得的数据不一定是XML数据;Ajax技术能够向服务器请求额外的数据为无须卸载页面。核心是:XMLHttpRequest对象(XHR),XHR为向服务器发送请求和解析服务器相应提供了流畅的接口;1.XHR的用法var xhr=new X...原创 2018-08-13 16:59:48 · 407 阅读 · 0 评论 -
javascript学习笔记——DOM、Node类型、Document类型、Element类型、Text类型、Comment类型(注释)
DOM(文档对象类型)是针对HTML和XML文档的一个API。DOM可以将任何HTML和XML文档秒回成一个由多层次节点构成的结构;节点分为12种类型,每种类型表示文档中不同的信息及标记;每个节点都拥有各自的特点、数据和方法文档节点是每个文档的根节点;文档节点只有一个子节点叫文档元素,即,<html>元素。文档元素是文档最外层的元素,文档中的其他所有元素都包含在文档元...原创 2018-08-04 23:04:51 · 2681 阅读 · 3 评论 -
javaScript学习笔记——基本数据类型
1.Undefined类型在使用var声明变量但未对其进行初始化时,这变量的值就是undefinedvar m;alert(typeof m); //undefined2.Null类型null值表示一个空指针对象,如果定义变量在未来要用于保存对象,那么将该变量初始化为null比较好var car=null;alert(typeof car); //object...原创 2018-07-19 23:51:07 · 197 阅读 · 0 评论 -
javascript学习笔记——引用类型(1)
1.Object类型①创建实例的方式:a.使用new操作符var person =new Object();person.name="amy";person.age=20;b.对象字面量表示法:var person={name:"amy",age:29 //属性名也可以使用字符串};②Object类型是所有对象的基础,所有对象都拥有该类型基本的属性和方...原创 2018-07-21 00:17:26 · 231 阅读 · 0 评论 -
javascript学习笔记——理解对象
1.定义:① 无序属性的集合,其属性可以包含基本值、对象或者函数;②对象是一组没有特定顺序的值,对象的每个属性和方法都有一个名字,而每个名字都映射到一个值;③可以看成是散列表,是成组的名值对,其中值可以是数据或函数2.属性类型①对象中的属性分为:数据属性和访问器属性②修改writable的特性值var person {};Object.definePropert...原创 2018-07-28 14:37:14 · 133 阅读 · 0 评论 -
javascript学习笔记——工厂模式、寄生构造函数模式、稳妥构造函数模式
1.创建单个对象①使用object构造函数var person=new Object();person.name="amy";person.age=23;person.job="software Engineer";person.sayName=function(){ alert(this.name);}②使用对象字面量var perso={ nam...原创 2018-07-28 16:30:10 · 238 阅读 · 0 评论 -
javascript学习笔记——引用类型(2)
5.基本包装类型①包含类型Boolean类型、Number类型、String类型② 基本包装类型的实质var s1="some text";var s2=s1.substring(2);以上代码可以知道s1一个字符串,属于基本数据类型,基本数据类型不是对象,没有属性和方法,第2行代码的直观感受就是String类型调用了substring()方法,其实是基本包装类型对Str...原创 2018-07-27 00:42:08 · 188 阅读 · 0 评论 -
javascript学习笔记——构造函数模式、原型模式、组合使用构造函数模式和原型模式、动态原型模式
1.构造函数模式1)构造函数可以用来创建特定类型的对象,能够识别对象function Person(name,age,job){ this.name=name; this.age-age; this.job=job; this.sayName=function(){ alert(this.name); };}//要创建person对象的实例就...原创 2018-07-30 16:23:18 · 290 阅读 · 0 评论 -
javascript学习笔记——Global对象、Math对象
内置对象:不依赖于宿主环境的对象,程序执行之前就已经存在了;Global对象①定义不属于任何其他对象的属性和方法,最终都是他的属性和方法,事实上没有全局变量或全局函数;所有在全局作用域中定义的属性和函数,都是Global对象的属性;Math对象属性和方法 ...原创 2018-07-27 15:07:49 · 191 阅读 · 0 评论 -
javascript学习笔记——原型链继承、经典继承、组合继承、寄生组合式继承
ECMAScript中函数没有没签名,所以无法实现接口继承(只继承方法签名),只支持实现继承(继承实际的方法),实现继承主要依靠原型链。1.原型链①基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法;继承是通过创建一个父类的实例,并将该实例赋值给子类的内部属性[[prototype]]实现的。原来存在于父类实例中的所有属性和方法,也存在于子类的prototype属性中。P1...原创 2018-07-30 23:41:58 · 387 阅读 · 0 评论 -
javascript学习笔记——函数表达式、递归、闭包、私有作用域、私有变量、静态私有变量、模块模式
1.函数表达式与函数声明的区别定义函数的方式有两种:函数声明;函数表达式;//函数声明function functionName(arg0,arg1,arg2){ //函数体}//函数表达式var functionName=function(arg0,arg1,arg2){ //函数体}//function关键字后面没有表示符的函数,叫匿名函数两者最大的...原创 2018-07-31 22:50:28 · 258 阅读 · 0 评论 -
javascript学习笔记——事件流、事件处理程序、事件对象、事件类型、内存和性能
1.事件流事件流描述的是从页面中接收事件的顺序;1)事件冒泡IE的事件流叫事件冒泡;即,事件开始时右具体的元素接收,然后逐级向上传播到较为不具体的节点;所有现代的浏览器都支持事件冒泡,但在具体实现上还是有一些差别; 有HTML页面如下:<!DOCTYPE html><html><head> <title>ebev...原创 2018-08-09 20:59:50 · 327 阅读 · 0 评论 -
javascript学习笔记——DOM扩展,InnerHTML属性、outerHTML属性、contains()方法
1.querySelector()方法接收css选择符,返回与该模式匹配的第一个元素,如果没有匹配元素则返回null;通过document类型调用该方法则会在文档元素的范围内查找匹配元素;通过Element类型调用该方法则则只会在该元素后代元素范围内查找匹配元素;document.querySelector("#myDiv");2.querySelectorAll()方法...原创 2018-08-05 22:53:39 · 2650 阅读 · 0 评论 -
javascript学习笔记——BOM的对象:window(核心)、location、history
1.window对象 1.1 全局作用域BOM的核心对象是window,它表示浏览器的实例;在浏览器中,window对象既是通过js访问浏览器窗口的一个接口,又是ES规定的Global对象; 所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法全局变量不能通过delete操作符删除,而未声明直接赋值或者是在window对象直接定义的属性可以;尝试访问...原创 2018-08-01 16:02:51 · 1577 阅读 · 0 评论 -
javascript学习笔记——JSON
JSON是一种数据格式,并不从属于javascript。并不是只有javascript才能使用JSON,很多编程语言都有针对JSON的解析器和序列化器。 JSON的三种类型:1)简单值:可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持Javascript中的特殊值undefined。JS字符串与JSON字符串的最大区别在于:JSON字符串必须使用双引号,单引号...原创 2018-08-10 16:10:29 · 197 阅读 · 0 评论 -
javascript学习笔记——操作样式表、元素大小、客户区大小、滚动大小、NodeIterator、TreeWalker、DOM范围
1.访问元素的样式任何支持sytle特性的html元素在js中都有一个对应的style属性。style对象包含着通过HTML的style特性指定的所有样式信息,但不包括与外部样式表或嵌入样式表经层叠而来的样式;css属性将表现为这个style对象的相应属性;var myDir=document.getElementById("myDir");//设置背景颜色myDir.st...原创 2018-08-07 16:22:30 · 298 阅读 · 2 评论 -
javaScript学习笔记——基本概念
1.javaScript的定义①是一种专门为网页交互而设计的脚本语言② 组成: 2.<script>元素3.区分大小写ECMAScript中的一切(变量、函数名,操作符)都区分大小写;4.标识符①第一个字符必须是字母、下划线、$,其他字符可以是字母、下划线、$或数字;②ECMAScript标识符一般使用驼峰大小写格式,即第一个字母小写,剩下的...原创 2018-07-19 00:25:33 · 153 阅读 · 0 评论