javascript 简介:

java: 类似 java 计算机编程语言

script: 类似 java 计算机编程语言的脚本语言，缩写为 js

java 和 javascript 的区别:

- 静态编译： 将 java 的程序编译生成为一个.class 文件

- 编译型语言（java、c）和解释型语言（js）

- java 静态编译，js 作为脚本动态编译

- java 是强类型语言，js 是弱类型语言

javascript 的作用

提供了一个和 html 进行动态交互的功能

js语法简介

js语法名称为：ECMA Script

Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）

ECMA Script 缩写为 ES

常见说法ES5、ES6，后面的数字，代表的是语法版本号

js的三种使用方式

- 在浏览器控制台上直接运行js语言片段！

- 在html文件中的标签中直接书写js代码 script标签

script标签应该写在html文档常见的位置

常见的位置三个地方:

1.head标签中

2.body标签的末尾处

3.html标签中，与body标签同级！ 推荐使用这种！

变量

什么是变量?

变量就是存放数据的一个容器 (盒子)

变量所保存的数据本质是存储在计算机的内存中的! 内存是通过硬件内存条所产生一块虚拟空间!通常称为内存空间!

内存中数据存储的特点:1.读写速度快 2.临时数据的存储 3.内存的存储空间是比较小的

申明变量

var声明变量语法:

var a

变量的初始化

var num = 100

同时声明多个变量

var a, b, c, d

注意： var 关键字可以重复声明相同的变量

js在ES6之前,变量的声明只能通过 var关键字进行声明

js在ES6之后可以采用 let 或者 const 关键字进行变量的声明

let 语法规则:

let a a  = 200  let A = 200   let b, c, d

注意：let关键字不能在同一作用域重复声明相同的变量
    const 语法规则 :

const关键字是用于声明 常量的!

常量:就表示该变量中保存的数据不允许更改!

const num = 200  利用赋值运算符 重新修改num的值

const声明的常量变量,是不允许修改的!

注意： const不能在同一作用域下声明相同的变量

变量标识符命令规则

js中的标识符命名规范:

1.标识符只能由字母 数字 下划线 以及$符号组成

2.标识符不能以数字进行开头

3.标识符严格区分大小写

4.不能采用关键字或者保留字进行标识符的定义

-- 关键字:js语法规范中,提前规定好了一些单词!并且js也赋予其特殊的含有!

-- 保留字:js语法规范中,以前收录了一些单词!但目前这些单词未真正的投入使用,测试阶段!并没有任何的含义!

注意:以上4条就是js标识符命名规范的硬性准则!

5.标识符如果由多个单词构成!应遵循 '小驼峰命名法' : blackcolor ==> blackColor

6.标识符的命名应该遵循 '见名知义' : name ,age ,sex

数据类型

7 种原始类型

- undefined 未定义（有且仅有一个值）

- Boolean

- Number

- String

- BigInt

- Symbol

- null 空引用（特殊的引用类型、null类型通常用于指向一个不存在的对象空间！有且仅有一个值）

- 注意：在 ES6 之前只有 undefined、Boolean 、 Number 、 String、null

- ES6 后新增加了两种数据类型， BigInt 、 Symbol(符号)

最后一种类型：

- Object （对象类型，在 js 中使用构造函数所创建的对象！都属于 Object 对象类型）、（对象类型中不允许存在两个同名属性！后一个会覆盖前面的属性值！）

数据按照参数的传递方式，可以分为 `值传递类型` 和 `引用传递类型`

值类型

- Boolean 布尔型

- Number 数字型

- String 字符串

- BigInt 长整数

引用类型

- Object 对象类型（语法规则： ①对象.属性 可以把.理解为语文上'的'；②对象[属性名]）

例：获取person对象的name值：

console.log(person.name)

console.log(person['name'])

读取对象中不存在的属性时其返回数据为 undefined

- Symbol 符号类型（Symbol符号类型的出现是为了解决花括号对象中，属性同名的问题！ 因为symbol所表示的值是唯一的！不可能出现相同的情况）

值类型和引用类型数据的区别：

值类型：变量中直接存贮值本身（栈）

引用类型：变量中存储的是引用地址，而值是存在引用地址所指向的内存中的某个对应位置（栈、堆）

总结：

js中的数据类型有8种

原始数据类型（7） 和 对象类型（1）

口诀： 四基两空双一

四基： Number、String、 Boolean 、 BigInt

两空: undefined 、 null

双一： 一个符号 Symbol 一个对象 Object

检测数据类型

语法： typeof 数据

typeof 运算后的数据属性是字符串类型

json对象的序列化和反序列化

序列化：将一个合法的json对象，转换为一段标准的json格式的数据！

反序列化：将一段标准的json格式的数据，字符串转化为一个合法的json对象！

总结： json 对象主要用于存储数据，有着简洁的数据结构，json 对象常用于网络信息传输中，传递数据

---

数据类型的转换

将某个数据的类型通过某种方式转换为另一种数据类型 例： number ==》 string

强制转换：人为的通过手段去改变一个数据的类型

隐式转换：没有人为的参与，是程序解析自动进行转换

js中的运算符分类

- 算术运算符： + 、 - 、 * 、 / 、%（模运算，取余）、**(幂运算)

算数运算符主要用于两个number数据的计算！

如果算术运算符一侧数据类型不为number则js将进行隐式转换！

注意：如果+号的一侧数据类型为字符串类型，则+号就自动变成字符的拼接运算

- 赋值运算符：=（将赋值运算符的右侧表达式的结果，赋值给左边的变量）

+= 、 -= 、 /= 、 %= 、 **= 、*=

注意：复合赋值运算符也具备赋值运算的功能

- 比较运算符：> 、< 、 >= 、<=、 ==、 ===、 != 、!==（其比较结果为布尔值!true 或 false）

==（等于，双等于） ：进行比较时如果两侧的数据类型不一致！首先进行隐式转换！（！=一样）

===（ 全等于，三等）：只会比较数据的值，如果数据的类型都不同！直接返回false！

!== （不全等 特点）：不会进行隐式转换，只要!==的两边数据类型不同直接返回！ true

建议：以后如果遇到需要比较两个值是否相等的情况下，采用三等

- 逻辑运算符：&&(与) ||(或) !(非，取反) 两侧数据类型不一样会进行隐式转换

短路与：全真为真，一假即假

特点在运算时，从左往右计算，如果碰到其中一个表达式的值为，false，那么后续的表达式将不再进行计算！并且返回当 前表达式的原始值作为整个与运算的结果！

如果从左往右计算，都没有遇到false，那么将最后一个表达式的原始值作为整个与运算的结果！

短路或：全假为假，一真即真

特点在运算时，从左往右计算，如果碰到其中一个表达式的值为，true，那么后续的表达式将不再进行计算！并且返回当前 表达式的原始值作为整个或运算的结果！

如果从左往右计算，都没有遇到true，那么将最后一个表达式的原始值作为整个或运算的结果！

非运算 ：真变假，假变真

-自增运算：++ 、 --

前自增，是先将数据进行+1，然后再参与其他的运算

后自增，是先利用原始数据参与其他的运算，然后再进行+1操作

注意：表达式一旦计算完毕！值已经确定！则表达式的结果不能更改!

- 三元运算符：

语法规则： 表达式?结果1:结果2

运算流程： 计算表达式结果，如果表达式为真，则将结果1的数据进行返回，否则返回结果2的数据

- 单目运算符： ！ 、 typeof

- 逗号运算：始终将最后一个,号表达式的值最后整个逗号表达式的运算结果

控制流程语句

js中的三大流程控制结构:

顺序结构: 整体代码的解析执行是按照从上往下!的规律进行执行!也是最基础的控制结构

选择结构: 为代码的执行提供可能的路径!影响代码的走向!

循环结构: 重复的执行某一段代码!

js中的选择结构控制语句:

if 单分支

if...else 双分支

if...else...if 多分支

switch 条件多分支

练习： 随机输入一个年份，判断平润年（ 能被4整除但不能被100整除或者能被400整除）

类型转换

---

多分支语句

练习2：随机从键盘上输入一个学生的成绩判断其等级！ 单分支来完成！

// >=90 优秀 >=80 良好 >=70 一般 >=60 及格 60以下 不及格

总结： if...else的嵌套配对原则：

1.else不允许单独存在！

2.else必须和if进行配对

3.else与if配对的原则是，找距离else最近的未配对的if进行配对！

条件分支

switch语句

语法：

switch (表达式) {

case '值':

语句块

case '值':

语句块

case '值':

语句块

case '值':

语句块

case '值':

语句块

case '值':

语句块

....

default:

不满足其他case分支时，进行default!

}

switch执行流程：

计算表达式的值，然后与{}中case进行匹配！匹配一旦成功则从对应的case段落开始执行，一直到{}的末尾！

switch在执行的过程中如果没有被break语句进行打断则一直执行到语句末尾结束！如果遇到break打断则马上退出switch语句，执行主路径的内容！

注意： switch语句的匹配是基于三等来匹配！ 类型和值相等！

循环结构

while循环

语法：

while (表达式) {

循环体

}

while循环的注意事项：

1.必须设置循环控制变量

2.必须为循环控制变量赋初始值

3.每一次的循环体结束前应该更新循环控制变量

执行流程，首先判断表达式的true或者false，如果为true则执行循环体的代码，否则结束while循环

do...while 和 while 的区别

如果do...while和while执行相同的代码逻辑！do...while至少比while多一次循环！

for循环

for(语句1;语句2;语句3){

循环体

}

执行流程：先执行语句1 在执行语句2 判断真假，为真则执行循环体，再执行语句3 ，在执行语句2 ，直至为假退出循环

循环的嵌套

双重循环， while和for while和while for和for while和do while等

练习：利用* 打印直角三角形 document.write(),console.log()

continue、break

作用： 两个关键字可以使得循环提前结束！

break关键字：直接结束当前包含break的循环语句！进入下一个步骤!

continue关键字：该关键字也可以结束循环，但是它只是结束该循环的本次内容！后续的循环继续执行！

---

API

API 是 Application Programming Interface 的缩写，翻译过来就是 “应用程序编程接口”

console.log() // 它就是一个api 利用它 实现 输出日志到控制台！ 浏览器提供的！

获取文档元素并修改其属性

1.document.querySelector()

方法中的参数：是字符串类型，css的合法选择器

css的选择器书写： .box div #01 div>span div span .....

该方法的返回值是符合css选择器下的第一个页面元素对象

eg:let elment = document.querySelector('div')

2.document.querySelectorAll()

方法中的参数：是字符串类型，css的合法选择器

css的选择器书写： .box div #01 div>span div span .....

该方法的返回值是符合css选择器的所有页面元素对象，不管元素有多少个始终以 NodeList，伪数组的形式返回

eg:let arr = document.querySelectorAll('.box')

3.document.getElementById() 通过元素的id属性值进行获取！

4.document.getElementsByClassName() 通过元素的class属性值进行获取！ 以 HTMLCollection 伪数组形式返回

eg: let arr = document.getElementsByClassName('box')

5. document.getElementsByTagName() 通过元素的标签名进行获取！

eg:let arr = document.getElementsByTagName('span')

通过元素对象获取和修改元素的属性

获取 div 元素

let div = document.getElementById('div01')

通过api 查看 当前页面元素的所有属性！

console.dir(div)

注意页面的元素都是对象类型，那么对象身上是具备属性和方法的！

console.log(div, typeof div)

console.log(div.className)

元素对象的标签体属性

innerHTML是用于更改元素的标签体的内容，合法的字符会被浏览器自动解析为标签!

innerText是用于更改元素的文本信息，该文本信息是不会被浏览器当作标签来正常解析的

通过点击事件修改标签体的内容

addEventListener(事件类型，事件处理函数)

btn.addEventListener('click', function () {

console.log('我被点击了....')

当btn被点击时，修改box元素的标签体内容！

box.innerHTML = '我是被修改后的内容！'

})

获取页面的属性样式值

1. 利用 elment.style 获取元素的样式对象！

console.log(box.style.width)

2.利用全局函数 getComputedStyle(elment) 返回 对象

let res = getComputedStyle(box)

总结： style属性的方式 和 getComputedStyle(elment)区别

1. style属性的方式只能去获取元素自身的style属性所设置的样式值

2. getComputedStyle(elment） 获取元素正在应用的样式属性值！

3. style属性是可读 可写 而 getComputedStyle(elment）是只读的不能重新赋值、

---

数组

数组，是属于Object类型，通过typeof 检测是 'Object'

数组中可以同时存储不同类型的数据！只要是合法的js数据即可！多个数据之间使用',' 分隔！

数据中的每个数据可以称为 元素！数组的存储是有序存储的！利用元素的下标值进行访问！

eg: let arr = ['a', 'b', true, 100]

利用构造函数 new Array（）

let arr = new Array(100, 200, 'HELLO', true)

语法： 数组[下标值]

如果超过下标范围，则返回undefined

如何判断一个变量是否为数组！

通过 构造函数对象 Array的静态方法 isArray() 进行判断

数组是引用数据类型！数组的赋值本质上是地址值的赋值！所以利用地址值可以改变对应的数据！

数组的常见操作

1.获取数组的长度 length属性

console.log(arr.length) //返回当前数组的长度 元素的个数 数组的下标值范围：0 --- (arr.length-1)

2.添加元素到数组的末尾 push方法

push方法是改变原数组的操作！

arr.push('world!')

3.删除数组末尾的元素 pop方法

pop方法具备返回值，返回的就是被移除的末尾元素

let res = arr.pop()

4.添加元素到数组的头部 unshift方法 原数组上操作数据！ 无返回值

arr.unshift('xxxx')

5. 删除数组头部的元素 shift方法 原数组上操作数据！ 有返回值，被删除的元素

let res = arr.shift()

6. 在数组的任意位置实现，元素的添加，修改，删除！ splice方法 在原数组上操作数据！

有返回值，返回值默认是一个空数组，如果有其他被删除的元素统一添加到该数组中

splice(x,y,args...)

x : 确定在数组的那个位置进行操作

y : 是确实从对应位置开始删除的元素个数

args: 用于更新的新元素列表

let arr = [100, 200, 300, 'hello', true]

7. concat 连接多个数组，并返回连接后的新数组,没有操作原数组！

8. join方法 将数组中的各元素分散通过指定的字符进行连接，返回一个字符串数据！

9. includes 判断一个元素是否存在于当前数组中，存在则返回 true 不存在返回 false

10.判断元素是否存在，如果存在则返回第一个匹配的元素值的下标！ 如果不存在则返回 -1

// indexOf 从左往右依次进行匹配！

11. 判断元素是否存在，如果存在则返回第一个匹配的元素值的下标！ 如果不存在则返回 -1

lastindexOf 从右往左进行匹配

12. 数组的切片，获取数组的子数组 返回值，一个子数组！

slice(开始下标，结束下标) 左闭右开的区间

总结： 注意以上的方法或者属性全都是数组的实例对象才能使用的！

多维数组

二维数组

let arr = [

[100, 200],

[300, 400],

[500, 600],

]

倒置

去重

---

文档树

浏览器会将html文档中的标签,解析并准换为文档树

文档树是一个树形结构!html根标签,最外层的节点!其余的标签(节点)都是挂载于根节点上!

文档树中,由很多的节点类型!不只元素节点(标签节点)! 除了元素节点之外,还存在 一些其他的节点类型! 注释节点 文本节点 ....

注意:学习的重点以及操作是在元素节点!

对元素节点的 操作: 创建 增 删 查 改

创建一个元素节点

创建一个 div 元素节点 document.createElement()

let mydiv = document.createElement('div')

添加插入节点

方式一: appendChild(elment)

特点:该方法只会将元素添加到当前元素节点的末尾!

方式二: insertBefore(新节点元素,旧节点元素)

特点: 插入新的元素节点 到指定旧节点元素的前面

注意：如果insertBefore的第二个参数为 null 则将新元素节点添加到该父节点的末尾 等价于 appendChild

替换节点

replaceChild(newnode,oldnode)

删除节点

查询节点

快速收集form表单

---

计算器功能

数组操作

删除数组中能够被 2和4同时 整除的数，并打印出来删除后的数组

函数介绍

函数：一段被封装好的可重复使用的代码段！并且可以实现某种功能！

函数的其他称呼：

方法

回调函数（callback）

构造函数

自执行函数（IIFE）

匿名函数

箭头函数 （lamda表达式）

无参函数

有参函数

比较函数 （主要用于对数据之间的比较，返回结果）

事件函数

函数的声明创建

1.声明函数：

function 函数名(形参列表){

函数体

}

2：调用函数：

语法: 函数名()

有参、无参函数

无参函数:对应的某个函数,不具备形参列表!不需要额外的参数传入!

有参函数:函数在定义时,明确指定了形参列表!后续的函数执行中也需要外部的数据!

调用函数时传入的是实参，实参应与形参一一对应！

函数的返回值

利用 return语句 进行返回

如果函数,没有return语句,默认该函数的返回值是 undefined

1.return语句后可以是任何合法的js数据类型!

2.return语句具有中断函数的功能,函数的执行过程中碰到return 那么直接结束该函数的执行!

函数的值传递、引用传递

值传递,内部函数的数据操作不会影响外部传入的数据!

引用传递,实参和形参的改变会相互影响!

方法

方法:方法的本质其实也是一个函数,只不过该函数是作为某个对象的属性存储的!

函数表达式

函数表达式 : 函数也是一种数据类型!（存储在堆空间）引用数据类型!Object ==> typeof 检测出来 Function

回调函数

回调函数:函数最终通过某种手段执行了,但是不是你让它执行的!

自执行函数（ IIFE ）

箭头函数

箭头函数: 书面称呼, lamda表达式 ,俗称是箭头函数

1. 箭头函数通常是依附于某个变量或者某个对象上的属性

1. 不需要function关键字进行声明修饰!

语法：

(形参列表)=>{

函数体

}

3.头函数中不具备自己的this关键字

当形参个数有且只有一个时,()是可以省略的

当函数体内部只有 一条语句时, {} 是可以省略的

当函数体内部只有 一条语句时,该函数的返回值默认就是 该语句的结果

作用域

作用域: 指变量或者函数的作用范围!

js中目前存在三种作用域

1. 全局作用域 es6之前

2. 函数作用域 es6之前

3. 块级作用域 {} es6之后才有 块级作用域

全局作用域：在函数外的区域,整个 script 脚本区域 所在区域

函数作用域：函数体内部声明的变量或者函数,具备函数作用域

块级作用域：的变量 只能通过 let 或者 const 进行声明 才会存在块级作用域

作用域链

作用域链：通过作用域的链式关系，进行查找对应的 变量 和 函数

作用域链的查找规则：是 从内到外查找

预解析

预解析： js代码在真正的执行前，会先进行一个操作！该操作称为 预解析！

1.当前作用域下的var变量 和 function 函数进行提升！

2.js引擎在真正执行代码前会将以上的代码先进行预解析

let 和 const 的暂时性死区

let 和 const 所修饰的变量不具备提升操作！但是存在一个'暂时性死区'

var 、 let 、const 的区别

1. var存在变量提升操作，var不具备块级作用域，var可以在同一作用域重复声明同名的变量或者函数

2. let不存在变量提升操作，let具备块级作用域，let存在暂时性死区，let不允许在同一作用域声明同名的变量和函数

3. const不存在变量提升操作，const具备块级作用域，const存在暂时性死区，const不允许在同一作用域声明同名的变量和函数，const声明的同时必须赋值！

---

BOM （浏览器对象）对象

1. window作为顶层对象，它的作用！在全局环境下所声明的全局var变量或者函数都是作为window对象的属性存在！

注意： let和const所声明的变量 不能作为window对象的属性存在！

2. location 代表浏览器地址栏

3. history 浏览器浏览记录（历史记录）

4.navigator 用于查看设备信息，查询当前浏览器的信息、版本、名称等

函数的封装

高内聚: 代码语句不是零散,散落!而是高度集中的! 函数封装!

低耦合: 耦合功能快之间是否连接的特别缜密!低耦合就是要求你不要连接的特别缜密!

将某段重复执行的代码，利用函数进行封装！方便后续的使用！

localStorage

localStorage 数据持久化到浏览器中，关闭窗口或浏览器，都不会消失

localStroage 将数据永久性的存储到 浏览器中！ 以键值对的形式

sessionStorage

sessionStorage 将数据临时性的存储到 浏览器中！ 以键值对的形式 ! 窗口关闭 数据就消失

---

九九乘法表

购物车

编辑数据表格

---

执行上下文环境

执行上下文环境：js代码在执行的过程中，会存在一个环境！js引擎会将js代码，分别设置一个执行环境！

1. 全局执行上下文

2. 函数执行上下文

3. eval（）执行上下文 (忽略，了解！)

this关键字

1.在浏览器环境中的全局上下文中，this永远指向的是 顶层对象 window

2.在浏览器环境中函数执行上下文中，this指向的也是 顶层对象 window ， 严格模式除外！ 函数执行上下文，设置了严格模式，那么this指向的 undefined

3.如果函数是被某个对象进行调用时，那么该函数(方法)中的this指向的是，它的调用对象(调用者)！而非持有者！

4.构造函数中this，指向的是新创建出来的一个该构造函数类型的 实例 {} 空对象！

5.事件对象的事件处理函数中的this，指向的是 当前被绑定的元素对象，仅适用于 function函数

6.箭头函数，它不存在自己的this，它的this是该箭头函数被创建时，当时的执行

严格模式

w3school 文章： https://www.w3schools.cn/js/js_strict.asp

'use strict'

构造函数

构造函数：构造函数的本义是用于构造一个实例对象

构造函数和普通函数的区别：

1.构造函数中默认返回值已经构造完成的对象

2.普通函数默认返回值是 undefined

3.构造函数需要搭配new关键字进行使用

4.构造函数的目的不是为了实现某种功能，而是去快速构造某一类型的实例对象

5.构造函数中的this指向的是new关键字所创建的该构造函数类型的对象实例！

建议：构造函数中的return不要写

new关键字

new关键字是配合构造函数使用：

1.new关键字会创建一个该构造函数的实例对象，一开始是空的{}

2.new关键字会将刚才创建的实例对象的__proto__属性指向为 构造函数所保存的 prototype指向的对象

3.new关键字会将构造函数中的this 指向为 该实例对象

4.最终返回这个 实例对象

this的劫持

this的劫持：强行改变this的手段

this的劫持方法： call() 、 apply() 、 bind（）

call和apply方法的区别

call和apply使用方式基本一致，唯一的不同在于实参的传递方式

call是将多个实参以逗号分隔，依次传入函数中

apply是将多个实参以数组的形式，一次性传入函数中

bind劫持是利用bind方法返回一个新的函数

Js垃圾回收机制

垃圾回收：JavaScript程序在运行的过程中，随着运行时间的增加，那么会相应的产生一些垃圾数据，垃圾回收机制主要是定时的去清理这些垃圾数据，避免内存溢出、泄露导致程序崩溃！

- 全局作用域下的变量、函数在程序执行完毕后才会销毁

- 局部作用域下的变量、函数，当该局部作用域执行完了！结束后，就销毁对应的变量以及函数

- 引用数据当引用链条数量为0的时候，也会被销毁

闭包

闭包：把一些数据进行封装！包裹！形成一个独立的空间，该空间只会被能访问到该空间的‘人’使用

如何才会产生一个闭包：

1.假设有两个函数，A函数，B函数,并且B函数是在A函数的内部进行声明的！B函数是被嵌套声明的！

2.B函数内部，使用了一些A函数中才会存在的数据！通过作用域链找到了A函数中的一些数据！

3.最终当A函数执行完毕后，把B函数 ‘交’出去了！ 交出去的方式有多种：1.return 2.直接把它赋值给外部的变量

什么是闭包？

闭包就是一个函数在其他函数的内部嵌套声明，并且该函数内部使用了上级函数的数据！并且该函数被返回出去了！

闭包的优点：

1.使用闭包可以形成对立的空间，避免变量名污染问题

2.利用闭包，可以在函数外，也能访问到函数内部的数据！

闭包的缺点：

1.闭包的产生有很多时候是隐式产生的，最终会造成内存泄漏

后台打印倒计时

定时器

js提供了两种创建定时器的方式：

全局函数：setTimeout(一次性的) setInerval(永久性的)

这两个方法都是同步方法！而传入的callback是异步的，不会阻塞主线程

以上两个函数都需要传入两个参数：

参数一：规定时间后，需要执行的函数 callback

参数二：规定多少时间开始执行代码 单位是ms 是忽略！

关闭setInerval所创建的计时器

clearInterval(timer)

倒计时爆炸

---

元素的自定义属性

1. 直接在元素的开始标签中，书写自定义的属性名以及赋值操作

2. 利用data-* 形式创建自定义属性

随机数

时间对象

创建一个时间对象 利用 JS提供的 Date(构造函数、类） ===》 new Date类 实例化一个时间对象

四种创建方式

方式一：无任何构造参数

let date = new Date() // 返回一个当前系统时间的，时间对象

console.log(date, typeof date) // Tue Jan 31 2023 11:11:54 GMT+0800 (中国标准时间)

// 注意：不要过多的关注，浏览器所展示的时间对象的样式！

方式二： value 时间戳 返回一个由当前时间戳与格林威治时间（标准时间的插值）所代表的一个时间对象

let date = new Date(59000)

console.log(date, typeof date) // 1970-1-1-8:00:59

时间戳：当前时间与标准的格林威治时间的毫秒差值，称为时间戳！

格林威治：英国的小镇 1970-1-1-00:00:00 之间的差值 1970-1-1-00:00:58 58秒==》58000毫秒 这个58000毫秒就是我们说的时间戳

1970-1-1-00:00:00 1970-1-1-00:00:01 08:00:01

方式三： dataString 时间字符串 该方式不推荐使用！各浏览器之间对时间字符串的定义有些差入！

时间字符串的参考：https://www.w3.org/TR/NOTE-datetime

let date = new Date('1997-10-19')

console.log(date)

方式四: 依次传入 年 月 日 时 分 秒 毫秒 进行构造时间对象

let date = new Date(2023, 1, 31, 11, 34, 48, 1500)

let date = new Date(2023, 10)

console.log(date)

计算一段代码执行花费毫秒数

数学函数

Math函数不能作为构造函数使用

数组随机数排序

扑克牌游戏

offset、 client属性

事件

事件的三要素：

1. 事件源

2. 事件类型

3. 事件处理函数

事件的解绑

事件分类

load: 资源加载完成后就会触发

error: 资源加载失败时触发

focus : 获取焦点事件

blur: 失去焦点事件

click：鼠标左键点击事件

contextmenu: 鼠标右键点击事件,右键点击改元素是触发的事件

dblclick: 双击事件

mousedown: 鼠标按下事件

mouseup: 鼠标松开事件

mouseenter\mouseover 鼠标移入事件

mouseleave\mouseout 鼠标移出事件

mousemove: 鼠标移动事件

wheel : 鼠标滚轮事件

change：当值发生变化时触发，多用于表单元素

input: 输入框输入字符时触发该事件

keydown: 按钮按下事件

keyup：按钮抬起事件

keypress: 按钮按住不放事件

mouseover & mouseout 和 mouseover 和 mouseout 区别如下:

mouseenter(移入) 和 mouseleave(移出)

进入或者离开当前元素才会触发

进入或者离开当前元素的后代元素不会触发

事件对象

事件对象在事件函数被执行时，浏览器会自动的向该事件函数传入对应的事件对象！只需要利用一个形参变量来接受即可！

event ==> ev

鼠标对象常用属性

ev.offsetX：返回点击的目标点，与当前元素的左侧距离 number

ev.offsetY：返回点击的目标点 与当前元素的顶部距离 number

ev.clientX：返回点击的目标点，与当前页面窗口的左侧距离 number

ev.clientY：返回点击的目标点 与当前页面窗口的顶部距离 number

ev.screenX：返回点击的目标点，与当前电脑屏幕，设备屏幕的左侧距离 number

ev.screenY：返回点击的目标点 与当前电脑屏幕，设备屏幕的顶部距离 number

ev.pageX：返回点击的目标点，与当前页面窗口的实际间隔的左侧距离！ 滚动条区域也算进去！ number

冒泡、捕获

事件的冒泡：事件的传递过程！ 事件是可以进行传递的(可以实现事件的委托)

冒泡过程： 从内到外

捕获过程： 从外到内

阻止当前的事件继续向上冒泡：

ev.stopPropagation()

阻止默认事件的发生

ev.preventDefault()

target 和 currentTarget

this ==> 当前处理函数的事件源 this指向是被绑定事件的元素

ev.target ==> 触发该事件产生的对象元素

ev.currentTarget ==》 正在处理该事件的元素对象

js代码触发事件

自定义事件

---

显示原型和隐式原型属性

隐式原型属性： __proto__

显示原型属性 ： prototype

function身上同时具备 __proto__ 和 prototype

原型链

每一个实例对象上都具备 __proto__ 原型对象

当一个对象在自身上找不到对应的属性或者方法时，会沿着__proto__原型对象身上去寻找！ obj {}

如果往上一级的__proto__身上还是找不到想要的属性或者方法 obj.__proto__

那么它会继续沿着当前这一级__proto__继续寻找！ obj.__proto__.__proto__

.... obj.__proto__.__proto__.__proto__

沿着原型链最终找到 null 就结束！ 如果已经访问到null 都还没有找到想要的属性或者方法 则放回 undefined

私有属性或者私有方法

私有属性或者私有方法，指的是该属性和方法只能在类中使用，不能够通过实例化的方式进行点语法的获取

静态属性和静态方法

静态属性和静态方法，指的是该属性和方法只能由类本身进行调用

所定义的方法直接就挂载到 Person.prototype对象上

super 关键字

特用于class

super关键字有点类似于this this==》指代某个对象！

super也有指代的意思，也是指代某种东西！

super的指代，或者使用的三种情况

1. cconstructor 构造函数中使用时 super 就是指代了 父类的constructor函数本身

2. 在子类的'普通'方法中（除静态方法外） super 指代的是 父类的 prototype属性指向的对象 Student extents Person ==》 super ==》 Person.prototype

3. 在子类的静态方法中， super 指代的是 父类 本身 Student extents Person super ==》 Person

面向过程、面向对象

面向过程：以过程为导向！ step by step ‘一步一步的’

面向对象：以对象为导向！ 面向对象进行编程！ 主要是构建类！

---

Map和set数据结构

Map 是一种类似于JSON对象的一种键值对的数据结构，一种数据的存储容器,Map结构是一种有序的存储

Map与JSON对象最大的不同在于，JSON对象的键的类型只能是 String ，而Map的键可以是任何数据类型

1- set 添加键值对

map.set('a', 123)

2- get 读取value

map.get('a')

3- has 判断某个属性是否在map中存在

map.has('b')

4- keys 得到当前map的所有key 以迭代器对象的形式返回

map.keys()

5- valus 得到当前map的所有key对应的value 以迭代器对象的形式返回

map.values()

6- delete 删除一个key

map.delete('b')

7- size 获取map的键值对长度！个数

map.size

8- 清空map中所有的数据 得到一个空的map

map.clear()

Set 一种类似于 Array数组的数据结构，也是用于数据的存储

Set集合 最大的特点是 集合中所有的元素必须是唯一的！不重复的

Set不能像Array一样通过下标获取对应下标的值

1- 添加元素

set.add('a')

2- values(keys是values的别名) 返回集合的所有数据 以迭代器对象的形式

set.values()

3- has 是否存在指定的元素

set.has('a')

4- delete 删除集合中指定的值

set.delete('b')

5- size 获取集合的长度

set.size

6- clear 清空集合

set.clear()

Object类的常用静态方法

定义 static关键字 使用： 静态方法只能由类本身调用

1- keys 方法指定对象的自身可枚举属性组成的数组 以数组的形式返回

console.log(Object.keys(obj))

2- values 方法 指定对象的自身的所有可枚举属性值的数组 以数组的形式返回

console.log(Object.values(obj))

3- hasOwn 判断指定对象中自身上是否存在一个指定的属性，存在返回true 不存在返回false 继承的属性不算！原型链的属性！

console.log(Object.hasOwn(obj, 'a'))

4- assign 实现对象的快速合并，和深拷贝

let obj2 = Object.assign({}, obj) // 深拷贝 引用值不一样 数据是一样的

console.log(obj2 === obj)

5- getPrototypeOf 得到一个对象的 隐式原型对象 避免使用 __proto__属性获取！JS也不建议使用__proto__获取

console.log(Object.getPrototypeOf(obj))

6- defineProperty 会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty(obj, prop, descriptor)

obj 需要被操作的对象

prop 对象的属性

descriptor 要定义或修改的属性描述符。 以对象的形式传入

---- 描述符选项

1.configurable 该属性的描述符是否可配置 默认是false

2.enumerable 该属性是否可枚举 默认是false

3.value 该属性被设置的值

4.writable 该属性是否是可写的 默认是false

Es6语法

... 扩展运算符

let 关键字

rest parameters rest参数

callee 方法

作用一：用于实践函数的解绑

作用二：函数的递归

lamda 表达式 也称 箭头函数

let fn2 = () => ({})

模板字符串 ``

console.log(`${year}/${month}/${day}`)

解构赋值 ：根据数据的类型结构 进行赋值操作

? 问号语法

判断该对象是否存在，存在就执行，否则不执行

forin和forof语句

for in 语句 用于遍历 json对象的！所有自身可枚举的以及原型链上可枚举的属性！

for in 语法

for (let key in obj) {

console.log(key)

console.log(obj[key])

}

for of 语句 用于迭代遍历 具备 迭代器的对象(Array String Map Set Arguments ....)

for in 语法

for (let key in obj) {

console.log(key)

console.log(obj[key])

}