04 JavaScript ES6基础语法 WebAPIs JS进阶
JavaScript
- 0 材料说明
- 1 JavaScript基础
-
- 1.1 基本介绍
- 1.2 变量&常量
- 1.3 数组 Array
- 1.4 数据类型
- 1.6 运算符
- 1.7 语句
- 1.8 数组
- 1.9 函数
- 1.10 对象
- 2 WebAPIs DOM BOM
-
- 2.1 前置
- 2.2 获取DOM对象
- 2.3 更改对象内容
- 2.4 更改对象属性
-
- 2.4.1 更改对象常用属性
- 2.4.2 更改对象控制样式属性
- 2.4.3 更改表单对象属性
- 2.4.4 其他自定义对象属性
- 2.5 定时器-间歇函数
- 2.6 事件
-
- 2.6.1 事件监听与类型
- 2.6.2 事件对象
- 2.6.3 环境对象 this
- 2.6.4 事件流
- 2.6.5 事件委托
- 2.6.6 其他事件
- 2.7 日期对象
- 2.8 DOM节点增删等操作
- 2.9 moblile端事件
- 2.10 BOM
- 2.11 本地存储
-
-
-
- json字符串登场
-
-
- 2.12 正则表达式
- 3 JavaScript进阶-ES6+语法
-
- 3.1 作用域 scope
-
- 3.1.1局部作用域 local
- 3.1.2 全局作用域 global
- 3.1.3 作用域链
- 3.1.4 垃圾回收 garbage collection
- 3.1.5 闭包 closure
- 3.1.6 变量提升
- 3.2 箭头函数
-
- 3.2.1 函数提升
- 3.2.2 函数参数
- 3.2.3 箭头函数:vue 常用
- 3.3 解构赋值
-
- 3.3.1 数组解构
- 3.3.2 对象解构：常用
- 3.4 构造函数
-
- 3.4.1 对象深入
- 3.4.2 实例成员、静态成员
- 3.4.3 内置构造函数
- 3.5 面向对象
-
- 3.5.1 编程思想
- 3.5.2 原型
- 3.5.3 继承（本节原型继承）
- 3.5.4 原型链
- 3.6 高阶技巧
-
- 3.6.1 深拷贝的3种方式
- 3.6.2 异常
- 3.6.3 this指向
- 3.6.4 防抖节流
- 4 模拟项目练习
-
- 1.5 案例
- 2.5 定时器 轮播图案例
- 2.9 事件-学生信息案例录入
- 2.12 正则-登录注册项目练习
- 3.6.4 视频暂停保存
0 材料说明
跳转b站黑马前端学习路线介绍
b站黑马js（pink）视频教程
github相关代码
1 JavaScript基础
稍有些python底子，此部分笔记代码不如html，css部分琐碎知识点多
1.1 基本介绍
- js组成
JavaScrip语言基础ECMAScript + Web APIs（页面文档对象类型dom + 浏览器对象类型bom）
查询站点：mdn - js书写位置
行内：script标签写在上方
外部：script标签内不需要写东西
内联：代码直接写在html标签内 - 注释 ，结束符号
shift+alt+a多行注释
结束符号;有无皆可 - 基本输入输出语法，警示框优先执行
alert("nihao,js")
document.write("标题
")
console.log('log检查')
prompt('qingshuru:')
1.2 变量&常量
变量-空间容器盒子
-
声明 let
let 变量名 -
赋值
变量名 = “值”
声明+赋值：变量初始化。注意要有空格 -
命名规则
关键字：let，if，var等不可用
_,$，字母，数字4种组成，数字不能开头
严格区分大小写，Age和age不同 -
命名规范
简明有意义
小驼峰命名：userName -
var声明的特点（不建议用var，建议let声明）
1、可以先声明再使用：
console.log(num)
num=10
2、可以多次声明
3、变量提升，全局变量等问题
- 常量声明 const
声明必须初始化
不要修改
建议大写
1.3 数组 Array
let arr = ["liu","li","zhang",10]
console.log(arr[2])
console.log(arr.length)
1.4 数据类型
弱数据类型语言：不需要提前声明，赋值之后才确定数据类型
- 基本数据类型
number：整数、小数、正负数
string：js建议用单引号‘’；
+用于字符串拼接（可拼接不同类型）
模板字符串拼接：
// 模板字符串 ``+${}
// 这里遇到一个小问题，因为我这些小例子代码写到一个文件里。前面的常量再次赋值那里有报错，导致同文件下方的此处代码不运行，注释掉前面的常量赋值就好了
let age = 18
console.log(`今年${age}岁了`)
boolean：true，false-布尔型字面量——字面量就是没有用标识符封装起来的量，是“值”的原始状态。
‘’、0、undefined、null、false、NaN的Boolean（）测试后都为false，其余为true。
undefined：只声明，不赋值——弱数据类型，函数传参会用到
null：声明并且赋值了，值就为null，不太好理解，是一个代表”无“，”空“，”未知的“特殊值，一般作为尚未创建的obj对象。
-
引用数据类型
object 对象
tip：nan——not a number -
数据类型的检测
typeof（） -
数据类型的转换
prompt和表单获取的数据类型是string，计算时需要进行类型的检测和转换
1、隐式转换
+：自动的转换成可以支持的类型2 + '2' = '22' + '123' = 123-：
2 - '2' = 0
2、显示转换
Number(转换对象)
parseInt（保留整数，取整，不管是小数还是字符）
parseFloat（保留小数）
3、存储类型
借助堆栈概念（js里没有），简单数据类型存储是值，复杂数据类型存储的是地址（引用）
1.6 运算符
1、赋值运算符
=，+=，-=，%=等
2、一元运算符
+，-，++，–等
注意：
实际开发中，我们一般都是单独使用的，后置++ 更多;
前置++先进行+1，再进行运算；后置++，先进行运算，后进行+1
。"先运算，后进行+1"表述容易产生歧义，见代码：
3、逻辑运算符
| 与 | 或 | 非 |
|---|---|---|
| and | or | not |
| && | || | ！ |
4、 比较运算符
> ,< 等
== 仅比较值是否相等
=== 是否全等
！== 不等
建议使用全等比较===
5、运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++，–，！ |
| 3 | 算数运算符 | 先* / % 后+ - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | ==, !=, =, ! |
| 6 | 逻辑运算符 | 先 && 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
1.7 语句
1、顺序语句
2、分支语句
if条件，switch case
if （）里：除了0的数字都为真，除了''的字符串都为真
3、循环语句
while for
注意break，continue的位置与i++的位置逻辑
复习css阴影规则：
/* 向元素添加单个 box-shadow 效果时使用以下规则：
当给出两个、三个或四个 值时。
如果只给出两个值，那么这两个值将会被当作 来解释。
如果给出了第三个值，那么第三个值将会被当作解释。
如果给出了第四个值，那么第四个值将会被当作来解释。
可选，inset关键字。
可选，值。 */
box-shadow: 2px 2px rgba(44, 20, 196, 0.4);
1.8 数组
- 增加
尾部添加方法push，类比python的append
头部添加unshift - 删除
arr.pop()：删除最后一个
arr.shift()：删除第一个
常用arr.splice(,) ：( 两个参数：操作的下标，删除的个数)
1.9 函数
- 命名规范，前缀用动词表证作用：
can:判断是否可以执行某个动作（认证）；
has：判断是否含有某个值；
is,get,set,load等 - 作用域
全局作用域与局部作用域、块作用域
全局变量与局部变量
函数内部没有声明的变量会影响到全局变量，强烈不推荐此写法，切记要声明 - 匿名函数
常用函数形式的叫具名函数：具名函数的调用可以写在任意位置
1、函数表达式
let fn = function （） {}
函数表达式必须先声明后使用，let 赋值类似也要先声明
2、立即执行函数
防止变量冲突,后边的定时器会用到
（function（）{
let num = 10
}）（）;
（function（x，y）{
console.log（x + y）
}）（1,2）;
立即执行函数也可以应用在弹框
- 逻辑终端
&&和|| ，一真则真，一假则假，可以中断后边操作
x = x || 0
类似于默认形参x = 0 防止bug。
1.10 对象
类似python字典
对象由属性和方法组成，声明：
let obj = {
key：value，
属性名：属性值，
方法名：方法（函数）
}
使用——对象.属性名=new属性值
使用2——对象['属性名']
删除（不建议用，假删除）：
delete 对象.属性
- 遍历对象
// for in遍历
for （let key in obj）{
// 字符串形式的key
console.log（key）
}
2 WebAPIs DOM BOM
2.1 前置
var，let，const声明变量优先const
经常数学运算的简单数据类型，如循环里的i用let声明
document(网页文档)/browser（浏览器） object model
2.2 获取DOM对象
DOM树节点：标签对象,所有属性方法基于最大的对象document
css选择器获取DOM:
document.querySelector('css选择器')——只匹配第一个获取到的；
document.querySelectorAll选择所有对象，得到的是nodelist(伪数组)，可以遍历,有长度索引号，不可以push等操作
- 其他方式
之前python爬虫里用过，现在（2023.07）不推荐用了
document.getElementById()
document.getElementsByTagName()
2.3 更改对象内容
// 字符效果都生效
li.innerHTML = '更换标签内容
'
// 字符更改，效果不生效
li.innerText = '更换标签内容
'
2.4 更改对象属性
2.4.1 更改对象常用属性
herf，title（图片的提示语句），src等
const box =document.querySelector('.box')
box.style.width = '500px'
2.4.2 更改对象控制样式属性
1、多熟悉style属性,小驼峰命名规则
行内样式，权限比较高，修改慎重
document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`
2、类名className，直接用class与关键字冲突，className渲染时覆盖原来的class类名。
// 1. 获取元素
const div = document.querySelector('div')
// 2.添加类名 class 是个关键字 我们用 className
div.className = 'nav box'
3、classList
常用，结合js点击等事件更改类名实现效果更换
// 1、 获取
const box = document.querySelector('.box')
// 2、 修改
// 加
// box.classList.add('active')
// 删除
// box.classList.remove('active')
// 切换
box.classList.toggle('active')
2.4.3 更改表单对象属性
ipt.checked = true
button.disabled = true // 禁用按钮
2.4.4 其他自定义对象属性
data-开头的属性名
one.dataset:可以得到一个对象
2.5 定时器-间歇函数
定时器是一个带有序号的对象
// 开 setInterval(不带（）的变量名，毫秒时间)
let n = setInterval(function(){
console.log('2miao')
},2000)
// 每个定时器有特定的序号
console.log(n )
// 关 clearInterval(变量名)
clearInterval(n)
2.6 事件
2.6.1 事件监听与类型
语法：
元素对象.addEventListener('事件类型'，执行函数)
1、鼠标事件
click，mouseenter，mouseleave
轮播图完整效果，养成开关切换前判断的好习惯：
// 自动轮播，借助向右click事件
let timeId = setInterval(function () {
next.click()
},1000)
// 鼠标事件
// 划入暂停
const slider = document.querySelector('.slider')
slider.addEventListener('mouseenter',function(){
clearInterval(timeId)
})
// 划走轮播重新开始
slider.addEventListener('mouseleave',function(){
if (timeId){
clearInterval(timeId)
}
timeId = setInterval(function () {
next.click()
},1000)
})
2、焦点事件
focus，blur
补充focus伪类选择器
input {
width: 200px;
}
input:focus {
width: 400px;
transition: all 0.4s;
}
3、键盘事件
Keydown
Keyup
4、文本事件
input
2.6.2 事件对象
1、获取事件对象
元素对象.addEventListener('事件类型',function(e) { }）
function 里命名的形式参数即事件对象，建议命名 event，ev，e
2、属性方法
if (e.key === 'Enter') {
// 如果用户输入的不为空就显示和打印
if (tx.value.trim()) {
// console.log(11)
item.style.display = 'block'
// console.log(tx.value) // 用户输入的内容
text.innerHTML = tx.value
}
// 等我们按下回车，结束，清空文本域
tx.value = ''
// 按下回车之后，就要把 字符统计 复原
total.innerHTML = '0/200字'
}
复选框案例复盘
1、大复选框的选中状态,如果获取大框时CSS选择器选择‘.allCheck’，ckAll.checked为undefined
2、小复选框要用querySelectorAll（）方法拾取，再进行遍历
3、css属性要多了解多熟悉，比如.checked
4、多调试
2.6.3 环境对象 this
this指向到调用者
2.6.4 事件流
事件完整执行过程中的传递流动路径
1、两个阶段
捕获与冒泡
2、事件捕获
3、事件冒泡与阻止
一个元素触发后，会依次向上调用所有父级元素的同名（类型）事件；
冒泡是默认触发的，所以有时候需要阻止
mouseenter，leave方法没有冒泡
mouseover，out方法有冒泡
4、解绑事件
捕捉的事件对象.removeEventListener()
5、阻止元素默认行为
e.preventDefault()
2.6.5 事件委托
利用冒泡解决需求的技术技巧
2.6.6 其他事件
1、页面加载事件：load，场景：window
HTML的document文档完全加载解析事件，无需等待样式表、图像2、等资源完全加载：DOMContentLoaded
3、页面滚动事件：scroll，场景：window或者元素
4、页面元素尺寸事件
resize，
clientWidth，clientHeight，元素宽和高，距离包含padding，不包含border边框
offsetWidth，offsetHeight，宽高距离包含padding边框，
offsetLeft，offsetTop受到父级的定位元素的影响
getBoundingClientRect，相对于视口的距离
2.7 日期对象
1、实例化
const date = new Date()
const date = new Date(‘2023-08-01 12:00:00’)
2、时间对象方法
getMonth(),0-11,月份+1
getDate(),几号
getDay(),0-6，星期，周日是0
3、时间戳
1970/01/01 00:00:00
getTime();
+new Date();常用，可以指定时间。
Date.now();
2.8 DOM节点增删等操作
元素节点:标签
属性节点：class，id
文本节点
1、查找,都是属性，不需要加（）调用方法：通过父子级关系查找对应元素，简化代码。parentNode，childNode获得子节点的所有属性，内容等，常用 父元素.children
- 1
- 2
- 3
- 4
- 5
2、增加
先创建，后增加
const li = document.createElement('li')
ul.insertBefore(li, ul.children[0])
可能用途：评论留言板，新章节更新等（循环生成 也可）
3、克隆，删除
元素.cloneNode（布尔值）
父元素.removeChild（元素名称）
2.9 moblile端事件
touch：
touchstart
touchmove
touchend
js插件：swiper
2.10 BOM
1、定时器-延时函数，区别于间歇循环函数
setTimeout（回调函数，等待毫秒数）
2、js单线程，但是html5的web woker标准允许js类似python可以做到同步和异步（js通过回调函数实现。网络模块ajax，普通监听事件resize，click等，资源加载load，error等，定时器；加入任务队列）。
3、location
.href：跳转链接
.search:?get请求部分
.hash:#路由查询部分
.reload：刷新当前页面
4、navigator：userAgent等浏览器信息
5、history：后退前进的浏览历史栈
forward，back，go（1），go（-1）
2.11 本地存储
存在浏览器中，容量较大，sessionStorage和localStorage约 5M 左右，存储类型是字符串，关闭浏览器不会消失
localStorage.setItem(key,value)
浏览器-检查-application-localstorage
json字符串登场
普通对象转换为json字符串，然后再转换成json字符串对象：
JSON.stringify(obj)、JSON.parse(str)来回转换方法
// 1.复杂数据类型存储必须转换为 JSON字符串存储
localStorage.setItem('obj', JSON.stringify(obj))
// JSON 对象 属性和值有引号，而是引号统一是双引号
// {"uname":"pink老师","age":18,"gender":"女"}
// 取
// console.log(typeof localStorage.getItem('obj'))
// 2. 把JSON字符串转换为 对象
const str = localStorage.getItem('obj') // {"uname":"pink老师","age":18,"gender":"女"}
console.log(JSON.parse(str))
sessionStorage：关闭浏览器会消失
map:映射对象里的每个元素并返回一个新数组
join：所有元素转换成一个字符串
map+join一起用来渲染数据
2.12 正则表达式
Regular Expression
1、语法：//
// 返回布尔值
console.log(reg.test(str));
// 返回数组
console.log(reg.exec(str));
2、元字符
[a-z][A-Z][0-9]等严格要求的特殊字符。
- 边界符号（以什么开始，什么结束）：
^：开始
$：结束 - 量词（表示重复次数）
| 量词 | 说明 |
|---|---|
| * | 重复0次或者多次，不存在也可 |
| + | 重复1次或者多次，至少出现1次 |
| ？ | 重复0次或者1次 |
| {m} | 限定重复m次 |
| {m，} | 重复m次或者多次，至少重复m次 |
| {m，n} | 限定重复m到n次,包括m，n |
- 字符类（简化）
[]：包含字符集合中的任何 一个字符即可
/^ [abc] / . t e s t ( ′ a b ′ ) : 精确匹配结果为 f a l s e ：必须是同一个开头结尾。欲达到 t r u e 效果，可以改为 / [ a b c ] 2 /.test('ab'):精确匹配结果为false：必须是同一个开头结尾。欲达到true效果，可以改为/^ [abc]{2} /.test(′ab′):精确匹配结果为false：必须是同一个开头结尾。欲达到true效果，可以改为/[abc]2/.test(‘ab’)，也有其他写法。
[0-9a-zA-Z]
[]里面的^取反
.:除了换行符都可以
案例中复习代码className覆盖类名：
if (reg.test(this.value)) {
span.innerHTML = '输入正确'
span.className = 'right'
} else {
span.innerHTML = '请输入6~16位的英文数字下划线'
span.className = 'error'
}
3、修饰符
常见模式的简写方式
| 预定义类 | 说明 |
|---|---|
| \d | [0-9],0-9里任一数字 |
| \D | [ ^0-9],上面的取反 |
| \w | [a-zA-Z0-9_],任一数字字母和下划线 |
| \W | [^a-zA-Z0-9_],上面的取反 |
| \s | [\t\r\n\v\f],换行符，制表符，空格符 |
| \S | 上面的取反 |
举例，日期格式：
^\d{4}-\d{1,2}-\d{1,2}
|：或，前端的或是||，正则里面是一个|
4、修饰符，写在语句末尾/的后面
i：不区分大小写
g：global，全局搜索
replace：替换。replace（//,‘被替换的内容’）
3 JavaScript进阶-ES6+语法
3.1 作用域 scope
3.1.1局部作用域 local
1、函数作用域
2、块作用域
{ }包裹的作用域里的变量是局部变量，外部不可以访问，执行完毕之后垃圾回收，let，const声明产生块作用域，var不产生，所以不建议用var声明变量。函数（立即执行函数）、if、for等也可以认为块作用域
3.1.2 全局作用域 global
{ }外层,即