初识JavaScript （十八）
1 函数对象的方法-call-apply-bind
重点：
this:关键字：代表了当前对象。
a：在事件使用。代表了当前正在触发执行事件函数的元素对象。
b：全局定义的函数中，或者全局作用域下的this代表了当前window对象。
如下的的代码中，两个对象的属性和功能都是不共享的，属性不共享是我们希望的，如果功能一样其实可以共享，实现内存的节约。
如何让一个对象的功能共享给其他对象。
实现的思路：让某一个对象的功能借用给其他的对象，通过隐式修改功能内的this 来实现方法的借用。
函数对象的三个方法的介绍：call、apply、bind
1:使用call 方法实现 方法的借用。
语法： 函数对象.call(受借者，方法的剩余的参数…)
受借者: 借用函数对象的对象。
返回：是函数对象的返回值。
2: 使用apply 方法实现方法的借用。
语法： 函数对象。apply(受借者，[方法其他的参数])；
和call方法的区别就是，第二个参数的实参要放到一个数组中。
返回：是函数对象的返回值。
3：使用bind，可以实现以某一个函数对象为原型，生成一个新的函数对象，该函数对象中的this可以指定。
语法： 函数对象.bind(指定的this对象)
返回：返回一个新的函数。这个函数是实参对象绑定个函数。直接调用返回的函数对象。
总结：
1：call、apply、bind、三个函数是js函数对象内置的函数。
2：三个函数的目的都是为了扩展现有函数的功能，可以将现有函数的功能扩展到其他的对象上去。
3：call、apply 两个方法是借用方法，不会产生新的对象。bind会产生的新的函数对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var sun = {
name: "孙宇航",
age: 21,
hobbies: ["迟到", "学习", "游戏"],
score: 80,
/*study: function () {
//每次调用study方法，都会导致对象的分数自增一。
console.log (`${this.name}努力学习，成绩从${this.score}提升到了${++this.score}`);
}*/
};
// sun.study ();
var dan = {
name: "张梦丹",
age: 17,
hobbies: ["读盗墓笔记","歌曲"],
score:85,
study: function () {
//每次调用study方法，都会导致对象的分数自增一。
console.log (`${this.name}努力学习，成绩从${this.score}提升到了${++this.score}`);
},
max:function (num1,num2) {
return num1 > num2 ? num1 : num2;
}
};
dan.study();
//两个功能一模一样，是否是同一个对象呢？
console.log (sun.study === dan.study);
//call 实现方法的借用调用。
dan.study.call(sun);
var max = dan.max.call(sun,1,6);
console.log (max);
dan.study.apply(sun);
console.log (dan.max.apply(sun,[1,8]))
//bind 生成新的函数。
var newStudy = dan.study.bind(sun);
console.log (newStudy);
newStudy();
var newMax = dan.max.bind(sun);
console.log (newMax(1,9))
</script>
</body>
</html>
2 void在超链接中的应用
需求：单价超链接，执行一个函数。
上述的练习：即使href超链接是空的内容，点击的时候也会刷新页面。
void：在js中是一个关键字，在其他的语言中通常是用来定义函数的。代表函数没有返回值。
void是空的意思。在a标签中使用 void 可以实现阻断a标签的默认行为
语法：javascript : void(0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="" onclick="test()">点我一下</a>
<!--当点击超链接的时候，执行js代码 void(0) 意味着什么都不做。-->
<a href="javascript:void(0)" onclick="test()">再点我一下</a>
<script>
function test() {
console.log ("hello");
}
</script>
</body>
</html>
3 引入正则表达式
练习：页面中定义个输入框，接收一个qq号。检测qq号是否合法。
qq号的合法的要求：
1：纯数字
2：个数：[5,13]
3: 第一个不能是0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
QQ：<input type="text"><span style="color: red"></span>
<script>
var qqInput = document.querySelector ("input");
var span = document.querySelector ("span");
qqInput.oninput = function () {
var result = checkeRegexpQQ (qqInput.value);
span.innerHTML = result ? "√" : "×";
};
//检测qq是否合法的方法
function checkeQQ(qqStr) {
const MIN_LEN = 5;
const MAX_LEN = 13;
const LEN = qqStr.length;
//长度
if (LEN < MIN_LEN)
return false;
if (LEN > MAX_LEN)
return false;
//判断纯数字
for (let i = 0; i < LEN; i++) {
var ch = qqStr.charAt (i);
if (ch < "0")
return false;
if (ch > "9")
return false;
}
//第一个数字不是0
if (qqStr.charAt (0) == "0")
return false;
return true;
}
function checkeRegexpQQ(qqStr) {
var reg = /^[1-9]\d{4,12}$/;
return reg.test(qqStr);
}
</script>
</body>
</html>
4 正则的介绍
正则表达式：Regular Expression。
或者成为：规范式。规则式。
js：RegExp
java：regex
概念：正则表达式是一个具有特殊含义的字符的序列。
正则的作用：
1：用来做字符串的整串的匹配的。
用来检测字符串是否满足正则表达式所规定的格式的。
2：子串的查找，在一个字符串中，用来查找字符串中满足某种正则规定的格式的子串。
如何学习：
学习正则表达式中的哪些特殊符号的含义。
5 正则的创建
正则表达式对象的创建：
1：var 正则变量 = /正则的内容/[修饰符];
2: 构造函数。
var 正则变量 = new RegExp(“正则的内容”,“修饰符”);
3：正则表达式的实例方法。test(测试的字符串)
语法： 正则对象.test(str)
测试 str 是否满足 当前正则对象规定的模式的。如果满足，返回true，否则返回false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//1
var reg = /^a+$/i;//1-n个a
console.log (reg.test(""));//false
console.log (reg.test("a"));//true
console.log (reg.test("aaaaaaaaaaAAAaaaaaaaaaaaa"));//true
console.log (reg.test("ab"));//false
//2
var reg1 = new RegExp("^\\w*$","i");
console.log (reg1.test(""));//true
console.log (reg1.test("ABCDaaa"));//true
console.log (reg1.test("你好"));//false
</script>
</body>
</html>
6 正则的构成
正则表达式的构成：
1：普通字符：a-z A-Z 0-9 _
2: 特殊字符：具有特殊意义的符号（元字符）。
1：定位符：用来规定字符串中位置的符号。
^: 规定以xx开头 ^在正则的起始位置，约定了以它后面的内容开始。
$: 规定以xx结尾
在
正
则
的
结
尾
位
置
，
约
定
了
以
它
前
面
的
内
容
结
束
。
注
意
：
如
果
希
望
是
整
串
的
匹
配
那
么
必
须
以
开
头
，
以
在正则的结尾位置，约定了以它前面的内容结束。 注意：如果希望是整串的匹配那么必须以^开头，以
在正则的结尾位置，约定了以它前面的内容结束。注意：如果希望是整串的匹配那么必须以开头，以结尾。
如果不添加上述的约束，就是子串的匹配了。
如果想进行子串的查找，就不要添加开头和结尾的特殊符号了。
2：数量符：是用来约束数量符前面的字符的个数的。
? : 代表了前面的字符出现 0-1次。
* : 代表前面的字符出现0-n次。
+ : 代表前面的字符出现1-n次。
{m,n}:代表前面的字符出现m-n次。m和n都包含。
{n}:代表前面的字符出现n次。
{n,}:代表前面的字符出现 n - Infinty 次
3：字符集：[] 中括号中的字符的集合中的某一个字符。
[yangheli]:中括号中的字符中的某一个字符。
[a-z]: 26个小写字符集中的某一个字符。
[A-Z]: 26个大写字符集中的某一个字符。
[a-zA-Z]:52个大小写字符集中的某一个字符。
[0-9]:10个阿拉伯数字的集合中的一个字符。
[a-zA-Z0-9_]:标识符的所有的字符的集合中的某一个字符。
[^a-z]：取反的符号。除了小写字符之外的所有的其他的字符的集合中的一个。
4：预定义字符集：
\d：等价于[0-9]
\D: 等价于[^0-9]
\w: 等价于[a-zA-Z0-9_]
\W：等价于[^a-zA-Z0-9_]
\s: 等价于空白字符的集合
\S: 对\s 取反。所有的非空白字符的集合。
5: 特殊符号
/ :具有特殊意义的符号。如果希望在正则中表示一个/ 符号。必须进行转义。
/: 代表了符号 /
点： . : 在正则中的意思是任意字符。
如果希望去匹配一个点字符，而不是任意字符，那么需要转义。
. 代表了 点字符。
中文字符的区间[\u4e00-\u9fa5]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//定位符
var reg = /^\d+z$/;
console.log (reg.test("123"));
console.log (reg.test("112323z"));
//数量词
var reg = /^ab?$/;
console.log (reg.test("a"));//true
console.log (reg.test("ab"));//true
console.log (reg.test("abb"));//false
console.log ("----------------");
var reg = /^ab*$/;
console.log (reg.test("a"));//true
console.log (reg.test("ab"));//true
console.log (reg.test("abbbbbbbbbbbbbbbb"));//true
console.log (reg.test("abbbbbbbbcbbbbbbbbb"));//false
console.log ("----------------")
var reg = /^a+b+$/;
console.log (reg.test("a"));//false
console.log (reg.test("ab"));//true
console.log (reg.test("abbbbbbbbbbbbbbbb"));//true
console.log (reg.test("abbbbbbbbcbbbbbbbbb"));//false
console.log (reg.test("aaabbbbaaabbbaaabbb"));//false
console.log ("----------------")
var reg = /^a{1,3}b*$/;
console.log (reg.test("a"));//true
console.log (reg.test("ab"));//true
console.log (reg.test("aaaaabbbbbbbbbbbbbbbb"));//false
console.log (reg.test("aaa"));//true
console.log ("----------------")
var reg = /^a{1,}b*$/;
console.log (reg.test("a"));//true
console.log (reg.test("ab"));//true
console.log (reg.test("aaaaabbbbbbbbbbbbbbbb"));//true
console.log (reg.test("aaa"));//true
console.log ("----------------")
//字符集
var reg = /^[yangheli]*$/;
console.log (reg.test("yanghelililili"));//true
console.log (reg.test("yyyyyyyyyyyyyyyy"));//true
console.log ("----------------")
var reg = /^[a-f]*$/;
console.log (reg.test("aabbbccddeeff"));//true
console.log (reg.test(""));//true
console.log ("----------------")
var reg = /^[^a-f]*$/;
console.log (reg.test("aabbbccddeeff"));//false
console.log (reg.test(""));//true
console.log (reg.test("wrtyAAA_ujkg"));//true
console.log ("----------------")
console.log ("预定义字符集");
var reg = /^\d*$/;
console.log (reg.test("3433253464736436"));//true
console.log (reg.test(""));//true
console.log (reg.test("234354r5345"));//false
var reg = /^\s*$/;
console.log (reg.test(" "));//true
console.log ("特殊字符");
var reg = /^\/*$/;
console.log (reg.test("//"));//true
var reg = /^.*$/;
console.log (reg.test("fl23j4lk3nfljeworj2l你好"));
//写一个正则，匹配一个ip地址。192.168.41.241
var reg = /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/;
console.log (reg.test("192.168.41.241"));//true
console.log (String.fromCharCode(0x4e00));//一
console.log (String.fromCharCode(0x9fa5));//龥
//写一个正则，来匹配2-3个子的正则。
var reg = /^[\u4e00-\u9fa5]{2,3}$/;
console.log (reg.test("小刚"));//true
console.log (reg.test("a小"));//false
console.log (reg.test("赵小刚"));//true
console.log (reg.test("尼古拉斯赵四"));//false
//写一个邮箱的正则表达式。
var reg = /^[\w\.]+@\w+\.\w+$/;
console.log (reg.test("cjcdjk@126.com"));
</script>
</body>
</html>
9 split方法
支持正则作为实参的方法：split
注意：子串的匹配切割，所以不要加 ^ 和 $.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var str = "192.168.1.1";
//使用原有的方式切割
console.log (str.split("."));
//使用正则切割
console.log (str.split(/\./));
str = "kfjk234lwe345jrl345kjewlk54fjkl0jf";
console.log (str.split(/\d+/));//["kfjk", "lwe", "jrl", "kjewlk", "fjkl", "jf"]
str = "js js js js";
console.log (str.split(/\s+/));
</script>
</body>
</html>
10 replace方法
支持正则的方法：replace()
使用正则去当前字符串对象中进行子串的匹配。将匹配到的子串替换为指定的内容。
i：修饰符：代表匹配的时候忽略大小写。ignore case
g: 修饰符：全局搜索 global
修饰符是可选择的。两个修饰符可以一起使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var str = "js java html css";
console.log (str.replace(/\s+/g,"-"));
</script>
</body>
</html>
11 match方法
支持正则的方法：match.
1:如果使用字符串作为实参，那么只能返回第一个匹配的子串的内容。
2：如果想找到当前字符串对象中的所有的匹配的内容，需要使用正则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var str = "helloworld";
console.log (str.match("o"));
console.log (str.match(/o/g));
var str = "he123ll123o345657wor75ld";
console.log (str.match(/\d+/g));
</script>
</body>
</html>
12 search方法
支持正则的方法：search
该方法类似于indexOf。返回搜索的子串的索引。不存在返回-1.
但是实参支持正则。
该方法的使用具有局限性。只能返回第一个匹配的内容的索引。
不能返回所有的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var str = "helloworld";
console.log (str.search("o"));//4
console.log (str.search(/o/g));
</script>
</body>
</html>
650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
