JS 高级(一)RegExp、函数、重载、作用域和作用域链

简介: JS 高级(一)RegExp、函数、重载、作用域和作用域链

一、RegExp对象

       在 js 中,由于正则表达式语法与 js 的语法不相同,js 不认识正则表达式,所以需要对正则表达式进行翻译,RegExp 对象应运而生。


       RegExp 对象是专门在 js 程序中保存一条正则表达式的对象。它可将正则表达式语法翻译为 js语言认识的语法,从而让正则表达式能够与 js 一起运行,实现功能。


1. 创建正则表达式的方法


       标准:var reg=new RegExp("正则表达式","ig");


       简写:var reg=/正则表达式/ig;


       其中 i 代表 ignore,忽略大小写;g 代表 global,全部所有。举例:


<script>
    // 请用户输入消息内容
    var str = prompt("请输入消息内容:");
    // 定义正则表达式
    // var reg = new RegExp("[我卧][草操艹]"); //常规
    var reg = /[我卧][操草艹]/; //简写
    // 查找是否含有敏感词
    var result = str.search(reg);
    if (result != -1) {
      console.log("含有敏感词!");
    } else {
      console.log(`他说:${str}`);
    }
  </script>

2. RegExp对象提供的两个函数


(1)reg.test() 专门用于验证字符串的格式是否符合要求的函数。


      写法为 var 验证结果=正则表达式对象.test(要检查的字符串),需要注意的是 test() 默认只要在字符串中找到部分内容和正则匹配,就返回 true,而不要求必须从头到尾完整匹配。为了解决这个问题,需要在正则前加“^”(开头),后加"$"(结尾)。举例:


//手机号的验证
<script>
    // 输入手机号 
    var phone = prompt("请输入手机号");
    // 定义正则 
    // var reg = new RegExp("^1[3-9]\\d{9}$");
    var reg = /^1[3-9]\d{9}$/; //简写
    var result = reg.test(phone);
    if (result == true) {
      console.log(`格式正确`);
    } else {
      console.log(`格式错误`);
    }
  </script>

(2)reg.exec() 专门用正则查找字符串中所有敏感词的内容和位置的函数。


       既想获得所有敏感词的内容,又想获得所有敏感词的位置时,都用 exec() 函数,如果找到一个敏感词,就会返回一个数组:


       数组:[ 0: "敏感词的内容",  index: 敏感词的下标位置i ]


       如果没找到,则返回 null。该函数的缺点是只查找第一个敏感词的内容和位置,所以为了查找所有敏感词内容与位置,需要用到 do-while 循环。举例:


//查找所有以“小”字开头的名字
<script>
    var str = "老师:请用小红 我的 朋友造句。小楠:小红是我的朋友。小亮:朋友!小红是我的!";
    var reg = /小[\u4e00-\u9fa5]/;
    var arr = reg.exec(str);
    console.log(arr);
    var reg = /小[\u4e00-\u9fa5]/g;//g必须加,代表所有
    do {
      var arr = reg.exec(str);
      console.log(arr);
      if (arr != null) {
        console.log(`在${arr.index}位置,找到敏感词${arr[0]}`);
      }
    } while (arr != null);  
  </script>

3. js中几种查找函数的对比

image.png

二、function

       函数是程序中专门保存一段可重复使用的代码段的程序结构/对象,换句话说,当一段代码可能被反复使用时,都要先定义在函数中,然后反复调用函数。


1. 函数中的几个概念


       形参:专门保存函数调用时所必须的数据的局部变量,当我们定义函数时发现,函数内有的数据不确定时,都要定义形参变量。要求调用者在调用函数时传入必须的数据(实参)。


       返回值:即函数的执行结果,如果将来调用函数的人需要获得函数的直接结果,继续做其它操作时,就要给函数定义返回值。


2. 函数的调用


       var 返回值=函数名(实参值1, 实参值2, ...);


(1)在内存中找到指定名称的函数,同时将实参值一一对应的赋值给函数的形参变量;


(2)按函数体的描述,执行规定好的任务;


(3)将函数的执行结果,返回到函数外部。


//计算两个任意数的和
<script>
    function add(a, b) {
      return a + b;
    }
    var c = add(5, 5);
    var d = add(c, 410);
    var e = add(d, 50);
    console.log(c, d, e);
  </script>

3. 函数的创建

(1)声明方式,该方式存在声明提前,会打乱程序正常的执行方式。

function b() {
  console.log(1);
}
b();
function b() {
  console.log(2);
}
b(); // 2 2 无法打印1

(2)赋值方式,不存在声明提前


var fun = function () {
   console.log(1);
}
fun();
var fun = function () {
   console.log(2);
}
fun(); // 1 2 正常打印

4. js中函数的本质      


       函数其实也是一个对象,它可以赋值,可以传参,每个function底层都相当于new Function(),也就是说它们都有自己唯一的内存地址值,即使一模一样的两个函数定义,但是做比较时由于地址不同,所以结果也不同。而函数名只是一个普通的变量而已。举例:

<script>
    // 1.函数可以赋值
    var fun = function () {
      console.log(123);
    }
    var fun2 = fun;
    fun();
    fun2();

   // 2.函数可以传参(回调函数)

function 小明(裤兜) {
      console.log("小明下楼吃饭");
      console.log("吃完饭");
      裤兜();
    }
    var fun1 = function () {
      console.log("带包子");
    }
    小明(fun1);
    var fun2 = function () {
      console.log("带奶茶");
    }
    小明(fun2);
    // 3.当两个对象用==比较时,比较的不是内容,而是内存地址值
    var fun1 = function () {
      console.log(1);
    }
    var fun2 = function () {
      console.log(1);
    }
    console.log(fun1 == fun2); //false;输出结果虽然一样,但是地址不同
  </script>

补充:函数 function 与方法的区别


不属于任何对象的,独立的function       称为函数。

保存在对象内部的function          称为方法。


三、重载

       相同函数名,不同形参列表的多个函数,可以在调用时自动根据传入的实参值不同,选择对应版本的函数调用,这就是重载。它可以减少函数名的个数,减轻调用者的负担。


       在  js 程序中禁止两个同名函数同时存在。如果同时存在两个同名函数,则只有最后定义的一个函数才能有效,前者会被覆盖。为了解决此问题,需要用到 arguments 对象。


       arguments 对象在每个函数中都有自带,直接使用即可,专门接受所有传入函数的实参值的内容。在函数内部,判断 arguments 的长度、元素值、元素类型等条件,根据传入实参值或实参个数不同,来选择执行不同的逻辑。举例:


//定义函数pay支持三种付款方式
<script>
    function pay() {
      if (arguments.length == 0) {
        console.log(`手机支付`);
      }
      if (arguments.length == 1) {
        console.log(`现金支付,收您${arguments[0]}`);
      }
      if (arguments.length == 2) {
        console.log(`刷卡支付,从账户${arguments[0]}中扣款${arguments[1]}元`);
      }
    }
    pay();
    pay(100);
    pay("753159", "100");
  </script>

四、作用域和作用域链

       作用域是一个变量的可用范围,分为两级:


全局作用域,在程序的任何位置都能访问的范围,包括:一切不属于任何函数和对象的变量和函数。全局作用域中的变量为全局变量。


函数作用域,函数 function{ } 范围内才能访问的区域,只有函数的{ },才能形成作用域!只要不是函数的{},都不是作用域。函数作用域中的变量为局部变量,函数的形参默认为局部变量。


//判断程序的输出结果
<script>
    var a = 10;//全局
    function fun1() {
      var a = 100;//局部
      a++;
      console.log(a); //101
    }
    fun1();
    console.log(a); //10
    var b = 10;
    function fun2() {
      b = 100; //只是一条赋值语句,相当于全局变量
      b++;
      console.log(b); //101
    }
    fun2();
    console.log(b); //101
  </script>

作用域的原理如下:


       a.定义函数时:每个函数对象身上都有一个"好友列表",普通函数的好友列表只有两个格子。离自己近的格子,暂时为空,预留。离自己远的格子,保存window对象的引用关系。


       b.调用函数时:临时创建函数作用域对象,并将函数作用域对象的地址,保存到好友列表中离函数近的格子里。然后在函数作用域对象中临时添加函数的局部变量。


       c.调用函数过程中:每用到一个变量,js引擎都会先在离自己近的函数作用域对象中查找使用。如果函数作用域对象中找到了想要的变量,则不再去全局找;如果函数作用域对象中没有找到想用的变量,js引擎就会延好友列表继续去全局查找变量使用。


       变量的使用遵循就近原则。


相关文章
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中,需要合理地利用作用域和作用域链来组织代码结构,提高代码的可读性和可维护性。
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
459 19
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
339 32
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
JavaScript 前端开发
javascript的作用域
【10月更文挑战第19天javascript的作用域
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
310 11
|
JavaScript 前端开发
如何在 JavaScript 中实现块级作用域?
【10月更文挑战第29天】通过使用 `let`、`const` 关键字、立即执行函数表达式以及模块模式等方法,可以在JavaScript中有效地实现块级作用域,更好地控制变量的生命周期和访问权限,提高代码的可维护性和可读性。
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
JavaScript 前端开发
JavaScript 作用域
JavaScript 作用域是指程序中可访问的变量、对象和函数的集合。它分为函数作用域和局部作用域。函数作用域内的变量仅在函数内部可见,而全局作用域的变量在整个网页中均可访问。局部变量在函数执行完毕后会被销毁,而全局变量则在整个脚本生命周期中都存在。未使用 `var` 关键字声明的变量默认为全局变量。