正则表达式
基础部分
<script>
const str = '我们一起学习吧,学习使你强大'
// 1.定义规则
const reg = /学习/
// 2.判断是否匹配,返回 true or false(掌握)
console.log(reg.test(str));
// 3.如果exec()匹配成功,就返回数组,如果匹配失败则返回null(了解)
console.log(reg.exec(str));
</script>
案例演示
<body>
<input type="text">
<span></span>
<script>
// 定义规则
const reg = /^[a-zA-Z0-9_]{6,16}$/
// 获取对象
const input = document.querySelector('input')
// 事件监听
input.addEventListener('blur', function () {
if (reg.test(this.value)) {
this.nextElementSibling.innerHTML = '输入正确'
this.nextElementSibling.style.color = 'green'
} else {
this.nextElementSibling.innerHTML = '请输入6~16位的英文数字下划线'
this.nextElementSibling.style.color = 'red'
}
})
</script>
</body>
修饰符
介绍:
修饰符约束正则执行的某些细节行为,如:是否区分大小写,是否支持多行匹配
语法:
/表达式/修饰符
i是单词ignore的缩写,正则匹配时,字母不区分大小写
g是单词global的缩写,匹配所有满足正则表达式的结果
<script>
console.log(/H/i.test('hello world')); // true
</script>
替换
语法:
字符串.replace(/正则表达式/, '替换的文本')
<script>
const str = 'XX表达式'
const replace = str.replace(/xx/ig, '正则')
console.log(replace);
</script>
函数进阶
动态参数
动态参数 arguments只能在函数中使用
动态参数 arguments 是函数内部内置的伪数组变量,它包含了调用函数时传入的所有实参
<script>
// 声明函数
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i]
}
return total
}
// 调用函数
console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(9, 9, 9)); // 27
</script>
剩余参数
剩余参数 ...arr 不仅能在函数中使用,还能在其他地方使用
剩余参数的语法格式:
...arr
arr并不是一定得叫这个名字,但是它是一个真数组!
<script>
// 声明函数
function getSum(a, b, ...arr) {
total = a * b
if (!arr) return total
for (let i = 0; i < arr.length; i++) {
total += arr[i]
}
return total
}
// 调用函数
console.log(getSum(1, 2, 8, 5, 5)); // 20
console.log(getSum(9, 9, 9)); // 90
</script>
展开运算符
基本内容
<script>
// 定义并初始化一个数组
const arr = [9, 1, 5, 4]
// 展开数组,并输出其内容
console.log(...arr) // 9, 1, 5, 4
</script>
案例演示
案例一:求数组最大值
<script>
// 定义并初始化一个数组
const arr = [9, 1, 5, 4]
// Math.max()无法处理数组,只能处理Math.max(5,6,1)之类的
// 所以我们需要 "展开数组" ———— "...arr"
const maxValue = Math.max(...arr)
console.log(maxValue) // 9
</script>
案例二:合并数组
<script>
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr = [...arr1, ...arr2]
console.log(arr); // [1, 2, 3, 4, 5, 6]
</script>
箭头函数(重要)
基本认识
<script>
// 匿名函数
const fn1 = function (name) {
console.log(`你好,${name}!`);
}
// 箭头函数(对比上面)
const fn2 = (name) => {
console.log(`Hello, ${name}!`);
}
// 调用函数
fn1('世界')
fn2('World')
</script>
常见写法
- 基本原则
1.只有一个参数的时候,可以省略参数的小括号
2.只有一行代码的时候,可以省略大括号
3.只有一行代码的时候,只需要写返回值,而不需要写 return
- 一行代码,声明函数
<script>
// 声明函数
const fn = age => document.body.innerHTML = `年龄:${age}`
// 调用函数
fn(30)
</script>
- 一行代码,返回"函数结果"
<script>
const fn1 = num => {
return ++num
}
// 上面的代码,等价于下面的代码
const fn2 = num => ++num
</script>
- 一行代码,返回一个对象
<script>
const fn1 = (uname) => {
return { name: uname }
}
// 上面的代码,等价于下面的代码
const fn2 = (uname) => ({ name: uname })
</script>
箭头函数的参数
1."普通函数"有动态参数arguments
2."箭头函数"没有动态参数arguments,但是有"剩余参数...arr"
解构赋值
数组解构
基本内容
- 数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法
<script>
const arr = [1, 2, 3]
const [max, aver, min] = arr
console.log(max);
console.log(aver);
console.log(min);
</script>
- 基本应用:交换两个变量的值
<script>
let a = 1
let b = 2; // 注意:此处必须要加上";" 因为括号形式的数组[...],默认把它当作上一行的继续,而无法自动识别为新的一行
[b, a] = [a, b]
console.log(a, b);
</script>
其他内容
<script>
const [a = '安卓', b = '苹果'] = ['鸿蒙']
console.log(a); // 鸿蒙
console.log(b); // 苹果
</script>
<script>
const [a, b, ...c] = [10, 20, 30, 40]
console.log(a); // 10
console.log(b); // 20
console.log(...c); // 30, 40
</script>
<script>
const [a, b, , d] = [100, 200, 300, 400]
console.log(a); // 100
console.log(b); // 200
console.log(d); // 400
</script>
<script>
const [a, b] = [10, [100, 200]]
console.log(a); // 10
console.log(b[0]); // 100
console.log(b[1]); // 200
</script>
对象解构
基本认识
<script>
const obj = {
name: 'Jack',
age: 30
}
const name = obj.name
const age = obj.age
// 等价于下面的代码
const { uname, uage } = { uname: 'Jack', uage: 30 } // 注意:这里的变量名和属性名必须一致
</script>
重新赋值
<script>
// 已经使用过变量名 name 的情况下
const name = 'Peter'
// 下面的代码会报错
// const { name, age } = { name: 'Jack', age: 30 }
// 这时候就需要重新赋值
const { name: username, age } = { name: 'Jack', age: 30 }
</script>
解构数组对象
<script>
// 数组对象
const pig = [
{
name: '佩奇',
age: 6
},
{
uname: '猪猪侠',
uage: 8
}
]
// 解析数组对象
const [{ name, age }, { uname, uage }] = pig
// 输出
console.log(name);
console.log(uname);
</script>
多级对象解构
<script>
const person = [
{
name: '佩奇',
family: {
mother: '猪妈妈',
father: '猪爸爸',
sister: '乔治'
},
age: 6
}
]
// 可以选择性获取内容
const [{ family: { mother, father, sister }, age }] = person
// 输出
console.log(age);
console.log(mother);
console.log(father);
console.log(sister);
</script>
<script>
const msg = {
"code": 200,
"msg": "获取新闻列表成功",
"data": [
{
"id": 1,
"title": "4G手机转让平台",
"count": 254
},
{
"id": 2,
"title": "5G手机转让平台",
"count": 759
},
{
"id": 3,
"title": "6G手机转让平台",
"count": 1668
}
]
}
// 方式一
// function render(msg) {
// const { data } = msg
// console.log(data);
// }
// 方式二
// function render({ data }) {
// console.log(data);
// }
// 方式三(与方式二没有本质上区别,只是改个变量名)
function render({ data: myData }) {
console.log(myData);
}
// 调用函数
render(msg)
</script>