js学习第十六天-CSDN博客

本文链接：https://blog.csdn.net/qq_45753238/article/details/134647300

js异常处理

JS代码执行过程中，可能会出现异常，我们希望自己处理这个异常

<body>
    <div class="box">1111</div>
    <script>
      // JS代码执行过程中，可能会出现异常，我们希望自己处理这个异常
      /* try {
        const arr = [1, 2, 3]
        // arr.charAt(1)
        const txt = ''
        if (txt.trim() === '') {
          // 抛出错误
          throw new Error('用户名不能为空')
        }
      } catch (e) {
        //  try代码块出现异常 执行catch代码块
        console.dir(e)
      } finally {
        // 不管try代码有无异常  都会执行finally里面的代码
        console.log('肯定会执行')
      }
      console.log(111) */

      /*  const box = document.querySelector('.box1')
      console.log(box.innerHTML)
      console.log(123) */

      // 数据存在本地
      const v = localStorage.getItem('info')
      // JSON.parse(v).a
    </script>
  </body>

正则表达式

正则 RegExp 规则，用于字符串是否符合该规则

1 定义正则表达式

 const reg = /a/ // 字符串有a
 const reg = new RegExp('a') 通过RegExp构造函数创建
      console.log(reg.test('bcd')) // false
      console.log(reg.test('bcda')) // true

元字符(特殊的字符)

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

 const reg = /\d/
     
      console.log(reg.test('bcd'))
      console.log(reg.test('bc1d'))

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

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

3. \s 匹配一个空白字符

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

4. 匹配是数字或字母

const reg4 = /[\da-zA-Z]/
      console.log(reg3.test('bcd')) // true
      console.log(reg3.test('? 1')) // false

边界符

^ $->边界符

<script>
      // ^  $->边界符
      const reg = /^js/ //以js开头
      console.log(reg.test('jsdom'))
      console.log(reg.test('htmlcssjs'))
      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
    </script>

量词

* + ? {n} {n,} {n,m}

*表示重复次数为任意次

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

+ 至少出现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

范围

[ ] 表示范围

 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 reg3 = /^[0-9a-zA-Z_]{6,16}$/
      const reg4 = /^[^xyz]$/ // 中括号的^表示取反
      console.log(reg4.test('xx')) // false
      console.log(reg4.test('x')) //false
      console.log(reg4.test('m')) //  true

修饰符

作用：修饰符约束正则执行的某些细节行为，如果区分大小写、是否支持多行匹配等、

let str = '今年是tmd个好日子,tmd,学好js,tmd,TMD,tMd'
      // replace属于字符串方法
      //  const newStr = str.replace('tmd', '**')
      // console.log(str, newStr)
      // 全部替换关键词
      // let idx = str.indexOf('tmd')
      // while (idx >= 0) {
      //   str = str.replace('tmd', '**')
      //   idx = str.indexOf('tmd', idx + 1)
      // }
      // console.log(str)
      // 默认正则是惰性的,可以通过添加修饰符g来全部匹配
      //  i 忽略大小写
      str = str.replace(/tmd/gi, '**')
      console.log(str)

es6

1 let const

2 模版字符串 ``

3 箭头函数

4 解构赋值

5 展开运算符、剩余运算符

6 对象

7 数组、字符串新增的方法

8 集合 map / set / weakMap

9 迭代器生成器

10 class

11 Promise

12 async await

13 模块化导入导出

var let const 三者之间的区别

var: es6 之前的旧语法

1 可以重复定义

2 var 有预解析

3 var 没有块级作用域

let：es6 语法，声明变量

1 不可以重复定义

2 没有预解析

3 有块级作用域

4 暂时性死区

const：es6 语法，声明常量

1 不可以重复定义

2 声明后不可以赋值、更新

3 没有预解析

4 有块级作用域

5 暂时性死区

箭头函数

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

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

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

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))

箭头函数和普通函数区别

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

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

3 箭头函数不能new

4 箭头函数没有arguments

解构赋值

数组解构

基本语法

1 赋值运算符 = 左侧的 [ ] 用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量

2 变量的顺序对应数组单元值的位置依次进行赋值操作。

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

对象解构

1 属性可以无序

2 默认接受属性名的变量名与属性名相同

3 可以通过旧属性名:新变量名

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