初识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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值