学习心得分享/JavaScript个人总结

执行顺序：若有多个script，那么从上而下依序执行；在同一个script标签中，js的执行顺序，以一句话为单位，基本顺序：从上到下，从左到右，每句话用分号隔开“;”（若代码中每一行只有一句js，那么句尾的分号可以省略）；若存在函数，先执行函数，若在执行的函数中存在其他函数，则先执行内部的函数。

二、部分API

// 模态弹窗
    alert('hello alert')
// 确认对话框
    let r = confirm('确定吗?')
// 打印日志
    console.log('hello world')
// 弹窗输入框
    let r = prompt('请输入姓名')

读取文档元素并修改属性

// 1. 查询一个指定选择器的元素
    let box = document.querySelector('.box')

// 2. 查询所有指定选择器的元素
    let boxs = document.querySelectorAll('.box')

// 3. 通过id查询元素
    box = document.getElementById('myBox')

// 4. 通过类名查询元素
    boxs = document.getElementsByClassName('box')

// 5. 通过标签名查询元素
    boxs = document.getElementsByTagName('div')

// 修改属性值
    // 改id
        box.id = 'my-box'
    // 改样式
        box.style.color = '#00f'
        box.style.backgroundColor = '#000'
    // 改class名称
        box.className = 'box myClass'

读取并修改标签体

let box = document.querySelector('.box')
// 1. textContent 修改和读取标签体里的文本内容
    console.log(box.textContent);
    box.textContent = '<div style="background-color: #00f;">ok</div>'

// 2. innerText 修改和读取标签体里的文本内容
    console.log(box.innerText)
    box.innerText = '<div style="background-color: #00f;">ok</div>'

// 3. innerHTML 修改和读取标签体里的html内容
    console.log(box.innerHTML)
    box.innerHTML = '<div style="background-color: #00f;">ok</div>'

读取元素样式

let box = document.querySelector('.box');
// 一: dom 对象的 style 属性
// style 属性只能读取元素的 style 无法读取 <style> 标签中的内容
    console.log(box.style.width);
    console.log(box.style.backgroundColor);
// style 属性可以被赋值
    box.style.height= '300px'

// 二: document.styleSheets
// 只能读取 html 文档中 <style> 标签中的属性 无法读取元素身上的 style 属性
    console.log(document.styleSheets);

    // document.styleSheets[0] 代表第一个 style 标签
    let styleTag = document.styleSheets[0]

    // styleTag.cssRules[0] 代表第一个样式表
    let boxStyles = styleTag.cssRules[0]

    // 可以赋值属性
    boxStyles.style.backgroundColor = '#0f0'

// 三: getComputedStyle
// 可以读取元素身上所有的属性 但是无法赋值
    let style = getComputedStyle(box)
    console.log(style.backgroundColor);
    console.log(style.width);
    console.log(style.height);

简单的元素事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 1. 标签上的 on... 来添加事件处理程序 -->
    <!-- <button onclick="clickHandler()">点击</button> -->
    <button>点击</button>
</body>
<script>
    // 1. 通过元素的 on... 属性，例如 onclick
    function clickHandler() {
        console.log('按钮被点击了');
    }

    // 2. dom对象的 on... 属性，例如 dom.onclick
    let btn = document.querySelector('button')
    btn.onclick = function () {
        console.log('按钮被点击了1');
    }

    // 3. dom.addEventListener
    btn.addEventListener('click', () => {
        console.log('按钮被点击了2');
    })
</script>

</html>

三、数据类型

3.1、变量与常量

3.1.1 var

变量就是存储数据的容器，变量是一个可以变化的量，数据可以发生变化。js 中预留了一些代表特殊含义的英文单词，这些单词我们称为关键字。

声明后不赋初始值默认都为 undefined

声明变量：语法：var 变量名

同时声明多个变量并赋予初始值：语法：var c, d = 10, e;

修改变量：变量在存储新值之前讲完全弃用原来的值
c = 2

3.1.2 let

let 声明变量和使用变量的方法和 var 没有区别；let 变量不能重复定义 var 变量可以重复定义。

3.1.3 const（常量）

恒定不变的值为常量，声明时必须赋初始值且声明后无法修改。

3.1.4 访问变量或常量

变量值存进容器以后，我们需要从容器中取出来进行使用，这个过程就叫访问

3.1.5 变量命名规范

1，必须以字母开头，或者使用 $ 或者 _ 开头 ,不能用数字，变量名建议不要使用中文
2，小驼峰命名法：多个单词构成的名字，第一个单词全小写，后面的首字母大写
3，为了提高代码的可读性，命名规范，见名知意
4，不能使用关键字（有特殊功能的名字：class、var、this）

3.2、八大数据类型

判断数据类型使用 typefof 进行判断

（1）boolean 布尔型数据

该类型数据用于描述对错真假，只有两个值 true 真 false 假

（2）number 数字类型

用于描述数字。其中 Infinity 代表无限大的数字。Not a Number 代表不是数，缩写为 NaN。

判断一个值是否是NaN：使用 isNaN( )

（3）String 字符串类型

将很多的字符串起来就是字符串。可以使用单、双引号来定义字符串。

转义：
        转变字符原有的含义就称为转义
        使用斜杠进行转义过后的字符就是转义字符
        常见的转义字符: \n 换行 \t 制表符

（4）BigInt 长整型

用来描述一个位数非常长的整型数字。bigint类型的数只能和另一个bigint类型的数进行运算。

数据后面带n 则表示为长整型

（5）null 空类型

空类型唯一的值就是 null。

null 的含义: 用来代表对象类型的空引用(空指针)

由于 null 代表的是引用地址(指针) 又因为 js 把引用地址理解为对象，所以用typeof检测数据类型输出 object

（6）undefined 未定义类型

一个变量声明后不赋值，则它的值为 undefined。未定义类型中只有一个值叫做 undefined

（7）Symbol 符号类型，专用来创建类中的匿名属性或函数

Symbol.for Symbol.keyFor 可以访问全局Symbol注册表。
全局注册表上可以存放全局可访问的 Symbol 值。

Symbol 作为 key 声明的对象属性无法被枚举
Symbol 作为 key 声明的对象属性只能通过相同的 Symbol 值访问

（8）Object 对象类型

对象是一组数据的集合，所有能被构造的（包含constructor构造器）类型都是对象，所以函数数组本质上也是对象

3.3、类型转换

不同类型之间的数据是可以互相转换类型的，这个过程叫数据转换

3.3.1 boolean 转换成其他类型

let b = true
    // 转换数字
    b = Number(b)
    // 除了 Number 以外 还能使用 parseInt parseFloat 进行转换
    console.log(b); // => 1
    b = false
    b = Number(b)
    console.log(b) // => 0

// true 转换数字为 1 false 转换数字为 0

    // 转换字符串
    b = true
    console.log(b);
    b = String(b)
    console.log(b); // => true 的字符串
    b = false
    b = b + '' // 连接字符串时，js会自动转换数据格式为字符串，这是一个隐式转换
    console.log(b); // => false 的字符串

3.3.2 数字类型转其他类型

let num = -123
    // 转boolean
    num = Boolean(num)
    console.log(num); // => true
    num = 0
    num = Boolean(num)
    console.log(num); // => false

    // 数字为0 结果为 false 否则结果为 true

    // 转字符串
    num = String(1314)
    console.log(num); // => 1314

3.3.3 字符串转其他类型

let str = 'hello world'
    // 转boolean值
        str = Boolean(str)
        console.log(str); // => true
        str = ''
        str = Boolean(str)
        console.log(str); // => false

    // 空字符串为 false 其余为 true

    // 转数字
        str = 'hello world'
        str = Number(str)
        console.log(str); // => NaN
    // 加法运算符直接写在字符串前，可以产生转换成数字的效果
        str = '6e+2'
        str = +str
        console.log(str);//=> 600

    // 若字符串代表的是合法数字则转换为对应数字 否则为 NaN

3.3.4 对象转其他类型

    let obj = { a: 1, b: 2 }
    // 转 boolean 值
    obj = Boolean(obj)
    console.log(obj); // => true

    obj = null // 此处赋值 undefined 效果一样
    obj = Boolean(obj)
    console.log(obj); // => false

    // 变量是 null 或 undefined 时 转换结果为 false；对象只要存在 结果就为 true

    // 转数字
    obj = { a: 1, b: 2 }
    obj = Number(obj)
    console.log(obj); // => NaN

    // 转字符串
    obj = { a: 1, b: 2 }
    obj = String(obj)
    console.log(obj); // [object Object]
    // 对象强转字符串结果始终为 [object Object]

四、节点操作

4.1、查询节点

dom对象中可以查询其父节点和子节点

获取tr：let tr = document.querySelector('.tr')

访问子节点使用 children 属性

children 属性包含一个子节点的集合，所以访问具体子节点可以使用索引值

4.2、插入节点

插入节点分两个步骤：1. 创建节点；2. 插入节点到文档中

创建节点：document.createElement( )来创建节点

插入节点：appendChild( ) 追加一个子元素

                insertBefore 插入节点到另一个节点前
                        第一个参数：要插入的元素
                        第二个参数：插入位置的子节点

4.3、删除节点

节点的remove可以删除元素，removeChild( ) 删除子节点，参数是想要删除的子节点dom对象。

4.4、替换节点

替换节点语法：parent.replaceChild(newNode, child)
        parent: 要替换节点的父节点
        newNode: 新的要插入文档的节点
        child: 被替换的节点

五、运算符和条件判断

5.1、流程控制—条件判断

5.1.1 if条件判断

用于进行条件判断的语句
        1. if 语句要么执行要么不执行
        2. if else 语句，一定有一个会被执行，二选一
        3. if else if 语句，多选一或都不执行
        4. if else if else 语句，一定有一个会被执行，多选一

5.1.2 switch 语句

语法：判断value值为多少，如果为constant1则执行其后的代码，
        如果为constant2则执行其后的代码，
        如果不满足所有的case语句，则执行default
        switch ( value ) {
                case constant1:
                        // code
                        break;
                case constant2:
                        break;
// ... 可以有任意多个case语句
                default: // default 不是必须要写的
                break;
        }

5.2、运算符

5.2.1 比较运算符

比较运算符： >、 <、>=、 <=、 ==、 !=、 ===、!==、 ©< >

比较运算符用于对运算符左右两个值进行比较。比较运算符的运算结果为boolean值，用于指示比较结果为真或者假。

== 非严格相等判断：非严格相等判断在运算符左右两边不需要使用相同的数据类型，当数据类型不同时 == 运算符将自动进行隐式转换

=== 严格相等：类型和值都相等才会被认为相等

5.2.2 赋值运算符

赋值运算符： = += -= *= /= %= ++ --

自增自减运算符位置的区别：运算符放前面，则先运算后引用；运算符放后面，则先引用后运算

5.2.3 逻辑运算符

逻辑运算符：符合逻辑条件时将返回真或假；&&与 ||或 !非 ~异或 &按位与 |按位或

&& 与：语法：bool expression && bool expression；两个表达式都为真，结果返回真；任意一个表达式为假，结果返回假

|| 或：语法：bool expression || bool expression；两个表达式任一一个为真，结果返回真；否则为假

!非：作用是取反：语法： !(tool express)

5.2.4 三目(元)运算符

三元运算符: 用于判断一个表达式结果，为真时，返回结果1，为假时返回结果2；嵌套三元运算符在问号或冒号处可以换行
语法：bool expression? case1: case2
作用：主要用在给变量赋值；

5.2.5 算术运算符

算术运算符： + - * / % **（幂运算）

六、数组和循环

6.1、循环

循环就是重复执行某一段代码的行为

继续循环、结束本次循环，继续下一次循环 continue;

跳出循环 break;

6.1.1 for 循环

语法：for( 初始化语句; 循环条件; code block 运行一次结束后运行的代码 ) { // code block }
初始化语句：初始化变量值
循环条件：循环条件是个布尔表达式，若结果为真，则执行 code block 的代码块

6.1.2 while 循环

当……时，就循环执行代码
语法：while (condition) {code block}

condition: while循环的条件，是一个布尔表达式，若成立则执行循环的 code block

6.1.3 do while 循环

先执行循环代码，再判断循环条件

语法：do {code block } while (condition)

6.2、数组

数组：存储一组数据的一个容器

如何判断一个变量是不是数组：Array.isArray 方法检测：是数组的话返回 true 否则为 false

使用脚本形式声明数组
let arr = [false, 2, 'hello world', { name: '张三' }, null, undefined]

数组中的每一个数据称为数组成员

访问数组成员：使用索引值访问数组中的成员
索引：数组给每个成员的编号称为索引，索引值从零开始依次递增1
访问数组成员时，若索引超出数组范围，则获取到的结果为 undefined

给数组成员赋值：使用数组变量名加上索引值进行赋值，可以给指定索引位置的成员进行赋值

数组长度（指的就是数组成员的个数）。若赋值的时候索引若不是正整数，该值将被视为数组对象的属性值，不计入数组成员，所以不会影响数组长度

6.3、数组操作

let arr = [1, 2, true, { name: 'Amy' }, 2]

    // push 追加数据到数组末尾
    // 参数：被添加的新数组成员
    arr.push('hello world')
    console.log(arr);


    // pop 从尾部取出一个成员
    // 返回值是取出的成员
    let r = arr.pop()
    console.log(r);
    console.log(arr);

    // unshift 在头部添加数据
    // 参数：被添加的新数组成员
    arr.unshift('my best day')
    console.log(arr);


    // shift 从头部取出一个成员
    // 返回值是取出的成员
    r = arr.shift()
    console.log(r);
    console.log(arr);


    // push 和 unshift 可以批量添加成员
    arr.push('a', 'b', 'c')
    arr.unshift('x', 'y', 'z')
    console.log(arr);


    // splice 删除指定位置的成员，并用新成员替换，或插入新成员到指定成员的前面
    // 第一个参数：删除成员的起始位置
    // 第二个参数：删除成员的个数
    // 第三个参数：用于替换被删除成员的新数据，该参数可以省略
    // 删除三个成员：
    // r = arr.splice(6, 3)
    // splice的返回值 就是被删除的成员数组
    // console.log(r);

    // 在指定成员前追加新数据
    // 若第二个参数为0，则可以实现在指定位置的前面添加成员的功能
    arr.splice(6, 0, { name: 'Bob' })
    console.log(arr);



    // concat 连接数组
    // 参数：多个被追加进数组的成员，若成员是数组，该数组中每个成员将被加入原数组
    // concat 返回一个新数组
    // r = arr.concat(7, 8, 9)
    // r = arr.concat([7, 8, 9], [10, 11])
    // console.log(r);
    // console.log(arr);

    // concat 的应用场景多用于克隆数组
    let arr2 = [].concat(arr)
    console.log(arr2);
    console.log(arr === arr2);


    // join 使数组成员用一个字符连接起来
    // join 函数接收一个参数，该参数就是连接数组成员时使用的字符
    arr2 = ['abc', 'xyz', '123']
    r = arr2.join('-*-')
    console.log(r);


    // includes 判断是否包含某成员
    r = arr.includes('z')
    console.log(r);



    // indexOf 查询指定数组成员的索引
    r = arr.indexOf('b')
    console.log(r);
    // 可以使用indexOf判断是否包含某个数组成员 若不包含 返回 -1
    r = arr.indexOf('g')
    console.log(r); // => -1
    if (arr.indexOf('g') === -1) {
        console.log('该数组成员不存在');
    }

    // lastIndexOf 查询最后一个指定数组成员的索引（应为数组成员可能重复）
    console.log(arr.indexOf(2));
    console.log(arr.lastIndexOf(2));

    // slice 数组切片 获取子数组
    // 切片遵循“前截后不截”原理: 起始位置包含在结果内，结束位置不包含
    r = arr.slice(5, 8)
    console.log(r);
    // 参数只有一个，代表从该位置开始 一直截取到最后
    r = arr.slice(5)
    console.log(r);

6.4、数组的迭代操作

let students = [
        { id: 0, name: '张三', sex: 'male', age: 16 },
        { id: 2, name: '隔壁老王', sex: 'other', age: 30 },
        { id: 1, name: '李四', sex: 'female', age: 20 },
    ]

    // 以下所有的遍历函数的参数都是相同的回调函数
    // 回调函数接收以下参数
    // el 被遍历的当前数组成员
    // index 被遍历的当前成员的索引
    // arr 被遍历的数组对象


    // forEach 循环遍历每一个数组成员
    // students.forEach((el, index, arr) => {
    //     console.log(el);
    //     console.log(index)
    //     console.log(arr);
    // })


    // every 和 forEach 一样遍历每个数组成员，但是中途可以跳出循环
    // students.every((el, index, arr) => {
    //     console.log(el);
    //     console.log(index)
    //     console.log(arr);

    //     if (el.sex === 'female') {
    //         // every 的回调函数中需要返回一个bool值 false 类似于循环语句中的 break 用于跳出循环
    //         return false
    //     }

    //     // 类似于 continue 继续循环
    //     return true
    // })


    // map 映射数组到新数组中
    // map 的回调函数将返回一个值，代表当前被遍历的数组成员在新数组中的投影
    // map 函数将返回一个新的投影数组

    // 例如将students中所有的年龄放入一个新数组
    // let r = students.map((el, index, arr) => {
    //     console.log(el);
    //     console.log(index)
    //     console.log(arr);

    //     // return 的内容将被放到新的数组中
    //     return el.age
    // })

    // console.log(r);


    // filter 过滤器
    // filter 返回过滤完后的新数组
    // let r = students.filter((el, index, arr) => {
    //     console.log(el);
    //     console.log(index)
    //     console.log(arr);

    //     // 过滤掉年龄大于25岁的成员
    //     // if (el.age > 25) {
    //     //     // return false 代表过滤掉该数据
    //     //     return false
    //     // }
    //     // return true // return true 代表保留该数据

    //     return el.age <= 25
    // })
    // console.log(r);



    // find 查找
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find

    // some 查询是存在满足条件的成员
    // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some


    // find 查找符合回调函数条件的数组成员并返回它
    // 返回值为查询结果
    // let r = students.find((el, index, arr) => {
    //     // // 查找女同学
    //     // if (el.sex === 'female') {
    //     //     return true // return true 代表当前成员就是要查找的元素
    //     // }
    //     // return false

    //     return el.name === '隔壁老王'
    // })
    // console.log(r);

    // findIndex 查找对应成员所在索引
    // 使用方法和 find 相同，返回结果为查找到的成员索引
    // let r = students.findIndex((el, index, arr) => {
    //     return el.name === '隔壁老王'
    // })
    // console.log(r);


    // some 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
    // 给出一个判断条件，some 函数将对每个成员都做出相同的判断
    // 任意成员符合条件返回 true 时 some函数则返回true 否则为 false

    // 请判断 arr2 中是否有成员存在于 arr1 中
    let arr1 = ['x', 'y', 'z']
    let arr2 = ['a', 'b', 'z']

    // let r = arr2.some((el, index, arr) => {
    //     // 判断当前数组成员是否再 arr1 中存在
    //     if (arr1.includes(el)) {
    //         // 返回 true 代表 找到一个满足条件的数组成员
    //         return true
    //     }
    //     return false
    // })
    // console.log(r);


    // sort 排序

    // 若调用 sort 函数不传参数时，会使用浏览器默认的排序规则
    let numList = [90, 12, 110, 9, 40, 214]
    // let numList = [90, 12, 11, 92, 40, 21]
    numList.sort()
    console.log(numList);

    // 自定义排序

    // 排序规则：按年龄从小到大排序


    // sort 参数是一个排序规则的函数
    // el1 和 el2 代表的是排序时两两比较的两个数组成员
    // 排序原理是，将每个成员都和剩下所有成员进行比较，每一对 el1 和 el2 决定他们的先后顺序
    // 也叫“冒泡排序”
    // sort 函数执行完后将返回新数组
    students.sort((el1, el2) => {
        if (el1.age > el2.age) {
            // el1.age 若大于 el2.age 则 若从小到达排列 el1 应该放到 el2 的右侧
            // 右侧联想 右箭头 >；即大于符号，则此处应该返回一个大于零的值
            return 1
        } else if (el1.age < el2.age) {
            // el1.age 若小于 el2.age 则 若从小到大排列 el1 应该放到 el2 的左侧
            // 左侧联想到 左箭头 < ；即小于符号，所以返回一个小于 0 的值
            return -1
        } else {
            // 若 el1 和 el2 不需要交换顺序 则返回 0
            return 0
        }
    })
    console.log(students);

6.5、数组去重

let arr = [1, 5, 1, 2, 2, 4, 6, 5, 6, 4]

    // 有以下两种方法供参考

    // 1. 缓存重复数据
    // 缓存
    let temp = {}
    // 结果数组
    let result = []
    for (let i = 0; i < arr.length; i++) {
        const item = arr[i];
        // 判断 item 充当 key 是否存在于 temp 中
        // if (temp[item]) {
        if (!Reflect.has(temp, item)) {
            // item 不存在于 temp 的 key 中
            result.push(item)
            // 添加缓存
            temp[item] = true
        }
    }
    console.log(result);

    // 使用 filter 去重
    temp = {}
    result = arr.filter(el => {
        // 若缓存中没有el
        if (!temp[el]) {
            // 加入缓存
            temp[el] = true
            return true
        }
        return false
    })
    console.log(result);

    // 2. 使用 set 集

    // 构造set对象，set对象会自动去重
    let set = new Set(arr)
    console.log(set);
    // 将set转换为数组
    result = Array.from(set)
    console.log(result);

    // 合成一句话
    console.log(Array.from(new Set(arr)));

七、字符串操作

7.1、字符串的基础操作

let str = 'hello world !!!'

    // 字符串可以被视为字符数组
    // 查看字符串长度
    console.log(str.length);


    // 通过索引访问字符串中的字符
    console.log(str[4]);


    // charAt 函数可以获取指定索引处的字符
    // 等价于 str[4]
    console.log(str.charAt(4));


    // split: 分割字符串
    // 参数：用于分割字符串的字符
    // 返回值：字符串数组
    let r = str.split(' ')
    console.log(r);


    // split + join 替换字符

    // 例如：替换字符 *|& 为 _
    str = 'hello*|&world*|&!!!'
    r = str.split('*|&')
    r = r.join('_')
    console.log(r);



    // trim: 去掉字符串首尾空格
    str = '          hello world !!!          '
    console.log(str);
    r = str.trim()
    console.log(r);


    // substring: 截取子字符串
    // 第一个参数：截取字符串的起始索引位置
    // 第二个参数：截取字符串的结束索引位置
    // 口诀：前截后不截
    // 返回值：截取出来的子字符串
    str = 'hello world !!!'
    r = str.substring(4, 9)
    console.log(r);

    // 第二个参数可以省略，如果只写一个参数，substring将从该参数位置一直截取到字符串末尾
    r = str.substring(6)
    console.log(r)


    // indexOf: 查询字符串中指定字符在字符串中的索引位置
    // 参数：要查询的字符串
    // 返回值：被查询字符串的索引
    console.log(str.indexOf('o'));


    // lastIndexOf
    console.log(str.lastIndexOf('o'))

    // 举例: 截取字符串从 o ~ r
    console.log(str.substring(str.indexOf('o'), str.lastIndexOf('r') + 1));


    // startsWith: 用于判断字符串是否以指定字符串开头
    // 参数：指定开头的字符串
    // 返回值：bool值，true代表是以指定字符串开头的，false代表不是
    console.log(str.startsWith('hello'));

    // endsWith: 用于判断字符串是否以指定字符串结尾
    console.log(str.endsWith('!!!!'));



    // toUpperCase toLowerCase 将字符串中的英文转成全为大写或小写
    str = str.toUpperCase()
    console.log(str);
    str = str.toLowerCase()
    console.log(str);

    // 例如: 统计一个字符串中出现了多少个a字符，忽略大小写
    str = 'alhdAkdjfalKHgladhfdjAhg'
    str = str.toLowerCase()
    let count = 0
    for (let i = 0; i < str.length; i++) {
        const char = str[i];
        if (char === 'a') count++
    }
    console.log(count);


    // 补充：
    // 数字操作：
    // toFixed 保留小数点后多少位的函数
    // 参数：指定小数点后保留几位
    // 返回值：是一个保留了指定小数点位数的字符串
    let num = 3.1415926
    r = num.toFixed(3)
    console.log(r);

7.2、正则表达式

7.2.1 正则表达式简介

正则表达式：用于匹配字符串的表达式。例如：可以写一个正则表达式，用于鉴定一个字符串是否是邮箱格式的字符串

声明一个正则表达式
方法一:
let regex = new RegExp('^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.(com|cn)$')

方法二:使用两根 / 斜线代表正则表达式的边界
regex = /^[0-9a-zA-Z]+@[0-9a-zA-Z]+\.(com|cn)$/

调用正则表达式的test方法用于检测字符串是否符合正则表达式的描述。est 返回 true 代表受测字符串符合正则表达式描述的特征。

7.2.2 正则表达式语法

不开全局模式只会匹配到第一个符合条件的字符串；全局模式的正则表达式将匹配所有符合条件的字符串；在正则表达式的后面使用 g flag 来开启全局模式；另外一个 flag 是 i 代表忽略大小写

\d : 10进制数；\D : 非10进制数

\r: 回车 \n: 换行

\s: 所有不可见字符，制表符回车换行空格等 \S: 所有可见字符

.: 基本等于任意字符但不包括 \r\n

\t: 制表符

\ 斜杠：转义

^ ：匹配字符串的开头；regex = /^abc/

$ ：匹配字符串的结尾；regex = /xyz$/

* ：匹配任意次；regex = /^o*k$/

? : 匹配0次或1次；regex = /^o?k$/

+ : 匹配至少1次；regex = /^o+k$/

{n} : 匹配指定次数；regex = /^o{2}k$/

{n,} : 匹配至少n次；regex = /^o{2,}k$/

{n,m} : 匹配至少n次，至多m次；regex = /^o{1,3}k$/

[xyz]: 匹配字符集合，匹配一个字符，该字符在方括号内；regex = /^[xyz]$/

x|y : 或；regex = /^(good|bad)$/

[^xyz]: 匹配负值集合，匹配一个字符，该字符不在方括号内；regex = /^[^xyz]$/

[a-z] [0-9] : 取范围值，匹配一个字符，该字符在指定范围内；regex = /^[A-Z][0-9]$/

[^5-7]: 取范围负值，匹配一个字符，该字符不在指定范围内；regex = /^[^5-7]$/

(pattern): 将pattern里面的所有字符当作一个字符处理；regex = /^abc(123)+xyz$/

站在字符串的角度看，圆括号不仅有分组的作用，同时，它将被取值；regex = /abc(123)+xyz/

(?:pattern): 匹配分组内容，但不获取圆括号中的值；regex = /abc(?:123)+xyz/

先行断言：语法: x(?=y)；x 跟随 y 时匹配 x

先行否定断言：语法: x(?!y)；x 后没有 y 跟随时匹配 x

后行断言：语法: (?<=y)x；x 的前有 y 则匹配 x

后行否定断言：语法: (?<!y)x；x 前没有 y 则匹配 x

八、闭包和计时器

8.1、闭包

闭包也叫函数闭包，通过函数产生一个封闭的内存空间，包裹一些需要被保存的数据，且函数需要返回一个持续引用的对象，这就叫闭包。

为了方便理解，做如下的假设:
        1. 假设有一个函数A
        2. A内声明变量B
        3. A返回一个包含函数的内容
        4. A返回的包含的函数必须引用变量B
        5. 此时函数A就是闭包的
应用场景
        闭包用于存储一些不让函数外访问的数据，或者为了避免作用域中变量名的冲突，可以使用闭包

8.2、计时器

计时器：当经过指定时间后触发一段代码的函数就是一个计时器

clearInterval() 用于清空计时器

注意事项：
1. 尽量不使用 setInterval。理由：setInterval 可能由于人为原因忘了关闭，或者内部出现异常，导致代码死循环
2. 若要做大量循环调用甚至是无限循环调用时（例如轮询死循环调用），请使用 setInterval 而不是使用 setTimeout 递归进行循环。理由：setTimeout 会占用大量内存堆栈

8.2.1 setTimeout

第一个参数：计时器计时结束后触发的函数
第二个参数：计时时长，单位:毫秒
返回值: 计时器id；计时器id 用于停止计时：clearTimeout(timerId)

8.2.2 setInterval 循环计时函数

setInterval 函数，每次经过指定时间，触发一次指定的函数，参数和返回值与 setTimeout 相同

九、时间对象和数学函数

9.1、时间对象

创建时间对象的方法
语法：new Date(params)

9.1.1 当前系统时间

let date = new Date()

注：Date 时间对象默认修改了对象的 toString 方法所以转字符串时，会显示成时间字符串

9.1.2 创建指定时间字符串的时间

date = new Date('1997-07-07')

注：不推荐使用，因为这是个非标准时间字符串，不同浏览器解析方式可能不同

9.1.3 通过格林威治毫秒时创建时间

date = new Date(1000 * 60 * 60 * 24 * 365)

9.1.4 通过年月日时分秒创建时间

参数分别代表年月日时分秒；注意：月份是从0开始计算的
date = new Date(2000, 5, 6, 18, 44, 22)

9.1.5创建时间

参数至少写前两个参数，后续参数可以省略；例如：
date = new Date(2000, 5, 6, 18, 44)
date = new Date(2000, 5, 6, 18)
date = new Date(2000, 5)

9.1.6 读取时间与设置时间

    // 读取时间
    let date = new Date()
    console.log(date.getFullYear()); // 年
    console.log(date.getMonth()); // 月  月份从0开始计算
    console.log(date.getDate()); // 日 一个月中的第几天
    console.log(date.getDay()); // 一周中的第几天 一周中的第一天是周日 值为 0
    console.log(date.getHours()); // 时
    console.log(date.getMinutes()); // 分
    console.log(date.getSeconds()); // 秒
    console.log(date.getMilliseconds()) // 毫秒

    // 设置时间
    date.setFullYear(2023)
    date.setMonth(0)
    date.setDate(5)
    date.setHours(20)
    date.setMinutes(66)
    date.setSeconds(66)
    date.setMilliseconds(1000)
    console.log(date);