DAY13
一、自调用函数
函数定义方式
声明式
function fn(){
console.log('fn函数')
}
fn()
赋值式
var 函数名 = function(){
console.log('赋值式函数')
}
函数名() 函数调用语句
自调用函数
(function(){
//函数体
console.log('自调用函数>>>')
})()
二、this关键字
this 是什么 是一个关键字
只出现在 作用域里面(全局作用域、私有作用域)
目前 this 只有 全局作用域和函数(私有作用域里面有)
this指向(代表什么)
//全局作用域
console.log(this) // window
this 指向(熟读并且背诵全文)
1、全局定义直接调用,函数名()调用 函数内部 this 指向 window
function fn(){
console.log(this) //(this指向window)
}
fn()
2、对象内部的方法调用,函数内部 this 指向 . 前面的这个东西
var obj1 = {
name:'Taogu',
sayHi:function(){
console.log(this) //(this指向obj1)
}
}
obj1.sayHi()
3、定时器 this ->window
setTimeout(function(){
console.log(this) //(this指向window)
},1000)
4、自调用函数 this->window
(function(){
console.log(this) //(this指向window)
})()
5、事件处理函数 this 指向事件源(由谁触发的这个事件)
box.onclick = function (){
console.log(this) //(this指向box)
}
6、构造函数中this -> 调用该方法的实例对象
<button class="btn">按钮</button>
let btn = document.querySelector('.btn')
function Person(name){
this.name = name
this.say = function(){
console.log('构造函数中this ',this) //(this指向Person)
}
}
7、原型方法中中this -> 调用该方法的实例对象
Person.prototype.playGame = function(){
console.log('原型方法中this ',this) //(this指向Person)
let _this = this
btn.onclick = function(){
console.log('btn this ',_this.name)
}
}
let p1 = new Person('Jack')
p1.say()
p1.playGame()
let p2 = new Person('Rose')
二、call 和 apply 和 bind
1、call
语法:函数名.call(要改变的this指向对象,参数列表)
var obj = {
name : 'jack',
age:23
}
function fn(x,y,z){
console.log(x,y,z)
console.log(this) //this->window
}
fn(1,2) //函数内部的this指向window
fn.call(obj,1,2) //函数内部的this指向obj这个对象
2、apply
语法:函数名.apply(this指向的对象,[参数1,参数2…])
fn(1,2,5) //函数内部的this指向window
fn.apply(obj,[1,2,5]) //函数内部的this指向obj这个对象
3、bind
bind方法是附加在函数调用后面使用,可以忽略函数本身的this指向
语法:var newFn = 函数名.bind(要改变的this指向);newFn(传递参数)
var newFn = fn.bind(obj)
fn(2,3,4) //函数内部的this指向window
newFn(2,3,4) //函数执行的是一个和fn一模一样的函数,只不过里面的this指向改成了obj
二、正则表达式
-
正则表达式,又名 “规则表达式”
-
由我们自己来书写 “规则”,专门用来检测 字符串 是否符合 “规则” 使用的
//通过正则表达式去完成 正则里面d表示字母 \d表示数字0-9 //+ 连续进行匹配 //g 表示全局匹配 指的是整个字符串 var res = str.match(/\d+/g); console.log(res); alert('用户名太受欢迎,请重新换一个'); //连接符 [1-9] [a-z] [A-Z] [1-9a-zA-Z] //修饰符 g 继承正则匹配,全文搜索,直到结束为止, 默认,匹配到第一个结束 i: 忽略大小写,默认大小写敏感
正则的作用是描述字符的规则,检查字符存不存在有没有问题 正则构造函数方式 创建了一个检查某个字符串里面有没有a这个字符的规则 使用正则提供的test()方法检查,如果有返回true 没有返回false var str = 'b'; var reg = new RegExp('b', i); console.log(typeof reg); 检查str这个字符串里面有没有a这个字符 var res = reg.test(str); console.log(res); 字面量 数组 [] 对象 {} 正则// 修饰符 i 忽略大小写 修饰符 g 全局匹配 var str = 'A'; var reg = /a/i; var res = reg.test(str); console.log(res);
三、元字符
1、\d 有一个数字(只要有一个数字就满足条件)
var str = 'abc123'
var reg = /\d/
var res = reg.test(str)
console.log(res)
2、\D 有一个非数字
var str = '123'
var reg = /\D/
var res = reg.test(str)
console.log(res)
3、\s 有一个空白符,如空格,换行符,制表符等
var str = '1a b c 23'
var reg = /\s/
var res = reg.test(str)
console.log(res)
4、\S 有一个非空白符的字符
var str = ' '
var reg = /\S/
var res = reg.test(str)
console.log(res)
5、\w 有一个数字或者字母或者下划线
var str = '1a b c 23'
var reg = /\w/
var res = reg.test(str)
console.log(res)
6、\W 有一个非数字或者字母或者下划线
var str = '1a b c 23'
var reg = /\W/
var res = reg.test(str)
console.log(res)
7、. 有一个除了换行以外的其他字符
var str = '\n'
var reg = /./
var res = reg.test(str)
console.log(res)
四、限定符
限定符就是用来限定元字符出现的次数
1、* 表示有一个数字出现 0 - 正无穷次
var str = 'abc'
var reg = /\d*/
var res = reg.test(str)
console.log(res)
2、+ 出现 1 - 正无穷次 至少有一次
var str = '123a321bc'
var reg = /\d+/
var res = reg.test(str)
console.log(res)
console.log(reg.exec(str)); //至少有一个 exec()可以返回匹配到的个数,返回的是一个数组
3、? 出现 0 - 1 次 最多出现一次(看的单个,1,2,3只有有一个出现了0-1次,都是true)
var str = '123abc321'
var reg = /\d?/
var res = reg.test(str)
console.log(res)
4、{n} 出现 n 次(只要有出现3次的都为true)
var str = '123456abc'
var reg = /\d{3}/
var res = reg.test(str)
console.log(res)
5、{n,} 出现 n - 正无穷次
var str = 'a123456bc'
var reg = /\d{3,}/
var res = reg.test(str)
console.log(res)
6、{n,m} 出现 n - m 次
var str = 'abc1234'
var reg = /\d{2,3}/
var res = reg.test(str)
console.log(res)
五、边界符(量词)
^ 以 … 开头
$ 以 … 结尾
var str = '123'
var reg = /^\d{2}$/ // 以数字开头以数字结尾 总共出现两次
var res = reg.test(str)
console.log(res)
1、| 占位或 || 逻辑或
2、() 把一堆东西当成一个整体
var str = '1234'
var reg = /^(\d|\s)$/ // 以一个数字或者一个空格开头并且结尾 总共出现一次
var res = reg.test(str)
console.log(res)
3、[] 里面的东西任选一个
4、- 至 到
var str = 'a123'
var reg = /^[0-9a-zA-Z_]$/ //0-9a-zA-Z_相当于\w 这个字符串总共长度就只有一个()
var res = reg.test(str)
console.log(res) (false)
5、\ 转义符
本身没有特殊函数的字符加上 \ 就有了特殊含义
本身有特殊含义的字符 加上 \ 就没有了特殊含义
6、[^] 非
var str = ' '
var reg = /^[^0-9]$/ // 以一个非数字开头并且结尾 总共就一位
var res = reg.test(str)
console.log(res) (true)
六、验证0-255数字
// 0 - 255
// 一位数
// 0 - 9
// 二位数
// 第一位 1 - 9 第二位 0 - 9
// 三位数
// 第一位 1 第二位 0 - 9 第三位 0 - 9
// 第一位 2 第二位 0 - 4 第三位 0 - 9
// 第二位 5 第三位 0 - 5
var reg = /^([0-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])$/
var str = '256'
var res = reg.test(str)
console.log(res)
七、正则的方法
1、test() 是用来检测字符串是否符合我们正则的标准 有返回true
2、exec() 是把字符串中符合条件的内容捕获出来 有返回数组
返回值: 把字符串中符合正则要求的第一项以及一些其他信息,以数组的形式返回
八、正则标识符
1、g 全局匹配
2、i 忽略大小写
九、配合正则使用的字符串的方法
1、replace() //是将字符串中满足正则条件的字符串替换掉
var str = 'dsSMdkmsdaSMkdsjafSMdksadSM'
var res = str.replace(/SM/g,'**')
console.log(res)
2、search() //找到字符串中符合正则条件的内容返回
var str = 'dsada123sdas432dsad'
var reg = /\d{3}/
var res = str.search(reg)
console.log(res)
3、match() //把所有匹配到的字符放到一个数组里面返回
var str = '123asd435dsa434fsdg656gdfg657'
var reg = /\d{3}/g
var res = str.match(reg)
console.log(res)