当前位置：首页 > news >正文

JavaScript 复习

news 2025/2/9 1:19:33

文章目录

语法前置
- 语法组成
- 引入位置
- - 内部引入
  - 外部引入
基础语法
- 输出
- 变量
- - 变量声明规则
  - 变量赋值
  - 变量的作用范围
- 数据类型
- 强制类型转换
- - 强转为 `Number`
  - 强转为 `Boolean`
  - 强转为 `String`
  - 强转为 `整数 | 浮点数`
- 运算符
- 流程控制
- 隐式转换
- 函数
- 常用内置对象
- - `String` 对象
  - `Array` 数组对象
  - `Math` 数学对象
  - `Data` 日期对象
  - 定时器
  - 自定义对象
事件绑定
- 通过元素绑定事件
- 通过 `DOM` 绑定事件
- 常见事件
- - 鼠标事件
  - 键盘事件
  - 表单事件
`DOM` 编程
- 基本操作步骤
- 通过 `document` 获取页面元素 `element`
- 对 `element` 进行操作
- - 操作元素的属性
  - 操作元素的样式
  - 操作元素的文本
  - 增删元素
- 表单操作
`BOM` 编程
- `Window` 对象
- `Window` 常用方法
- - 警告框
  - 询问框
  - 确认框
- `Location` 属性
- `History` 属性
`SessionStorge` 和 `LocalStorage`
- 基本概念
- 使用
正则表达式
- 创建正则表达式对象
- 验证
- 匹配
- 替换
- 全文查找
- 忽略大小写
- 元字符使用
- 常见正则表达式
ES6 语法
- `let` 关键字
- `const` 关键字
- 解构表达式
- 链判断
- 参数默认值
- 箭头函数
- 模板字符串
- `Promise` 异步
- - 异步概念
  - `promise` 对象
  - `fectch api`
- `Async` 函数
- 模块化
- 命名导出
- - 导入命名导出
  - 默认导出
  - 导入默认导出
  - 同时导入默认导出和命名导出
  - 导入整个模块

语法前置

语法组成

在这里插入图片描述

引入位置

内部引入

可以在 <head> 中写也可以在 <body> 中写。<script> 可以有多个

<head><script></script><script></script>
</head><body><script></script>
</body>

外部引入

内部外部引入没有优先级一说，谁后写执行谁，因为是叠上去的

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>//这里引入了外部 js<script src="./js/index.js"></script>
</head>

基础语法

输出

<script>console.log("hello world");
</script>

在这里插入图片描述

变量

变量声明规则

变量名必须以字母，数字，下划线，美元符号组合而成。并且不能以数字开头
不能使用关键字作为变量名
变量名严格区分大小写
变量名建议使用小驼峰命名法，第一个单词首字母小写，第二个单词起首字母大写，例如 userName

变量赋值

<script>//第一种var age;age = 18;//第二种var age = 18//第三种var age="18", name="张三";//第四种	var name, agename = "张三";age = 18;
</script>

变量的作用范围

局部变量：在函数内部声明的变量，只能在函数内部访问
全局变量：在函数外声明的变量，全局都可以访问
.

JS中没有代码块的概念，只有函数这一说

数据类型

在这里插入图片描述

查看数据类型

var age = 18;
//输出 number
console.log(typeof age);

数据类型详细

number：就是所有关于数字的，不管整数，小数注意除0 的结果是无穷大 NaN 也是 number类型

boolean：就是 true 和 false

undefined：就是 var num 这种，没有任何类型，就是未定义

String：就是字符，一个字符也是字符，用单引号，双引号都行

null：当前这个类型，没有指向任何对象

强制类型转换

强转为 `Number`

Number(" ")

强制转成 Number 类型

<script>//强转为Number 类型//如果有字母就是 NaNvar num = Number("123");console.log(num)console.log(typeof num)
</script>

强转为 `Boolean`

Boolean()

0 ，-0，null，" "，false，undefined，或者 NaN，用 Boolean() 强转为 false。其他值为 true

<script>var b = Boolean(0);console.log(b);console.log(typeof b);
</script>

强转为 `String`

String()

<script>var num = 10;var str = String(num);console.log(str);console.log(typeof str);
</script>

强转为 `整数 | 浮点数`

parseInt(" ")：转化为 number 中的整数
parseFloat(" ")：转化为 number 中的浮点数

注意：如果数字后有英文，就截止到英文之前，有空格也支持转换

<script>//输出123console.log(parseInt(" 12powernode123 "))console.log(parseFloat(" 123.45powernode123"))
</script>

运算符

在这里插入图片描述
注意点

=== ：是全等于 (值和类型都要相等)
JS 中字符串和数字比较也可以相等比如 123 和 “123” 相等
用了字符串拼接符，拼接了就是字符类型比如 “hello” + 100 就是 “hello100”
JS 中 || 操作符两边的操作数可以是任何类型的值，返回值是两个操作数中为真的那个数，不一定是布尔类型。

流程控制

基本和 java 一样

和 java 不同点

在 Java 中，switch 语句的表达式只能是整数类型（如 byte、short、int、char）或者枚举类型。
在 JavaScript 中，switch 语句的表达式可以是任意类型的值，包括字符串、对象等。

隐式转换

在这里插入图片描述
第二条补充： NaN 和 undefined 都是转换成 NaN

函数

函数属于引用类型

function 函数名 ( 参数1，参数2...... ，参数3 ) {...}

function 是一个关键字，和 var typeof 一样，后面都要加空格
函数名后的 () 放置形式参数，形参可以为任意多个 (也可以没有形参)
使用函数：函数名(实参1，实参2......，实参3);

<script>//函数声明function add(a, b) {return a + b;}//使用函数var num =  add(2,3);console.log(num);
<script>

常用内置对象

参考手册点击这里

`String` 对象

str.length：返回字符串长度
str.charAt(0)：返回 0 索引的字符超出范围就什么也拿不到，也不会抛异常
str.indexOf("world")：查找 world 在字符串中的位置，第一个 w 出现的位置。如果没有就返回 -1

`Array` 数组对象

特点

JS 是弱类型语言，所以一个数组可以存放多种类型的元素
长度可以动态调整，可以随着数据增加或减少自动对数组长度做更改
访问数组的时候，如果元素索引不存在就返回 undefined
可以用 arr[0] = 111 这样根据索引修改元素

常见属性

arr.length：返回数组长度
arr.length = 3：调整数组长度为 3

常用方法

arr.push(55)：往数组最后放元素，并返回新的长度
arr.unshift(0)：往数组最前面放元素，并返回新的长度
arr.pop()：删除数组最后一个元素，并返回该元素
arr.shift()：删除数组第一个元素，并返回该元素

<body><script>//创建一个空数组var arr1 = [];//创建数组并带有指定元素var arr2 = ["11", "22", "33", "44"];// new 方式创建数组var arr4 = new Array();//创建一个指定长度的数组var arr5 = new Array(10);//创建数组并指定数据var arr6 = new Array(10, 20, 30, 40);</script>
</body>

`Math` 数学对象

Math.PI：返回一个 PI 值
Math.round()：四舍五入
Math.floor()：向下取整，就是往比他小的数取整
Math.ceil()：向上取整
Math.abs()：取绝对值
Math.min()：取最小值
Math.max()：取最大值
Math.pow()：次方
Math.random()：获取 0 - 1 之间的随机数

`Data` 日期对象

创建对象

var d = new Date() ：表示当前系统时间
var d2 = new Date(2024, 9, 29, 5, 20, 0, 0, 0)：指定年月日时分秒创建月份从 0 开始
var d = new Date(0)：使用毫秒值创建 0 是 1970 年 1 月 1 日 00:00:00 UTC，打印出来东八区偏移 8 h
var d4 = new Date("October 13, 2014 11:13:00")：使用字符串方式创建

常用方法

var year = d.getFullYear();：获取年
var month = d.getMonth();：获取月
var day = d.getDay();：获取天*
d.setFullYear....：修该年年月日

定时器

循环定时器

setInterval(函数名, 毫秒数)：表示多少毫秒执行一次

隔一段时间触发一次函数，做一次动作比如可以用来做轮播图

<body><script>       function fun() {console.log("定时任务执行");}//第一个参数: 定时任务，第二个参数毫秒循环setInterval(fun, 2000);</script>
</body>

在这里插入图片描述

炸弹定时器

setTimeout(函数名, 毫秒数)：表示多少毫秒后执行，只会执行一次

<body><script>       function fun() {console.log("定时任务执行");}//5 秒后执行, 并且只会执行一次setTimeout(fun, 5000);</script>
</body>

自定义对象

new 关键字创建对象

<script>var obj = new Object();//创建一个 name 属性obj.name = "张三";//创建一个 sleep 方法obj.sleep = function() {//访问自定义中的属性要加 thisconsole.log("学生" + this.name + "在睡觉");}console.log(obj.name)obj.sleep();
<script>

字面量创建对象

<body><script>var obj = {name: "张三",age: "18",show: function (girlfriend) {console.log(this.name + "的女朋友是: " + girlfriend);}}console.log(obj.show("小美"))<script>
<body>

事件绑定

通过元素绑定事件

一个事件可以同时绑定多个函数,在一个双引号里面写
一个元素可以同时绑定多个事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function func1() {var flag = window.confirm("你确定提交吗")if (!flag) {window.alert("成功取消提交");return false;} return true;}</script>
</head>
<body>// 这里 return 给浏览器表示不提交表单了<form action="" method="" onsubmit="return func1()"><input type="text", onclick="func2(), func3()", ondblclick="func4()"><input type="submit" value="提交"></form></body>
</html>

通过 `DOM` 绑定事件

windos.onload：当整个页面（包括所有资源，如图片、脚本等）完全加载完成后，会触发该事件并执行对应的函数。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>window.onload 示例</title>
</head><body><img src="https://via.placeholder.com/150" alt="示例图片"><script>window.onload = function () {// 当页面完全加载完成后，会弹出提示框alert('页面已完全加载！');};</script>
</body></html>

常见事件

鼠标事件

属性	描述
onclick	当用户点击某个对象时调用的事件句柄。
oncontextmenu	在用户点击鼠标右键打开上下文菜单时触发
ondblclick	当用户双击某个对象时调用的事件句柄。
onmousedown	鼠标按钮被按下。
onmouseenter	当鼠标指针移动到元素上时触发。
onmouseleave	当鼠标指针移出元素时触发
onmousemove	鼠标被移动。
onmouseover	鼠标移到某元素之上。
onmouseout	鼠标从某元素移开。
onmouseup	鼠标按键被松开。

键盘事件

属性	描述
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。

表单事件

属性	描述
onblur	元素失去焦点时触发
onchange	该事件在表单元素的内容改变时触发( , , , 和 )
onfocus	元素获取焦点时触发
onfocusin	元素即将获取焦点时触发
onfocusout	元素即将失去焦点时触发
oninput	元素获取用户输入时触发
onreset	表单重置时触发
onsearch	用户向搜索域输入文本时触发 ( <input=“search”>)
onselect	用户选取文本时触发 ( 和 )
onsubmit	表单提交时触发

onsubmit 能够阻止提交是因为它是表单元素的一个事件属性，当表单被提交时，会触发这个事件。如果在与 onsubmit 关联的事件处理函数中返回false，浏览器就会理解为不应该继续进行表单提交操作，从而阻止提交。

`DOM` 编程

在这里插入图片描述

基本操作步骤

获取 document dom 树

window.document 简写 document.XXX 可以直接获取元素
.

从 document 中获取要操作的元素

直接获取
间接获取
.

对元素进行操作

操作元素的属性
操作元素的样式
操作元素的文本
增删元素

通过 `document` 获取页面元素 `element`

直接获取元素

document.getElementById：根据 id 属性值获取，返回单个 Element 对象
document.getElementsByTagName：根据标签名称获取，返回 Element 对象数组
document.getElementsByClassName：根据 class属性值获取，返回 Element 对象数组
document.getElementsByName：根据 name属性值获取，返回 Element 对象数组
.

间接获取元素

element.children：通过父元素获取所有子元素数组

element.firstElementChild：通过父元素获取它的第一个子元素

element.lastElementChild：通过父元素获取它最后一个子元素

element.parentElement：通过子元素获取父元素

element.previousElementSibling：获取同级别的前面一个元素

element.nextElementSibling：获取同级别的后面一个元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//通过 id 获取元素function getbyId() {var ele1 = document.getElementById("username");console.log(ele1);}//通过 标签名 获取元素数组function getbyTag() {var ele2 = document.getElementsByTagName("input")for (var i = 0; i < ele2.length; i++) {console.log(ele2[i]);}}//通过 class 获取元素数组function getbyClass() {var ele3 = document.getElementsByClassName("t1")console.log(ele3[0])}//通过 name 获取元素数组function getbyName() {var ele4 = document.getElementsByName("input");console.log(ele4[0]);       }</script>
</head><body><input type="button" id="username" value="通过id获取元素" onclick="getbyId()"><input type="button" id="password" value="通过标签名获取元素数组" onclick="getbyTag()"><input type="button" id="password" class="t1" value="通过class获取元素数组" onclick="getbyClass()"><input type="button" id="password" class="t1" value="通过name获取元素数组" name="input" onclick="getbyName()"></body></html>

对 `element` 进行操作

操作元素的属性

element.属性名 = 新属性值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function changeAttribute() {//先获取元素var in1 = document.getElementById("in1");//语法 元素.属性名 = ""console.log(in1.type);console.log(in1.value);//修改里面的属性in1.type = "button";in1.value = "嗨";}</script>
</head>
<body><input id="in1" type="text" value="hello"><hr><button onclick="changeAttribute()">变</button>
</body>
</html>

操作元素的样式

element.style.样式名 = 新样式

注意：若样式名有 - 转为驼峰式比如 backgroung-color 转为 backgroungColor

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>//操作属性function changeAttribute() {//先获取元素var in1 = document.getElementById("in1");//语法 元素.属性名 = ""console.log(in1.type);console.log(in1.value);in1.type = "button";in1.value = "嗨";}//操作样式function changeStyle() {//获取元素var in1 = document.getElementById("in1");//语法 元素.style.样式名 = "" //若样式名有 "-" 转为驼峰式 比如 backgroung-color 转为 backgroungColorin1.style.color = "green";}</script><style>#in1 {color: red;}</style>
</head>
<body><input id="in1" type="text" value="hello"><hr><button onclick="changeAttribute()">操作样式</button><button onclick="changeStyle()">操作属性</button></body>
</html>

操作元素的文本

element.innerText：只能操作文本
element.innerHTML：如果文本有 HTML 标签也可以识别

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function changeText() {var div01 = document.getElementById("div01");/*语法 元素名.innerText / 元素名.innerHTML*/console.log(div01.innerText)div01.innerText = "嗨"div01.innerHTML = "<h1>嗨</h1>"}</script>
</head><body><div id="div01">hello</div><button onclick="changeText()">操作文本</button>
</body></html>

增删元素

注意只是在页面文档树中删除，源代码不会变

document.createElement(标签名)：创建一个标签元素
document.createTextNode(“文本值”)：创建文本值
element.appendChild(ele)：将 ele 添加到 element 子节点后面，最后一个子节点后面
element.insertBefore(新元素，参照元素)：将新元素，插到 element 子节点中参照元素的后面
element.replaceChild(新元素，参照元素)：将 element 子元素中的参照元素替换为新元素
element.remove()：删除 element 元素

表单操作

element.value = ""：获取表单的值，也可以修改
element.checked = true/false：设置选中状态
element.selected = true/false：设置下拉框默认选择状态
element.disabled = true/false：设置禁用效果
element.submit()：提交表单
element.reset()：重置表单

<body><div id="parent"><form action="#" method="get">姓名:<input type="text" name="username" id="username"><br>女<input type="radio" class="sex" value="woman" id="1">男<input type="radio" class="sex" value="man" id="2"><br>故乡:<select id="city"><option value="023" id="chongqing">重庆</option><option value="021" id="beijing">北京</option><option value="027" id="wuhan">武汉</option><option value="020" id="shanghai">上海</option><input type="submit"></form></div><script>//获取或者设置表单的 value 信息var ele = document.getElementById("username");ele.value = "张三";console.log(ele.value);//获取单选框的选中状态，或者设置选中状态var ele2 = document.getElementById("1");ele2.checked = true;//设置下拉框默认选择var ele3 = document.getElementById("beijing");ele3.selected = true;//设置禁用效果var ele4 = document.getElementById("2");ele4.disabled = true;</script>
</body>

在这里插入图片描述

`BOM` 编程

浏览器对象模型(Browser Object Model）允许浏览器与 JS 对话
简单来说：就是整个浏览器抽象成 window 对象

在这里插入图片描述

`Window` 对象

所有浏览器都支持 window 对象，它代表浏览器的窗口

window 对象，可以调用其他内置对象，但是 window 可以省略
window 对象，可以访问内置对象

在这里插入图片描述

		//1.window 对象，可以调用其他内置对象， window 可以省略window.location;window.history;//2. window 对象，访问内置函数window.alert;

`Window` 常用方法

window 可以省略

警告框

window.alert( )

window.alert("开始秒杀了，fuck quickly");

在这里插入图片描述

询问框

window.prompt( )

var key = window.prompt("您请输入会员码");
console.log(key);

在这里插入图片描述

确认框

window.confirm( )

 var flag = window.confirm("确认登录码?");if (flag) {  console.log("确认登录");} else {console.log("不确认登录");}

点击会返回布尔值
在这里插入图片描述

`Location` 属性

window.location.href("...")：控制页面跳转资源

加载 script 的时候直接跳转到百度

<body><script>alert("跳转百度页面");window.location.href = "https:\\www.baidu.com";</script>
</body>

`History` 属性

history.back()：后退到上一个浏览历史页面，相当于用户点击浏览器的 “后退” 按钮。
history.forward()：用于在浏览器历史记录中前进到下一个页面。
history.go(数字)：向前翻几页

后退

<!DOCTYPE html>
<html>
<body><button onclick="history.back()">后退</button>
</body>
</html>

前进

<!DOCTYPE html>
<html>
<body><button onclick="history.forward()">前进</button>
</body>
</html>

跳转指定位置

<!DOCTYPE html>
<html>
<body><button onclick="history.go(-2)">后退两个页面</button><button onclick="history.go(0)">刷新页面</button>
</body>
</html>

`SessionStorge` 和 `LocalStorage`

基本概念

在这里插入图片描述

会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过 window 的 sessionStorge 属性实现
持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过 window 的 localStorge 实现
可以用于将来存储一些服务端响应回来的数据，比如：token令牌,或者一些其他功能数据,根据数据的业务范围我们可以选择数据存储的会话/持久级别

使用

.setItem(String key, String value)：存储信息
.getItem(String key)：获取信息
.remove(String key)：清空信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>function funcD() {//想SessionStorage 中存储数据//浏览器重启信息就没了sessionStorage.setItem("keya", "valueA");//想 localStorage 中存储数据//重启后信息还在localStorage.setItem("keyb", "valueb");}function funcE() {console.log(sessionStorage.getItem("keya"))console.log(localStorage.getItem("keyb"))}function funcF() {sessionStorage.removeItem("keya");localStorage.removeItem("keyb");}</script>
</head>
<body><button onclick="funcD()">存储数据</button><button onclick="funcE()">读取数据</button><button onclick="funcF()">清空数据</button>
</body>
</html>

正则表达式

创建正则表达式对象

就是要用来对比的对象

字面量方式：使用斜杠（/）来界定正则表达式模式。/abc/;
构造函数方式：使用 RegExp 构造函数，传入一个字符串作为正则表达式模式。new RegExp('abc');

验证

test()

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式，返回结果true
console.log(reg.test(str));

匹配

match()

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 在目标字符串中查找匹配的字符，返回匹配结果组成的数组
var resultArr = str.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);// 数组内容是o
console.log("resultArr[0]="+resultArr[0]);

替换

replace()

// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
var newStr = str.replace(reg,'@');
// 只有第一个o被替换了，说明我们这个正则表达式只能匹配第一个满足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!// 原字符串并没有变化，只是返回了一个新字符串
console.log("str="+str);//str=Hello World!

全文查找

如果不使用 g 对正则表达式对象进行修饰，则使用正则表达式进行查找时，仅返回第一个匹配；使用g后，返回所有匹配。举个例子：没用 g 匹配到 123 直接返回了。后面还有 123 就不管了

普通匹配

// 目标字符串
var targetStr = 'Hello World!';// 没有使用全局匹配的正则表达式
var reg = /[A-Z]/;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现只能得到'H'
for(var i = 0; i < resultArr.length; i++){console.log("resultArr["+i+"]="+resultArr[i]);
}

全局匹配

/ 目标字符串
var targetStr = 'Hello World!';
// 使用了全局匹配的正则表达式
var reg = /[A-Z]/g;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为2
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现可以获取到“H”和“W”
for(var i = 0; i < resultArr.length; i++){console.log("resultArr["+i+"]="+resultArr[i]);
}

忽略大小写

忽略大小写匹配就用 i 声明

不忽略大小写

//目标字符串
var targetStr = 'Hello WORLD!';//没有使用忽略大小写的正则表达式
var reg = /o/g;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为1
console.log("resultArr.length="+resultArr.length);
//遍历数组，仅得到'o'
for(var i = 0; i < resultArr.length; i++){console.log("resultArr["+i+"]="+resultArr[i]);
}

忽略大小写

//目标字符串
var targetStr = 'Hello WORLD!';
//使用了忽略大小写的正则表达式
var reg = /o/gi;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为2
console.log("resultArr.length="+resultArr.length);
//遍历数组，得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){console.log("resultArr["+i+"]="+resultArr[i]);
}

元字符使用

其余上网搜

^：以…开头
$：以…结尾

var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java开头
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // false
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // true

var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java结尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // false

常见正则表达式

需求	正则表达式
用户名	/^[a-zA-Z ][a-zA-Z-0-9]{5,9}$/
密码	/^[a-zA-Z0-9 _-@#& *]{6,12}$/
前后空格	/^\s+\|\s+$/g
电子邮箱	/^[a-zA-Z0-9 _.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/

ES6 语法

`let` 关键字

有代码块概念

{var a = 1;let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

不可以重复声明

{var a = 1;let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError: b is not defined

先声明后使用

// var 会变量提升
// let 不存在变量提升
console.log(x); // undefined
var x = 10;
console.log(y); //ReferenceError: y is not defined
let y = 20;

`const` 关键字

声明之后不允许改变。当然引用类型内容可以改。地址不能改
一但声明必须初始化，否则会报错

const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.

解构表达式

数组解构

let arr = [1, 2, 3];
//以前我们想获取其中的值，只能通过下标。ES6 可以这样：
const [x, y, z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值
// 然后打印
console.log(x, y, z);

对象解构

const person = {name: "jack",age: 21,language: ['java', 'js', 'css']
}
// 解构表达式获取值，将 person 里面每一个属性和左边对应赋值
//可以提取部分属性
const {name, age, language} = person;
// 等价于下面
// const name = person.name;
// const age = person.age;
// const language = person.language;// 可以分别打印
console.log(name);
console.log(age);
console.log(language);
//扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名
const {name: nn, age, language} = person;
console.log(nn);
console.log(age);
console.log(language);

链判断

如果读取对象内部的某个属性，往往需要判断一下，属性的上层对象是否存在
,
比如，读取 message.body.user.firstName 这个属性，安全的写法是写成下面这样

let  message = null;
// 错误的写法
const  firstName = message.body.user.firstName || 'default';// 正确的写法
const firstName = (message&& message.body&& message.body.user&& message.body.user.firstName) || 'default';
console.log(firstName)

这样的层层判断非常麻烦，因此 ES2020 引入了“链判断运算符”（optional chaining operator）?.，简化上面的写法。

const firstName = message?.body?.user?.firstName || 'default';

参数默认值

//在 ES6 以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
// 判断 b 是否为空，为空就给默认值 1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a, b = 1) {
return a + b;
}// 传一个参数
console.log(add2(10));

箭头函数

let fn1 = function(){} 
可以用以下来表示
let fn2 = ()=>{}单参数可以省略括号
let fn3 = x => {}。函数体只有一行, 可以省略花括号
let fn4 = x => console.log(x)。函数体只有一句返回值, 可以省略花括号和 return 语句
let fun5 = x => x + 1。

注意

常规函数的 this：在 JavaScript 里，常规函数中 this 通常引用函数所在的对象，或者在函数作为构造函数时，引用新对象的实例。
箭头函数的 this：箭头函数没有自己的 this，其 this 指向定义时的外层上下文环境，而非调用时的上下文。

let person = {name: "张三",showName: function () {console.log(this); // 这里的 this 是 personconsole.log(this.name);},viewName: () => {console.log(this); // 这里的 this 是 windowconsole.log(this.name);}
};
person.showName();
person.viewName();

模板字符串

普通写法

let info = "你好，我的名字是：【"+name+"】，年龄是：【"+age+"】，邮箱是：【】"
console.log(info);

模板字符串写法

${} 中嵌入任意 JavaScript 表达式，包括变量、函数调用、运算表达式等。表达式的结果会被自动转换为字符串并插入到模板字符串中。

# 模板字符串的写法
let info = `你好，我的名字是：${name}，年龄是：${person.age}，邮箱是：${person.email}`
console.log(info);

`Promise` 异步

异步概念

异步：就是这个业务不会阻塞其他业务，这个业务在后面慢慢执行，直接执行后面的业务

let url = "https//www.baidu.com";
//正常执行fetch 3s, 那后面的代码就是3s后再打印。
//这里用 返回的是 Promise 的数据 就不用 3s 先执行其他业务。
//这个在后台慢慢请求。直接往下执行 console.log()
let promise = fetch(url);
console.log(1)

`promise` 对象

待定（pending）：初始状态，既没有被兑现，也没有被拒绝。这是调用 fetch() 返回 Promise 时的状态，此时请求还在进行中。
已兑现（fulfilled）：意味着操作成功完成。当 Promise 完成时，它的 then() 处理函数被调用。
已拒绝（rejected）：意味着操作失败。当一个 Promise 失败时，它的 catch() 处理函数被调用。

自定义 Promise

//resolve 和 reject 固定写法
new Promise((resolve, reject)=> {//某段业务resolve(...); //成功以后传递出去的reject(...); //失败以后传递出去的})

`fectch api`

fetch 是浏览器支持从远程获取数据的一个函数，这个函数返回的就是 Promise 对象。有异步效果
.
通过 fetch() API 会得到一个 Response 对象可以接收

response.status：读取响应状态码
response.json()：读取响应体json数据；（这也是个异步对象）

const fetchPromise = fetch(
"https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);console.log(fetchPromise);fetchPromise.then((response) => {
console.log(`已收到响应：${response.status}`);
});console.log("已发送请求……");

`Async` 函数

定义

async function 是使用 async 关键字声明的函数，是 AsyncFunction 构造函数的实例，函数体内允许使用 await 关键字。

特性

async 函数返回 Promise 对象，使用 async 和 await 关键字能够以更简洁的方式编写基于Promise 的异步代码，避免显式配置 Promise 链。

await 关键字

在异步函数中，可在调用返回 Promise 的函数前使用 await 关键字。代码执行到该点时会等待，直到 Promise 完成，await 会将已完成的 Promise 响应作为返回值，若 Promise被拒绝则抛出错误。通常将 await操作放在try...catch块中，以捕获可能的错误

async function myFunction() {// 这是一个异步函数}

async function fetchProducts() {try {// 在这一行之后，我们的函数将等待 `fetch()` 调用完成// 调用 `fetch()` 将返回一个“响应”或抛出一个错误const response = await fetch("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",);if (!response.ok) {throw new Error(`HTTP 请求错误：${response.status}`);}// 在这一行之后，我们的函数将等待 `response.json()` 的调用完成// `response.json()` 调用将返回 JSON 对象或抛出一个错误const json = await response.json();console.log(json[0].name);} catch (error) {console.error(`无法获取产品列表：${error}`);}
}

模块化

命名导出

// math.js
// 导出变量
export const PI = 3.14159;// 导出函数
export function add(a, b) {return a + b;
}// 导出类
export class Rectangle {constructor(width, height) {this.width = width;this.height = height;}getArea() {return this.width * this.height;}
}

//可以合并
// math.js
const PI = 3.14159;
function add(a, b) {return a + b;
}
class Rectangle {constructor(width, height) {this.width = width;this.height = height;}getArea() {return this.width * this.height;}
}export { PI, add, Rectangle };

导入命名导出

当导入命名导出时，需要使用花括号 {} 来指定要导入的名称，并且名称必须与导出时的名称一致。在导入时，你可以为默认导出指定任意名称。你也可以使用 as 关键字为导入的名称指定别名：

// main.js
// 导入命名导出
import { PI, add, Rectangle } from './math.js';console.log(PI); // 3.14159
console.log(add(2, 3)); // 5const rect = new Rectangle(4, 5);
console.log(rect.getArea()); // 20

// main.js
import { PI as piValue, add as sum, Rectangle as Rect } from './math.js';console.log(piValue); // 3.14159
console.log(sum(2, 3)); // 5const rect = new Rect(4, 5);
console.log(rect.getArea()); // 20

默认导出

每个模块只能有一个默认导出，它可以是一个变量、函数或类。

// message.js
// 导出默认函数
export default function sayHello() {console.log('Hello!');
}

导入默认导出

导入默认导出时，不需要使用花括号 {}，并且可以为其指定任意名称。

// main.js
// 导入默认导出
import greet from './message.js';greet(); // Hello!

同时导入默认导出和命名导出

你可以在一个 import 语句中同时导入默认导出和命名导出。

// 假设 math.js 既有默认导出又有命名导出
// math.js
const defaultFunction = () => console.log('This is a default function');
const PI = 3.14159;export default defaultFunction;
export { PI };

// main.js
import myDefaultFunction, { PI } from './math.js';myDefaultFunction(); // This is a default function
console.log(PI); // 3.14159

导入整个模块

使用 * as 语法可以将整个模块导入为一个对象。
.
注意：当你使用 * as 语法导入整个模块时，模块的默认导出会作为该模块对象的 default 属性存在。

// main.js
import * as math from './math.js';console.log(math.PI); // 3.14159
console.log(math.add(2, 3)); // 5const rect = new math.Rectangle(4, 5);
console.log(rect.getArea()); // 20