成为前端牛马第十二天 —— JS基础第五部分

最新推荐文章于 2024-10-02 00:07:14 发布

明先生OvO

最新推荐文章于 2024-10-02 00:07:14 发布

阅读量199

点赞数 4

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_67963390/article/details/140854365

版权

一. 面向对象三属性

继承性：子构造函数可以继承父构造函数的属性与方法

多态性：同一个对象可以有不同的表现形式。

封装性：把客观存在的数据添加到对象中。

function Animals(name, color) {
        this.name = name;
        this.color = color;
        console.log(this);
      }
      Animals.prototype.eatFood = function () {
        console.log(`${this.name}+${this.color}`);
      };

      /* 利用this指向的改变进行继承 */
      function Cat(name, color) {
        //这里进行父构造函数的this指向改变并调用，使子构造函数的元素继承于父，生成对象时也会通过父构造函数进行生成
        Animals.apply(this, [name, color]); //this指向Cat
      }
      Cat.prototype.eatFood = Animals.prototype.eatFood;
        //子类也可以创建自己的方法
      Cat.prototype.changeName = function (name) {
        this.name = name;
      };

      let cat = new Cat("西八", "blue");
      console.log(cat);
      cat.changeName("辛巴");
      console.log(cat);

      let dog = new Animals("西八", "blue"); //this指向Animals
      console.log(dog);

二. 正则表达式

基本使用：先去问度娘，没看错，确实是先去问度娘OvO，然后再根据自己的需要进行改造

// 正则表达式 一组用于匹配字符串或文本格式的特殊代码
      /\d/; //表示数字字符

      /* 基本语法 */
      //1.简单类 允许多一个，不能少一个
      let url = "https://www.baidu.com";
      let rule = /https/;
      console.log(rule.test(url)); //判断是否符合格式，返回布尔值

      //2.预定义类 \转义字符
      console.log(/\d/.test(2024)); //匹配数字字符，有数字就是true

      console.log(/\D/.test("a")); //匹配非数字字符，只要有非数字字符就是true
      console.log(/\D/.test("123a")); //true

      console.log(/\s/.test("123 abc")); //出现空格就为true
      console.log(/\S/.test("123abe")); //没有空格就为true

      console.log(/\w/.test("!a")); //匹配数字,字母, _ , 出现为true

      //3.范围类
      console.log(/[1-9]/.test("100")); //出现了指定字符就为true
      console.log(/[A_Z]/.test("k"));

      //4.组合类
      console.log(/[0-9a-zA-Z]/.test("1ssjgf34")); //组合匹配

      //5.反向类
      console.log(/[^abc]/.test("a"));
      console.log(/[^abc]/.test("abc"));
      console.log(/[^abc]/.test("a123")); //没有abc整个字符就为true

      //6.边界语法
      console.log(/^https/.test(url)); //匹配是否以xxx开头
      console.log(/\.com$/.test(url)); //是否以xxx结束
      //注意： . 表示任意字符，要通过转义才能表示.  \.
      console.log(/\.(com|jpg|png)/); //组合式写法
      console.log(/^hello world$/.test("hello world")); //要一模一样才行

      //7.量词 {n}
      console.log(/^a{3}$/.test("aaa")); //要符合次数
      console.log(/^a{1,3}$/.test("a")); //表示要出现多少次

      //特殊符号
      console.log(/^a?$/.test("a")); //？表示0次或者1次
      console.log(/^a*$/.test("a")); //*表示0次或者n次

      // 四） 其他
      // /正则表达式/g        // 表示匹配所有字符串中所有字符
      // /正则表达式/i        // 表示忽略字符串中字母的大小写

      // 示例：
      var text = "2024年10月01号";
      // 要求：提取文本中的数字字符
      var regExp = /(\d{4}).(\d{2}).(\d{2})./;
      var result = regExp.exec(text);
      console.log(result);
      console.log(result[1]);
      console.log(result[2]);
      console.log(result[3]);

练习

提取歌词

将字符串中的歌词提取展示到页面上

编码思路：将字符串以\n进行切割形成数组，在数组内进行正则匹配并通过.exec提取文字，最后渲染到页面即可。

补充：正则表达式的.exec方法会将传入的字符进行匹配后，返回数组，数组元素角色匹配的值，最后的元素角色剩下没有被匹配到的字符。

<script>
      let str =
        "[00:00.00] 作词 : 火火\n[00:01.00] 作曲 : Kim Baksa\n[00:02.00] 编曲 : KIM SEUNG HYUN\n[00:03.00] 混音 : Siwin/Neve lee\n[00:04.00] 企划 : Airyx/Kurs1\n[00:05.00] 推广 : 高鹏霞/Aya\n[00:06.00] 统筹 : 王梦晨\n[00:07.00] 出品人 : 黄俊\n[00:08.00] 音乐发行公司（OP/SP） : 千易盟（IONE）\n[00:09.00] 出品 : 网易·云上\n[00:18.84]爱上你总会流言蜚蜚\n[00:23.79]听说你对待情像马戏\n[00:31.14]开心过便失忆\n[00:34.74]欣赏过便唾弃\n[00:38.91]爱你同时亦要憎自己\n[00:47.37]仿似悬崖上恋爱\n[00:51.63]其实有多精彩\n[00:54.93]全凭自欺欺骗我赢得到爱\n[00:58.08]危墙下的爱\n[01:04.98]承受太多悲哀\n[01:09.33]我恨我应该躲开\n[01:19.11]我厌弃听这是是非非\n[01:24.51]到最尾决定盲目爱你\n[01:30.24]应该我是该死\n[01:34.14]不可以没有你\n[01:37.74]流言替你尽力倒转黑白\n[01:44.82]跟你悬崖上恋爱\n[01:48.60]其实有多精彩\n[01:50.76]全凭自欺欺骗我赢得到爱\n[01:53.94]危墙下的爱\n[02:00.87]承受太多悲哀\n[02:05.22]我恨我应该放开\n[02:14.37]若是错爱我不敢揭开\n[02:18.39]残酷应该\n[02:22.98]流泪应该\n[02:25.11]苦涩无味地恋爱\n[02:45.00]难道有天花开\n[02:48.48]埋没自尊心这过程可有爱\n[02:55.80]流言下的爱\n[02:58.23]前面太多的比赛\n[03:02.70]注定要分开\n";
      let regExp = /\[(\d{2}):(\d{2}).(\d{2})\](.{1,})/;
      let strHtml = str
        .split("\n")
        .map((item) => {
          if (regExp.test(item)) {
            // return regExp.exec(item)[4];
            return `
                    <li>${regExp.exec(item)[4]}</li>
            `;
          }
          //   console.log(regExp.exec(item)[4]);
        })
        .join("");
      //   console.log(strHtml);
      document.querySelector(".list").innerHTML = strHtml;