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>