js执行异常处理 箭头函数 正则表达式

JS代码执行过程中，可能会出现异常

try–catch-finally

try块包含可能抛出异常的代码，catch块包含处理异常的代码。finally 块始终执行，无论是否抛出异常。

 try代码块出现异常 执行catch代码块     finally不管try代码有无异常  都会执行finally里面的代码

 <div class="box"&gt;1111</div&gt;
try {
        const arr = [1, 2, 3]
        // arr.charAt(1)
        const txt = ''
        if (txt.trim() === '') {
          throw new Error('用户名不能为空')
        }
      } catch (e) {
        console.dir(e)
      } finally {
        console.log('肯定会执行')
      }
      console.log(111)

 正则表达式 就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则

字面量方式，其由包含在斜杠之间的模式组成， var re = /ab+c/

构造函数方式，调用RegExp对象的构造函数，var re = new RegExp(“ab+c“)

const reg = /a/  // 判断字符串是否有a
console.log(reg.test('bcd')) // false
console.log(reg.test('bcda')) // true

正则的元字符

正则的表达式的符号由哪些组成?
1.元字符  正则表达式的规则符号
2.修饰符  修饰整个正则表达式的符号

d 代表0-9任意一个数字

const reg = /[0-9]/
      console.log(reg.test('bcd'))//false
      console.log(reg.test('bc1d'))//true

 w代表字母 数字 下划线任意字符

const reg2 = /w/
      console.log(reg2.test('bcd'))//true
      console.log(reg2.test('?'))//false

s 匹配一个空白字符

const reg3 = /s/
      console.log(reg3.test('bcd')) // false
      console.log(reg3.test('? ')) // true

.^ —— 表示开头
.$ —— 表示结尾

      const reg = /^js/ //以js开头
      console.log(reg.test('jsdom'))//true
      console.log(reg.test('htmlcssjs'))//false
      const reg2 = /js$/ //以js结尾
      console.log(reg2.test('jsdom')) // false
      console.log(reg2.test('htmlcssjs')) //  true
      const reg3 = /^js$/ // 精确匹配
      console.log(reg3.test('jsdom')) // false
      console.log(reg3.test('htmlcssjs')) //  false
      console.log(reg3.test('jsjs')) //  false
    console.log(reg3.test('js')) //  true

*表示重复次数为任意次

const reg = /^z*$/
      console.log(reg.test(''))//true
      console.log(reg.test('dss'))//false
      console.log(reg.test('zzzzzz'))//true

 + 至少出现1次

 const reg2 = /^z+$/
      console.log(reg2.test('')) //  false
      console.log(reg2.test('dss')) // false
      console.log(reg2.test('z')) // true

? 出现1次或0次

 const reg3 = /^z?$/
      console.log(reg3.test('')) //  true
      console.log(reg3.test('dss')) // false
      console.log(reg3.test('z')) // true
      console.log(reg3.test('zz')) // false

{n} 重复n次

const reg4 = /^z{2}$/
      console.log(reg4.test('')) //  false
      console.log(reg4.test('dss')) // false
      console.log(reg4.test('z')) // false
      console.log(reg4.test('zz')) // true

{n,} 至少n次

  const reg5 = /^z{2,}$/
      console.log(reg5.test('')) //  false
      console.log(reg5.test('dss')) // false
      console.log(reg5.test('z')) // false
      console.log(reg5.test('zz')) // true
      console.log(reg5.test('zzz')) // true

{n,m} 重复次数n~m

const reg6 = /^z{2,4}$/
      console.log(reg6.test('')) //  false
      console.log(reg6.test('dss')) // false
      console.log(reg6.test('z')) // false
      console.log(reg6.test('zz')) // true
      console.log(reg6.test('zzz')) // true
      console.log(reg6.test('zzzzz')) // false

 [] 范围 [abcd] 包含其中一个即可 [] 实际代表的就是 一位字符

    const reg = /^[xyz]$/
      console.log(reg.test('xx')) // false
      console.log(reg.test('x')) //true
      console.log(reg.test('m')) //  false

匹配数字 字母 或 下划线

const reg2 = /^[a-zA-Z_0-9]$/
      console.log(reg2.test('xx')) // false
      console.log(reg2.test('x')) //true
      console.log(reg2.test('m')) //  true

中括号的^表示取反

const reg4 = /^[^xyz]$/
      console.log(reg4.test('xx')) // false
      console.log(reg4.test('x')) //false
      console.log(reg4.test('m')) //  true

默认正则是惰性的,可以通过添加修饰符g来全部匹配

      let str = '今年是tmd个好日子,zaijian,学好js,zaijian,TMD,tMd'
 str = str.replace(/zaijian/gi, '**')
      console.log(str)//今年是tmd个好日子,**,学好js,**,TMD,tMd

let const var 区别

1  是否允许重复定义 2  是否有块级作用域 3  是否存在变量提升  4  暂时性死区        5 const定义的常量不能重新赋值

模版字符串

 const age = 10,
        name = 'fe-school'
const str = '${name}-${age}'

      function handleStr(str) {
   str = str.replace(/${([^}]+)}/g, function (matched, val) {
          console.log(matched)
          console.log(val, typeof val)
          return eval(val)
        })
        return str
      }

      console.log(handleStr(str))//fe-school-10

 箭头函数 用=>把()和{}连在一起,语法更简洁

function f() {console.log('我是函数')}
      // const f = function() {console.log(...)}
const f = () => {
        console.log('我是箭头函数')
      }
      f()

当只有一条return语句，{}和return可以一起省略

 const getSum = (x, y) => {
       return x + y
      }
     const getSum = (x, y) => x + y
     console.log(getSum(3, 4))

当只有一条return语句 并且返回的是一个对象，把这个对象用()包裹起来  

const fn = () => ({
        a: 1,
      })
      console.log(fn())

形参只有一个，小括号可以省略，其余情况全部要加()箭头函数和普通函数区别

const f2 = (x) => x * 2 // (x)=> {return x *2}
      const f2 = x => x * 3
      console.log(f2(6))

      const f3 = (x) => (x) => x * 2
      f3 = x => {return x => {return x*2}}
        f3 =  function(x)  { return function(x) { return x * 2}}
      const f3 = (x) => (x) => x * 2

      console.log(f3(6)(3))//6

1  箭头函数没有this,它内部this由所处作用域(上下文)决定,call/apply/bind也不能改变箭头函数this

2  箭头函数没有arguments,普通函数有

3  箭头函数不能new

 const fun = () => {
        console.log(this)//window
        // console.log(arguments) //  报错 箭头函数没有arguments
      }

      const obj = {
        a: 1,
        f: () => {
          //  this === obj
          const fn = () => {
            console.log(this)
          }
          fn()
        },
      }
      fun(1, 2)
     // new fun()//fun is not a constructor
      obj.f.call(obj)//window

数组解构

const [name, age, o] = ['longge', 30, { a: 10 }]
      console.log(name, age, o.a)//longge 30 10
      var x = 1,
        y = 2
      var [y, x] = [x, y]
      console.log(x, y)//2 1
   var[x, [y], z] = [1, [2.1, 2.2]]
      console.log(x, y, z)//1 2.1 undefined

 let x = 1,
        y = 2
      ;[y, x] = [x, y]
      console.log(x, y)//2 1

对象解构

1  属性可以无序  2  默认接受属性名的变量名与属性名相同 3 可以通过旧属性名:新变量名

  const {
        age: newAge,
        uname,
        girlFriend: { username },
      } = {
        uname: '李新浩',
        age: 12,
        girlFriend: {
          age: 11,
          username: 'lisi',
        },
      }
      console.log(uname, newAge)//李新浩 12

      console.log(username)//lisi

代码007普通

打赏 收藏 海报 链接