JavaScript-6

正则表达式

基础部分

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