正则,this的指向,插件库，防抖节流闭包

您所在的位置：网站首页 › 防抖节流原理 › 正则,this的指向,插件库，防抖节流闭包

正则,this的指向,插件库，防抖节流闭包

2023-05-30 05:27| 来源: 网络整理| 查看: 265

正则何时使用：切割、替换、【验证】！如何使用：语法：/正则表达式/; 1、最简单的正则就是关键字原文 "no" -> /no/后缀后缀：g：找全部 i：忽略大小写

2、备选字符集：/^[备选字符集]$/; 强调：1、一个中括号，只管一位字符 2、问题：正则表达式默认只要满足了就不管后续了，而我们做验证的人，希望的是用户从头到尾完全按照我们的要求来，希望完全匹配解决：前加^后加$，两者同时使用，代表要求从头到尾【完全匹配】/^[备选字符集]$/; - 验证必加特殊：如果备选字符集中ascii码是连续的，那么可用-省略掉中间部分比如：一位数字：[0-9] 一位字母：[A-Za-z] 一位数字、字母、下划线：[0-9A-Za-z_] 一位汉字：[\u4e00-\u9fa5] 一位数字、字母、汉字、下划线：[0-9A-Za-z\u4e00-\u9fa5_]

预定义字符集：前辈们提前定义了一些字符集，为了方便程序员开发 - 简化了备选字符集一位数字：\d 一位数字、字母、下划线：\w 一位空白字符：\s 什么叫空白字符：空格、制表符、换行

一位除了换行外的任意字符：. - 很少使用，范围太广了建议：优先使用预定义，预定义满足不了再用备选字符集补充

量词：规定了一个字符集出现的次数： 1、有明确数量：字符集{n,m}：前边相邻的字符集，至少n个，最多m个字符集{n,}：前边相邻的字符集，至少n个，多了不限字符集{n}：前边相邻的字符集，必须n个

2、无明确数量：字符集?：前边相邻的字符集，可有可无，最多1个字符集*：前边相邻的字符集，可有可无，多了不限字符集+：前边相邻的字符集，至少一个，多了不限选择和分组：选择：在多个规则中选一个规则1|规则2 分组：将多个字符集临时组成一组子规则 (规则1|规则2)

指定匹配位置开头：^ 结尾：特殊：两者同时使用，前加后加特殊：两者同时使用，前加^后加特殊：两者同时使用，前加后加，表示从头到尾要求完全匹配 - 只要你做【验证】

密码强度：2-4位，可以输入数字、字母，但是必须出现一位大写和一位数字的组合？ /^[0-9A-Za-z]{2,4}/预判公式：(?![0−9]+/ 预判公式： (?![0-9]+/预判公式：(?![0−9]+) -> 不能全由数字组成，可能有大写、小写、汉字、日文、韩文、特殊符号.... (?![a-z]+)−>不能全由小写字母组成，可能有大写、数字、汉字、日文、韩文、特殊符号....(?![0−9a−z]+) ->不能全由小写字母组成，可能有大写、数字、汉字、日文、韩文、特殊符号.... (?![0-9a-z]+)−>不能全由小写字母组成，可能有大写、数字、汉字、日文、韩文、特殊符号....(?![0−9a−z]+) -> 不能全由数字组成，也不能全由小写字母组成，也不能全由数字和小写的组合组成，至少要有点别的

1、*切割：var arr=str.split("固定切割符"/RegExp)

2、*****替换：很有可能出现在笔试中，而且真实开发也会遇到 1、基础替换法： str=str.replace(RegExp,"新内容"); //replace支持正则，并且搭配上后缀g就可以找到全部 //缺陷：替换的新内容是一个固定的 2、高级替换法： str=str.replace(RegExp,function(a,b,c){

// console.log(a);//正则匹配到的关键字 // console.log(b);//正则匹配到的关键字的下标 // console.log(c);//原字符串 return 判断a关键字的长度，而返回不同的星星数量 });

3、格式化： var id="500103198602215933"; var reg=/\d{6}(\d{4})(\d{2})(\d{2})\d{4}/; id=id.replace(reg,function(a,b,c,d,e,f){ //在replace的时候，正则出现了分组，我们会得到更多的形参 //在形参a的后面就会出现n个形参，具体看你有多少分组 //第1个分组获得的内容会保存到第2个形参之中 //第2个分组获得的内容会保存到第3个形参之中 ... //倒数第二个是下标 //倒数第一个是原文 return `${b}年${c}月${d}日` }) console.log(id);

3、*正则对象：创建： 1、直接量：var reg=/正则表达式/后缀; 2、构造函数：var reg=new RegExp("正则表达式","后缀");

API：验证：var bool=reg.test(用户输入的); **``` **this的指向**** 1、事件的取消绑定： 1、如果你使用elem.on事件名=()=>{}，那么写成：elem.on事件名=null; 可以取消事件绑定了 2、如果你使用elem.addEventListener("事件名",callback); 那么写成 elem.removeEventListener("事件名",callback); - 事件名和回调函数，【必须和添加时是一模一样的】 2、\*\*\*\*\*this的指向：非常多 1、单个元素绑定事件this->这个元素 2、多个元素绑定事件this->当前元素 3、箭头函数中this->外部对象 4、\*\*\*函数中的this->当前正在调用函数的这个人！ 5、定时器的this->window 3、\*\*\*\*\*ES5强制改变this的指向： - 笔试面试中 call/apply：临时的替换了函数之中的this - 借用语法： 1、函数名.call(借用的对象,实参,...) - 单独传入每个实参 2、函数名.apply(借用的对象,arr) - 只能传入一个事件要求必须是一个数组，apply其实会悄悄的将数组打散强调：call/apply：相当于立刻调用函数，立刻执行的 bind：永久替换了函数中的this - 买 3件事： 1、创建了一个和原函数功能完全相同的新函数 2、将新函数的this永久绑定为了指定对象，别人都借不走 3、将新函数的部分参数永久固定语法：var 新函数名=函数名.bind(永久对象,永久实参,...) - 不是立刻执行，需要自己调用强调：bind绑定的新函数没办法被call/apply再次借走！以后哪怕不是自己的方法，也可以使用，个人推荐：借，白嫖！三个固定套路： 1、Math.max/min.apply(Math,arr) ===> Math.max/min(...arr) 2、Object.prototype.toString.call/apply(arr)=="[object Array]"//toString不需要传入实参,鄙视题：判断xx是不是一个数组，千万不要用typeof，他只能判断原始类型，不能判断引用类型 3、类数组转为普通数组： 1、老方式：接住=Array.prototype.slice.call/apply(类数组对象); 2、新方法：接住=Array.from(类数组对象) *** \*\*\*\*\*ES6：大版本 - 导致语法变化极大 1、学过了：\*let、const关键字、\*箭头函数 2、*模板字符串：可以直接识别变量，不再需要+运算去拼接了，而且实现了一个简单的js环境，甚至支持在里面做运算写API都可以 `我的名字叫${name}`; 3、*****解构赋值：顾名思义：解析结构再进行赋值 - 赋值的新方式，并且得到了增强！如果赋值符号，左右两边的结构一样，就会悄悄得解开/脱掉结构再一一进行赋值语法： 1、类似数组的解构赋值 let [a,b,c]=[1,2,3]; console.log(a); console.log(b); console.log(c); 2、类似对象的解构赋值 let {a,b=默认值,c}={c:3,a:1,b:2} console.log(a); console.log(b); console.log(c); //形参可以设置默认值，如果自己传入了，就用自己的 3、调用函数时，传递实参的顺序其实无所谓了 function zwjs({name="无名氏",age,hobby}){ return `我的名字叫${name},今年${age}岁,喜欢${hobby}`; } console.log( zwjs({ age:18, hobby:"学习" }) ) 4、函数的返回的结果，可以有多个！ function f1(){ var a=1; var b=2; return [a,b]; } var [a,b]=f1(); console.log(a); console.log(b); //只要以后见到：方法名({里面放着很多很多的键值对，那么他的底层就是使用ES6的解构赋值，键值对的写入的顺序其实是随意的}) 4、新的循环：垃圾 for(var val of 数组名){ //val - 值 } 缺陷： 1、没有提供过下标，意味着不能修改原数组 2、只能遍历索引数组，不能遍历hash数组，意味着也不能遍历对象 5、Set和Map：两个新的数据类型： 1、*Set：有一点点用：类似于数组的一种数据格式 - 【去重数组，然后再转回数组】 [...new Set(arr)] ... - 三个点扩展运算符，可以脱掉数组/对象的外套！不需要记忆他的任何的API，完全比不上数组的API 2、Map：垃圾：类似于对象的一种数据格式 var m=new Map(); 添加：m.set("键","值"); 获取：m.get("键"); 删除：m.delete("键"); 清空：m.clear(); 遍历：m.forEach(callback); 推荐一些插件库 animate.css文件是一个动画库，放着很多很多的动画 swiper插件：专门的轮播插件 - 里面放着各种各样的轮播：提供了HTML/CSS/JS，只需要复制百度/高德地图：可以实时定位到页面上

防抖节流继承具有很多很多的面试和笔试题：判断是自有还是共有：判断自有：obj.hasOwnProperty("属性名"); 结果结果为true，说明是自由属性，如果结果为false，有两种可能，有可能是共有，也有可能是没有

判断共有： if(obj.hasOwnProperty("属性名")==false&&"属性名" in obj){//in关键字，会自动查找整条原型链上的属性，找到了结果为true，找不到结果为false 共有 }else{ 没有 }

完整公式： if(obj.hasOwnProperty("属性名")){ 自有 }else{ if("属性名" in obj){ 共有 }else{ 没有 } }

修改和删除：自有和共有自有：修改：obj.属性名=新属性值; 删除：delete obj.属性名;

共有：修改：原型.属性名=新属性值;//千万不要觉得，自己能拿到，就能直接修改，这样很危险，并没有修改原型东西，而是再本地添加了一个同名属性删除：delete 原型.属性名;//千万不要觉得，自己能拿到，就能直接删除，操作会无效

如何为老IE的数组添加indexOf方法 - 这道题不是固定的，可能问如何为一类人创建某个方法 if(Array.prototype.indexOf===undefined){//老IE Array.prototype.indexOf=function(key,starti){ starti===undefined&&(starti=0); for(var i=starti;i{ 操作; },间隔毫秒数) } } var inner=fdjl() 总结：两链一包： 1、作用域链：以函数的EC的scope chain属性为起点，经过AO逐级引用，形成的一条链式结构作用：查找变量，来带了变量的使用规则：优先使用局部的，局部没有找全局，全局没有就报错 2、原型链：每个对象都有一个属性.__proto__，可以一层一层的找到每个人父亲，形成了一条链式结构作用：找共有属性和共有方法的，哪怕自己没有会悄悄的向上查找，如果最顶层也没有才会报错最顶层是Object的原型，甚至上面放着我们眼熟的API - toString，怪不得人人都可以使用 3、闭包：希望保护一个可以【反复使用的局部变量】的一种词法结构，其实还是一个函数，只是写法比较特殊作用：专门用于防抖节流

【本文地址】

正则,this的指向,插件库，防抖节流闭包

正则,this的指向,插件库，防抖节流闭包

今日新闻

推荐新闻