首页  思维导图  详情

JavaScript

2021-06-02 15:14:44   47  举报





AI智能生成

为你推荐

查看更多



详细的JavaScript基础到高级部分的整理。其中都是前端开发人员对JavaScript的必学部分。笔记对应的课程视频。https://www.bilibili.com/video/BV19Q4y167As/

作者其他创作

大纲/内容

JavaScript 最初被创建的目的是“使网页更生动”。这种编程语言写出来的程序被称为脚本。它们可以被直接写在网页的 HTML 中，在页面加载的时候自动执行。脚本被以纯文本的形式提供和执行。它们不需要特殊的准备或编译即可运行。

经过编译，产生编译之后文件，才可以运行。比如Java

运行效率要快一些

编译型

不需要编译javascript

解释型

编程语言分类

- 1992年，第一门脚本语言：ScriptEase，专门用于表单校验- 1995年，Netscape(网景)公司开发了一门脚本语言：LiveScript，后面更名为JavaScript- 1996年，微软抄袭JavaScript，开发出JScript- .1997年，ECMA组织，指定了脚本语言规范：ECMAScript

发展史：

ES1：1997 年 6 月 —— ES2：1998 年 6 月 —— ES3：1999 年 12月 —— ES4：未通过

ES5：2009 年 12月

ES6 / ES2015：2015 年 6 月

ES7 / ES2016：2016 年 6 月

ES8 / ES2017：2017 年 6 月

版本号与发布时间

- 可以来解释JavaScript的一个标准，- 最新版本到es8，引入一行明确的设定及面向对象编程- 但是大部分浏览器还只停留在es5代码上- 开发环境---线上环境版本不一致

ECMAScript

类的设计与对象的使用

面向对象编程

Bom指的浏览器内置对象

Dom就是html文档对象

由ECMAScript、BOM、DOM组成

JavaScript与ECMAScript有点类与对象之间关系

浏览器JavaScript组成：

WebStorm：最强大，可以查看语法提示文档。推荐使用

NotePad++、Sublime Text、VSCode、Hbuilder

开发工具

调出方式，一般快捷键是F12或Ctrl + Shift + i

了解如何查看元素和查看控制台信息

浏览器的开发者工具

概述

概念：JavaScript是一门脚本，要起作用，必须结合页面使用

script

标签名称

直接在页面文件中编写script标签，将js代码编写到script标签内容中

type=\"text/javascript\"，指定写的是 Javascript 脚本

创建一个页面，然后显示一个消息 “I’m JavaScript!”。

练习

内部结合

在页面文件中使用script标签的src属性引入外部的js文件

引入第三方服务器上的JS文件<script src=\"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js\">也可以引入本地服务器上的JS文件

绝对路径

引入本地服务器JS文件

相对路径

需要引入的js文件路径

src

外部结合

写在 html 标签的事件属性中

onclick=\"javascript:alert(1)\"

这个代码其实什么都没有做，了解一下即可

javascript:void(0)

行内写法

分类

ECMAScript页面结合

将内容输出到开发者工具中的Console窗口，多个使用逗号分隔

输出两个常量

console.log(常量或变量列表)

输出一个对象结构，目前先记住，后面讲解

console.dir(对象列表)

控制台交互

alert()：弹出框

confirm()：确认框

基本交互框

document.write()

document.writeln()

输出到页面

练习：弹出一个prompt()。输入自己的名字，并且使用log和alert以及write分别输出到相应位置上

ECMAScript输出

概念：一切可以自定义的名称就是标识符。比如变量名、函数名

首字母必须是字母、下划线（_）或美元符号（$），不能是数字

除首字母外，其他字符可以是字母、数字、下划线或美元符号（$）

普通标识符（用作变量名、函数名和循环语句中用于跳转的标记）不能是保留字符

在严格模式下，arguments和eval不能用作变量名，函数名或者参数名

命名规则

变量名和函数名：首字母小写，后续单词首字母大小。xxxYyyZzz

常量名：全部大写，多个单词下划线(_)分隔。XXX_YYY_ZZZ

类名：所有首字母都是大写。XxxYyyZzz

即驼峰命名规范

见名知意

命名规范

ECMAScript标识符

ES6

关键字

enum（枚举）

始终保留

严格模式中保留

await

模块代码中保留

保留字

ECMAScript关键字与保留字

概念：保存数据，可以修改，可以重复使用，会占用内存。

声明提升：即支持先使用后定义，定义语句会被放到作用域内的第一行

没有块级作用域

定义在全局作用域的变量，会变成window对象的属性

变量可以重复定义

var

ES6新增，推荐使用。

let

ES6新增，定义常量使用

const

let 变量名;

var 变量名;

写在script标签中的的叫做全局变量，或者在JS文件中的函数之外定义的

全局变量：变量名 = 初始值;

变量

const 变量名 = 初始值;

常量

不管是变量还是常量，都支持同时定义多个变量

定义

变量名 = 初始值;

初始化

变量定义在script标签之间，但在函数之外。

在整个HTML标签中有效

全局作用域

{}之间

块级作用域

var定义变量依然会被提升作用域，但只在函数的范围内

可以使用全局作用域的变量，但函数作用域中的变量无法被全局作用域的代码使用

函数作用域中，默认有一个arguments对象，保存所有函数的实参，是一个类似于数组的对象

函数作用域

作用域

注意：在JavaScript中，可以不使用分号\";\"来表示语句结束，但从严格意义上来说，每个语句加上;对性能或压缩更好

- 强类型语言： - 在定义变量时，要确定数据类型，在赋值时，只能赋值指定类型的数据- 弱类型语言： - 在定义变量时，不确定数据类型，在赋值时，赋值多种类型的数据

Java是强类型语言，JavaScript是弱类型语言

练习：定义三个变量分别保存个人的名字，年龄，学校。然后打印在控制台演示一下变量未定义的错误，和变量未赋值的情况

ECMAScript变量

概念：用来注释js脚本代码，给开发人员看的，浏览器不会解析执行

单行 //

多行 /* */

文档注释/** */

分类：

ECMAScript注释

只有undefined一个值，表示变量未被初始化。

Undefined

表示变量被没有分配堆内存空间，一般是针对引用类型

undefined 值是由 null 值派生而来的，当null == undefined的结果为true

Null

let a = 10;

let a = 10.;

整数

let f = 0.1;

let f = .1;

科学计数法：数值e幂数。如2.134e7：就是21340000

浮点数(小数)

最大值：Number.MAX_VALUE

最小值：Number.MIN_VALUE

5/0

正无穷大：Number.POSITIVE_INFINITY

5/-0

负无穷大：Number.NEGATIVE_INFINITY

范围属性

0/0

任何涉及 NaN 的操作始终返回 NaN（如 NaN/10）

NaN 不等于包括 NaN 在内的任何值

示例

NaN只能通过isNan()方法来判断

NaN(not a number)

Number()

将x的转换为10进制的结果，通过y告诉我们x是什么进制

x：浮点型或字符串

y：进制

转换为Numer

Number

ES5，字符串(\"abc\"、'abc')

通过${变量名}使用

ES6，`abc`

写法

ECMAScript 中的字符串是不可变的（immutable），意思是一旦创建，它们的值就不能变了。要修改某个变量中的字符串值，必须先销毁原始的字符串，然后将包含新值的另一个字符串保存到该变量

let lang = \"Hello\" + \"JavaScript\";

不可变性

+：从左到右执行，只要遇到字符串，后续的都是字符串拼接

字符串拼接

length

长度

null和undefined没有此方法

数字类型，可以传入进制参数

toString()

\"\" + 值

String()：构造方法

转换为String

使用``反引号包裹

可以分多行写

${变量名}

可以使用变量

模板字符串

String

undefined

null

\"\"

false：假值

true：真值

Boolean

符号类型，用于表示一个独一无二的值

一般用于解决对象的私有属性或方法

不支持new Symbol()

Symbol

原始数据类型：

Date：日期类

RegExp：正则表达式

Function：函数

原始值包装类型

window

Global

数学类

Math

单例内置对象

Array

Map

Set

集合引用类型

Object

引用数据类型：

如图7种类型

typeof 值或变量

typeof

typeof(值或变量)

typeof()

查看值类型

ECMAScript数据类型

基础作业一

正数+

负数-

一元运算符：

逗号操作符

%，取余或取模

++在前

++在后

--在前

--在后

注意：除了+，其它的都自动将字符串格式数字转换为number

算术运算符：

可以在定义变量时使用

不可以在定义变量时使用

扩展

赋值运算符：

===

!==

返回的结果都boolean类型

比较运算符：

&：逻辑与，所有表达式都会运行完

|：逻辑或

&&：短路与，只要有false，后面的表达式是不需要运行的，则结果为false

||：短路或，只要有true，后面的表达式是不需要运行的，则结果为true

^：异或，不一样则为true

逻辑运算符:

&：与运算，同为1，则为1

|：或运算，有1则为1

^：异或运算，不一样则为1

<<：左移

>>：右移

>>>：无符号右移

针对二进制运算，同位比较

位运算符

条件表达式 ? 表达式1 : 表达式2

等同于if-else语句

三元运算符:

运算符的优先级

ECMAScript运算符

if-else

if-else if

if-else if-else

可以嵌套，不推荐过多嵌套，最多3层一般做区间选择比较多。演示原始数据在if条件中使用

if语句

switch

整型

字符串

精确匹配

比较运算符

范围匹配

case

break

default

作业

switch语句

选择结构

作用：循环主要用于做一类重复的事情。比如从1打印到10.或者将某个变量重复打印多少

初始化部分

条件部分

迭代部分

循环体部分

主要部分

计数for循环

for-in循环

for-of循环(ES6)

for循环

while循环

do-while循环

外循环和内循环

总次数是由外循环的次数与内循环次数相乘

循环嵌套

\：换行

\\t：相当于tab键

特殊字符

循环结构

结束整个循环，如果有嵌套循环，就近原则

结束当次循环，循环没有结束，继续下一次，如果有嵌套循环，就近原则

continue

结束函数

return

流程控制语句

不推荐使用

with语句(了解)

ECMAScript选择与循环结构

全局函数在整个全局作用域都有效。因为会有声明提升。所以函数的调用代码在定义代码之前也不会有问题

函数声明(也叫全局函数)：function 函数名(形参列表) {函数体}

函数表达式，其实就是将一个函数赋值给一个变量。该变量就是函数名，所以在使用之前一定要先定义。

函数表达式：let 函数名 = function(形参列表) {函数体};注意分号结尾，否则可能会影响后续的代码

注意：在JavaScript中函数的形参与实参不需要有对应关系，这与Java等其它语言不同。因为这一点，所以JavaScript中的函数没有重载

有参数时调用：函数名(实参列表)

没有参数时调用：函数名()

调用

形参与实参不需要一一对应，在 JavaScript 中无法明确形参类型，只能在调用时传值决定

ES6允许在形参定义时，设置默认值

每个函数都自己arguments对象，是一个类似数组的结构，里面包含了函数的实参列表

arguments对象

...参数名：本质上该参数就是一个数组，可以接收不限长度的实参

必须在参数列表的最后

可变量参数

函数参数

在JavaScript中，函数有没有返回值是不固定的

需要返回值直接在函数体中合适的地方加上return 变量或数据;即可

返回值

使用不同的函数写法实现

定义一个函数，实现两个数字相加

定义一个函数，实现两个数字的最大值或最小值，并返回

定义一个函数，实现求所有实参的最大值或最小值，并返回，提示需要使用到循环

定义一个函数，实现对身份证号码的校验

普通函数

匿名函数：(function(形参列表) {函数体})

立即执行函数：(function(形参列表) {函数体})();

嵌套函数只能在其定义的函数中直接使用，也可以将嵌套函数做为函数的返回值

① 函数嵌套函数② 函数内部可以引用函数外部的参数和变量③ 参数和变量不会被垃圾回收机制回收闭包是一种现象，通过debug可以看到

闭包（closure）

嵌套函数：函数体中又定义了一个函数

比如setTimeout、setInterval()配合异步函数使用，如果需要得到异步函数中的结果，可以使用回调函数实现了将函数的定义与调用由不用的开发人员执行

回调函数：将一个函数做为参数传递到另一个函数中

概念

全局函数写法

无参：let 函数名 = () => {函数体}

一个参数：let 函数名 = 参数名 => {函数体}

多个参数：let 函数名 = (参数列表) => {函数体}

注意：函数体中如果只有一行代码，可以省略{}。如果需要返回值也可以省略return关键字

箭头函数的this指向与其它函数不一样。后面讨论

箭头函数不能用过构造函数

箭头函数：ES6提供的一个新的写法

var 函数名 = new Function(\"形参列表\

框架设计时会用到，其它时候使用比较少。了解即可

字符串函数

创建某一类对象，首字母大写

通过 this 定义或调用属性和方法

必须和new一起使用才有意义。这也是构造函数和普通函数最本质的区别

构造函数

函数的分类

ECMAScript函数基础

let obj = {};

let obj = new Object();

obj 就是对象名，也可以称为变量名。

创建方式

多个属性的定义要使用逗号分隔，最一个属性的逗号可以不写

创建对象时添加

对象名.属性名

\".\"语法

属性名支持使用变量

对象名[属性名]

[属性名]语法

创建对象后添加

添加属性

通过对象名.属性名或对象名[属性名]

属性的赋值，及获取属性的值都是在使用属性

使用对象属性

默认没有length属性

属性

方法的本质就是函数。实参列表一般与定义函数时的形参列表一一对应，不对应该也没关系。实参列表都会在函数的arguments对象中一一映射

let obj = {方法名: function(形参列表) {方法体}}

对象名.属性名 = function(形参列表) {方法体}

对象名[方法名]= function(形参列表) {方法体}

添加方法

使用：通过对象名.方法名(实参列表)

一个对象中的方法使用自己的属性和方法时，要通过this.属性名或this.方法名

方法

删除属性和方法

delete

定义一个对象，有name、age、address三个属性和一个info()函数，info函数返回\"姓名：XXX，年龄：XXX，address：XXX\"。

因为Object中默认没有length属性，所以不能使用计数for循环

for key in obj

entries()

keys()

values()

迭代器方法

有一个名称为[Symbol.iterator]的函数

该函数的返回值为一个对象

返回的对象中有一个next函数

next函数返回一个包含value和done属性的对象

最后一条记录，done的值为true。

自定义迭代器要求

生成函数和yield

对象遍历默认不能使用for-of循环

对象的遍历

属性名简写：当属性key和value的变量名一致时，可以简写

[]语法

方法名简写：方法名: function(){}

支持嵌套

形参中的对象也支持解构

对象解构

因为在ES5之前，Object中的属性和方法名都是使用字符串这样定义的属性和方法可以随意被开发人员修改

但是使用Symbol定义的属性和方法就不会

Symbol在Object中的使用主要体现在私有属性的创建

练习：将图片中的数据，一行定义一个对象保存

JavaScript的数组类型

长度不是固定的

索引的只要>=0，即可，否不会修改length属性

每个元素都可以是任意类型的值

特点

let 数组名 = new Array();

let 数组名 = new Array(长度);

简写

数组名.length

数组元素指的是每个位置上的数据

可以通过数组名[索引]操作赋值或读取的操作

元素

数组正常的索引必须>=0，不然不会引起长度属性的变化

字符串也可以作为索引效果与负数一致

索引

...变量名

函数的可变参数：本质上是一个数组

符号：...

方便的实现数组的复制

...数组名

表示可变参数，本质是将参数列表保存到一个数组中

...形参名

不支持，会报错

但支持{...对象名}，实现一个对象的浅复制

...对象名

参考文档：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

扩展(展开)操作符，ES6。

使用循环

计数循环是无法遍历字符串和负数索引上的元素，不过可以通过for-in循环

支持解构写法，针对二维数组

迭代方法，[Symbol.iterator]

for-of

forEach方法

遍历

练习：只能定义一个数组，只能使用一个循环，实现图中按钮的排列以及功能

练习：产生10个在1~100之间的随机整数，并保存到数组中。

练习：实现一个随机班级人员抽查程序：（1）记录每个学员被抽到的次数（2）每一轮必须保证所有学员都抽中，才能进行下一轮

push(...items: T[]): number;

unshift(...items: T[]): number;

数组名[length] = 值

增

pop(): T | undefined;

shift(): T | undefined;

delete关键字

splice

删

通过索引修改

改

只匹配到第一个符合条件的

find()

includes()

查

every()

some()

filter()

forEach()

map()

reduce()

迭代方法(高阶函数)

indexOf(ele)：返回ele在数组中的索引，返回-1表示不存在

lastIndexOf()

位置方法

concat()

slice()

splice()

操作方法

reverse()

sort()

排序方法

toLocaleString()

valueOf()

join()

转换方法

copyWithin()

fill()

复制和填充方法

Array.isArray()

检测方法

常用方法

最大值

最小值

平均值

求和

反转

冒泡排序：两两相邻比较

选择排序：每次都选出最小元素的索引，然后交换

插入排序：假设第一个元素已经是一个有序数组，从第二个元素开始，将要插入的元素，插入到合适的位置上

高级排序

数组综合练习

数组的高级使用

键值对(key:value)，虽然数组也支持，但从性能和使用上比数组要方便很多

Map是以元素的添加顺序保存

key不能重复

与数组相似

不可以有重复元素

方法与Map类似

一个比较特殊的内置对象，本质上window就是Global的一个实例

JavaScript的全局变量和全局函数就是基于Global实现的，所以全局变量和函数就是Global的一个属性

prompt()

alert()

confirm()

交互方法

isNaN()

isFinite()：了解

parseInt()

parseFloat()

encodeURI()了解：编码

decodeURI()：解码

encodeURIComponent()了解

decodeURIComponent()

eval()，了解即可

setTimeout()

clearTimeout()

setInterval()

clearInterval()

通过this

实例

PI：圆周率

常用属性

...是扩展操作符，不可以直接传入数组对象

apply()是函数对象的方法，不是函数返回值的方法

min(...)和max(...)

Math.ceil()

Math.floor()

Math.round()

Math.fround()：了解

四舍五入

练习：随机产生1~100之间整数

random()

abs()

概念：- Date 对象用于处理日期和时间。

常用方法：- toLocaleString - 获取本地的当前时间- getFullYear - 获取年份- genMonth - 获取月份，范围：0~11- getDate - 获取天- getHours - 获取小时- getMinutes - 获取分钟- getSeconds - 获取秒钟- getTime - 获取对应的毫秒值- now- 获取对应的毫秒值- parse(string)- 将字符串转换为毫秒值

format(\"YYYY年MM月DD日 hh时mm分ss秒\")

http://momentjs.cn/

第三方工具

长度：length属性

charAt()

charCodeAt()了解

slice()、substr()

substring()：不支持负数

字符串截取

indexOf()和lastIndexOf()

字符串位置

ES6添加了startsWith()、endsWith()和 includes()

字符串包含

trimStart()

trimLeft()

trimEnd()

trimRight()

trim()

replace()：替换一个和replaceAll()：替换所有

repeat()了解

padStart()和 padEnd()了解

toLowerCase()和toUpperCase()

大小写转换

match()

综合练习

toFixed()必须掌握

toExponential()

toPrecision()

原始包装类型

原始数据类型：值传递

引用数据类型：地址传递

举例：小明在吃冰激淋(10口吃完)，被原始数据类型看到了，小明买一个新的冰激淋给它吃。被引用数据类型看到了，小明把自己的冰激淋给它吃一口

内存示意图

函数传参

ECMAScript引用数据类型

理解什么是程序执行完毕

可以捕获语法错误，但不可以捕获逻辑错误

try-catch

try-finally

try-catch-finally

格式

try：可能会抛出异常的代码一定要try中，不会抛出异常也可以写

catch：处理异常的代码块

finally：不管有没有异常都会执行

异常捕获

练习：页面上有一个input，id为d1，根据id获取该元素，并打印其value。如果id写错了，如何保证程序不会报红色错误

抛出异常：throw new Error()

异常处理

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的Javascript做好铺垫。

\"use strict\"

整个 script 都将以严格模式执行

写在 script 第一行

写在函数第一行

注意，\"use strict\" 必须写在第一行，否则无效

使用

不允许使用未声明的变量

不允许删除变量或对象

不允许删除函数

不允许变量重名

不允许使用八进制

不允许使用转义字符

不允许对只读属性赋值

不允许对一个使用getter方法读取的属性进行赋值

不允许删除一个不能删除的属性

变量名不能使用 \"eval\" 字符串

变量名不能使用 \"arguments\" 字符串

- implements- interface- let- package- private- protected- public- static- yield

变量名不能使用保留字

不允许使用 with 语句

由于一些安全原因，在作用域 eval() 创建的变量不能被调用

禁止this关键字指向全局对象，即为 undefined

规则

严格模式

文档对象模型（DOM，Document Object Model）是 HTML 和 XML 文档的编程接口

DOM 表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分

Text Sample Page

Element title

Element head

Text Hello World!

Element p

Element body

Element html

Document

在HTML中，所有元素都是节点的父类都是Node，节点是以XML文件来说

Element

Node.ELEMENT_NODE（1）：必须记住

Attr

Node.ATTRIBUTE_NODE（2）

Text

Node.TEXT_NODE（3）：记住

Node.CDATA_SECTION_NODE（4）

Node.ENTITY_REFERENCE_NODE（5）

Node.ENTITY_NODE（6）

Node.PROCESSING_INSTRUCTION_NODE（7）

Comment

Node.COMMENT_NODE（8）

Node.DOCUMENT_NODE（9）：必须记住

Node.DOCUMENT_TYPE_NODE（10）

Node.DOCUMENT_FRAGMENT_NODE（11）

Node.NOTATION_NODE（12）

Node类型

DOM树

document

window.document

获取方式

nodeType:9

nodeName:#document

nodeValue:null

parentNode:null

ownerDocument:null

节点信息

getElementById(elementId: string): HTMLElement | null;

getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;

getElementsByName(elementName: string): NodeListOf<HTMLElement>;

getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;

querySelector(selectors: string): E | null;

querySelectorAll(selectors: string): NodeListOf<E>;

选择器方法

readonly childNodes: NodeListOf<ChildNode>;

readonly firstChild: ChildNode | null;

readonly lastChild: ChildNode | null;

readonly nextSibling: ChildNode | null;

readonly previousSibling: ChildNode | null;

readonly parentElement: HTMLElement | null;

readonly parentNode: Node & ParentNode | null;

getRootNode(options?: GetRootNodeOptions): Node;

Node

readonly children: HTMLCollection;

readonly firstElementChild: Element | null;

readonly lastElementChild: Element | null;

ParentNode

readonly nextElementSibling: Element | null;

readonly previousElementSibling: Element | null;

NonDocumentTypeChildNode

body: HTMLElement;了解

readonly head: HTMLHeadElement;了解

readonly forms: HTMLCollectionOf<HTMLFormElement>;获取当前页面所有表单，了解

readonly images: HTMLCollectionOf<HTMLImageElement>;了解

readonly anchors: HTMLCollectionOf<HTMLAnchorElement>;了解

readonly links: HTMLCollectionOf<HTMLAnchorElement | HTMLAreaElement>;了解

readonly length: number;

item(index: number): Node | null;

[index: number]: Node;

NodeList

item(index: number): Element | null;

[index: number]: Element;

父类：HTMLCollectionBase

namedItem(name: string): Element | null;

HTMLCollection

特别说明

删除表格tbody标签中的内容，只留第一个标题

清空表格body中的内容，但不删除tr和td元素

作业：

获取元素

removeChild<T extends Node>(oldChild: T): T; 删除元素oldChild

remove(): void; 子元素删除自己

ChildNode

注意：元素删除时，不要使用for循环，应该结合hasChildNodes()方法和while循环来实现

练习：删除上面中的表格中的数据，即将tr标签删除，只留第一行

删除元素

createComment(data: string): Comment;了解

createAttribute(localName: string): Attr;了解

createTextNode(data: string): Text;了解

创建元素

appendChild<T extends Node>(newChild: T): T;：在元素内的底部附加标签

append(...nodes: (Node | string)[]): void;

prepend(...nodes: (Node | string)[]): void;

after(...nodes: (Node | string)[]): void;

before(...nodes: (Node | string)[]): void;

类似于innerHTML

类似于innerText

Element：重点

附加元素

使用JS将一个数组中数据显示在一个表格中，不用加样式，代码不能超过120行，利用循环+数组实现

replaceWith(...nodes: (Node | string)[]): void;

替换元素

按钮点击事件

事件参数

在上面的作业中，实现删除按钮功能

事件与函数初识

hasChildNodes(): boolean;

contains(other: Node | null): boolean;

cloneNode(deep?: boolean): Node;

textContent: string | null;

normalize(): void;了解

其它

DOM对象

append()

innerText

textContent

innertHTML

指定DOM元素之间文本

value

操作DOM表单元素的值

常用操作

父类

HTMLDocument

子类

createDocumentFragment()方法，是用来创建一个虚拟的节点对象，或者说，是用来创建文档碎片节点。它可以包含各种类型的节点，在创建之初是空的。

DocumentFragment节点不属于文档树，继承的parentNode属性总是null。它有一个很实用的特点，当请求把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点，即插入的是括号里的节点。这个特性使得DocumentFragment成了占位符，暂时存放那些一次插入文档的节点。它还有利于实现文档的剪切、复制和粘贴操作。

createDocumentFragment()

Animatable

id: string;

readonly ownerDocument: Document;

readonly tagName: string;

返回该元素的 html 代码

outerHTML: string;

add

remove

toggle

readonly classList: DOMTokenList;

className: string;

readonly style: CSSStyleDeclaration;

内联样式：ElementCSSInlineStyle

样式相关

getAttribute(qualifiedName: string): string | null;

getAttributeNames(): string[];

hasAttribute(qualifiedName: string): boolean;

removeAttribute(qualifiedName: string): void;

属性操作

属性与Document类似

子元素获取

事件相关

其它常用方法

innerText: string;

title: string;

hidden: boolean;

click()

innerHTML

InnerHTML

HTMLDivElement

HTMLSpanElement

readonly rows: HTMLCollectionOf<HTMLTableRowElement>;

readonly tBodies: HTMLCollectionOf<HTMLTableSectionElement>;

tHead: HTMLTableSectionElement | null;

width: string;

align: string;

createTBody(): HTMLTableSectionElement;

createTHead(): HTMLTableSectionElement;

deleteRow(index: number): void;

deleteTHead(): void;

insertRow(index?: number): HTMLTableRowElement;

HTMLTableSectionElement

insertCell(index?: number): HTMLTableDataCellElement;

deleteCell(index: number): void;

HTMLTableRowElement

HTMLTableDataCellElement

rowSpan: number;

colSpan: number;

readonly cellIndex: number;

HTMLTableCellElement

相关事件

防抖（debounce）: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

提交表单，防止重复提交

滚动监听

onmousemove

节流（throttle）: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

电梯门10秒关一次，当每一次点击开门按钮时，那么就会重新计时，就是防抖

电梯门10秒关一次，每过10电梯就会自动关门，在10秒内按开门按钮也不会有效，那么就是节流

升降机，就是垂直电梯

防抖和节流

元素onclick事件绑定：this表示window

JS通过元素属性绑定：this表示当前元素

JS通过addEventListener()方法绑定：this表示方法的调用者

DOM事件中的this指向

事件处理

DOM

browser object model 浏览器对象模型

hash: string;

host: string;

hostname: string;

href: string;

readonly origin: string;

pathname: string;

port: string;

protocol: string;

search: string;

reload(): void;

replace(url: string): void;

练习：获取get请求的表单的参数

location

back(): void;

forward(): void;

go(delta?: number): void;

history

navigator

readonly height: number;

readonly width: number;

readonly pixelDepth: number;

screen（了解）

设置跳转页面路径

innerWidth

innerHeight

outerWidth

outerHeight

readonly clientHeight: number;readonly clientLeft: number;readonly clientTop: number;readonly clientWidth: number;

offsetWidth

offsetHeight

documentElement

- alert： - 显示警告框- confirm： - 显示确认框- prompt： - 显示输入框- close： - 关闭页面 - 注意：close方法：Scripts may close only the windows that were opened by it，能够关闭的页面是由该页面打开的其他页面。- setinterval：设置重复动作- clearinterval：清除重复动作- setTimeout：设置延迟动作- clearTimeout：清除延迟动作

常用方法：

scrollWidth：返回元素的整体宽度，包括由于溢出而无法展示在网页的不可见部分。

readonly scrollWidth: number;

scrollHeight ：返回元素的整体高度，包括由于溢出而无法展示在网页的不可见部分。

readonly scrollHeight: number;

指定水平滚动条的位置

scrollLeft: number;

指定垂直滚动条的位置

scrollTop: number;

x：水平滚动条的位置

y：垂直滚动条的位置

滚动控制

- code：重复调用的代码（方法）- millisec：重复间隔时间，单位为毫秒- 返回值是重复对象

id_of_setinterval：重复对象的id

clearInterval(id_of_setinterval)：清除重复动作

- code：延迟调用的代码- millisec：延迟时间- 返回值是延迟对象

id_of_settimeout：延迟对象的id

clearTimeout(id_of_settimeout)：请求延迟动作

setInterval、setTimeout

Location对象包含有关当前URL的信息

设置返回完整的URL

href

重新加载所在页面

reload

Location对象

History对象包含用户

加载history列表中的前一个URL

back

加载history列表中的下一个URL

forward

- 加载 history 列表中的某个具体页面。- go(-1)：相当于back方法- go(1)：相当于forward方法

History对象

BOM对象

什么是cookie

服务端发给客户端的唯一标识

保存一些简单的数据在客户端浏览器上，比如记住密码

作用

限制

不区分大小写

encodeURIComponent()

名称(key)

值(value)

cookie的有效域

cookie跨域

域(domain)

请求 URL 中包含这个路径才会把 cookie 发送到服务器

路径(path)

过期时间(expires)

安全标识(secure)

构成

document.cookie = name + \"=\" + encodeURIComponent(value) + \";expires=\" + exp.toGMTString()+\";path=/\";

传入key：获取指定key的value

不传入key：获取所有key信息，返回一个对象

remove(key)

js-cookie.js

$.cookie(\"name\")

$.cookie(\"name\

jquery.cookie.min.js

封装工具

- JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。- 它基于ECMAScript的一个子集。 - JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯。这些特性使JSON成为理想的数据交换语言。 - 易于人阅读和编写，同时也易于机器解析和生成(网络传输速率)。

注意：引号只能用双引号- 单一对象 - {\"属性名1\":\"属性值1\

语法

stringify()

parse()

在JS中有一个JSON对象

简介

Json介绍

getItem(key: string): string | null;

clear(): void;

removeItem(key: string): void;

key(index: number): string | null;

localStorage

sessionStorage

Web Storage

有一个输入框和按钮，点击按钮将输入框中的数据保存，关闭页面再打开时，输入框自动填入刚刚保存的数据分别使用cookie和storage完成

存储

效果图

需求说明

概念- RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

let reg = pattern[flags]

/正则表达式/

\"正则表达式\"

pattern

m(了解)

u(了解)

y(了解)

s(了解)

flags

参数解析

创建

test(string: string): boolean;

exec(string: string): RegExpExecArray | null;

https://jquery.cuishifeng.cn/regexp.html

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_expressions

https://www.runoob.com/regexp/regexp-syntax.html

参考文档

\\b：匹配一个单词边界，即字与空格间的位置。

\\B：非单词边界匹配。

边界符

列举一些可选的字母，包含其中一个即可

/[abc]/

/^[abc]$/

/[a-z]/

/[a-zA-Z0-9_-]/

字符组合

/[^a-zA-Z0-9_-]/

[]

/.n/

字符类

重复0次或无数次

重复1次和无数次

重复0次或1次，但不表示只能出现一次

如果出现在其它量词符后面就表示非贪婪模式。即尽可能少的去匹配

重复n次

{n}

重复>=n次

量词符

\\d：匹配0-9之间的任一数字，相当于[0-9]

\\D：与\\d相反，即[^0-9]

\\w：匹配任意字母、数字和下划线，相当于[A-Za-z0-9_]

\\W：与\\w相反

\\s：匹配空格、换行符、制表符等，相当于[\\t\\\\v\\f]

\\S：与\\s相反

预定义字符

话题格式：#话题内容#，判断一个input输入框中的内容是否为话题格式，并提取其中的内容

大括号

中括号

RegExp.$1~RegExp.$9

取出固定模板的乘除计算部分

取出不固定的模板乘除计算部分

思考：求出如上字符串的计算结果

练习：9-2*5/3+7/3*99/4*2998+10*568/14

(pattern)

(?:pattern)

获取/前的字符串内容，但不包含/

(?=pattern)

获取不以/结尾的字符串内容

(?!pattern)

<h1>h1标签内容</h1><div>div标签内容</div>。获取两个标签之间的内容

(?<=pattern)

(?<!pattern)

小括号

括号总结

readonly source: string;

readonly global: boolean;

readonly ignoreCase: boolean;

readonly multiline: boolean;

readonly sticky: boolean;

readonly unicode: boolean;

lastIndex: number;

readonly flags: string;

RegExpConstructor

lastMatch: string;

$1~$9:string

构造方法属性

match(regexp: string | RegExp): RegExpMatchArray | null;

search(regexp: string | RegExp): number;

http://c.runoob.com/front-end/854

在线测试工具

用户名

密码

/^#?([a-f0-9]{6}|[a-f0-9]{3})$/

十六进制值

邮箱

URL

/((2[0-4]\\d|25[0-5]|[01]?\\d\\d?)\\.){3}(2[0-4]\\d|25[0-5]|[01]?\\d\\d?)/

/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/

IP地址

/^<([a-z]+)([^<]+)*(?:>(.*)<\\/\\1>|\\s+\\/>)$/

HTML标签

[\\u4e00-\\u9fa5]

[^\\u4e00-\\u9fa5]

中文匹配

常用正则表达式

-?\\d+(\\.\\d+)?

匹配整数或者小数（包括正数和负数）

匹配年月日日期格式2018-12-6

匹配qq号

1[3-9]\\d{9}

11位的电话号码

长度为8-10位的用户密码：包含数字字母下划线

[\\da-zA-Z]{4}或者[0-9a-zA-Z]{4}

匹配验证码：4位数字字母组成的

匹配邮箱地址

\$[^()]+\$

1-2*((60-30+(-40/5)*(9-2*5/3+7/3*99/4*2998+10*568/14))-(-4*3)/(16-3*2))从上面算式中匹配出最内层小括号以及小括号内的表达式

\\d+[*/]\\d+

从类似9-2*5/3+7/3*99/4*2998+10*568/14的表达式中匹配出从左到右第一个乘法或除法

PropertyKey = string | number | symbol;

属性值，默认为undefined

可以替换为get和set函数

value?: any;

值是否可以被修改，默认为false

不可与get和set函数共存

writable?: boolean;

表示属性是否可以通过 delete 删除或重新定义，是否可以修改它的特性。定义之后就无法更改

默认值为true

true：可以删除或重新定义

false：不可以

configurable?: boolean;

表示属性是否可以通过 for-in 循环返回。

默认值为false

true：可以遍历

false：不可以遍历

enumerable?: boolean;

PropertyDescriptor

定义一个对象obj，里面有一个属性name，name的显示在一个span标签中，当在开发者工具中的控制台修改了name的值时，span变化的值自动修改

[s: string]: PropertyDescriptor;

PropertyDescriptorMap

会覆盖掉通过defineProperty添加的属性

getOwnPropertyDescriptors(o: T): {[P in keyof T]: TypedPropertyDescriptor<T[P]>} & { [x: string]: PropertyDescriptor };

获取对象 o 上的所有属性名称，包括 enumerable 为 false 的属性名称

注意，不能获取原型链上的属性名称

getOwnPropertyNames(o: any): string[];

获取对象 o 上的所有属性名称，不包括 enumerable 为 false 的属性名称

keys(o: object): string[];

获取对象 o 上的所有属性的值，不包括 enumerable 为 false 的属性值

values(o: {}): any[];

获取对象 o 上的所有键值对，不包括 enumerable 为 false 的键值对

返回的是一个二维数组，每个数组第一个元素是 key，第二元素是 value

freeze<T>(o: T): Readonly<T>;

isFrozen(o: any): boolean;

seal<T>(o: T): T;

isSealed(o: any): boolean;

preventExtensions<T>(o: T): T;

isExtensible(o: any): boolean;

将o做为新对象的原型。与原型链实现的继承一致

create(o: object | null): any;

getPrototypeOf(o: any): any;

静态方法

只查看对象本身，不会去原型上查找

hasOwnProperty(v: PropertyKey): boolean;

用于测试一个对象是否存在于另一个对象的原型链上。

isPrototypeOf(v: Object): boolean;

propertyIsEnumerable(v: PropertyKey): boolean;（了解）

valueOf(): Object;（了解）

toString(): string;（了解）

实例方法

Object高级部分

key不能重复，value可以重复

const map = new Map();

const m = new Map([ [\"key1\

size属性，只读

delete(key: K): boolean;

has(key: K): boolean;

get(key: K): V | undefined;

不支持for-in循环

链式写法了解

不可以有重复元素，有去重复的能力

add(value: T): this;

delete(value: T): boolean;

has(value: T): boolean;

readonly size: number;

集合

保存实参数据

是一个指向 arguments 对象所在函数的指针。在严格模式下，不可使用

callee

length：实参个数

arguments

了解即可

caller

一般是当作构造函数使用时才考虑

this

- 如果函数是当普通函数使用，则 new.target 的值是 undefined；- 如果是使用 new 关键字调用的，则 new.target 将引用被调用的构造函数。

通过它可以实现函数必须通过new来调用或者不能使用new来调用

思考，Map 是如何实现必须通过 new Map() 来创建对象的

new.target

length：形参个数

在JS中，每个对象都有原型，不是只有函数才有

prototype：原型对象

内部属性

会调用函数

thisArg：this的指向对象

argArray：数组对象，调用函数时传值的参数

argArray：可变参数，调用函数时传值的参数

不会调用函数，还需要手动调用，返回一个新函数对象

比如在JS绑定点击事件使用全局函数

直接通过函数名()调用

new 函数名()

对象名.函数名()

对象函数

window执行环境

对象方法中的

函数中定义函数

嵌套函数

一个不由定义者调用的函数

普通函数(对象函数)

对象函数(普通函数)

对象函数(对象函数)

回调函数

this指向window

直接通过函数名()调用的

this指向对象名

对象名.函数名()调用的

函数中的this默认是指向函数的调用者

总结

常规函数

定义在全局执行环境中

箭头函数做为对象的方法定义时

做为构造函数中的方法

在箭头函数中，this引用的是定义箭头函数的执行环境

箭头函数

DOM事件对应的函数

this指向

嵌套函数，且内函数使用了外函数的变量

延长了外函数中的局部变量的生命周期

允许函数之外操作函数中的变量

优点

如果延长的变量过多，占内存会太多

缺点

let定义变量

或者传参

闭包

循环创建5个定时器，定时器中打印索引

模拟私有变量

用途

函数执行过程中调用函数本身，就是递归函数

比如，文件搜索

可以做多层级数据的搜索

注意：一定写终止条件，不然就是死循环

什么是递归函数

在省市县(区)三层数据中，找出所有value为包含“北”这个字的数据

概念：源对象和复制之后的对象中的引用数据类型指向同一个地址。

当对象的属性是引用类型时，会出现共享变量

浅拷贝

深复制：源对象和复制之后的对象中的引用数据类型指向不同的地址。

深拷贝

lodash中的cloneDeep()

递归函数

函数构造器

完整对如下指令的解析

var 函数名 = new Function(\"形参列表\

forEach

filter

some

every

map

reduce

find

findIndex

模拟数组中的常用高阶函数

回调函数练习

高级

使用统一的模板创建对象，避免重复代码。可以更好的解决引用数据类型深复制的问题

构造函数针对引用数据类型是统一使用深复制

模板

类或构造函数

new 构造函数();创建出来

对象或实例

对象的名称，就是=左边的

引用

new 构造函数()

一次性使用

匿名对象

几个概念

this.属性名。必须写在构造函数中，否则当成使用

实例.属性名

实例属性

构造函数.属性名

静态属性

实例.方法名

构造函数.方法名

构造函数存在浪费内存空间的问题，因为构造函数在处理引用数据类型时，是深拷贝模型

如何让构造函数只能通过new来调用，否则报错

思考

练习一

练习二

练习三

解决构造函数的缺点

提供属性和方法的共享，本质上就是继承，但并不代表对象拥有了该属性

为什么

查看对象内容信息

Console.log

查看对象结构信息

Console.dir

查看对象信息

函数名.prototype

函数原型（原型对象）

对象.__proto__

对象原型

注意，在JavaScript中所有对象都有__proto__属性，所以构造函数原型也有__proto__属性指向其父类的构造方法

在原型对象上扩展

修改原型对象指向另一个构造函数创建的对象

修改原型对象指向自定义对象

修改原型

原型的三种用法

注意：原型只会影响实例

练习，通过原型给Array添加一个sum()方法，计算数组的总和，即通过数组对象.sum()就可以得到该数据的和

表示构造函数本身

默认原型对象会自动提供

constructor

可以批量给原型对象上挂载方法和属性

构造函数.prototype = {}

通过constructor属性指定构造函数

自定义原型对象

__proto__

new

prototype

构造函数的原型对象

构造函数、原型、实例默认关系图

查看对象本身是否有指定的方法，如果有就执行

如果没有，就通过 __proto__ 属性找到该对象的构造函数原型对象prototype上去找

如果还没有就会通过原型链继续往查找直到Object为止

注意，原型链的层数是不固定

方法及属性的查找规则

原型链

对象 instanceof 构造函数

instanceof

构造函数.prototype.isPrototypeOf(对象)

isPrototypeOf()

对象与函数原型比较

可以实现属性和方法的继承

引用类型的属性会被所有对象共享

子类型在实例化时不能给父类型的构造函数传参

原型链实现

call()和apply()可以指定this指向

子类也不能访问父类原型上定义的方法

不能通过instanceof和isPrototypeOf()来检测父构造函数的能力

盗用构造函数实现

父类函数原型上定义共享方法

父类构造函数中定义属性

组合继承弥补了原型链和盗用构造函数的不足

是 JavaScript 中使用最多的继承模式

而且组合继承也保留了 instanceof 操作符和 isPrototypeOf()方法识别合成对象的能力

组合继承：使用最多

原型式继承非常适合不需要单独创建构造函数，但仍然需要在对象间共享信息的场合

与原型链实现一样

原型式继承：了解

继承实现

定义一个Shape类，有两个属性表示宽和高

创建一个自定义原型对象，有一个getArea方法，表示求面积

定义一个Square类，继承Shape类

定义一个Triangle类，继承Shape类

push

pop

unshift

shift

sort

reverse

如何实现监听数组中如下几个方法

原型练习

原型

class 类名 {}

类声明

没有声明提升

=号右边称为匿名类

let Person = class {}

类表达式

let 类名 = (function() {return class {}})();

支持私有变量的写法

注意：使用class定义的类，不能被当普通函数来使用

constructor() {}

构造函数方法

在构造函数或其它函数中通过\"this.属性名=值\"，添加

在类中，但不在任何函数中，通过\"属性=值\"添加

get函数

set函数

成员函数或成员方法，推荐使用

方法挂载在原型对象上，因此多个对象的方法地址共享

但如果该方法被当成回调函数使用，this 指向会有问题，不过可以通过函数的bind方法解决

方法名() {}

箭头函数写法，不推荐使用

方法名 = () => {}

使用实例属性和方法时，必须通过this.属性名或方法名调用

属性和方法都是挂载在函数或类本身

static 属性名

static 方法名() {}

在实例方法中可以通过 this.constructor.静态属性名或方法名来调用

静态

类的组成

封装一个分页助手工具，参数有 count 和 size。传这两个参数后，自动计算分页总数、第一页、最后一页、下一页、上一页。当页码和count以及size变化时，上一页和下一页会自动更新

类：class

也称为派生类

也称为基类或超类

注意：子类在实例化时，先会创建父类实例，然后才会创建子类实例

class 子类 extends 父类

类声明时

let 子类 = class extends 父类 {}

注意：不支持多继承，即extends 后面跟多个类名

使用方式

只能在子类中使用，而且仅限于类构造函数、实例方法和静态方法内部。

不能单独使用super，比如打印super

调用 super()会调用父类构造函数，并将返回的实例赋值给 this

如果子类定义了constructor方法，且有参数，则super也必须传入参数。反之，super会自动传入参数到父类中

在类构造函数中，不能在调用 super()之前引用 this

super关键字

不new的类，即无法创建实例对象

可以通过new.target实现

但是抽象类可以被继承

抽象类

可以理解为多继承，即将多个类的的属性和方法，混入到一个对象中

类混合

继承：extends

定义一个函数，完成类的继承。要求如下：1. \"Chinese\"类继承于\"Human\"类2. \"Human\"类实现一个函数\"getName\"，返回该实例的\"name\"属性3. \"Chinese\"类构造函数有两个参数，分别为\"name\"、\"age\"4. \"Chinese\"类实现一个函数\"getAge\"，返回该实例的\"age\"属性

JavaScript