面向对象与正则
1.面向对象继承
1.1 原型链继承
原型链继承 :子类的原型对象 = 父类的实例对象
//1.父类构造函数
function Student(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.arr = [1,2,3];
}
Student.prototype.classId = "1116"
Student.prototype.study = function(){
console.log("good good study , day day sleep!");
}
//2.子类构造函数
function MiniStudent(){
this.play = function(){
console.log("玩王者荣耀");
}
}
//3.继承的操作 原型链继承 子类的原型对象 = 父类的实例对象
MiniStudent.prototype = new Student("小夏",6,"男");
//4.实例化对象
var mS = new MiniStudent();
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-luDj1XG6-1610261384443)(原型链继承.png)]
原型链:属性或方法的查找方式
//原型链:实例本身----》__proto__(prototype)---->父类的实例对象---->父类的__proto__(prototype)....... undefined
console.log(mS.name);
console.log(mS.classId);
原型链继承问题:
//缺点1:不能传参,每次创建出来都是一样的
var ms1 = new MiniStudent();
console.log(ms1.arr);
ms1.arr.push(4)
console.log(ms1.arr);
//缺点2:继承了引用数据类型一改全改
var ms2 = new MiniStudent();
console.log(ms2.arr);
1.2 对象冒充继承
//2.子类构造函数
function MiniStudent(name,age,sex){
//3.对象冒充继承
Student.call(this,name,age,sex);
this.play = function(){
console.log("玩王者荣耀");
}
}
//4.实例化对象
var s1 = new MiniStudent("如花","6","女");
console.log(s1);
s1.arr.push(4);//[1,2,3,4]
优点:可以传参,引用数据类型不会再一改全改
缺点:不能继承原型中的属性和方法
1.3 混合继承
混合继承:对象冒充继承+原型链继承
//1.父类构造函数
function Student(name,age,sex){
this.name = name;
this.age = age;
this.sex = sex;
this.arr = [1,2,3];
}
Student.prototype.classId = "1116"
Student.prototype.study = function(){
console.log("good good study , day day sleep!");
}
//2.子类构造函数
function MiniStudent(name,age,sex){
//3.对象冒充继承
Student.call(this,name,age,sex)
this.play = function(){
console.log("玩王者荣耀");
}
}
//混合继承 对象冒充(构造函数中属性和方法)+原型链继承(继承原型对象中属性和方法)
//4.原型链继承
MiniStudent.prototype = new Student("小明",3,"男");
//5.实例化对象
var ms1 = new MiniStudent("小郝",10,"女");
console.log(ms1);
优点:可以传参,引用数据类型不会再一改全改,可以继承父类原型中的属性和方法
缺点:创建了一个多余的父类实例
1.4 寄生式组合继承
//2.子类构造函数
function MiniStudent(name,age,sex){
//3.对象冒充继承
Student.call(this,name,age,sex)
this.play = function(){
console.log("玩王者荣耀");
}
}
//混合继承 对象冒充(构造函数中属性和方法)+原型链继承(继承原型对象中属性和方法)
//4.原型链继承 Object.create():以原型为基础创建对象
MiniStudent.prototype = Object.create(Student.prototype);
MiniStudent.prototype.constructor = MiniStudent;
//5.实例化对象
var ms1 = new MiniStudent("小郝",10,"女");
console.log(ms1);
优点:可以传参,引用数据类型不会再一改全改,可以继承父类原型中的属性和方法,不会创建多余的父类实例
-
创建方式
-
new操作符的作用?
-
原型、原型链?
-
继承方式?
2.正则
2.1 概念
正则对象:RegExp
正则表达式:对字符串进行检索的一种逻辑公式,根据字符串格式要求,先定义好的一种逻辑公式
2.2 正则表达式创建
2.2.1创建
//1.关键字new创建 new RegExp("检索的内容","修饰符ig")
var reg1 = new RegExp("o","ig");
console.log(reg1); // /o/gi
//2.字面量创建
var reg2 = /o/ig;
console.log(reg2); // /o/gi
var a = "web";
console.log(/a/); // /a/ 字面量里面的就是一个符号
console.log(new RegExp(a)); // /web/
2.2.2 修饰符
- g: global 执行一个全局的匹配
- i: ignore case 执行一个不区分大小写的匹配
//g: global 执行一个全局的匹配
var str = "今天学习明天学习后天学习";
var reg1 = /学习/;
var reg2 = /学习/g;
console.log(str.replace(reg1,"放假")); //今天放假明天学习后天学习
console.log(str.replace(reg2,"放假")); //今天放假明天放假后天放假
//i: ignore case 执行一个不区分大小写的匹配
var str = "she is boy,SHE is boy";
var reg3 = /she/g;
var reg4 = /she/gi;
console.log(str.replace(reg3,"he"));//he is boy,SHE is boy
console.log(str.replace(reg4,"he")); //he is boy,he is boy
2.2.3 检索方法
-
字符串检索方法
//字符串方法:charAt,charCodeAt,indexOf,lastIndexOf,slice,substring,substr,split, //toLowerCase,toUpperCase,trim,replace, //1.replace var str = "今天学习明天学习后天学习"; var reg1 = /学习/g; console.log(str.replace(reg1,"放假")); //今天放假明天放假后天放假 //2.split():分割 var str = "q1w2e3r4t5y6u7i"; var arr = str.split(/\d/); console.log(arr); // ["q", "w", "e", "r", "t", "y", "u", "i"] //3.search():出现返回对应的下标,没有出现返回-1 var index = str.search(/\d/); console.log(index); //1 //4.match(条件):挑选,挑满足条件的组成一个新的数组返回 var arr = str.match(/\d/g); console.log(arr); //["1", "2", "3", "4", "5", "6", "7"]
-
正则对象检索方法
//1.正则表达式.test(字符串):通过检测返回true,没有返回false var reg1 = /^1[3-9]\d{9}$/; var tel = "1311234567"; console.log(reg1.test(tel)); //false //2.正则表达式.exec(字符串):执行具体的匹配,匹配通过返回匹配到的内容,没有通过返回null var reg1 = /^1[3-9]\d{9}$/; var tel = "13112345678"; console.log(reg1.exec(tel)); //["13112345678", index: 0, input: "13112345678", groups: undefined] //惰性验证,从左往右验证,只要有一个满足条件就结束 reg2 = /\d/g; //默认每次都从头开始查找,g:从上一次查找结束的位置开始 var str = "aqew2er3tr545rt6"; console.log(reg2.exec(str)); //["2", index: 4] console.log(reg2.exec(str)); //["3", index: 7]
2.3 正则元字符
-
单个字符串
-
“.”:匹配除换行符以外的任意一位字符
// . : 匹配除换行符以外的任意字符 \n var str = "\nnihaoma\nimok"; var reg = /./; console.log(reg.exec(str)); //[n index:1] var str = "webtt1116";//web??1116 var reg = /web..1116/; console.log(reg.exec(str));//["webtt1116"]
-
[] : 匹配字符集中任意一位字符 数字:[0-9] 字母[a-z]
// []:匹配字符集中的任意一位字符 [@#$%&] [0-9][a-zA-Z] var str = "0hahahah!"; var reg = /[0-9A-Za-z]/g; console.log(reg.exec(str)); //0
-
[^] : 匹配除字符集中任意一位字符
// [^]:匹配除字符集中的任意一位字符 var reg = /[^a-z0-9]/; var str = "fsrww645#yry"; console.log(reg.exec(str)); //#
-
\d : 匹配数字
-
\D : 匹配非数字
//\d:匹配一位数字 \D:匹配一位非数字 var reg = /\d\d\d\d\d\d/; console.log(reg.exec("123")); //null
-
\w : 匹配数字、字母、下划线
-
\W : 匹配非数字、字母、下划线
//\w:匹配数字字母下划线 \W:匹配非数字字母下划线 //匹配账号 5位,数字、字母、下划线组成 var str = "txf_1" var reg = /\w\w\w\w\w/; console.log(reg.exec(str)); //["txf_1"]
-
\s : 匹配空格
-
\S : 匹配非空格
//\s:匹配空格 \S:匹配非空格 var str = " hello world! "; var reg = /\s/g; console.log(str.replace(reg,"")); //helloworld!
-
^a : 以。。开头
-
a$ : 以。。结尾
// ^: ^a:以a开头 $: a$ : 以a结尾 var str = "666666"; var reg = /^\d\d\d\d\d\d$/; console.log(reg.exec(str)); //"666666"
-
-
多个字符
- a? : 匹配前面的字符0次或1次
//? a?:匹配前面的字符0次或1次 var str = "https://www.baidu.com"; var reg = /https?:\/\/www.baidu.com/; //转义 console.log(reg.exec(str));
- a*:匹配前面的字符0次或多次
//* a*:匹配前面的字符0次或多次 var str = "https://www.baidu.com"; var reg = /https*:\/\/www.baidu.com/; console.log(reg.exec(str));
-
a+ : 匹配前面的字符至少一次
//+ a+ : 匹配前面的字符至少一次 var str = "https://www.163.com"; var reg = /^https?:\/\/www\.\w+\.com$/; console.log(reg.exec(str));
-
{n,m} : 匹配至少n,最多m次
//{n,m} : 匹配至少n,最多m次 //{n} : 匹配n次 var reg = /^1[3-9]\d{9}$/; //{n,} : 匹配至少n次 var str = "https://www.163.com"; var reg = /^https?:\/\/www\.\w+\.[a-zA-Z]{2,}$/; //{n,m} : 匹配至少n,最多m次 //匹配QQ,最少5位,最多11位 var reg = /^\d{5,11}$/
-
注意:量词不能重叠使用
//量词不能重叠使用 var reg = /a?*+/; console.log(reg);
-
分组()
//():分组 var str = "http://www.ujiuye.org" var reg = /(http|https):\/\/www\.\w+\.(com|cn|net|edu|org)/; console.log(reg.exec(str)); //["http://www.ujiuye.org", "http", "org"] console.log(RegExp.$1); //http console.log(RegExp.$2); //org var str = "hello world"; var reg = /(hello) (world)/; console.log(str.replace(reg,"$2 $1")); //world hello
-
或|
//|
//验证网址 com cn net edu org
var str = "http://www.ujiuye.org";
var reg = /^https?:\/\/www\.\w+\.(com|cn|net|edu|org)$/;
console.log(reg.exec(str)); //"http://www.ujiuye.org",
-
前缀
(?=) : 前瞻 正向肯定预查 (附加条件:后面必须是什么)
//(?=) : 前瞻 正向肯定预查 (附加条件:后面必须是什么) var str = "we4r3@5*"; //匹配数字,匹配@前面的数字 var reg = /\d(?=@)/; console.log(reg.exec(str)); //验证用户名 数字和字母组成 var user = "ewqew43eq"; //必须有字母 :(?=.*[a-zA-Z].*) //必须有数字:(?=.*[0-9].*) var reg = /(?=.*[a-zA-Z].*)(?=.*[0-9].*)^[a-z0-9A-Z]+$/; console.log(reg.exec(user));
ujiuye.org",
- 前缀
(?=) : 前瞻 正向肯定预查 (附加条件:后面必须是什么)
~~~js
//(?=) : 前瞻 正向肯定预查 (附加条件:后面必须是什么)
var str = "we4r3@5*"; //匹配数字,匹配@前面的数字
var reg = /\d(?=@)/;
console.log(reg.exec(str));
//验证用户名 数字和字母组成
var user = "ewqew43eq";
//必须有字母 :(?=.*[a-zA-Z].*)
//必须有数字:(?=.*[0-9].*)
var reg = /(?=.*[a-zA-Z].*)(?=.*[0-9].*)^[a-z0-9A-Z]+$/;
console.log(reg.exec(user));