js高级第六天

Q课程回顾:

​ 闭包:有权访问另外一个函数的局部变量的函数,作用:延伸变量使用范围

​ mdn,w3c

function fn1 () {var n = 3;return function () {console.log(n);}
}

​ 递归:函数调用其本身

function fn () {fn();}
fn();

正则表达式概述

什么是正则表达式

正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。作用:检索关键字,过滤敏感字符,表单验证正则表通常被用来检索、替换那些符合某个模式(规则)的文本,例如验证表单:用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)。此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。其他语言也会使用正则表达式,本阶段我们主要是利用JavaScript 正则表达式完成表单验证。

正则表达式的特点

1. 灵活性、逻辑性和功能性非常的强。
2. 可以迅速地用极简单的方式达到字符串的复杂控制。
3. 对于刚接触的人来说,比较晦涩难懂。比如:^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
4. 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情况修改正则表达式.   比如用户名:   /^[a-z0-9_-]{3,16}$/

正则表达式在js中的使用

创建正则表达式

在 JavaScript 中,可以通过两种方式创建一个正则表达式。方式一:通过调用RegExp对象的构造函数创建 var regexp = new RegExp(/123/);console.log(regexp);方式二:利用字面量创建 正则表达式var reg = /abc/; 含义:只要包含abc就可以

测试正则表达式

test() 正则对象方法,用于检测字符串是否符合该规则,该对象会返回 true 或 false,其参数是测试字符串注意正则里面没有引号
regexObj.test(str);
regexObj:正则表达式
str:用户输入字符串var rg = /123/;
console.log(rg.test(123));//匹配字符中是否出现123  出现结果为true
console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false

正则表达式中的特殊字符

正则表达式的组成

每个正则表达式可以由简单的字符构成,比如 /abc/,也可以是简单和特殊字符的组合,比如 /ab*c/ 。其中特殊字符也被称为元字符,在正则表达式中是具有特殊意义的专用符号,如 ^ 、$ 、+ 等。正则表达式:简单字符 和 特殊字符【元字符】特殊字符非常多,可以参考: MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_ExpressionsjQuery手册:正则表达式部分正则测试工具 : http://tool.oschina.net/regex

边界符

正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符^ : 表示匹配行首的文本(以谁开始)【/^abc/:以abc为开头】$:表示匹配行尾的文本(以谁结束)【/^abc$/:只能是abc】

如果 ^和 $ 在一起,表示必须是精确匹配。

var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));
console.log('---------------------------');
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false

字符类

字符类表示有一系列字符可供选择,只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

[] 方括号

表示有一系列字符可供选择,只要匹配其中一个就可以了【多选1】
[abcdefg]var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('andy'));//true
console.log(rg.test('baby'));//true
console.log(rg.test('color'));//true
console.log(rg.test('red'));//false
var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b  或者是c 这三个字母才返回 true
console.log(rg1.test('aa'));//false
console.log(rg1.test('a'));//true
console.log(rg1.test('b'));//true
console.log(rg1.test('c'));//true
console.log(rg1.test('abc'));//false
----------------------------------------------------------------------------------
var reg = /^[a-z]$/ //26个英文字母任何一个字母返回 true  - 表示的是a 到z 的范围  
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false
-----------------------------------------------------------------------------------
//字符组合
var reg1 = /^[a-zA-Z0-9]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true  
------------------------------------------------------------------------------------
//取反 方括号内部加上 ^ 表示取反,只要包含方括号内的字符,都返回 false 。
var reg2 = /^[^a-zA-Z0-9]$/;
console.log(reg2.test('a'));//false
console.log(reg2.test('B'));//false
console.log(reg2.test(8));//false
console.log(reg2.test('!'));//true/^[^a-z]$/:两个^,括号外面的是便边界,括号里面的是取反的含义

量词符

量词符用来设定某个模式出现的次数。
量词		说明*		重复0次或更多次【>=0次】/^[a-z]*$/+		重复1次或更多次【>=1次】【/^[a-z]+$/】?		重复0次或1次{n}		重复n次{n,}	重复n次或更多次{n,m}	重复n到m次
注意:{n,m}n和m之间不准有空格

课程回顾:

​ 正则表达式:匹配字符组合模式

​ 创建:var reg1 = new RegExp(/abc/); var reg2 = /abc/;

​ 方法:reg.test(‘abcd’);

​ 特殊字符:

​ 边界符:^,$

​ 方括号:[abc]

​ 量词符:*,+,?,{n},{n,},{n,m}

用户名表单验证

功能需求:

  1. 如果用户名输入合法, 则后面提示信息为: 用户名合法,并且颜色为绿色
  2. 如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为红色
var input = document.querySelector('input');var span = document.querySelector('span');var reg = /^[a-zA-Z0-9_-]{6,16}$/;input.onblur = function () {if (reg.test(this.value)) {span.innerHTML = '输入正确';span.className = 'right';}else {span.innerHTML = '错误内容';span.className = 'error';}
}

括号总结

1.大括号  量词符.  里面表示重复次数{}2.中括号 字符集合。匹配方括号中的任意字符. []3.小括号表示优先级()正则表达式在线测试 : https://c.runoob.com

预定义类

预定义类指的是某些常见模式的简写方式.

在这里插入图片描述

验证案例:

手机验证

var tel = document.getElementById('tel');
var regtel = /^[1][3|4|5|7|8][0-9]{9}$/;
tel.onblur = function () {if (regtel.test(tel.value)) {this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = '手机输入正确<i class="success_icon"></i>';console.log(123);} else {tel.nextElementSibling.className = 'error';tel.nextElementSibling.innerHTML = '手机输入错误<i class="error_icon"></i>';console.log(456)}}

QQ验证:

var regqq = /^[1-9][0-9]{4,}$/;var regtel = /^1[3|4|5|7|8][0-9]{9}$/;var regqq = /^[1-9][0-9]{4,}$/;function jiance (obj, reg) {obj.onblur = function () {if (reg.test(this.value)) {this.nextElementSibling.className = 'success';this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 手机输入正确';} else {this.nextElementSibling.className = 'error';this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 手机输入错误';}}}jiance(tel,regtel);jiance(qq,regqq);

昵称验证:

var nikName = /^[\u4e00-\u9fa5]{2,8}$/;

短信验证:

var regmsg = /^[0-9]{6}$/;

replace替换:

字符串的方法:替换

字符串.replace(要替换的字符串, '替换为谁');/表达式/[修饰符]g:全局匹配i:忽略大小写gi:全局+忽略

屏蔽敏感字符

<script type="text/javascript">// 点击按钮发布留言var btn = document.querySelector('input');var txt = document.getElementById('txt');var ul = document.querySelector('ul');// 添加事件btn.onclick = function () {// 创建livar li = document.createElement('li');// 放到ulul.appendChild(li);// 获取内容var val = txt.value;// 替换val = val.replace(/搞基|gay/gi,'**');// 放到li里面li.innerText = val;// 清空txt.value = '';}</script>

课程回顾:

​ 正则:匹配字符组合模式

​ 创建正则:var reg1 = new RegExp(/abc/); var reg2 = /abc/;

​ 检测测试:reg1.test(‘字符串’);

​ 特殊字符:

​ 边界符:^,$

​ 方括号:[多选一]

​ 量词符:*,+,?,{n},{n,},{n,m}

​ 修饰符:/abc/修饰符

整体回顾:

​ ES6:引入类

class 类名 {constructor (uname, age) {this.uname = uname;this.age = age;this.say();}say () {this.uname;}hi () {}}
// 实例化对象
var obj = new 类名(参数,参数);// 继承:
class Father {}
class Son extends Father {}

​ ES5:

创建对象:字面量,构造函数Object,自定义构造函数new的执行过程:1创建新对象,2this指向这个对象,3执行代码,4返回这个对象成员:静态成员,实例成员function Person (uname, age) {this.uname = uname;this.age = age;
}原型对象:是构造函数属性,prototype,用来共享方法节省内存【构造函数.prototype.方法 = function () {}】
对象原型:是对象的属性,__proto__,用来指向原型对象
构造函数:constructor,原型对象的属性,用来指回构造函数本身继承:组合继承(构造函数和原型对象)属性:用call改变父类中的this指向方法:父实例对象赋值给子原型对象,最后指回构造函数本身
类的本质就是function【语法糖】

新增方法:

数组:forEach,filter,some(数组.forEach(function (val, index, obj) {}))字符串:trim(去除字符串两侧空白)

函数进阶:

函数定义:命名函数,匿名函数,实例化对象new Function函数调用:方式很多,事件处理程序,方法,定时器......this指向:调用者,构造函数中的this指向实例对象改变this指向:call,apply,bind(fun.方法(对象));严格模式:JS两种模式(正常,严格["use strict"]);高阶函数:把函数当做返回值或者参数的函数,【操作其他函数的函数】function fn (n) {}; fn( function () {} );function fn () {return function () {}}
闭包:有权访问另外一个函数的局部变量的函数,作用:延伸变量使用范围function fn1 () {var n = 6;return function () {console.log(n);}}
递归:函数调用其本身// 注意:写递归要有递归点,出口点function fn () {fn();}fn();深拷贝和浅拷贝

正则:

含义:匹配字符组合模式创建正则:var reg = new RegExp(/abc/);var reg = /abc/;
测试:testreg.test('字符串');
特殊字符:边界符:^,$方括号:[多选一]量词符:*,+,?,{n},{n,},{n,m}字符串方法:replace(替换,'字符')修饰符:/abc/gi

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/248137.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Chrome 75 lazy-loading

Chrome 75 & lazy-loading https://addyosmani.com/blog/lazy-loading/ https://chromestatus.com/feature/5645767347798016 Chrome 75 将默认启用延迟加载功能 自 Chrome 75 起&#xff0c;将原生支持图片的延迟加载&#xff0c;在代码中编写 <img loading"lazy&…

d3.js 实现烟花鲜果

今天在d3.js官网上看到了一个烟花的DEMO&#xff0c;是canvas制作的&#xff0c;于是我想用d3.js来实现它&#xff0c;js代码只有几行。好了废话不多说&#xff0c;先上图。 1 js 类 因为烟花要有下落的效果&#xff0c;所以里面用到了一些简单的数学和物理知识来模拟重力&…

阿里Sentinel控制台源码修改-对接Apollo规则持久化

改造背景 前面我们讲解了如何对接Apollo来持久化限流的规则&#xff0c;对接后可以直接通过Apollo的后台进行规则的修改&#xff0c;推送到各个客户端实时生效。 但还有一个问题就是Sentinel控制台没有对接Apollo&#xff0c;Sentinel控制台本来就可以修改限流的规则&#xff0…

Python学习(一)

一、版本&#xff1a; Python2.X /Python3.x 官方宣布2020 年 1 月 1 日&#xff0c; 停止 Python 2 的更新。 Python3.x不兼容Python2.x  二、安装&#xff08;以mac 为例&#xff09; MAC 系统一般都自带有 Python2.x版本 的环境&#xff0c;你也可以在链接 https://www.py…

jQuery—淘宝精品服饰案例

<body><div class"wrapper"><ul id"left"><li><a href"#">女靴</a></li><li><a href"#">雪地靴</a></li><li><a href"#">冬裙</a>&l…

Python机器学习实践:决策树判别汽车金融违约用户

文章发布于公号【数智物语】 &#xff08;ID&#xff1a;decision_engine&#xff09;&#xff0c;关注公号不错过每一篇干货。 转自 | 法纳斯特&#xff08;公众号ID:walker398&#xff09; 作者 | 小F 决策树呈树形结构&#xff0c;是一种基本的回归和分类方法。 决策树模型的…

jQuery—tab栏切换

<div class"tab"><div class"tab_list"><ul><li class"current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价&#xff08;50000&#xff09;</li><l…

操作系统原理之I/O设备管理(第六章上半部分)

一、I/O系统的组成 I/O系统不仅包括各种I/O设备&#xff0c;还包括与设备相连的设备控制器&#xff0c;有些系统还配备了专⻔⽤ 于输⼊/输出控制的专⽤计算机&#xff0c;即通道。此外&#xff0c;I/O系统要通过总线与CPU、内存相连。 I/O系统的结构&#xff1a; I/O设备的分类…

操作系统原理之I/O设备管理(第六章下半部分)

五、I/O软件原理 输入输出软件的总体目标是将软件组织成一种层次结构 低层软件用来屏蔽硬件的具体细节高层软件则主要是为用户提供一个简洁、规范的界面设备管理的4个层次&#xff1a; 用户层软件 -》向系统发出I/O请求&#xff0c;显示I/O操作的结果&#xff0c;提供⽤户与设备…

切换Debug/Release编译模式和Archive的作用

&#xfeff;在学这个之前&#xff0c;以为很难&#xff0c;也起不到什么作用&#xff0c;但是等真正运用到工程里面&#xff0c;才发现&#xff0c;这个能帮你省下很多工作量。 1&#xff0c;Debug和Release版本区别&#xff1f; 进行iOS开发&#xff0c;在Xcode调试程序时&am…

AFNetworking 对数据进行https ssl加密

参考来源&#xff1a;http://www.cnblogs.com/jys509/p/5001566.html 现在在工作中的工作需求&#xff1a;https请求验证证书一般来讲如果app用了web service , 我们需要防止数据嗅探来保证数据安全.通常的做法是用ssl来连接以防止数据抓包和嗅探其实这么做的话还是不够的 。…

数据库系统原理(第一章概述)

一、数据库基本概念 什么是数据&#xff1a;数据&#xff08;Data&#xff09;是描述事物的符号记录&#xff0c;是指利用物理符号记录下来的、 可以鉴别的信息。 数据是信息存在的一种形式&#xff0c;只有通过解释或处理的数据才能成为有用的信息。 什么是数据库&#xff1a;…

实验二:Linux下Xen环境的安装

实验名称&#xff1a; Linux下Xen环境的安装&#xff08;centOS7&#xff09; 实验环境&#xff1a; 本次实验基本是在centOS7的环境下完成&#xff0c;系统内核和系统版本如下&#xff1a; 实验要求&#xff1a; 为centOS7的环境下安装Xen的平台&#xff0c;能够正常使用Xen下…

IDEA写vue项目出现红色波浪线警告如何解决??

1.看图 2.希望对大家有帮助&#xff0c;只要修改了这个就可以&#xff0c;如有任何问题都可以留言&#xff0c;谢谢大家 2019-09-1923:54:11 作者&#xff1a;何秀好 转载于:https://www.cnblogs.com/itboxue/p/11553395.html

数据可视化(BI报表的开发)第一天

课程回顾&#xff1a; ​ jQuery事件注册&#xff1a; ​ $(元素).click(function () {}); ​ $(元素).on(‘click’, [后代元素], function () {}); ​ $(元素).one(‘click’, function () {}); ​ 解绑事件&#xff1a;off ​ 自动触发&#xff1a; ​ $(元素).click…

在Block中使用weakSelf与strongSelf的意义

在Block中使用weakSelf与strongSelf的意义 我们都会声明一个弱引用在block中使用, 目的就是防止循环引用, 那么weakSelf与strongSelf一起使用目的是什么呢? 首先先定义2个宏: #define YXWeakSelf(type) __weak typeof(type) weak##type type; #define StrongSelf(type) __…

操作系统原理之操作系统简介(第一章)

一、 什么是操作系统 操作系统&#xff1a;是一种复杂的系统软件&#xff0c;是不同程序代码、数据结构、数据初始化文件的集合&#xff0c;可执行。 操作系统是用户与硬件之间的接口&#xff1a;操作系统与硬件部分相互作用&#xff0c;并且为运行在计算机上的应用程序提供执行…

数据可视化(BI报表的开发)第二天

9、公用面板样式 所有的面板的基础样式是一致的&#xff0c;提前布局好。 面板 .panel &#xff1a;box-sizing&#xff0c;边框图&#xff0c;大小&#xff0c;定位【51 38 20 132】容器 .inner&#xff1a;padding&#xff1a;24&#xff0c;36&#xff0c;定位外部拉宽标…

关于Xcode 7.3 7.3.1 断点 卡死 无限菊花

关于Xcode 7.3 7.3.1 断点 卡死 无限菊花 只要一打断点,就无限卡死,变量区一直菊花在转,只有强制退出Xcode才能重新编译,找了Google和Stack OvewFlowe依然没有解决办法. 删除项目,重新安装Xcode,重新运行程序一切办法都解决不到,百度上说的"build setting中将Enable Clang…

html5+hbuilder+夜神模拟器+webview

HTML5 Plus应用概述 首先新建一个移动App项目&#xff0c;文件-->新建-->移动APP HTML5 Plus移动App&#xff0c;简称5App&#xff0c;是一种基于HTML、JS、CSS编写的运行于手机端的App&#xff0c;这种App可以通过扩展的JS API任意调用手机的原生能力&#xff0c;实现与…