zoukankan      html  css  js  c++  java
  • 008 Javascript(093

    [A] 正则表达式

        1. 正则表达式(super string, regular expression):

            【功能】用于检查用户输入或者准备提交的数据是否符合要求

                  2. 正则表达式的创建:

            a. 通过new方法声明正则表达式

               var a = new RegExp("hellow", "ig");

                                         第一个参数:正则表达式,为一个字符串

                                         第二个参数:修饰符,修饰符没有顺序。

            b. 省略new方法声明正则表达式

               var b = RegExp("hellow", "ig");

                  第一个参数:正则表达式,为一个字符串

                  第二个参数:修饰符,修饰符没有顺序。

            c. 通过常量进行赋值

                  var c = /hellow/ig


        3. 正则表达式只有两个方法:

             a. test

                格式:正则.test(字符串)

                功能:在字符串中匹配这个正则是否存在

                返回值:如果匹配成功返回true,匹配失败返回false。

            b. exec

                格式:正则.test(字符串)

                功能:在字符串中匹配这个正则是否存在

                返回值:返回匹配到的字符串,匹配成功返回装有所有匹配到的字符串的数组,匹配失败,返回null。

        4. 正则也可以使用字符串的一些方法:

            a. match()

                格式:字符串.match(正则)

                功能:在字符串中匹配是否有这个正则

                返回值:匹配成功返回装有所有匹配到的字符串的数组,匹配失败,返回null。

            b. replace()

                格式:字符串.replace(旧字符串/正则,新字符串)

                功能:在字符串中用新字符串将旧的字符串或者符合正则的旧字符串替换

                返回值:替换成功的字符串。

            c. split()

                格式:字符串.split(分隔符/正则)

                功能:用指定的分隔符或者正则去分割字符串

                返回值:分割后的子串组成的数组。

            d. search()

                格式:字符串.search(字符/正则)

                功能:查找符合条件的字符或者正则第一个出现的下标

                返回值:如果找到返回下标,没找到返回-1.

        5. 元字符

              在正则表达式中有特殊含义的字符

          单个数字和字符

              a. ·        匹配单个的任意字符

              b. [字符]   匹配所选字符之内的单个字符

                    如:[a-z]   表示匹配任意一个字符

                                                   [0-9]   表示匹配任意一个数字

                                                   [a,2,/] 表示匹配"a","2","/"其中的一个字符

              c. [^字符]  匹配除括号内字符的任意一个字符

                                                  如:[^a-z]  表示匹配任意一个非字母字符

              d. w       匹配单个的字母,数字,下划线,等价于[a-zA-Z0-9_]

              e. W       匹配除字母,数字,下划线的任意一个字符

              f. d       匹配单个数字,等价于[0-9]

              g. D       匹配单个非数字,等价于[^0-9]

        6. 重复字符 这里的x,y均表示任意字符

              x?       匹配0个或者1个x字符

              x+        匹配至少一个x字符

              x*        匹配0个或者多个x字符

              x{n}      最多匹配n个x字符

              x{m,}    至少匹配m个x字符

              x{m,n}    匹配至少m个,最多n个x字符

              x|y       匹配x字符或者y字符,二选一

        7. 空白字符

              s      匹配任意单个的空白字符,如空格,tab,换行等

               S      匹配任意非单个空白字符

        8. 锚字符   这里的x表示任意字符

              ^x      行首匹配,必须是以x字符开头的字符串

              x$      行位匹配,必须是以x字符结尾的字符串

        9. 修饰符

              i       忽略大小写

              g       全局匹配

              m       换行匹配,即如果字符串中有换行,则重新计算行首

        10. 转义字符

                  将有特殊含义的字符转换为其本来的字符

              +字符   如:.   *

     [B] localStorage本地存储技术

        即将页面产生的数据可以以本地存储的方式保存在页面,可以供页面调用

                1. 本地存储:

                        localStorage

                                a. 永久存储

                                b. 最大存储5M

                                c. 只能存储string

                        cookie

                                a. 可以设置过期时间

                                b. 最大存储4KB

                                c. 每个域名下面最多存储50条数据

                        sessionStorage(会话,结合后台使用)



                2. localStorage对象的方法

                        a. setItem(name, value)         添加本地存储的对象和其对应的值

                                还有两种赋值方法添加本地存储的对象:

                                        localStorage.name = value

                                        localStorage[name] = value

                        b. getItem(name)                获取本地存储的对象和其对应的值

                        c. removeItem(name)             删除本地存储的对象和其对应的值

     [C] this指向强制更改

                每个函数中都有一个内置的变量this,this指向当前函数的主人,函数的主人根据上下文去判断。

                    【注】this指向函数的主人


                常见的this的主人判断

                        1. 全局函数中的this指向window

               function show(){
    
                   alert(this);   
    
               }
    
               show();      // 调用时返回window

                        2. 类中的方法里面的this指向类本身

               var person = {
    
                    userName: "Jack",
    
                    age: 18,
    
                    show: function(){
    
                         alert(this);    
    
                    }
    
                }
    
                person.show();      // 调用时返回person类

                        3. 在事件对象的函数内部的this指向按钮本身

                window.onload = function(){
    
                     var oBtn = document.getElementById("btn1");
    
                     oBtn.onclick = function(){
    
                         alert(this.innerHTML)   // 返回值为按钮上的文本
    
                     }
    
                }

                强制改变this指向:

                        示例代码:
    
                                function show(x, y){
    
                                    alert(`x等于:${x}, y等于:${y}`)
    
                                    alert(this);
    
                                }
    
                                show(2,6);

                    1. call方法

                            格式:函数名.call();

                            参数:

                                  第一个参数:传入该函数this指向的对象,传入什么就指向什么

                                  第二个参数:将原函数的参数往后推延一位

                            示例代码:

                                  show.call("name", 2,6);

                                      将show函数内部的this指向强制修改为指向"name"字符串

                    2. apply方法

                            格式:函数名.apply();

                            参数:

                                  第一个参数:传入该函数this指向的对象,传入什么就指向什么

                                  第二个参数:将原函数的参数组成的数组,第二个参数必须是数组

                            示例代码:

                                  show.apply("name", [2,6]);

                                      将show函数内部的this指向强制修改为指向"name"字符串

                    3. bind方法 预设this指向

                            格式:函数名.bind();

                            参数:

                                  第一个参数:传入该函数this指向的对象,传入什么就指向什么

                                  第二个参数:将原函数的参数往后推延一位

                               返回值:返回值仍然为一个函数,只不过其函数内的this指向已经被改变。

                            示例代码:

                                  show.apply("name", [2,6]);

                                        将show函数内部的this指向强制修改为指向"name"字符串

                    【注】上述前两种方法会在强制改变this指向的时候会将函数执行一遍,有正常返回值,并且改变指向只在当前这个调用下有效

                        当再次调用该函数时,又可重新改变函数中的this指向,若没改变this指向,则其指向为默认值

                        第三种方法,只是将改变了this指向的这个函数返回,并不会执行函数,相当于this改变后的函数的实例化


                        bind方法使用技巧:

                              Math.max(10,20,30,40,50)    =>  返回值为50

                              Math.min(10,20,30,40,50)    =>  返回值为10

                              这两个函数的参数是位置数量的单个数字,若想传入一个已知的数组,可以使用apply实现

                              Math.max(null,[10,20,30,40,50])    =>  返回值为50

                              Math.min(null,[10,20,30,40,50])    =>  返回值为10

                                      这里,this我们不需要使用,故指向改为null

    [D] let 和 const 关键字

                var, let 和 const 关键字


                1. 局部作用域:

                        var 关键字声明变量,将变量或者形参所在的函数的大括号作为作用域来处理


                2. 块级作用域:

                        let 关键字用来声明变量, 只要遇到大括号就形成作用域

                                即在if,while,for,switch等中声明的变量只在各自的大括号里面有效

                                    而且在每个循环中都会声明一个变量,而且互不相同,互不干扰(虽然名字一样)

                3. const作用域:

                        const 关键字声明关键字,它是声明常量

                                其生成的常量是无法更改的,强行更改会报错

    [E] 箭头函数

               1.  箭头函数:ECMA6新增的一个新潮的函数写法

                    【注】箭头函数的使用可以适当省略函数中的function和return关键字,但是可读性差,不推荐大量使用


               2. 箭头函数的基本写法

          箭头函数:

                        var add = x => x + 10;

                  常规函数:

                        function add(x){

                              return x + 10;

                        }

                   上述两种方式定义的函数除了写法不一样,意义完全一样。



                3. 各种形式的箭头函数:

                      a. 无参数,无返回值的函数

                              var show = () => {

                                    alert("hello");

                              }

                              等同于:

                              function show(){

                                    alert("hello");

                              }

                      b. 有一个参数,无返回值

                              var xxx = num => {

                                    alert(x);

                              }

                              等同于:

                              function xxx(num){

                                    alert(num);

                              }

                      c. 有一个参数,有返回值

                              var add = x => {

                                    代码块;

                                    return x + 10;

                              }

                              等同于:

                              function add(x){

                                    代码块;

                                    return x +10;

                              }

                      d. 多个参数,有返回值

                              var show = (x, y) => {

                                    alert(x + y);

                              }

                              等同于:

                              function show(x, y){

                                    alert(x + y);

                              }

                4. 推荐使用的场景:

                            箭头函数与数组结合会体现一定的优越性

                      var arr = [3,6,5,7,9,8,0,5];

                      1. var newArr = arr.map(item => item * 1.4); 

                      2. var newArr = arr.filter(item => item > 4); 

               5.  箭头函数注意事项:

                      1. 箭头函数不能用new

                      2. 箭头函数 如果返回值是一个对象,一定要加()

                      3. 箭头函数中的this,指向的是上一层函数的主人

  • 相关阅读:
    Hadoop的Shuffle阶段
    Java实现单词统计
    SpringBoot学习笔记
    Linux系统管理学习实训任务书
    Java语言学习案例雷霆战机
    PPT文档学习小练习链接
    Word文档学习小练习链接
    学习Java爬虫文档的学习顺序整理
    MapReduce和Hive学习文档链接学习顺序
    [swift]UITableView
  • 原文地址:https://www.cnblogs.com/carreyBlog/p/13079835.html
Copyright © 2011-2022 走看看