异常处理 # 异常处理 try: n = int(input('请输入被除数：')) i = 10 / n print(i) except ZeroDivisionError as e: print('除数不能为0') except: print('请输入正确的数字！') else: print('未被except捕获') finally: print('执行完毕') print('----------------------') # 抛出异常 try: n = input('请输入一个任意数字：') if not n.isdigit(): raise Exception('输入的内容有误，请检查！') else: print('您输入的数字是：%d' % n) except Exception as e: print(e)

组合数据类型 1. 列表# 列表 list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] print(list) # 索引 print(list[1]) # 切片 print(list[::-1]) # 内置函数 print(min(list)) print(max(list)) print(len(list)) print('-------------------------') # 遍历 for i in list: print(i) for i, index in enumerate(list): print(i, index) for i in range(len(list)): print(i, list[i]) # 常用方法 # 添加元素 list.append('a') list.extend('extend') print(list) print('-------------------------') # 插入元素 list.insert(1, 'b') print(list) print('-------------------------') # 根据索引删除元素 list.pop(1) print(list) print('-------------------------') # 删除指定元素 list.remove(1) print(list) print('-------------------------') # 清空列表 list.clear() print(list) 2. 元组# 元组 tuple1 = (1, 2, 3, 4, 5, 6) print(type(tuple1)) print(tuple1) temp_tuple = (1,) # 元组中只有一个元素时，加一个逗号 print(type(temp_tuple)) print('-------------------------') # 类型转换 # str ---> tuple print(tuple('abc')) # list ---> tuple print(tuple([1, 2, 3])) print('-------------------------') # 索引 print(tuple1[1]) # 切片 print(tuple1[::-1]) # 常用方法 print(min(tuple1)) print(max(tuple1)) print(len(tuple1)) print('-------------------------') # 遍历 for i in tuple1: print(i) for index, item in enumerate(tuple1): print(index, item) for i in range(len(tuple1)): print(tuple1[i]) 3. 字符串# 字符串 str = 'sunxiaochuan,liubo' print(min(str)) print(max(str)) print(len(str)) print('-------------------------') # 遍历 for i in str: print(i) for index, item in enumerate(str): print(index, item) for i in range(len(str)): print(str[i]) print('-------------------------') # 常用方法 print(str.islower()) print(str.isupper()) print(str.count('c')) print(str.split(',')) print(str.find('l')) 4. 字典# 字典 d = {} print(type(d)) # <class 'dict'> # 新增值（键值对） d['name'] = 'sunxiaochuan' d['age'] = 33 print(d) # 获取键值对 print(d['name']) # 修改 d['age'] = 30 print(d) print('-------------------------') # 遍历 for i in d: print(i, d[i]) for k, v in d.items(): print(f'{k} = {v}') for k in d.keys(): print(k) for value in d.values(): print(value) print('-------------------------') # 常用方法 # d.pop('name') # print(d) new_dictionary = d.copy() print(new_dictionary) name = d.get('name') print(name) # d.popitem() # print(d) d.update({'age': 50}) print(d) 5. 集合# 集合 s = set() s = {1, 2, 3, 4, 5} # s1 = set([1, 2, 3, 4, 5]) # list ---> set # s2 = set((1, 2, 3, 4, 5)) # tuple ---> set # s3 = set('12345') # str ---> list # s4 = set({'key1': 'value1', 'key2': 1}) # dict ---> list # 常用方法 print(1 in s) print(len(s)) print(min(s)) print(max(s)) # del s # 删除集合 s.add('a') print(s) s.remove(1) print(s) s.update({'a', 'b', 'c'}) print(s) print('-------------------------') # 遍历 for i in s: print(i) print('-------------------------') s1 = {1, 2, 3, 'a', 88} s2 = {'c', 'b', 3, 1, 'f'} print(s1 & s2) # 交集 print(s1 | s2) # 并集 print('-------------------------') # 去重 s3 = set([1, 1, 2, 3, 4, 5, 6, 6, 7]) print(s3)

循环 1. while# while index = 0 while index < 100: print(index) index += 1 2. for# for for i in range(100): print(i) # 求n的阶乘 result = 0 index = 1 while index <= 5: current_result = 1 m = 1 while m <= index: current_result = current_result * m m += 1 result += current_result index += 1 print("5的阶乘为：%d" % result) 3. break# break for i in range(10): print(i) if i == 3: print("结束循环") break 4. continue# continue for i in range(10): if i == 5: continue print(i)

条件判断 1. 单分支# 单分支 flag = 1 if flag == 1: print("标志位为1") if True: print("符合判断条件")2. 双分支# 双分支 flag = 1 if flag == 1: print("标志位为1") else: print("标志位不为1") if True: print("符合判断条件") else: print("不符合判断条件") 3. 多分支# 多分支 flag = 1 if flag == 1: print("标志位为1") elif flag == 2: print("标志位为2") elif flag == 3: print("标志位为3") else: print("未匹配到对应的标志位") 4. match# match flag = 1 match flag: case 1: print("标志位为1") case 2: print("标志位为2") case 3: print("标志位为3") case _: print("未匹配到对应的标志位")

运算符与表达式 1. 算术运算符# 算术运算符 a = 1 b = 2 # 加 print(a + b) # 减 print(a - b) # 乘 print(a * b) # 除 print(a / b) # 整除（取整） print(a // b) # 求模 print(a % b) # 幂运算 print(a ** 2) 2. 赋值运算符# 赋值运算符 a = 1 # 自增 a += 1 print(a) # 自减 a -= 1 print(a) 3. 比较运算符# 比较运算符 a = 1 b = 2 # 不等于 != print(a != b) # 等于 == print(a == b) # 字符串比较（比较的是每个字符的ascii码值） print("abc" < "efg") print("abc" == False) 4. 逻辑运算符# 逻辑运算符 # 与 and print(1 and 2) print(False and True) print("abc" and "edg") # 短路运算，按字符顺序比较，当第一个字符 e > a 时，返回edg # 或 or print(1 or 2) print(0 or 1) print(False or True) # 非 not print(not 1) print(not False) print(not "") # 三者之间的优先级关系 not > and > or print(True or False and not False) 5. 位运算符# 位运算符 # 按位与 & ''' 101 111 --- 101 ''' print(5 & 7) # 按位或 | ''' 101 111 --- 111 ''' print(5 | 7) # 按位异或 ''' 101 111 --- 010 ''' print(5 ^ 7) # 按位取反 ~ ''' 101 --- 010 ''' print(~5) # 左移 右移 ''' 101 --- 10100 ''' print(5 << 2) 6. 成员运算符# 成员运算符 str = "这是一个字符串" print("a" in str) a = 1 b = 2 print(a is b) print(a is not b)

变量与简单类型 参考尚硅谷 mia木棉老师1. 变量# 创建 name = "孙笑川" age = 33 print(name) # 修改 name = "药水哥" print(name) # 变量的数据类型 print(type(name)) print(type(age)) 2. 整数# 整数 num1 = 10 num2 = -10 print(type(num1)) # <class 'int'> 3. 浮点数# 浮点数 float_num = 1.2 print(type(float_num)) # <class 'float'> # 浮点数四舍五入 import math # 向上取整 print(math.ceil(float_num)) # 2 # 向下取整 print(math.floor(float_num)) # 1 4. 字符串# 字符串 str = "这是一个字符串" str1 = ''' 这是另一个字符串 多行的形式 ''' print(str) print(str1) # 字符串拼接（注：字符串不能与数字拼接） print(str + str1) # 字符串乘法 # 打印10个abc print("abc" * 10) # abcabcabcabcabcabcabcabcabcabc 5. 字符串索引# 字符串索引 str = "这是一个字符串，变量名是str" # 切片 变量名[起始索引:结束索引 + 1:步长] # 起始索引默认为0，可以省略 # 结束索引默认为-1，可以省略 # 步长默认为1，可以省略 # 切片的是一个左闭右开的区间 print(str[0:3]) # 这是一 print(str[::2]) # 这一字串变名sr # 字符串反转 print(str[::-1]) # rts是名量变，串符字个一是这 6. 数据类型的转换# 数据类型的转换 # 字符串 ---> 整数 str = '2025' str_2_int = int(str) print(int(str_2_int), type(str_2_int)) # 浮点数 ---> 整数 float_num = 1.1 float_2_int = int(float_num) print(float_2_int, type(float_2_int)) # 布尔值 ---> 整数 bool_value = True print(int(bool_value)) # 字符串 ---> 浮点数 str1 = "1.23" print(float(str1)) # 字符串 ---> 布尔值 str2 = "1.234" print(bool(str2)) print(bool(""))

十、DOM 1. document对象<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>document对象</title> </head> <body> <script> /* document对象: - 表示的是整个网页 - 原型链： HTMLDocument -> Document -> Node -> EventTarget -> Object.prototype -> null - 部分属性： - document.documentElement html根元素 - document.head head元素 - document.title title元素 - document.body body元素 - document.links 页面中的所有超链接 ...... - mdn文档：https://developer.mozilla.org/en-US/docs/Web/API/Document */ </script> </body> </html> 2. 元素节点<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>元素节点</title> </head> <body> <script> /* 元素节点： - 在网页中，每一个标签都是一个元素节点 - 如何获取元素节点对象？ 1. 通过document对象获取 2. 通过document对象创建 - 通过document来获取已有的元素节点： - document.getElementById(): - 根据id获取一个 - document.getElementsByClassName(): - 根据元素的class属性值获取一组元素节点对象 - 返回的是一个类数组对象，不是数组 - 返回结果是实时更新的（即当网页中添加了新的元素，返回结果也会同步实时更新） - document.getElementsByTagName(): - 根据标签名获取一组元素节点对象 - 同理getElementsByClassName()方法 - document.getElementsByTagName("*") 获取网页中的所有元素节点对象 - document.getElementsByName(): - 根据name属性获取一组元素节点对象 - 同理getElementsByClassName()方法 - 常用于获取 form 表单中的元素节点对象 - document.querySelectorAll(): - 根据选择器获取元素节点对象 - 返回结果是一个类数组对象（不会实时更新） - document.querySelector(): - 根据选择器获取网页中第一个符合条件的元素节点对象 - 创建元素节点对象： - document.createElement(): - 根据标签名创建元素节点对象 - const div = document.createElement('div') */ </script> </body> </html> 3. 元素的属性和方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>元素的属性和方法</title> </head> <body> <script> /* 通过元素节点对象获取其他节点的方法： - element.childNodes 获取当前元素的子节点（包含空白的子节点，文本，换行符等等） - element.children 获取当前元素的子元素 - element.firstElementChild 获取当前元素的第一个子元素 - element.lastElementChild 获取当前元素的最后一个子元素 - element.nextElementSibling 获取当前元素的下一个兄弟元素 - element.previousElementSibling 获取当前元素的前一个兄弟元素 - element.parentNode 获取当前元素的父节点 - element.tagName 获取当前元素的标签名 */ </script> </body> </html> 4. 文本节点<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>文本节点</title> </head> <body> <script> /* 网页中的所有文本内容都是文本节点对象 - element.textContent 获取或修改元素的文本内容 - 获取的是标签中的原始内容，不考虑css样式 - element.innerText 获取或修改元素的文本内容 - 当修改的内容中包含html元素时，会自动进行转义 - 获取内容时，会考虑css的样式（展示什么获取的就是什么） - 读取css样式时，会触发网页的重排（计算css样式） - element.innerHtml 获取或修改元素中的html代码 - 插入内容时，有xss注入风险 */ </script> </body> </html> 5. 属性节点<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>属性节点</title> </head> <body> <input id="aaaa" class="aaa" type="text" name="username" value="admin"/> <script> /* 属性节点（Attr）: - 如何操作属性节点： 方式一： - 读取：元素.属性名（注：class属性需要使用calssName来读取） - 修改：元素.属性名 = 属性值 方式二： - 读取：元素.getAttribute(属性名) - 修改：元素.setAttribute(属性名, 属性值) - 删除：元素.removeAttribute(属性名) */ const input = document.querySelector("[name=username]") console.log('input.type:', input.type) console.log('input.id:', input.id) console.log('input.class:', input.className) console.log('input.name:', input.name) console.log('input.value:', input.value) //input.value = '孙笑川' console.log('---------------------------------------'); console.log('input.getAttribute(\'type\'):', input.getAttribute('type')) console.log('input.getAttribute(\'id\'):', input.getAttribute('id')) console.log('input.getAttribute(\'class\'):', input.getAttribute('class')) console.log('input.getAttribute(\'name\'):', input.getAttribute('name')) console.log('input.getAttribute(\'value\'):', input.getAttribute('value')) input.setAttribute('value', '药水哥') input.setAttribute('disabled', true) input.removeAttribute('disabled') </script> </body> </html> 6. 事件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>事件</title> </head> <body> <!-- <button id="btn" onclick="alert('直接在元素的属性中设置')">点一下</button> --> <button id="btn">点一下</button> <script> /* 事件（Event）： - 用户与网页之间发生的交互行为 - 可以通过为事件绑定响应函数，来完成与用户之间的交互 - 绑定方式： 1. 直接在元素的属性中设置 2. 为元素的指定属性设置回调函数来绑定（一个事件只能绑定一个响应函数，后来者居上） 3. 通过元素的 addEventListener() 方法来绑定（可以重复绑定，先绑定的谁，谁先执行） */ const btn = document.getElementById('btn') //btn.onclick = function() { // alert('为元素的指定属性设置回调函数来绑定') //} btn.addEventListener("click", function() { alert('通过元素的 addEventListener() 方法来绑定') }) </script> </body> </html> 7. 文档的加载<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>文档的加载</title> <script> // 方式二 //window.onload = function() { // const btn = document.getElementById('btn') // console.log(btn) //} //window.addEventListener('load', function() { // const btn = document.getElementById('btn') // console.log(btn) //}) // 方式三 //document.addEventListener('DOMContentLoaded', function() { // const btn = document.getElementById('btn') // console.log(btn) //}) </script> <script defer src="./script/index.js"></script> </head> <body> <button id="btn">点一下</button> <script> /* 网页是自上而下加载的，如果将js代码编写到网页的上边（之前），js代码在执行时，网页还没有加载完毕，这时会出现无法获取DOM的情况 解决方案： 1. 将 script 标签放到 body 之后 - 所有方式中优先级最高 2. 将js代码写到 window.onload 的回调函数中 - 网页中所有的文档加载完后才执行 3. 将js代码写到 document 对象的 DOMContentLoaded 的回调函数中 - 当前文档加载完毕之后触发（相比方式二执行时机更早） 4. 将代码编写到外部的js文件中，然后以defer的形式引入 - 相比方式三执行时机更早 */ // 方式一 //const btn = document.getElementById('btn') //console.log(btn) </script> </body> </html> index.jsconst btn = document.getElementById('btn') console.log(btn)8. DOM的修改<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>DOM的修改</title> </head> <body> <button id="btn1">添加元素</button> <button id="btn2">删除元素</button> <button id="btn3">替换元素</button> <ul id="list"> <li id="sxc">孙笑川</li> <li id="ysg">药水哥</li> </ul> <script> const list = document.getElementById('list') const btn1 = document.getElementById('btn1') btn1.onclick = function() { // 创建新的li const li = document.createElement('li') li.innerText = 'Giao哥' li.id = 'gg' // appendChild() 给节点添加子节点 //list.appendChild(li) /* insertAdjacentElement()： - 像元素的指定位置添加元素 - 参数： 1. 要添加的位置： - beforeend 标签的最后 - afterbegin 标签的开始 - beforebegin 在当前元素的前边插入（即插入兄弟元素） - afterend 在当前元素的后边插入（即插入兄弟元素） 2. 要添加的元素 */ //list.insertAdjacentElement('beforeend', li) // 同理 insertAdjacentElement() 方法 list.insertAdjacentHTML('beforeend', '<li id="gg">Giao哥</>') } const btn2 = document.getElementById('btn2') btn2.onclick = function() { const sxc = document.getElementById('sxc') sxc.remove() } const btn3 = document.getElementById('btn3') btn3.onclick = function() { const sxc = document.getElementById('sxc') const li = document.createElement('li') li.innerText = 'Giao哥' li.id = 'gg' sxc.replaceWith(li) } </script> </body> </html> 9. XSS注入问题<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>XSS注入问题</title> </head> <body> <script> /* 在涉及到需要将用户输入的内容插入到网页中时， 尽量使用 元素.innerText 或 元素.textContent 方法代替 元素.innerHTML 方法 前两种方法在赋值时会进行转义 */ </script> </body> </html> 10. 节点的复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>节点的复制</title> </head> <body> <button id="btn">复制节点</button> <ul id="list1"> <li id="l1">孙笑川</li> <li id="l2">药水哥</li> <li id="l3">Giao哥</li> </ul> <ul id="list2"> <li>刘波</li> </ul> <script> // 点击按钮后，复制list1的节点到list2 const list1 = document.getElementById('list1') const list2 = document.getElementById('list2') const l1 = document.getElementById('l1') const btn = document.getElementById('btn') btn.onclick = function() { /* cloneNode() 方法： - 参数： - false（默认值） 复制节点的所有属性，但不包括子节点 - true 复制所有信息，包括子节点 */ const newL1 = l1.cloneNode(true) newL1.id = 'newL1' list2.appendChild(newL1) } </script> </body> </html>11. 修改css样式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>修改css样式</title> <style> .box1 { width: 200px; height: 200px; background-color: lightblue; } .box2 { width: 300px; height: 300px; border: 1px black solid; background-color: lightgreen; } </style> </head> <body> <button id="btn">修改样式</button> <hr/> <div class="box1"></div> <script> // 点击按钮后修改box1的样式 const box1 = document.getElementsByClassName('box1')[0] const btn = document.getElementById('btn') // 直接修改样式（不建议直接使用） // btn.onclick = function() { // // 修改宽度 // // 元素.style.样式名（小驼峰） = 样式值 // box1.style.width = '300px' // box1.style.backgroundColor = 'lightgreen' // } // 通过class属性间接修改样式 btn.onclick = function() { // 不建议这么操作 // box1.className += ' box2' /* 元素.classList: - 是一个对象，提供了对当前元素的 class 的各种操作方法 - 常用方法： - add(): 向元素中添加一个或多个 class - remove(): 移除指定 class - toggle(): 切换元素的class（一次只能操作一个） - replace(): 替换 class - contains(): 检查是否包含指定 class */ // box1.classList.add('box2', 'box3') // box1.classList.remove('box2') // box1.classList.toggle('box2') // box1.classList.replace('box1', 'box2') console.log(box1.classList.contains('box1')) } </script> </body> </html>12. 读取css样式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>读取css样式</title> <style> .box1 { width: 200px; height: 200px; background-color: lightblue; } .box1::before { color: blueviolet; content: '测试'; } </style> </head> <body> <button id="btn">读取样式</button> <hr/> <div class="box1"></div> <script> // 点击按钮后读取css样式 const box1 = document.getElementsByClassName('box1')[0] const btn = document.getElementById('btn') btn.onclick = function() { /* getComputedStyle(): - 读取指定元素所有生效的样式，以对象的形式返回 - 参数： 1. 要获取样式的对象 2. 要获取的伪元素 - 注：样式对象中返回的值不一定能直接拿来计算， 有可能是 auto 等等 */ const styleObj = getComputedStyle(box1) console.log(styleObj) const box1Before = getComputedStyle(box1, '::before') console.log(box1Before.content) } </script> </body> </html>13. 通过属性读取样式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>通过属性读取样式</title> <style> .box1 { width: 200px; height: 200px; background-color: lightblue; margin: 50px; padding: 50px; border: 2px black solid; overflow: auto; } .box2 { width: 100px; height: 500px; background-color: lightcoral; } </style> </head> <body> <button id="btn">读取样式</button> <hr/> <div id="box1" class="box1"> <div id="box2" class="box2"></div> </div> <script> const btn = document.getElementById('btn') const box1 = document.getElementById('box1') btn.onclick = function() { /* 获取元素内部的高度和宽度（包括内容区和内边距）： 元素.clientWidth 元素.clientHeight 获取元素的可见框的大小（包括内容区，内/外边距）： 元素.offsetHeight 元素.offsetWidthyuan 获取元素滚动区域的大小： 元素.scrollHeight 元素.scrollWidth 获取元素的定位父元素： 元素.offsetParent 注：定位父元素：离当前元素最近的开启了定位的祖先元素，如果都没有开启，则返回body 获取元素相对于其定位父元素的偏移量： 元素.offsetTop 元素.offsetLeft 获取元素滚动条的偏移量： 元素.scrollTop 元素.scrollLeft */ console.log(box1.scrollTop) console.log(box1.scrollLeft) } </script> </body> </html>14. 事件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>事件</title> <style> .box1 { width: 300px; height: 300px; background-color: lightblue; border: 1px black solid; } </style> </head> <body> <div id="box1" class="box1"></div> <script> /* 事件（Event）： - 浏览器在事件触发时所创建的对象 - 如：鼠标的坐标、键盘的按键等等 - 浏览器在创建事件对象后，会将其作为响应函数的参数传递 可以在事件的回调函数中定义一个形参来接收事件对象 */ const box1 = document.getElementById('box1') // box1.onmousemove = function(event) { // console.log(event) // } // box1.onmousemove = event => { // console.log(event) // } // box1.addEventListener('mousemove', function() { // console.log(event) // }) box1.addEventListener('mousemove', event => { console.log(event) }) </script> </body> </html> 15.事件对象<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>事件对象</title> <style> .box1 { width: 300px; height: 300px; background-color: lightblue; border: 1px black solid; } .box2 { width: 150px; height: 150px; background-color: lightcoral; border: 1px black solid; } .box3 { width: 75px; height: 75px; background-color: lightseagreen; border: 1px black solid; } </style> </head> <body> <div id="box1" class="box1"> <div id="box2" class="box2"> <div id="box3" class="box3"></div> </div> </div> <a id="test" href="https://www.bing.com" target="_blank">点击跳转</a> <script> /* DOM中有多种不同类型的事件对象： - 共同祖先 Event： - event.target 表示触发事件的对象 - event.currentTarget 绑定事件的对象（与this同理） - event.stopPropagation() 停止事件的传递 - event.preventDefault() 取消事件的默认行为（推荐使用） - 事件的冒泡（bubble）： - 指事件的向上传递 - 当元素上的某个事件被触发后，其祖先元素上的相同的事件也被同时触发 */ const box1 = document.getElementById('box1') box1.onclick = event => { console.log('box1', event.target) alert('box1') } const box2 = document.getElementById('box2') box2.onclick = event => { console.log('box2', event.target) alert('box2') } const box3 = document.getElementById('box3') box3.onclick = event => { console.log('box3', event.target) // 停止冒泡事件 event.stopPropagation() alert('box2') } const test = document.getElementById('test') test.addEventListener('click', event => { // 取消事件的默认行为 event.preventDefault() alert('点击后不进行超链接跳转') }) </script> </body> </html> 16. 事件的冒泡<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>事件的冒泡</title> <style> .box1 { width: 75px; height: 75px; background-color: lightblue; border-radius: 50%; position: absolute; } .box2 { width: 300px; height: 300px; background-color: lightcoral; } .box3 { width: 200px; height: 200px; background-color: lightgreen; } .box4 { width: 150px; height: 150px; background-color: lightgray; position: absolute; bottom: 0; } </style> </head> <body> <div id="box1" class="box1"></div> <div id="box2" class="box2"></div> <div id="box3" class="box3" onclick="alert('box3')"> <div id="box4" class="box4" onclick="alert('box4')"></div> </div> <script> // 使box1跟随鼠标移动 document.addEventListener("mousemove", (event) => { box1.style.left = event.x + "px" box1.style.top = event.y + "px" }) const box2 = document.getElementById("box2") box2.addEventListener("mousemove", (event) => { event.stopPropagation() }) // 点击box4依然会触发事件冒泡，弹出box3，即事件的冒泡与元素的样式无关，只与结构有关 </script> </body> </html> 17. 事件委派<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>事件委派</title> </head> <body> <button id="btn">添加</button> <ul id="list"> <li><a href="javascript:;">链接一</a></li> <li><a href="javascript:;">链接二</a></li> <li><a href="javascript:;">链接三</a></li> <li><a href="javascript:;">链接四</a></li> </ul> <script> const links = document.getElementsByTagName("a") // for (let i = 0; i < links.length; i++) { // links[i].addEventListener('click', event => { // alert(links[i].textContent) // }) // } const list = document.getElementById("list") const btn = document.getElementById("btn") btn.addEventListener("click", () => { list.insertAdjacentHTML("beforeend", `<li><a href="javascript:;">链接${Math.ceil(Math.random() * 10)}</a></li>`) }) //需求：只进行一次事件绑定，即可让所有的超链接（不管是原有的还是新添加的）都具有指定的事件 document.addEventListener("click", (event) => { if ([...links].includes(event.target)) { alert(event.target.textContent) } }) /* 事件委派： - 将原本绑定给多个元素的事件，统一绑定给document（此处以绑定给document为例，绑定的对象随业务场景的不同而不同） - 降低代码的复杂度 */ </script> </body> </html> 18. 事件的捕获<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>事件的捕获</title> <style> .box1 { width: 300px; height: 300px; background-color: lightblue; } .box2 { width: 200px; height: 200px; background-color: lightcoral; } .box3 { width: 100px; height: 100px; background-color: lightgrey; } </style> </head> <body> <div id="box1" class="box1"> <div id="box2" class="box2"> <div id="box3" class="box3"></div> </div> </div> <script> /* 事件的传播机制： - 在DOM中，分为三个阶段： 1. 捕获阶段（由祖先元素向目标元素进行事件的捕获） 2. 目标阶段（触发事件的对象） 3. 冒泡阶段（由目标元素向祖先元素进行事件的冒泡） - 默认情况下是在冒泡阶段触发事件 - 事件的捕获： - 指事件从外向内的传导 - document -> html -> body -> 具体元素 - 默认情况下，事件不会再捕获阶段触发 - 可以通过设置 元素.addEventListener() 方法的第三个参数为true来在捕获阶段触发事件（一般不这么使用） */ const box1 = document.getElementById('box1') const box2 = document.getElementById('box2') const box3 = document.getElementById('box3') // 通过设置第三个参数为true，在捕获阶段触发点击事件 // 此时 alert 的顺序为：box1 -> box2 -> box3 // 一般情况下不会这么使用 box1.addEventListener('click', event => { alert('box1 - ' + event.eventPhase) // event.eventPhase 事件触发的阶段 // 1：捕获阶段 2：目标阶段 3：冒泡阶段 }, true) box2.addEventListener('click', event => { alert('box2 - ' + event.eventPhase) }, true) box3.addEventListener('click', event => { alert('box3 - ' + event.eventPhase) }, true) </script> </body> </html> 19. BOM对象<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>BOM对象</title> </head> <body> <script> /* BOM: - 浏览器对象模型 - 通过BOM对象，可以完成对浏览器的各种操作 - 五个BOM对象： - Window：浏览器窗口（全局对象） - Navigator：浏览器的对象 - Location：浏览器的地址栏信息 - History：浏览器的历史记录（控制浏览器的前进后退） - Screen：屏幕信息 */ </script> </body> </html> 20. Navigator<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Navigator</title> </head> <body> <script> /* Navigator（浏览器的对象）： - mdn文档：https://developer.mozilla.org/en-US/docs/Web/API/Navigator */ console.log(navigator.userAgent) </script> </body> </html> 21. Location<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Location</title> </head> <body> <button id="btn">点一下</button> <script> /* Location（浏览器的地址栏信息）： - mdn文档：https://developer.mozilla.org/en-US/docs/Web/API/Location */ const btn = document.getElementById('btn') btn.addEventListener('click', () => { // 可以直接给location赋值，表示跳转到指定地址 // location = 'https://www.bing.com' // 等价于直接赋值 //location.assign('https://www.bing.com') // 执行替换之后不能通过历史记录回退 //location.replace('https://www.bing.com') // 刷新页面 // location.reload() // 强制清缓存刷新 Ctrl + F5 location.reload(true) }) </script> </body> </html> 22. History<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>History</title> </head> <body> <button id="btn">点一下</button> <script> /* History（浏览器的历史记录）： - mdn文档：https://developer.mozilla.org/en-US/docs/Web/API/History */ const btn = document.getElementById('btn') btn.addEventListener('click', () => { // 后退 // history.back() // 前进 // history.forward() // 1：前进1，-1：后退1 history.go(1) }) console.log('历史记录的数量：', history.length) </script> </body> </html> 23. 定时器<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定时器</title> </head> <body> <div id="num"></div> <script> /* 定时器： - 让代码在指定时间后执行 - 设置方式： 1. setTimeout(): - 参数： 1. 回调函数 2. 延迟的时间（单位毫秒） - 关闭定时器： - clearTimeout() 2. setInterval(): - 每间隔一段时间，代码就执行一次 - 参数： 1. 回调函数 2. 延迟的时间（单位毫秒） - 关闭定时器： - clearInterval() */ const timer = setTimeout(() => { alert('延迟1.5s再执行') }, 1500) // 关闭定时器 clearTimeout(timer) const timer1 = setInterval(() => { alert('延迟2s再执行') }, 2000) clearInterval(timer1) // const num = document.getElementById('num') // let index = 0 // setInterval(() => { // index ++ // num.textContent = index // }, 2000) /* 定时器的本质，即在指定时间后将函数添加到消息队列中 注：函数实际的执行时间要看调用栈的情况 */ // console.time() // setTimeout(() => { // console.timeEnd() // console.log('setTimeout()定时器执行了...') // // 打印结果为： // // default: 5003.26904296875 ms // // 定时器执行了... // }, 3000) // const begin = Date.now() // while (Date.now() - begin < 5000) {} /* setInterval()方法每隔一段时间就将函数添加到消息队列中， 但函数执行的间隔时间受函数自身执行速度的影响，所以每次的间隔时间不一定是定时器中指定的间隔时间 */ // console.time() // setInterval(() => { // console.timeEnd() // console.log('setInterval()定时器执行了...') // alert('setInterval()') // console.time() // }, 3000) // 需求：确保函数每一次执行的间隔时间都相同 // console.time() // setTimeout(function test() { // console.timeEnd() // console.log('确保函数每一次执行的间隔时间都相同') // console.time() // setTimeout(test, 3000) // }, 3000) // 打印结果为 222 \n 111 // console.log(222)在主调用栈中，优先级最高 // console.log(111)是在定时器等待0ms后将函数投递到消息队列中 setTimeout(() => { console.log(111) }, 0) console.log(222) </script> </body> </html>24. 事件循环<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>事件循环</title> </head> <body> <button id="btn">点一下</button> <button id="btn1">消息队列测试</button> <script> /* 事件循环（Event Loop）： - 函数在每次执行时，都会产生一个执行环境 - 执行环境负责存储函数执行时产生的一切数据 调用栈（Call Stack）： - 后进先出（后来者居上） - 负责存储函数的执行环境 - 当一个函数被调用时，它的执行环境会作为一个栈帧， 插入到调用栈的栈顶，执行完之后改栈帧会自动弹出 消息队列： - 先进先出 - 负责存储将要执行的函数 - 当触发一个事件时，其执行函数并不是直接添加到调用栈中 即：事件触发后，js引擎将事件响应函数插入到消息队列中排队 */ function test() { console.log('执行test函数') function test1() { console.log('执行test1函数') } console.log('test执行完毕') } // test() const btn = document.getElementById('btn') btn.addEventListener('click', () => { alert('btn按钮') const begin = Date.now() while (Date.now() - begin < 3000) {} }) const btn1 = document.getElementById('btn1') btn1.addEventListener('click', () => { alert('btn1按钮') }) </script> </body> </html>

九、内建对象 1. 数组的解构<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>数组的解构</title> </head> <body> <script> /* 数组的解构 */ const arr = [1, 2, 3, 'abc'] let [a, b, c, d, e] = arr // 声明变量的同时解构赋值 console.log(a, b, c, d, e) console.log('------------------------------') const arr1 = [1, 2, 3, 4, 5, 6] let [f, g, ...h] = arr1 console.log(f, g, h) // 1, 2, [3, 4, 5, 6] console.log('------------------------------') function test() { return [1, 2] } let [i, j] = test() console.log(i, j) console.log('------------------------------') // 可以通过解构赋值来快速交换两个变量的值 let a1 = 1 let a2 = 2 ;[a1, a2] = [a2, a1] // 此处相当于新建了一个数组[2, 1] console.log('a1:', a1, 'a2:', a2) const arr3 = [['孙笑川', 33, '成都'], ['药水哥', 30, '武汉']] let [[name, age, address], people] = arr3 console.log(name, age, address) console.log(people) </script> </body> </html> 2. 对象的解构<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>对象的解构</title> </head> <body> <script> /* 对象的解构: - 变量名需和对象的属性名一一对应 - 如果不想一一对应，可以通过取别名的形式来进行解构 */ const people = { name: '孙笑川', age: 33, address: '成都' } let { name, age, address } = people // 声明变量的同时解构对象 console.log(name, age, address) // 先声明变量，再解构 let name1, age1, address1, gender1 ({ name: name1, age: age1, address: address1, gender: gender1 = '男' } = people) // 变量名取别名进行解构 console.log(name1, age1, address1, gender1) </script> </body> </html> 3. 对象的序列化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>对象的序列化</title> </head> <body> <script> /* js中对象的使用都是存放于计算机内存中的 对象的序列化： - 指将对象转换为一个可以存储的格式 - js中对对象的序列化通常是转换为字符串 - 用途： - 作为数据交换的格式（不同语言之间） - 编写配置文件 - 怎么序列化： - 通过JSON（JavaScript Object Notation）工具类 - 编写JSON的注意事项： 1. JSON字符串有两种形式： - JSON对象 {} - JSON 数组 [] 2. JSON字符串中的属性名必须用双引号引起来 3. JSON中可以使用的属性值： - 数字（Number） - 字符串（String） - 布尔值（Boolean） - 空值（Null） - 对象（Object {}） - 数组（Array []） 4. JSON字符串的最后一个属性的后面不能再加 , 逗号 */ const people = { name: '孙笑川', age: 33, address: '成都' } console.log(people) // 对象转JSON字符串 const peopleStr = JSON.stringify(people) console.log(peopleStr) // JSON字符串转对象 const peopleObj = JSON.parse(peopleStr) console.log(peopleObj) const str = '{"name": "药水哥", "age": 30, "address": "湖北"}' console.log(JSON.parse(str)) </script> </body> </html> 4. 使用JSON深拷贝<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>使用JSON深拷贝</title> </head> <body> <script> const people = { name: '孙笑川', age: 33, address: '成都', hobby: ['直播', '抽象'], friend: { name: '药水哥', age: 30 } } // 浅拷贝 const people1 = Object.assign({}, people) console.log('people1.friend === people.friend', people1.friend === people.friend) // structuredClone深拷贝 const people2 = structuredClone(people) console.log('people2.friend === people.friend', people2.friend === people.friend) // JSON 深拷贝 const people3 = JSON.parse(JSON.stringify(people)) console.log('people3.friend === people.friend', people3.friend === people.friend) </script> </body> </html> 5. Map<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Map</title> </head> <body> <script> /* Map: - 存储键值对 - 创建： new Map() - 属性和方法： - map.size() 获取键值对的数量 - map.set(key, value) 添加键值对 - map.get(key) 根据key获取值 - map.delete(key) 根据key删除指定数据 - map.has(key) 判断map中是否包含指定key - map.clear() 清空map */ const map = new Map() map.set(1, '孙笑川') map.set('2', '药水哥') map.set({name: 'key'}, 'Giao哥') console.log(map) console.log(map.get(1)) map.delete(1) console.log(map) console.log(map.has('abc')) </script> </body> </html> 6. Map补充<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Map补充</title> </head> <body> <script> const map = new Map() map.set('name', '孙笑川') map.set('age', 33) // map转数组 const arr = Array.from(map) const arr1 = [...map] // 推荐使用 console.log(arr) console.log(arr1) // 数组转map const arr3 = [['name', '药水哥'], ['age', 30]] const map1 = new Map(arr3) console.log(map1) // 遍历map for (const entry of map) { console.log(entry) } map.forEach((key, value) => { console.log('key:', key, 'value:', value) }) // map.keys() 获取map的所有key // map.values() 获取map的所有value </script> </body> </html> 7. Set<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Set</title> </head> <body> <script> /* Set: - 用来创建一个集合 - 功能和数组类似（但不能存储重复的数据） - 创建方式： - new Set() - new Set([]) - 常用方法： - size() 集合大小 - add() 添加元素 - has() 判断是否有指定元素 - delete() 删除元素 */ const set = new Set() set.add(1) set.add('abc') set.add(1) console.log(set) console.log(set.has(1)) for (const item of set) { console.log(item) } const arr = [...set] console.log(arr) // 数组去重 const arr1 = [1, 2, 3, 3, 5, 2, 1, 6, 7, 2, 3, 8, 10, 2] const set1 = new Set(arr1) console.log([...set1]) </script> </body> </html> 8. Math<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Math</title> </head> <body> <script> /* Math: - MDN文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math - 常量： - Math.PI 圆周率 - 常用方法： - Math.abs() 求绝对值 - Math.min() 求最小值 - Math.max() 求最大值 - Math.pow(x, y) 求x的y次幂 等价于 x ** y - Math.sqrt() 开平方 等价于 x ** .5 - Math.floor() 向下取整 - Math.ceil() 向上取整 - Math.round() 四舍五入 - Math.trunc() 直接舍弃小数位取整 - Math.random() 返回一个0-1之间的随机数（不包含1） */ </script> </body> </html> 9. Date<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Date</title> </head> <body> <script> /* Date: - js中所有和时间相关的数据都由Date对象来表示 */ let d = new Date() console.log(d) // 获取年份 console.log(d.getFullYear()) // 获取月份（月份索引 0 - 11） console.log(d.getMonth()) // 获取日 console.log(d.getDate()) // 返回当前日期是周几（0 - 6，0表示周日） console.log(d.getDay()) // 参数：年，月，日，时，分，秒，毫秒 let newDate = new Date(2024, 11, 1, 10, 0 ,0) console.log(newDate) // 获取当前时间的时间戳（从1970年1月1日0时0分0秒开始） console.log(d.getTime()) // 获取当前的时间戳 console.log(Date.now()) </script> </body> </html> 10. 日期的格式化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>日期的格式化</title> </head> <body> <script> /* toLocaleString(): - 将日期转换为本地时间格式的字符串 - 参数： 1. 国家地区字符串，如zh-CN en-US 2. 一个对象，通过这个对象设置日期的格式： - dateStyle 日期格式 / timeStyle 时间格式： - full - long - medium -short - hour12 12小时制显示： - true - false - weekday 星期的显示方式： - long - short - narrow ...... */ let d = new Date() // 将日期转换为本地字符串 console.log(d.toLocaleDateString()) // 将时间转换为本地字符串 console.log(d.toLocaleTimeString()) // 将日期转换为本地字符串 console.log(d.toLocaleString('zh-CN', {dateStyle: 'full', timeStyle: 'full'})) </script> </body> </html> 11. 包装类<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>包装类</title> </head> <body> <script> /* 在js中，除了直接创建原始值外，还可以创建原始值的对象： - new String() - new Number() ...... 在js中有5个包装类： - String - Number - Boolean - BigInt - Symbol 通过包装类可以将一个原始值包装为一个对象 当我们对一个原始值调用方法或属性时，js解释器会临时将原始值包装为对应的对象，然后调用其对应的属性或方法 包装类一般情况下是js解释器使用的，不建议开发人员直接通过 new xxx()的形式调用包装类 */ let str = 'test' console.log(str) let str1 = new String('test') console.log(str1) </script> </body> </html> 12. 正则表达式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>正则表达式</title> </head> <body> <script> /* 正则表达式： - 用于定义一个规则，并通过它检查指定字符串是否符合规则，或将符合规则的内容提取出来 使用： 1. 在正则表达式中，大部分字符可以直接写 2. | 表示或 3. [] 表示字符集 - [a-z] 任意小写字母 - [A-Z] 任意大写字母 - [A-Za-z] 任意字母（不区分大小写） - [0-9] 任意数字 4. [^] 表示不包含 - [^a] 不包含a 5. .表示除了换行符之外的任意字符 6. 在正则中使用 \ 作为转义字符 7. 其他字符集 - \w 任意单词字符 等价于 [A-Za-z0-9_] - \W 除了任意单词字符 等价于 [^A-Za-z0-9_] - \d 任意数字 [0-9] - \D 除了数字 [^0-9] - \s 空格 - \S 除了空格 - \b 单词边界 - \B 除了单词边界 8. 开头和结尾 - ^ 表示字符串的开头 - /^a/ 表示以a开头 - $ 表示字符串的结尾 - /a$/ 表示以a结尾 */ // 通过构造函数创建，参数：1.正则表达式，2.匹配模式 let reg = new RegExp('a', 'i') // 使用字面量创建 /正则/匹配模式 reg = /a/i // 判断指定字符串中是否包含a，且忽略大小写判断 console.log(reg) let str = 'a' console.log(reg.test(str)) //true // 匹配换行符外的任意字符 reg = /./ console.log(reg.test(str)) //true // 只匹配 . reg = /\./ console.log(reg.test(str)) //false // 只匹配字符串abc，要求指定字符串必须和正则一致 reg = /^abc$/ str = 'abc' console.log(reg.test(str)) //true str = 'abcabc' console.log(reg.test(str)) //false </script> </body> </html> 13. 正则表达式-量词<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>正则表达式-量词</title> </head> <body> <script> /* 量词： - {m} 指定字符串是否包含m个需要匹配的字符串 - {m,} 至少m个 - {m, n} m-n个 - + 至少一个（一个以上），等价于 {1,} - * 任意数量个指定字符（包含0个） - ? 0 - 1 个指定字符，等价于 {0, 1} */ // 包含5个a let reg = /a{5}/ let str = 'aaaaaaaa' console.log(reg.test(str)) //true // 以a开头和结尾，且只能包含5个a reg = /^a{5}$/ console.log(reg.test(str)) //false // 量词只对前一个字符起作用，如果要包含指定字符串，需要使用括号 reg = /^ab{3}$/ str = 'abababc' console.log(reg.test(str)) //false // 使用括号 reg = /^(ab){3}$/ str = 'ababab' console.log(reg.test(str)) //true // 至少一个小写字母 reg = /^[a-z]{1,}$/ str = 'abcddff' console.log(reg.test(str)) //true // 1 - 3 个小写字母字符 reg = /^[a-z]{1, 3}$/ str = 'abcddff' console.log(reg.test(str)) //false // a之后至少一个b reg = /^ab+$/ str = 'abb' console.log(reg.test(str)) //true // 任意个数个b，没有也行 reg = /^ab*$/ str = 'a' console.log(reg.test(str)) //true // 0 - 1个b reg = /^ab?$/ str = 'abbb' console.log(reg.test(str)) //false </script> </body> </html> 14. 正则表达式-exec方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>正则表达式-exec方法</title> </head> <body> <script> /* reg.exec()：提取字符串中符合正则表达式的内容 */ let str = 'aycaicaoiuatc' // 提取指定字符串中符合 a[x]c 格式的字符串 // g 全局匹配 let reg = /a[a-z]c/ig console.log(reg.exec(str)) // 分组 reg = /a([a-z])c/ig let result = reg.exec(str) console.log(result) console.log(result[0]) console.log(result[1]) </script> </body> </html> 15. 正则表达式-字符串<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>正则表达式-字符串</title> </head> <body> <script> /* split(): - 可以根据正则表达式来对一个字符串进行分割 search(): - 可以搜索符合正则表达式的内容第一次在指定字符串中出现的位置 replace(): - 根据正则表达式替换字符串中的内容 match(): - 根据正则表达式匹配字符串中符合要求的内容 matchAll(): - 根据正则表达式匹配字符串中符合要求的内容（必须设置 g 全局匹配，不然会报错） - 返回值为迭代器 */ let str = 'akljlkj23io11eeol110009ojkpklsd9' console.log(str.split(/[0-9]/)) console.log(str.search(/\d/)) console.log(str.replace(/\d/g, '测试')) console.log(str.match(/\d/g)) let result = str.matchAll(/\d/g) for (let item of result) { console.log(item) } </script> </body> </html>