正则表达式

  • 开发
  • 20

正则表达式

今日目标：

1.正则表达式的声明方式

2.正则表达式的基本语法

3.正则表达式的常用方法

00-回顾

# 1. this的指向

// 注意： 一般情况下， this指向的是函数的触发者

`全局环境中的this`: window

function fn() {
    console.log(this)
}
window.fn()

`对象方法中的this`: 对象本身
var obj = {
    say() {
        console.log(this) // obj
    }
}

`定时器中的this`： window
setTimeout(function(){
    console.log(this) // window
}, 1000)

`事件处理函数中的this`: 事件的绑定者（事件源）
document.onclick = function() {
    console.log(this) // document
}

`箭头函数中的this`: 该函数声明时所处的作用域
var obj1 = {
    say: () => {
        console.log(this) // window
    }
}

# 2. 修改this指向的3种方法：
call: 1. 立即执行对应的函数；2.第一个参数是用来修改this指向的，不需要被接收; 3. 可以设置多个参数，每一个形参会错位的依次接收每一个实参
apply: 1. 立即执行对应的函数；2.第一个参数是用来修改this指向的，不需要被接收；3. 只能设置两个参数，第二个参数只能是数组或者伪数组，每一个形参会依次接收每一个数组元素
bind: 1. 不会立即执行对应的函数，而是返回一个修改了this指向的新函数；2. 第一个参数是用来修改this指向的，不需要被接收；3. 可以设置多个参数，每一个形参会错位的依次接收每一个实参

# 3. 解构赋值
// 快捷的从数组或者对象中将需要的数组元素或者属性获取出来
// 注意：解构对象时，变量名必须和属性名一样 
var arr = [1,2,3,4]
let [a, b] = arr

var obj = {
    uname: '小妲己',
    age: 18,
    sex: '女'
}
let { age } = obj

# 4. 箭头函数
// 注意： 是函数表达式的替代方案。
// 注意： `箭头函数中的this`: 该函数声明时所处的作用域
const 变量 = () => {}
// 箭头函数可以省略的两个地方：
	// 1. 如果有且仅有一个参数，可以将小括号去掉
	// 2. 如果函数体内部仅有一行代码，可以将大括号和return关键字去掉

# 5. let,const关键词
// let是var的替代方案
`var和let的区别`：
	1. var可以重复声明变量，可能会造成程序问题； let是不能重复声明变量
    2. var声明的变量会挂载到window对象上； let声明的变量不会挂载到window对象上的
	3. var只有全局和函数作用域； let还具有块级作用域
    4. var声明的变量支持变量提升； let声明的变量不支持变量提升
    
`const常量`：
	1. 常量： 不会改变的数据
    2. 特点： a. 不能重复声明； b. 必须要有初始值； c. 不能修改值 
    3. 使用场景：a. js内置的不会改变的属性；b. 函数声明可以用常量接收； c. 程序中预估不会改变的数据

# 6. 函数参数默认值
	`作用`：让程序变得更健壮，兼容性更强
    `es5语法`：function fn(hero) {
        hero = hero || '默认值'
    }
	`es6语法`：function fn(hero='默认值') {}

# 7. ...展开运算符
	`作用`：数组和对象的合并，将伪数组转换为真实的数组
    // 注意：合并对象时，如果有相同的属性，后面的会覆盖前面的
    var arr = [1,2,3,4]
    var arr1 = [5,6]
    var arr2 = [...arr, ...arr1]
    
    function fn() {
        var newArr = [...arguments]
    }

# 8. es6模块化
	`模块化`：所有js文件都是一个模块，模块之间就可以相互导入导出
    `语法`：先导出，再导入
    	`分开导出`： 在每一个需要导出的标识符前面添加'export'属性
        `导入`： 导入时需要通过对象解构的形式来导入： import { xx, xxx } from '路径'
		`一起导出`： 在导出文件的末尾，使用export default { xx, xxx }
        `导入`： 导入的时候只能使用变量来接收： import 变量 from '路径'
		`在html文件中导入`： <script type="module" src="index.js"></script>

# 9. for...in 和 for...of
	`区别`： for...in既可以遍历对象，也可以遍历数组； for...of遍历数组，key值是数组元素

1.正则表达式

1.1 正则的概念和作用

`概念`：是js内置的一个对象
`作用`： 操作字符串。 验证，提取，替换等操作

1.2 正则表达式两种声明方式

 // 1. 通过js内置对象来声明
        var reg = new RegExp('正则语法')
        console.log(reg);

        // 2. 通过字面量形式 //
        var reg1 = /正则语法/
        console.log(reg1);

        // test(): 验证字符串是否满足正则表达式
        // 返回布尔值：满足 =》 true 不满足 =》 false

        console.log(reg1.test('这是一个正则123语法'));

// i : 忽略大小写
// g : 全局

1.3 正则表达式基础语法

 // 基本使用
var reg = /abc/

// console.log(reg.test('slkdfj')); //fasle
// console.log(reg.test('ababdca')); // false
// console.log(reg.test('abcabcccda')); // true

// []: 代表多选一
var reg = /[abc]/
// console.log(reg.test('slkdfj')); //fasle
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('a')); // true
// console.log(reg.test('abcabcccda')); // true

// -: 连字符： 起始位置-结束位置
var reg = /[a-z]/
// console.log(reg.test('slkdfj')); //true
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('a')); // true
// console.log(reg.test('abcabcccda')); // true
// console.log(reg.test('!A980')); // false

// [a-zA-Z0-9]: 匹配任意一个字母或数字
// [a-zA-Z0-9_]: 匹配任意一个字母或数字或_
var reg = /[a-zA-Z0-9]/
// console.log(reg.test('slkdfj')); //true
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('789')); // true
// console.log(reg.test('abcabcccda')); // true
// console.log(reg.test('!A980')); // false

// 中括号里面的尖尖：除了0-9以外的任意字符
var reg = /[^0-9]/
// console.log(reg.test('slkdfj')); //true
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('789')); // false
// console.log(reg.test('abcabcccda')); // true
// console.log(reg.test('!A980')); // true

// 限定符：中括号外面的^： 以什么开头
var reg = /^[0-9]/
// console.log(reg.test('1slkdfj')); //true
// console.log(reg.test('ababdca')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('abcabcccda')); // false
// console.log(reg.test('!A980')); // false

// 限定符：$: 以什么结尾
var reg = /[a-z]$/
// console.log(reg.test('1slkdfj')); //true
// console.log(reg.test('ababdca')); // true
// console.log(reg.test('789')); // false
// console.log(reg.test('abcabcccda')); // true
// console.log(reg.test('!A980')); // false

// 注意：很多场景下，^和$需要一起使用: 仅能匹配任意一位字符
var reg = /^[0-9]$/
// console.log(reg.test('1slkdfj')); // false
// console.log(reg.test('ababdca')); // false
// console.log(reg.test('789')); // false
// console.log(reg.test('7')); // true

/* 
            量词：
                *： 匹配0次以上
                +： 匹配1次以上
                ?:  匹配0-1次
                {m}: 精准匹配m次
                {m,}: 精准匹配m次以上
                {m,n}: 精准匹配m-n次
        */

var reg = /^[0-9]*$/ // 精准匹配任意一个数字0次及以上
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('')); // true

var reg = /^[0-9]+$/
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('')); // false
// console.log(reg.test('7')); // true

var reg = /^[0-9]?$/
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // false
// console.log(reg.test('')); // true
// console.log(reg.test('7')); // true

var reg = /^[0-9]{3}$/ // 精准匹配任意数字3次
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('')); // false
// console.log(reg.test('7')); // false

var reg = /^[0-9]{3,}$/ // 精准匹配任意数字3次及以上
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('')); // false
// console.log(reg.test('790887')); // true

var reg = /^[0-9]{3,6}$/ // 精准匹配任意数字3次及以上
// console.log(reg.test('!789')); // false
// console.log(reg.test('789')); // true
// console.log(reg.test('1234589')); // false
// console.log(reg.test('790887')); // true

/*
            特殊字符：
            \d: => [0-9]: 任一数字
            \D: 任一非数字
            \w: => [a-zA-Z0-9]
            \W: 字母数字以外的任一字符
            \: 转义符：=》 1. 将普通字符变成有特殊含义的字符； 2. 将有特殊含义的字符转换为普通字符
            .: 任一除了换行符之外的字符
            (): 代表优先级
            |：代表或者
            \任意数字： \1： 将第一个小括号的内容重复匹配一次； \2: 将第二个小括号的内容重复匹配一次
        */

var reg = /^abc|def$/ // 匹配以abc开头或者以def结尾的任意字符
// console.log(reg.test('abc'));
// console.log(reg.test('def'));
// console.log(reg.test('abcdef'));
// console.log(reg.test('aabcccdeef'));

var reg = /^(abc|def)$/ // 精准匹配abc或者def
// console.log(reg.test('abc'));
// console.log(reg.test('def'));
// console.log(reg.test('abcdef'));
// console.log(reg.test('aabcccdeef'));

var reg = /^ab(c|d)ef$/

// console.log(reg.test('abc'));
// console.log(reg.test('abd'));
// console.log(reg.test('abcdef'));
// console.log(reg.test('abcef')); true
// console.log(reg.test('abdef')); true

var reg = /^<(p|span)><\/\1>$/
console.log(reg.test('<p></p>')); // true
console.log(reg.test('<span></span>')); // true
console.log(reg.test('<p></span>')); // false

2.表单验证的时机和分类

# 表单验证的3个时机：
	1. 失去焦点的时候验证：onblur
    2. 边输入边验证： oninput
    3. 点击按钮验证： onclick
    
# 表单验证的两个分类：
	前端验证： 用户输入的内容的格式是否满足网站的要求
    后端验证： 用户输入的内容是否能在数据库中查到

任务：表格数据和表单提交

阅读全部

相关推荐

  3. 正则表达式

    2024-03-23 06:50:05       46 阅读

  4. 正则表达式

    2024-03-23 06:50:05       56 阅读

  6. 正则表达式

    2024-03-23 06:50:05       53 阅读

  8. 【Python】正则表达式

    2024-03-23 06:50:05       39 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-23 06:50:05       5 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-23 06:50:05       5 阅读

  9. 在Django里面运行非项目文件

    2024-03-23 06:50:05       4 阅读

  19. Python语言-面向对象

    2024-03-23 06:50:05       7 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-03-23 06:50:05       6 阅读

热门阅读

  5. opencv模板匹配

    2024-03-23 06:50:05       25 阅读

  7. 4.2 RK3399项目开发实录-案例开发之OpenCV 编译和安装（wulianjishu666）

    2024-03-23 06:50:05       22 阅读

  8. 从HTTP到QUIC：网络协议的演进与优化

    2024-03-23 06:50:05       25 阅读

  9. Ubuntu 上安装和配置 MinIO

    2024-03-23 06:50:05       24 阅读

  13. ChatGPT提示词大全：解锁AI对话

    2024-03-23 06:50:05       36 阅读

  14. Transformer模型

    2024-03-23 06:50:05       24 阅读

  24. 数据仓库的建设步骤

    2024-03-23 06:50:05       25 阅读

  26. 模型设计和跑数优化1：开发数据仓库耗时复杂报表的策略

    2024-03-23 06:50:05       25 阅读

  27. Doris的3种数据模型详解和数据仓库每一层的模型选用

    2024-03-23 06:50:05       22 阅读
  30. AES，DES

    AES，DES

    2024-03-23 06:50:05      24 阅读