JS.DAY21.笔记

Voyager
143 阅读6分钟

一、正则表达式

  • 正则表达式是用来做字符串的校验(验证)

- 正则的创建

  1. 字面量创建 /匹配的字符串/
  2. 实例化对象 new RegExp('匹配的字符串')
// 双斜杠  --- 判断字符串中是否有字符能匹配
        const reg1 = /good/ ;

      // regular expression 简写
        // 实例化对象
        const reg2 = new RegExp('good') ;

- 正则的修饰符

  1. i ignore 忽略大小写 const reg1 = /tmd/i ;
  2. g global 全局匹配 const reg2 = /tmd/g ;
  3. 构造函数的第一个参数表示匹配的字符，第二个参数表示修饰符const reg3 = new RegExp('tmd' , 'gi') ;

- 正则的方法

  1. test() 测试字符串中是否有匹配正则的内容，返回布尔值 一般此正则不需要全局匹配
        const reg = /tmd/ig ;
        const str = 'hello tmd   tMd' ;
        console.log(reg.test(str)
  1. exec() 返回的是一个数组 --- 总是匹配一个 , 如果匹配不到就返回null
const reg = /tmd/ig ;
        const str = 'hello tmd t】tMd' ;
        console.log(reg.exec(str));
  1. 补充知识点 []转为布尔值是-> true

- 正则的语法

  1. | 或者const reg2 = /0|1|2|3|4|5|6|7|8|9/ ;
  2. [] 或者(区间) [0-9] [1-9] [a-z] [A-Z] [0-9a-zA-Z]const reg = /[0-9]/ ;
  3. 空格也会被匹配 --- 一般正则不写空格

- 正则的元字符

  • 次数匹配
  1. * 0次或者多次 {0 , } const reg4 = /da*y/ ; // /d要么有a,要么没有a,不能有其他的字符y/
  2. ? 0次或者1次 {0 , 1} const reg6 = /da?y/ ; //dy day
  3. + 1次或者多次 {1 , } const reg5 = /da+y/ ; // day daay daa...y
  4. {m , n} m次到n次 const reg7 = /da{2,5}y/ ; // a匹配2次到5次
  5. {m , } 至少m次
  6. {m} m次 console.log(/da{2}/.test('daay'));
  • 其他常用
  1. ^ 以...开头
  2. $ 以...结尾
  3. ^ $ 同时使用可以把正则规定死
  4. . 匹配任意字符
const reg = /^.{3,6}$/ ;

- 转义字符串

  • 转义使用 \
  1. 匹配 / const reg = /\\\// ;
  2. 匹配 . const reg2 = /\./ ;
  3. 匹配 [ const reg3 = /\[/ ;
  • 简写
  1. \d 数字
  2. \D 非数字
  3. \w 数字，字母，下划线 [0-9a-zA-Z_]
  4. \W 非数字，字母，下划线
  5. \s 匹配空白字符
  6. \S 匹配非空白字符
  7. 空字符 .{0} 注意：空白字符和空字符不一样
  • 中文匹配
  1. [\u4e00-\u9fa5]
const reg = /^[\u4e00-\u9fa5]{3,6}$/ ;

- 字符串使用到正则的方法

// charAt()  charCodeAt()   String.fromCharCode() 
        // includes()  indexOf()   lastIndexOf()
        // slice()  substring()  substr()
        // toUpperCase()   toLowerCase()
        // concat()  +

        // split() 
        // replace() 
        // trim()
  • 能接受正则的方法
  1. replace(要查找的,替换的) 默认只会替换一次，因此需要正则
  2. search() 一般和indexOf是一样的，但是search还可以接受正则
 const str2 = 'good daay Daay up' ;
        console.log(str2.search('day'));   // search = indexOf
        console.log(str2.search(/da*y/gi));  // search 可以使用正则，但是indexOf不能使用正则
        console.log(str2.match('a'));  // 找到所有的满足条件的字符
  1. match() 找到满足条件的字符，默认只会找到第一个，全局匹配才能找到所有的，如果找不到就返回null
  2. split() 把字符串切割成数组，也可以接受正则的写法
const str3 = 'good    good study  day    day  up' ;
        // 贪婪匹配
        console.log(str3.split(/ +/));
  1. 敏感词替换，使用replace()方法
 // 替换敏感词
        function replaceMinGan(str , arr , n) {  
            n = n || '**' ;
            // const mgc = ['tmd' , 'md' , 'wc'] ;
            const word = arr.join('|') ;
            const reg = new RegExp(word , 'ig') ;
            return str.replace(reg , n)
        }

        const mgc = ['tmd' , 'md' , 'wc'] ;
        const res = replaceMinGan('wc,正则真tmd简单啊,Wc' , mgc ) ;
        console.log(res);

- 常见正则练习

// 邮箱   123@qq.com    123@qq.cn   123@qq.com.cn 
        //   必须有@,@前后必须有内容,.com或者.cn或者.com.cn结尾

        const reg = /^[\w,\+]+@\w+\.(com|cn|com\.cn)$/

        console.log(reg.test('cn'));


        // 身份证号  18位  17位数字+数字或者X
        const reg2 = /^\d{17}[\dX]$/ ;


        // 省份证  6位  4位出生年份  2月  2日期  3个数字，数字或者X
        const reg3 = /^\d{6}(19|20)\d{2}(0|1)\d(0|1|2|3)\d\d{3}[\dX]$/ ;

        console.log(reg3.test('111111192111511114'));


        // 删除所有的空格
        const str = '    good good   study day  day  up   ' ;
        //  const arr = ['' ,' ' ,'  '] ...
        //  替换 
        console.log(str.replace(/ +/g , ''));

        // 删除首尾空格
        console.log(str);
        console.log(str.replace(/^ +| +$/g , ''));


        // 删除多余的空格
        console.log(str.replace(/ +/g , ' '));

二、SE6语法

- 变量声明的方式

- let 和 const

  • 共同点
  1. 块级作用域，先声明后使用
  2. 在同一个作用域下,变量名不允许重复
  3. 他们声明的全局变量并没有挂在 window对象上
  4. 都没有预编译
  • 不同点
  1. let 声明的变量值可以改变
  2. const 声明的变量值不能改变
  3. const 必须声明后立即赋值 const a = 3.14;
  4. const 存引用数据类型时，内容可以发生改变(地址不能改变)
  • 优先考虑使用const , 如果变量会发生改变，就使用let , 最后使用var

- 模板字符串

  • 语法：
`${}`

- 数组的解构

const arr = [1,2,3] ;


        // const a = arr[0] ;
        // const b = arr[1] ;
        // const c = arr[2] ;

        const [a , b , c] = arr ;
        console.log(a , b , c); //1,2,3

        const [c , , d] = arr ;
        console.log(c , d);  // 1 3

const arr2 = [1,2,[3,4]] ;

        const [a,b,c] = arr2 ;
        console.log(c); //[3, 4]

        const [a,b,[c]] = arr2 ;
        console.log(c); //3

 // 交换两个变量的值
        let a = 2 ;
        let b = 1 ;
        // 把等号右边的值给左边
        [a , b] = [b , a] ;
        console.log(a , b);

- 对象的解构

const obj = {
            name : 'yy' , 
            age : 18 ,
            say : function () {  
                console.log(this.name);
            }
        }

        const {name : a , age : b , weight : c , say : fn} = obj ;
        console.log(a); //"yy"

        const {a:a,b:b,c:c} = {a:1 , b:2 , c:3} ;
        console.log(a , b , c)

    简写：当变量名和属性名相同时候可以简写
    const {name : name , age : age , say : say} = obj3 ;
    简写为
    const {name , age , say} = obj3 ;
    console.log(name , age , say);

- 展开运算符

- 展开运算符：...

  • 数组的展开运算符：数组深拷贝的第三种方法
  1. const arr2 = [...arr]
  • 对象的展开运算符
const obj = {a:1 , b:2 , c:3} ;
        const obj2 = {...obj , name : 'cc'} ;
        console.log(obj2);

- 箭头函数

  • 具名函数也有预编译，赋值式函数没有预编译
  • 只有匿名函数可以改写成箭头函数
    const fn = () => {
       console.log(999);
    }
  • 关于简写
  1. 形参有且只有一个的时候，省略小括号
    const fn = n => {
       console.log(n);
    }
  1. 当函数体只有一句代码且有返回值的时候 ， 省略大括号和return
    const fn = n => ++n;
  • 注意区别：
  1. 箭头函数中没有arguments
  2. 使用展开运算符接受实参 ...arr 得到的是一个真数组

箭头函数的this指向问题

  • this的指向
  1. 在事件处理函数中，this指向绑定事件的这个对象
  2. 在普通函数中，this指向window
  3. 在对象中，this指向对象本身
  4. 在严格模式下，this没有指向 undefined
  • 箭头函数中的this
  1. 箭头函数没有自己的this指向，父元素指向谁，箭头函数的this就指向谁
  2. 因为在函数中this的指向可以发生改变，使用箭头函数就保持住了this的指向
  3. 箭头函数的作用 --- 没有自己的this指向 父元素指向谁，箭头函数就指向谁

- 扩展函数

function fn() {  
            const a = 1 ;
            const b = 2 ;
            // 向返回多个值的时候，可以返回一个数组
            return [a , b]
        }
  • 闭包：一个函数的变量可以访问另一个函数的变量
 function fn2() {  
            const c = 3 ;
            return function () {  
                console.log(c);
            }
        }

        // 闭包：一个函数可以访问另一个函数的变量
        // 缺点：内存泄漏导致变量无法被释放

        const res = fn2() ;
        res() ;
  • 参数的默认值
 // 给参数添加默认值
        function fn(a = 0 , b = 0) {  
            return a + b
        }

三、严格模式

- js语法的弊端

  1. 不加分号
  2. 变量的数据类型可以任意改变
  3. 预编译
  4. 同一个变量名可以被反复的声明

- ES5 严格模式 'use strict' ;

  • 可以解决部分问题
  1. 变量必须先声明后使用
  2. 函数中不允许形参同名
  • 严格模式也有作用域
avatar
文章
阅读
粉丝