JS------面向对象与正则

最新推荐文章于 2022-12-14 22:30:27 发布

XCharazz

最新推荐文章于 2022-12-14 22:30:27 发布

阅读量290

点赞数 1

分类专栏： web学习知识点文章标签： js

本文链接：https://blog.csdn.net/zxq144/article/details/112428054

版权

web学习知识点专栏收录该内容

36 篇文章 1 订阅

订阅专栏

面向对象与正则

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));

XCharazz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS------面向对象与正则

面向对象与正则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(){
复制链接

扫一扫