JavaScript
文章平均质量分 53
神影天初
这个作者很懒,什么都没留下…
展开
-
正则表达式基础
断言的组成之一是边界。对于文本、词或模式,边界可以用来表明它们的起始和终止部分(如先行断言,后行断言及条件表达式)。适合匹配表情,标点符号及特定语言或文字的字母。这些量词匹配默认会尽可能多的匹配。等都可以表示成字符集的形式,代表匹配和记住的范围。正则表达式模式是简单字符和特殊字符构成的。这些代表文本字符串的开始结束及单词的边界。字符类可以区分各种字符。匹配字符集及捕获组和非捕获组以及具名捕获组。可以清楚的查看你的正则表达式是否符合需要。量词表示匹配的字符或表达式的数量。等各自代表特定类型的字符。原创 2022-09-26 16:12:29 · 456 阅读 · 0 评论 -
前端从零搭建简单的工作流
文章目录windows 从零搭建工作流项目创建项目项目初始化gitpackage.jsontsconfig.jsonprettiereslintlint-staged 配合 huskywindows 从零搭建工作流项目以下命令建议在 git-bash 中执行。创建项目# mkdir [projectName]mkdir pro-test && cd pro-test项目初始化git# 初始化Git仓库git init# 创建 .gitignore,编辑该文件例如node原创 2022-04-01 22:15:16 · 660 阅读 · 0 评论 -
防抖与节流
文章目录防抖与节流防抖节流防抖与节流防抖与节流都是高阶函数。防抖是让函数延迟执行,多次点击触发事件以最后一次点击为准。节流是以第一次点击为准,短时间内的多次点击都会被忽略。节流函数是以防抖函数为基础调用的,所以先实现防抖函数。防抖// 防抖函数function debounce(fn, wait, immediate) { // immediate参数是在节流函数中调用传递的,防抖函数中不用 let timeout; // lastTimeInterval 记录两次点击之间的时间原创 2022-03-28 16:04:13 · 230 阅读 · 0 评论 -
原生js处理多行文本溢出
文章目录介绍示例介绍目前文本溢出的处理可以使用css实现单行及多行溢出显示省略号,但是兼容性可能不太好。最近我发现一个兼容性比较广的方法,那就是getClientRects,大家可以点击链接查看完整的介绍。这里简单介绍一下,对于块元素没什么好说的,主要是对于行内元素(比如a,span)会将每一行文本的位置信息作为ClientRect对象返回,主要包含left,top,right,bottom,width,height等属性。示例<div class="box"> <原创 2022-01-20 12:31:48 · 1520 阅读 · 0 评论 -
JavaScript事件传播简单介绍
文章目录事件传播事件传播顺序事件传播类型事件捕获事件冒泡示例终止事件传播事件传播事件传播顺序事件传播的顺序是先执行事件捕获,然后执行事件冒泡。事件传播类型事件捕获事件冒泡addEventListener(type, listener, options)用于注册事件监听。type是事件监听的类型,listener是事件监听函数,options是一个可选项,默认值是false,表示在事件冒泡阶段监听事件。options如果是boolean类型,true就是在事件捕获阶段监听事件,fal原创 2022-01-17 12:40:29 · 512 阅读 · 0 评论 -
javascript浮点数介绍
文章目录介绍图示浮点数形式特殊数值规格化非规格化总结介绍单精度浮点数32位,双精度浮点数64位。其中单精度由1位符号位,8位指数位,23位尾数位组成。双精度由1位符号位,11位指数位,52位尾数位组成。图示以64位浮点数为例,sign表示符号位用S表示,exponent表示指数位用E表示,mantissa表示尾数用M表示。浮点数形式规格化:当指数位E不全为0也不全为1时就是规格化形式浮点数非规格化:当指数位E全为0时就是非规格化形式浮点数特殊数值:当指数位E全是1时就是特殊数值,当尾数M原创 2022-01-12 23:03:17 · 2850 阅读 · 0 评论 -
jest使用es6语法
jest使用es6安装依赖设置package.json添加jest配置文件添加babel配置文件最后安装依赖// npmnpm i --save-dev jest babel-jest @types/jest @babel/core @babel/preset-env// yarnyarn add -D jest babel-jest @types/jest @babel/core @babel/preset-env// pnpmpnpm add -D jest babel-jest @typ原创 2021-12-28 10:29:27 · 696 阅读 · 0 评论 -
call, apply, bind的分析与实现
改变函数this指向如何改变函数的this指向自定义实现`call`,`apply`,`bind`如何改变函数的this指向如果是函数声明,那么函数内部的this指向全局对象或者调用该函数的对象。箭头函数的this绑定的是父级作用域内的this使用call,apply,bind可以绑定this指向。其中bind是永久改变this指向并且不会立即执行。apply,call临时改变this指向并且立即执行。apply,call不同之处在于调用的参数形式:call(thisArg, arg1?,原创 2021-12-25 16:07:06 · 501 阅读 · 0 评论 -
eslint内置规则介绍
内置规则eslint 内置规则介绍eslint 推荐配置eslint 内置规则介绍modules.exports = { // 所有规则页面(https://eslint.org/docs/rules)标记为 ✔ 的规则将会默认开启 extends: ['eslint:recommended'], parserOptions: { ecmaVersion: 'latest', sourceType: 'module', }, /* Rules *代表recommended原创 2021-12-18 23:25:07 · 998 阅读 · 0 评论 -
js驼峰命名与短横线命名互转
在js中,驼峰命名一般首字母小写,其它首字母大写的形式。短横线命名所有字母小写,单词与单词之间用短横线连接。搞清楚区别之后就很简单了,使用正则全局匹配大写字母并替换成短横线+小写字母,或者匹配短横线+小写字母替换成大写字母。replace的具体用法参考MDNString.prototype.replace// 驼峰转短横线let str = "testStrName";let newStr = str.replace(/([A-Z])/g, (match, p1, offset, stri原创 2021-07-09 17:15:30 · 1614 阅读 · 1 评论 -
js正则表达式验证IP地址
/^(([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]?\d|1\d{2}|2[0-4]\d|25[0-5])$/支持0.0.0.0到255.255.255.255(没有前导0)菜鸟工具提供的正则表达式:/^((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))$/支持000.000.000.000到255.255.255.255(可以含有前导0)..原创 2020-09-27 09:42:47 · 1178 阅读 · 0 评论 -
js去除字符串中的空白字符
上下文中的空白字符是所有的空白字符(space, tab, no-break space 等) 以及所有行终止符字符(如 LF,CR等)String.prototype.trim = function () { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');};上面就是官方源码用于兼容旧环境实现的 trim() 方法, 用于去除字符串左右两端的字符串详情见:https://developer.mozi...原创 2020-07-31 17:26:25 · 1158 阅读 · 0 评论 -
JavaScript原生实现事件监听及手动触发
我们有时候会需要通过js修改表单元素的状态, 因为不是通过页面交互而是js操作的, 所以不会触发我们写的监听事件.这时就需要通过js手动触发监听事件.jquery实现方法就是trigger('eventType')原生实现:<input type="checkbox" id="chk">document.querySelector('#chk').addEventListener('change', function() { console.log(this.chec原创 2020-07-30 09:17:43 · 12224 阅读 · 1 评论 -
javascript原生获取多选下拉框选中的值
下拉框一般都是单选的, 所以直接通过document.querySelector('select').value就可以知道选中的值了.如果只是想判断是否有选中的话还可以通过document.querySelector('select').selectedIndex, 这个属性是一个数字,表明第一个被选中的值的索引, 所以如果返回为-1说明没有option被选中.如果select添加了multiple属性, 那么可以通过Shift或Ctrl像操作文件一样操作select的选项来多选.获取多选下拉框原创 2020-07-29 16:01:56 · 3411 阅读 · 0 评论 -
原生实现滑动条效果
实现效果类似如上:html:<input type="range" min="0" max="1" value="0.1" step="0.01" id="range"><span class="val" style="width: 20px;height: 20px;display: block;margin: 20px;"></span>...原创 2020-03-31 09:23:26 · 291 阅读 · 0 评论 -
实现简单的进度条效果
封装一个简单的jquery插件,实现简单的可滚动进度条。可能一些情况没有考虑到,仅供参考。(function ($) { $.fn.sliderProgress = function (options, actions) { var defaults = { width: 200, // 这是宽度 height: 10,...原创 2020-03-24 15:14:40 · 226 阅读 · 0 评论 -
jquery简单实现无缝可滑动轮播图
话不多说,直接上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...原创 2020-03-20 09:34:13 · 376 阅读 · 0 评论 -
js正则表达式匹配数字
普通的一位数字到几位数字的用/^\d{m,n}$/,如果固定死位数则只填m;如果是特定数字范围的,比如0-64这种,先匹配一位的([0-9])或者(\d),然后匹配两位的10-59-----([1-5]\d),最后匹配剩下的60-64-----(6[0-4]),组合起来的正则表达式就是/^((\d) | ([1-5]\d) | (6[0-4]))$/.加正负号及浮点数的也差不多是这样....原创 2019-12-03 15:36:54 · 11169 阅读 · 0 评论 -
js事件绑定
原生的js绑定事件一般有两种:第一种是:ele.onclick = fn();这种方法只能绑定一次,再次绑定就会把原来的监听覆盖掉,解除绑定也很简单ele.onclick = null;另一种是addEventListener:ele.addEventListener("click", fn);这种可以给元素绑定多个事件,同时触发,解除绑定就要使用removeEv...原创 2019-05-21 10:31:59 · 568 阅读 · 0 评论 -
自定义事件的触发dispatchEvent
参考官方文档:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_eventshttps://developer.mozilla.org/zh-CN/docs/Web/API/Event1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(...转载 2019-01-29 11:25:07 · 2052 阅读 · 0 评论 -
JavaScript中Math操作
// Math:数学类//欧拉常数console.log(Math.E);//圆周率console.log(Math.PI);console.log(Math.PI / 4);// 三角函数:// 反余弦函数 求角度: 2π/3console.log(Math.acos(0.5));// 反正弦函数 求角度: π/3console.log(Math.asin(0.5)...原创 2018-09-05 21:53:34 · 303 阅读 · 0 评论 -
继承与原型链
JavaScript通过prototype继承属性与方法,一个原型对象也有原型这样就构成了原型链。函数、原型、实例之间的关系大概是这样的:通过构造函数可以生成实例,实例和构造函数的prototype都指向原型原型链:func-->Function.prototype-->Object.prototype-->nulllet func = function() { ...原创 2019-03-13 17:27:45 · 92 阅读 · 0 评论 -
prototype扩充类型功能的简单使用
我们都知道js是通过prototype来实现继承的,假如有一个Person函数,那么Person.prototype指向是一个原型对象,这个原型对象有一个constructor属性来指向Person函数。通过new Person获得的实例与Person之间没什么关系,Person实例person1.prototype指向的是Person的原型对象Person.prototype。person1...原创 2019-03-13 14:32:13 · 130 阅读 · 0 评论 -
正则表达式中[]和()的区别
圆括号()是组,主要应用在限制多选结构的范围/分组/捕获文本/环视/特殊模式处理示例:1、(abc|bcd|cde),表示这一段是abc、bcd、cde三者之一均可,顺序也必须一致2、(abc)?,表示这一组要么一起出现,要么不出现,出现则按此组内的顺序出现3、(?:abc)表示找到这样abc这样一组,但不记录,不保存到$变量中,否则可以通过$x取第几个括号所匹配到的项,比如:(aaa)(...转载 2018-09-27 19:21:03 · 1497 阅读 · 0 评论 -
掌阅漫画导航栏(可滑动,可下拉)
案例网址:https://m.cm233.com/category仿写该网址的滚动下拉菜单,建议尝试浏览器的手机模式观看.下面的图片在代码中会用到,可以到http://m.cm233.com/static/img/index_sprite.png?v=a9fedc5)下载保存好路径.代码:<!DOCTYPE html><html lang="en">...原创 2018-09-20 14:02:17 · 1137 阅读 · 0 评论 -
JavaScript练习
//1、将字符串的首字母转化为大写。function upperCase(str) { return str.charAt(0).toUpperCase() + str.slice(1);}console.log(upperCase("aaa"));//2、忽略大小写,判断两个字符串是否一致。function compire(str1, str2) { if (str...原创 2018-09-05 22:18:25 · 530 阅读 · 2 评论 -
JavaScript中Date操作
// Date:日期// 创建一个日期对象// 无参数的时候,代表当前时间.var date = new Date();console.log(date);var date2 = new Date(1991, 11, 11, 0, 0, 0);console.log(date2);// 获取年月日时分秒毫秒var year = date.getFullYear();// ...原创 2018-09-05 22:05:16 · 103 阅读 · 0 评论 -
JavaScript练习
//1、已知一个梯形,面积是150,高是15,上底边是3,那么下底边是多少?var s = 150, height = 15, up = 3, down;down = s * 2 / height - up;console.log("下底" + down);//2、比较两数大小、输出较小的。var a = 10, b = 9;console.log("较小的数" + a &g...原创 2018-09-03 22:14:00 · 639 阅读 · 0 评论 -
JavaScript练习
九九乘法表function muiltable() { for (var i = 1; i <= 9; i++) { var str = ""; for (var j = 1; j <= i; j++) { str = str + i + "*" + j + "=" + (i * j) + "\t"; ...原创 2018-09-04 20:03:55 · 114 阅读 · 0 评论 -
JavaScript对象
/** * 定义一个对象,包含数据和方法,实现对一个事物的描述. * var 变量名 = { * 属性名:属性值, * 属性名:属性值, * ... * } */var desc = { name: "张三", location: "南京", age: 5, playGame: function (game) { ...原创 2018-09-04 20:08:21 · 77 阅读 · 0 评论 -
JavaScript类对象
// class:关键字,用于定义类.类可以认为是对象的模板,用于快速创建多个对象.// 类名:每个单词首字母都大写.// constructor:关键字,构造函数.用于对象初始化,数据属性赋值.class People { constructor(name, age) { // this指代当前创建的对象 this.name = name; ...原创 2018-09-05 21:30:36 · 109 阅读 · 0 评论 -
如何将数组转化为json字符串,然后转化回来
var arr = ['111', '222', 333] console.log(arr) var obj = {} arr.forEach((v, i) => { obj[i] = v }) console.log(obj) var str = JSON.stringify(obj) console.log...原创 2018-12-26 17:40:41 · 2604 阅读 · 1 评论 -
数组的扁平化处理
数组扁平化就是把二维三维。。。数组转化成一维普通数组。官方提供的方法是flatflat函数默认参数是1,可以将二维数组转化成一维数组,以此类推参数是2可以将三维数组转化成一维数组,参数为Infinity可以将任意维度的数组转化成一维数组。console.log([1, [2, 3]].flat()); // [1, 2, 3]console.log([1, [2, 3]].fla...原创 2019-03-21 10:45:12 · 351 阅读 · 0 评论 -
javascript定义getter,setter函数
官方支持defineProperty定义getter,setter函数。defineProperty可以设置数据属性或者访问器属性,只能选择其中一个。接收三个参数:设置属性的对象,属性名,描述符对象。数据属性:configurable:表示能否通过delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。enumerable:是否可枚举,表示能否通...原创 2019-03-08 17:53:39 · 745 阅读 · 0 评论 -
js简单实现一维数组转二维数组
// 一维数组转成二维数组var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]function arrToTwoDim(arr, n = 2) { var arr2 = [] for (var i = 0, j = 0; i < arr.length; i += n) { // 初始化数组单个元素为数组 arr2[...原创 2019-02-19 11:14:17 · 2898 阅读 · 0 评论 -
javascript数据类型检测
typeof 返回一个表示数据类型的字符串,返回结果包括symbol,string,number,boolean,undefined,function,objecttypeof无法识别null,Array,Date,RegExpconsole.log(typeof ''); //string console.log(typeof 1); //numbercon...原创 2019-01-23 16:22:06 · 98 阅读 · 0 评论 -
js手动触发事件dispatchEvent()
如果大家将一张网页看成一个form的话,大致上就成了一个web form的模型。在win form 下要想手动触发某一个对象的事件是很简单的,只要发送一条消息即可达成。(PostMessage) 但是网页并不是基于消息机制的,如果我们想在一张网页上写出一个类似于按键精灵的功能该如何实现呢?为大家介绍js下的几个方法:(jquery使用trigger()触发事件)1. createEvent(...原创 2019-01-29 10:20:12 · 27671 阅读 · 1 评论 -
js字符串转数字
1.通过Number()函数传入一个合法的字符串参数,可以把字符串转换成一个十进制整数,十进制字符串可以带小数,其它进制我试过都不能有小数,否则返回NaN。+("11")其实也是调用的Number("11")。进行减,乘,除运算时,字符串的自动转换也是调用的Number()。例如:十进制没有前缀,二进制以0b为前缀,八进制以0o为前缀,十六进制以0x为前缀,大小写随意。2.parseI...原创 2019-01-28 13:54:14 · 12764 阅读 · 0 评论 -
js进制转换
Number的toString()方法可以根据参数进行进制转换,如果不加参数,那么将基于十进制转换。转换的数字带有小数也可以转换,但是不推荐小数进制转换,因为小数进制转换容易因为精度问题造成0.3 - 0.2 != 0.2 - 0.1。进制转换原理:十进制转二进制:将十进制的数不断除以2取余直到商为0,例如23/2=11~111/2=5~15/2=2~12/2=1~0...原创 2019-01-28 11:53:53 · 1369 阅读 · 0 评论 -
js保留有效数字
JavaScript中数字保留有效数字位数的方法有三种:toFixed,toExponential,toPrecision,这三种方法都会把数字转成字符串。1.toFixed()根据小数点后的指定位数将数字转为字符串,不会使用指数计数法。2.toExponential()使用指数计数法将数字转化为指数形式的字符串,小数点前只有一位,小数点后的位数由参数指定。3.toPrecis...原创 2019-01-28 11:00:56 · 9973 阅读 · 0 评论