web学习笔记(三十四)

目录

1.面向对象的特征

2.面向对象的继承方式

3.正则表达式

3.1如何创建正则表达式

3.2边界符

[3.2[ ]方括号](#3.2[ ]方括号)

3.3正则表达式中相关的方法汇总

3.4常用元字符含义

3.5常用量词


1.面向对象的特征

  1. 封装性:就像是把东西放在一个密封的盒子里一样,只让外部使用者通过指定的接口来访问盒子里的东西,而不需要知道盒子里具体是怎么实现的。这样做可以保护内部数据,让代码更容易维护和重用。
  2. 继承性:就像家族中的父子关系一样,子对象可以继承父对象的特性。这样可以避免重复编写相似的代码,并且可以对父对象的行为进行修改或扩展。
  3. 多态性:就像一个词可以有多种不同的含义一样,同一个方法可以在不同的对象上产生不同的行为。这样可以让代码更有弹性,适应不同的情况。

2.面向对象的继承方式

(1)原型链的方式来实现继承

子构造函数.prototype=Object.create(父构造函数.prototype);

子构造函数.prototype.constructor=子构造函数名;

(2)借用构造函数

父构造函数.call(this,实参1,实参1,...);

(3)组合继承

父构造函数.call(this,实参1,实参1,...);

子构造函数.prototype=Object.create(父构造函数.prototype);

子构造函数.prototype.constructor=子构造函数名;

(4)寄生式组合继承

在寄生式组合继承中,我们通过借用构造函数来继承属性,并通过原型链的混合形式来继承方法。这样可以避免组合继承中调用两次父类构造函数的问题,提高性能和代码复用性

javascript 复制代码
// 定义父类
function Animal(name) {
    this.name = name;
}

Animal.prototype.sayName = function() {
    console.log("My name is " + this.name);
};

// 定义子类
function Dog(name, breed) {
    Animal.call(this, name); // 借用构造函数继承属性
    this.breed = breed;
}

// 寄生式继承原型链
function inheritPrototype(subType, superType) {
    var prototype = Object.create(superType.prototype); // 创建父类原型的副本
    prototype.constructor = subType; // 修正constructor指向
    subType.prototype = prototype; // 将子类的原型指向父类的原型副本
}

inheritPrototype(Dog, Animal); // 继承

Dog.prototype.sayBreed = function() {
    console.log("I am a " + this.breed);
};

// 创建实例
var myDog = new Dog("Buddy", "Golden Retriever");
myDog.sayName(); // 输出:My name is Buddy
myDog.sayBreed(); // 输出:I am a Golden Retriever

(5)寄生式继承

在寄生式继承中,我们会创建一个用于封装和增强已有对象的函数,然后返回这个新对象。这个函数会向对象添加额外的功能,而不会直接修改原有对象。

javascript 复制代码
// 原始对象
var originalCar = {
    make: "Toyota",
    model: "Corolla",
    year: 2020,
    displayInfo: function() {
        console.log(this.year + " " + this.make + " " + this.model);
    }
};

// 寄生式继承的函数
function createNewCar(original) {
    var newCar = Object.create(original); // 创建原对象的副本

    // 增强对象:添加新属性
    newCar.color = "blue";

    // 增强对象:添加新方法
    newCar.displayColor = function() {
        console.log("The color of the car is " + this.color);
    };

    return newCar; // 返回增强后的对象
}

// 创建新的增强对象
var myCar = createNewCar(originalCar);
myCar.displayInfo(); // 输出:2020 Toyota Corolla
myCar.displayColor(); // 输出:The color of the car is blue

3.正则表达式

正则表达式就是一种用来匹配字符串中字符组合的模式,正则表达式也是一个对象那个。在JavaScript中主要于在表单验证。在学习过程中我们并不需要记忆大量的正则表达式,只需要记忆大部分字符的含义即可,在后续使用到正则表达式时可以直接进行搜索,然后拿别人写好的来用即可。

3.1如何创建正则表达式

有两种创建正则表达式的方式,推荐使用第二种。修饰符只有三个:i(不区分大小写)g(全局查找)m(多行查找),修饰符是不分顺序的,可以写一个,也可以写多个。

(1)格式:var patt=new RegExp("规则",'修饰符');

注意:括号内的正则表达式规则和修饰符都需要加上引号,而且在使用到类似于\d的字符时,需要进行转义写为\\d。

(2)格式:字面量创建 var parr=/规则/修饰符

注意:此时不管是不是字符串,都不需要加引号,也不需要进行转义

3.2边界符

在正则表达式中,边界符通常用来提示字符所处的位置,大部分情况下我们会将^和$搭配来使用,比较精确。

|-----|-----------------|
| 边界符 | 说明 |
| ^ | 表示匹配行首的文本(以谁开始) |
| $ | 表示匹配行尾的文本(以谁结束) |

3.2[ ]方括号

方括号内可以写入一个或者多个字符,也可以写入一个区间,然后查找时只需要包括其中一个就返回true。

|------------------------------------------------------------------------------------|-------------------------------------------------------------|
| 表达式 | 描述 |
| [abc] | 查找方括号之间的任何字符。(只要包含有a 或者 包含有b 或者包含有c 都返回为true) |
| [^abc] | 查找任何不在方括号之间的字符。(方括号内部加上 ^ 表示取反,只要包含方括号内的字符,都返回 false 。) |
| [^[abc]](https://www.runoob.com/jsref/jsref-regexp-charset-not.html "^[abc]") | 查找只包含abc其中一个字母开头并结尾的字符( 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true ) |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。(方括号内部加上 ^ 表示取反,只要包含方括号内的字符,都返回 false 。) |
| (red|blue|green) | 查找任何指定的选项。 |

3.3正则表达式中相关的方法汇总

|-----------|----------------------------|
| test() | 检验字符串中指定的值,返回true或false |
| exec() | 检验字符串中指定的值。返回找到的值,并确定其位置 |
| search() | 检索与正则表达式相匹配的值 |
| match() | 找到一个或多个正则表达式的匹配,返回是数组或null |
| replace() | 替换与正则表达式匹配的子串 |
| split() | 把字符串分割为字符串数组 |

3.4常用元字符含义

|-------|-----------------------------------|
| 元字符 | 描述 |
| . | 查找除了换行符和行结束符 |
| \d | 查找数字,相当于[0-9] |
| \D | 查找非数字字符。[^0-9] |
| \w | 查找数字、字母及下划线 [0-9][A-z]_ |
| \W | 查找非单词字符,就是\w取反 |
| \s | 查找空白字符(空格符、回车符、换行符、制表符、垂直换行符、换页符) |
| \S | 查找非空白字符。 |

3.5常用量词

|-------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 量词 | 描述 |
| n+ | 匹配任何包含至少一个 n 的字符串。(重复1次或更多次) 例如,/a+/ 匹配 "candy" 中的 "a","caaaaaaandy" 中所有的 "a"。 |
| n* | 匹配任何包含零个或多个 n 的字符串。(|重复0次或更多次 ) 例如,/bo*/ 匹配 "A ghost booooed" 中的 "boooo","A bird warbled" 中的 "b",但是不匹配 "A goat grunted"。 |
| n? | 匹配任何包含零个或一个 n 的字符串。(重复0次或1次) 例如,/e?le?/ 匹配 "angel" 中的 "el","angle" 中的 "le"。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。(重复n次) 例如,/a{2}/ 不匹配 "candy," 中的 "a",但是匹配 "caandy," 中的两个 "a",且匹配 "caaandy." 中的前两个 "a"。 |
| n{X,} | X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。(重复n次或更多次) 例如,/a{2,}/ 不匹配 "candy" 中的 "a",但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。 |
| n{X,Y} | X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。(重复n到m次) 例如,/a{1,3}/ 不匹配 "cndy",匹配 "candy," 中的 "a","caandy," 中的两个 "a",匹配 "caaaaaaandy" 中的前面三个 "a"。注意,当匹配 "caaaaaaandy" 时,即使原始字符串拥有更多的 "a",匹配项也是 "aaa"。 |
| [n](https://www.runoob.com/jsref/jsref-regexp-ndollar.html "n") | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |

相关推荐
m0_748247803 分钟前
Flutter Intl包使用指南:实现国际化和本地化
前端·javascript·flutter
biter00883 分钟前
opencv(15) OpenCV背景减除器(Background Subtractors)学习
人工智能·opencv·学习
车轮滚滚__14 分钟前
uniapp对接unipush 1.0 ios/android
笔记
ZJ_.30 分钟前
WPSJS:让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
Code哈哈笑1 小时前
【Java 学习】深度剖析Java多态:从向上转型到向下转型,解锁动态绑定的奥秘,让代码更优雅灵活
java·开发语言·学习
joan_851 小时前
layui表格templet图片渲染--模板字符串和字符串拼接
前端·javascript·layui
还是大剑师兰特1 小时前
什么是尾调用,使用尾调用有什么好处?
javascript·大剑师·尾调用
Watermelo6172 小时前
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
QQ同步助手2 小时前
如何正确使用人工智能:开启智慧学习与创新之旅
人工智能·学习·百度
流浪的小新2 小时前
【AI】人工智能、LLM学习资源汇总
人工智能·学习