JavaScript Day01
1 JavaScript 概述
① JavaScript 的特点
JavaScript 是一门动态的，弱类型的，解释型的，基于对象的脚本语言。
动态： 程序执行的时候才会确定数据类型。 静态： 书写代码的时候提前确定数据类型。
弱类型： 数据类型可以自动转换。 强类型： 数据类型无法自动转换。
解释型： 边编译，边运行，开发效率更高。 编译型： 边编译，边运行，开发效率更高。
脚本：一般都是可以嵌在其它编程语言当中执行。
② javaScript 的运行环境
所有的高级编程语言都需要运行环境，运行环境负责把编程语言编译为计算机能够认识的机器码。
编译型语言的运行环境叫编译器，解释型语言的运行环境叫解释器。
JavaScript 的解释器（运行环境）是浏览器或Node.js。
② 浏览器端的 JavaScript 组成部分
-
ECMAScript，JavaScript 的基本语法。
-
BOM，浏览器对象模型。
-
DOM，文档对象模型。
2 JavaScript 基本语法
2.1 JavaScript 在 HTML 中使用的三种方式
① 行内式
在HTML元素中通过事件属性来写JS代码：
<div onclick="js代码..." ondblclick="js代码..."></div>② 内嵌式
在 HTML 文件中，使用 script 元素中，把JS代码写在元素里：
<script>
js代码...
</script>script 建议写在其他元素的后面！
③ 外链式
JS代码写在独立的js文件中，html 中使用 script 元素引入 js 文件：
<script src="js文件地址"></script>script 建议写在其他元素的后面！
外链式与内嵌式各自写各自的，不能共用一个标签！
2.2 JavaScript 注释
// 单行注释
// alert('我是第一个安妮');
/*
多行注释
alert('我是第二个安妮');
alert('我是第三个安妮');
*/2.3 JavaScript 语法特点
1. JS 中，严格区分大小写。
2. JS 由很多条语句组成，语句的最后需要指令结束符； JS 的指令结束符是分号或者换行。2.4 JavaScript 中输出内容
① 输出到弹框
alert();② 输出到页面中
document.write()③ 输出到控制台
console.log();3 变量
3.1 数据、直接量、变量
数据： 编程语言计算的就是数据，计算的结果也是数据。
直接量： 直接使用数据。
变量： 给数据取个名字，通过名字使用数据。（把数据存在变量中，通过变量使用数据）。
3.2 变量的意义
1. 使用变量表示数据，更加方便，尤其是复杂数据。
2. 变量可以保证多次使用的是同一个数据。3.3 变量的语法
1. 创建变量需要使用关键字 var，使用已经创建过的变量不需要 var。
2. 把数据赋值给变量，该数据称为变量的值
3. 变量的值可以修改
4. 如果使用不存在的变量，报错// 创建变量（声明变量）
var num;
// 给变量赋值
num = 200;
// 创建变量并给变量赋值
var age = 19;
// 修改变量的值（对变量重新赋值）
age = num;
// 同时创建多个变量
var a = 100, b = 200, c = 300;3.4 变量的命名规范（标识符的命名规范）
① 强制规范
1. 变量名必须由数字、字母、下划线、$ 组成且不能以数字开头。
2. 变量名不能是关键字或保留字关键字：在JS中具有特殊意义的词。
保留字：现在还不是关键字未来可能会成为关键字的词。② 建议规范
1. 变量名要使用有意义的单词。
2. 如果变量名由多个单词组成，建议使用小驼峰命名法。var homeAddress = '中国';
var myHomeAddress = '';4 数据类型
4.1 数据类型的划分
① 原始类型
number 数字类型
string 字符串类型
boolean 布尔类型
undefined 未定义类型
null 空类型② 对象类型
array 数组类型
function 函数类型
object 对象类型
...4.2 判断数据的类型
typeof();4.3 number 数值类型
① 整型
var n1 = 456;
var n2 = 012; // 数字直接量的 八进制表示
var n3 = 0x12; // 数字直接量的 十六进制表示 ② 浮点型
var n4 = 345.45;
console.log(1 + 2); // 3
console.log(0.1 + 0.2); // 0.30000000000004注意：浮点型存在计算精度问题！
③ NaN
NaN 也是 number 类型的数据，非标准数字。
函数 isNaN() 可以用来判断一个数据是否是 NaN。
NaN 具有如下两个特点：
-
NaN 与任何数进行任何运算，结果仍然是 NaN。
-
NaN 与任何数据都不相等，包括自己。
④ 科学计数法
var n6 = 4.5e2; // 4.5 * 10^2
var n7 = 12e3; // 12 * 10^3⑤ JavaScript 中数字的有效范围
-5e324 ~ 1.7976931348623157e+308 JS 中有效数字的范围。
如果超过范围，会表示为 Infinity 或者 -Infinity
isFinite() 该函数可以判断一个数字是否在有效范围内，如果是有效数字，返回 true；无效数字（Infinity、-Infinity、NaN）返回 false；
4.4 string 字符串类型
① 字符串的表示方式
使用单引号或者双引号表示字符串，二者没有任何区别。
使用单引号表示字符串，字符串内容中不能出现单引号；使用双引号表示字符串，字符串内容中不能出现双引号。
② 转义字符
\n 表示换行符
\' 单引号
\" 双引号
\\ \
\uxxxx unicode编码，后面4位16进制数字4.5 boolean 布尔类型
true 真，表示肯定
false 假，表示否定4.6 null 和 undefined
null 表示空，定义变量之后如果暂时不知赋什么值，可以先赋值null
undefined 表示未定义，没有赋值的变量、不存在的对象属性和不存在的数组元素， 被动产生Day02 JavaScript
1 回顾
1.1 JS 基本语法
1. 在 HTML 中如何使用 JS
① 行内式
② 内嵌式
③ 外链式
2. JS 中注释
单行注释
多行注释
3. 特点
指令结束符：分号或者换行
严格区分大小写 1.2 数据、变量、直接量
1. 概念
数据： 运算的是数据，运算结果还是数据
直接量： 直接使用数据
变量： 把数据存在变量中，取个名字
2. 变量的意义
① 方便数据的使用
② 保证数据的一致
3. 变量的语法
① 关键字 var，用于声明变量。
② 变量中的数据称为变量的值，变量的值可以修改
③ 使用不存在的变量，报错； 使用没有值的变量，自动得到 undefined
4. 变量名的命名规范
强制要求：
1. 变量名必须由数字、字母、下划线、$ 组成且不能以数字开头
2. 变量名不能是关键字和保留字
建议要求：
1. 变量名使用有意义的词
2. 如果多个单词组成，建议小驼峰命名法1.3 数据类型
1. 数据类型划分
原始类型： number、string、boolean、null、undefined
对象类型： 无数中...
2. 判断数据类型的函数
typeof()
3. number
① 整型
② 浮点
③ NaN
④ 科学计数法
⑤ Infinity、-Infinity
4. string
① 单引号和双引号
② 转义字符 \n \' \" \\
5. boolean
true
false
6. null 和 undefined
2 数据类型转换
2.1 数据类型转换的规则
① 其他类型转为 number 类型
1. string -> number 规则：
① 如果字符串内容是纯数字，转为对应的数字； 如果字符串内容是科学计数法、十六进制也是纯数字。
② 空字符串转为 0
③ 其他形式的字符串转为 NaN
④ 字符串在转为 number 的时候会自动去掉两边的空格，再进行转换
2. boolean -> number 规则：
true 转为 1
false 转为 0
3. null -> number 规则：
转为 0
4. undefined -> number 规则：
转为 NaN② 其他类型转为 string 类型
数据长什么样式就转为什么样的字符串。③ 其他类型转为 boolean 类型
1. number -> boolean 规则：
① 0 转为 false， NaN 转为 false
② 其他的都会转给 true
2. string -> boolean 规则：
① 空字符串转为 false
② 其他都会转为 true， 不会自动去掉两端空格
3. null -> boolean 规则：
转为 false
4. undefined 转为 boolean 规则：
转为 false0、NaN、空字符串、null、undefined 可以转换为 false，其他的数据都转为 true！2.2 强制类型转换（显示转换）
① 强制把其他类型转为 number 类型的函数
Number()
parseInt()
parseFloat()parseInt() 与 parseFloat() 和 Number() 转换规则的区别：
1. Number() 的转换规则是标准规则，parseInt() 和 parseFloat() 主要用于从字符串中提取数字。
2. 纯数字字符串和纯数字开头的字符串都可以通过 parseInt() 和 parseFloat() 转为有效数字，其他字符串都转 为 NaN
3. boolean、null、undefined 都转为 NaNparseInt() 和 parseFloat() 的区别：
1. parseInt() 只获取整数部分2. parseFloat() 可以获取小数部分。② 强制把其他类型转为 string 类型的函数
String()③ 强制把其他类型转为 boolean 类型的函数
Boolean()2.3 自动类型转换（隐式转换）
1. 数据参与运算，如果不符合运算对数据类型的要求，数据就会自动转换为需要的数据类型。
2. 运算符决定运算中所需数据的类型。3 运算符
3.1 运算符和表达式
① 运算符
1. 运算符就行就是进行运算的符号，如 + - * / = 等
2. 运算符进行运算的数据称为操作数，操作数可以是变量、直接量、表达式② 表达式
1. 由运算符、数据共同组成的一个计算的式子， 表达式有一个计算结果，称为表达式的值。 表达式一定是有值的。
2. 一个变量、一个直接量都是最简单的表达式，称为原始表达式
3. 多个简单的表达式可以组成一个复杂的表达式
4. 有些表达式具有“副作用”，指的是除了表达式的计算结果还会被参与运算的变量产生影响。 副作用由运算符决定，有副作用的表达式肯定有变量参与。3.2 运算符的分类
① 按照运算符需要的操作数的个数
一元运算符二元运算符三元运算符② 按照运算符的功能
1. 算术运算符
2. 比较运算符
3. 逻辑运算符
4. 位运算符
5. 赋值运算符
6. 其他运算符3.3 运算符讲解（按照功能）
① 算术运算符
| 运算符 | 含义 | 操作数个数 | 操作数的类型要求 | 组成的表达式的值的类型 | 有无副作用 |
|---|---|---|---|---|---|
| + | 加法 | 2 | number | number | 无 |
| - | 减法 | 2 | number | number | 无 |
| * | 乘法 | 2 | number | number | 无 |
| / | 除法 | 2 | number | number | 无 |
| % | 取余 | 2 | number | number | 无 |
| + | 正号 | 1 | number | number | 无 |
| - | 负号 | 1 | number | number | 无 |
| ++ | 累加 | 1 | number | number | 有 |
| -- | 累减 | 1 | number | number | 有 |
+ 作为正号运算符:
1. 表达式的值就是操作数的值（不是number类型转为number类型）
2. 利用该运算符，可以进行数据类型转换
3.任何值和字符串相加都会转为字符串
4.当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算
任何值和NaN做运算都得NaN
4.任何值做“- * / ”运算都会自动转换成Number++ 和 -- 运算符：
1. 表达式的值受到运算符位置的影响， 运算符在前取操作数累加或累减后的值作为表达式的值； 运算符在后取操作数累加或累减之前的值作为表达式的值。
2. 该运算符所组成的表达式具有副作用，不论运算符在前还是在后，副作用都是一致的。② 关系运算符（比较运算符）
| 运算符 | 含义 | 操作数个数 | 操作数的类型要求 | 组成的表达式的值的类型 | 有无副作用 |
|---|---|---|---|---|---|
| > | 大于 | 2 | number、string | boolean | 无 |
| < | 小于 | 2 | number、string | boolean | 无 |
| >= | 大于等于 | 2 | number、string | boolean | 无 |
| <= | 小于等于 | 2 | number、string | boolean | 无 |
| == | 相等 | 2 | 操作数类型一致不转 操作数类型不一致自动转 number | boolean | 无 |
| != | 不相等 | 2 | 操作数类型一致不转 操作数类型不一致自动转 number | boolean | 无 |
| === | 全等 | 2 | 没有要求 | boolean | 无 |
| !== | 不全等 | 2 | 没有要求 | boolean | 无 |
比较运算符对操作数类型的要求：
1. 如果操作数类型不一致，会自动转为number，再进行比较。
2. 如果两个操作数都是字符串，按照字符串的规则比较大小。字符串比较大小的规则：
1. 字符串比较会逐个字符比较，对应的字符较大，整个字符串也较大。
2. 字符按照对应的 unicode 编码进行比较。
3. 两个字符串完全一样，相等。相等和不相等的比较规则：
1. 两个操作数类型一致，操作数是一样的就相等。
2. 两个操作类类型不一致，转为 number 再进行比较。
3. null 进行判等比较，情况特殊：null == false;
// falsenull == '';
// falsenull == 0;
// falsenull == undefined;
// true全等和不全等的比较规则：
1. 两个操作数类型一致，操作数是一样的就全等。
2. 两个操作数类型不一致，直接不全等。不会进行数据类型自动转换。③ 逻辑运算符
| 运算符 | 含义 | 操作数个数 | 操作数的类型要求 | 组成的表达式的值的类型 | 有无副作用 |
|---|---|---|---|---|---|
| && | 逻辑与 | 2 | 无 | 取其中一个操作数作为表达式的值 | 无 |
| || | 逻辑或 | 2 | 无 | 取其中一个操作数作为表达式的值 | 无 |
| ! | 逻辑非 | 1 | boolean | boolean | 无 |
逻辑与运算符组成的表达式的值：
1. 第一个操作数成立，以第二个操作数作为表达式的值。
2. 第一个操作数不成立，以第一个操作数作为表达式的值， 第二个操作数不会被执行到。逻辑或运算符组成的表达式的值：
1. 第一个操作数成立，以第一个操作数作为表达式的值， 第二个操作数不会被执行到。
2. 第一个操作数不成立，以第二个操作数作为表达式的值。④ 赋值运算符
| 运算符 | 含义 | 操作数个数 | 操作数的类型要求 | 组成的表达式的值的类型 | 有无副作用 |
|---|---|---|---|---|---|
| = | 赋值 | 2 | 无 | 第一个操作数作为表达式的值 | 有 |
| += | 赋值相加 | 2 | number | number | 有 |
| -= | 赋值相减 | 2 | number | number | 有 |
| *= | 赋值相乘 | 2 | number | number | 有 |
| /= | 赋值相除 | 2 | number | number | 有 |
| %= | 赋值取余 | 2 | number | number | 有 |
| += | 字符串拼接赋值 | 2 | string | string | 有 |
总结：
1. 赋值运算符的左边操作数必须是变量形式，右边操作数可以是变量、直接量、表达式
2. 赋值运算符都具有副作用，而且用的就是副作用
3. 赋值运算符所组成的表达式取左边操作数作为值，是赋值之后的。⑤ 其他运算符
| 运算符 | 含义 | 操作数个数 | 操作数的类型要求 | 组成的表达式的值的类型 | 有无副作用 |
|---|---|---|---|---|---|
| typeof | 判断操作数数据类型 | 1 | 无 | string | 无 |
| + | 字符串连接符 | 2 | string | string | 无 |
| , | 逗号运算符 | 2 | 无 | 以第二个操作数作为表达式的值 | 无 |
| ?: | 三元运算符 | 3 | 第一个操作数自动转为 boolean，后两个操作数无要求 | 取第二个或第三个操作数作为表达式的值 | 无 |
**+ 多重身份：**
1. 如果只有一个操作数，该符号就是正号运算符。
2. 如果有两个操作数，只要操作数中有一个是字符串，该符号就是字符串连接符。
3. 如果由两个操作数，操作数中没有字符串，该符号就是相加运算符。三元运算符组成的表达式的值：
操作数1 ? 操作数2 : 操作数31. 操作数1成立，取操作数2作为表达式的值。
2. 操作数1不成立，取操作数3作为表达式的值。2.4 运算符优先级
1. 一元运算符
2. 算术运算符 * / % + -
3. 比较大小
4. 判等
5. 逻辑运算符 && > ||
6. 三元运算符
7. 赋值运算符() 可以提高优先级作业
-
数据类型转换、运算符
-
写出输出结果
var n = 100;
console.log(n ++ && n --);
console.log(n);
console.log(-- n || n ++);
console.log(n); -
字符串拼接练习：
定义变量 姓名、性别、家乡、爱好、期望薪资使用变量拼接如下字符串：
我的名字叫XXX,
性别XXX,
我来自XXX,
我的业余爱好是XXX,
我学习后的期望薪资是XXX K;Day03 JavasScript
1.1 数据类型转换
1. 转换规则
1.1 其他类型 -> number
string->number: 纯数字（16进制、科学计数法）、空字符串
bolean->number: true:1 false:0
null -> number: 0
undefined->number: NaN
1.2 其他类型 -> string
1.3 其他类型 -> boolean
false: 0、NaN、空字符串、null、undefined
true： 剩下的
2. 强制类型转换 函数
Number()、parsetInt()、parsetFloat()
String()
Boolean()
3. 自动类型转换
运算符决定所需操作数的数据类型1.2 运算符
1. 算术运算符： + - * / % + - ++ --
2. 比较运算符： > >= < = == != === !==
3. 逻辑运算符： && || !
4. 赋值运算符： = += -= *= /= %= +=
5. 其他运算符： typeof + , ?:一元运算符 算术运算符 比较（大小、判断） 逻辑 赋值2 分支结构 （条件语句）
2.1 单向分支
if (条件表达式) {
语句;
}2.2 双向分支
if (条件表达式) {
语句;
} else {
语句;
}2.3 多向分支 else if
if (条件表达式) {
语句;
} else if (条件表达式) {
语句;
} else if (条件表达式) {
语句;
} else if (条件表达式) {
语句;
} else {
语句;
}2.4 多向分支 switch case
switch (表达式) {
case 表达式可能的值: 语句; break;
case 表达式可能的值: 语句; break;
case 表达式可能的值: 语句; break;
case 表达式可能的值: 语句; break;
case 表达式可能的值: 语句; break;
case 表达式可能的值: 语句; break;
default: 语句;
}switch (表达式) {
case 表达式可能的值:
语句;
break;
case 表达式可能的值:
语句;
break;
case 表达式可能的值:
语句;
break;
}break 表示结束 case， 如果没有 break 会继续执行下面 case 中语句，直到碰到 break 或者结束2.5 嵌套分支
if (条件表达式) {
if (条件表达式) {
} else {
} else {
if (条件表达式) {
}
}
switch () {
case ...
case ...
}
}Day04 JavaScript
1 回顾
1. 单向分支
if () {
}
2. 双向分支
if () {
} else {
}
3. 多向分支 else if
if () {
} else if () {
} else if () {
} else if () {
} else {
}
4. 多向分支 switch case
switch () {
case 值: 语句; break;
case 值: 语句; break;
case 值: 语句; break;
case 值: 语句; break;
default: 语句;
}
5. 嵌套分支2 循环语句
2.1 while 循环
while (循环条件表达式) {
循环体语句...
}成功的循环需要满足一下两个条件：
-
循环条件不能永远成立，否则就是死循环。
-
随着循环次数的增加，循环条件应该越来越趋向于不成立。
2.2 do while 循环
while (循环条件表达式) {
循环体语句...
}do while 循环结构与 while 循环结构的区别：
-
while 每次执行循环体代码之前都会进行条件判断； do while 第一次执行循环体语句不会判断条件，后面每一次执行之前也都会进行条件判断。
-
循环次数相同（超过 1 次），使用 while 来写和使用 do while 来写，循环条件判断表达式以及循环体语句都是相同的。
2.3 for 循环
for (循环标记变量初始化; 循环条件表达式; 循环标记变量的变化) {
循环体语句...;
}注意事项：
-
循环标记变量初始化在循环之前执行一次。
-
循环条件每次执行循环体代码之前先判断， 与 while 一致。
-
循环标记变量每次循环体代码执行完毕后变化。
3 跳转语句
① break
1. 在 switch case 中使用， 结束本次 case。
2. 在循环中使用，跳出整个循环（结束循环）； for、while、do while 中皆可使用。① continue
1. 在循环中使用，跳出本次循环，本次循环continue后面的语句不再执行，继续执行下一次的循环。
Day05 JavaScript
2 数组
2.1 什么是数组
1）数组是值的有序集合。
2）数组中的成员称之为元素。
3）数组中的元素可以是任何类型的数据。
4）数组的每个元素都有位置，使用数字表示，称为元素的索引（下标）。
5）数组索引从 0 开始, 最大为 2^32-2，数组最大能容纳 4294967294 个元素。
2.2 声明数组的方式
① 直接量方式
[元素1, 元素2, 元素3，元素4...];② Array 函数方式
Array(元素1, 元素2, 元素3，元素4...);
Array(23); // 如果参数只有一个且是数字，表示数组元素的个数③ Array 构造函数方式
new Array(元素1, 元素2, 元素3，元素4...);
new Array(23); // 如果参数只有一个且是数字，表示数组元素的个数2.3 数组元素的读写
1. 通过 数组[索引] 形式，可以对数组中的元素进行读写。
2. 如果读取数组中不存在的元素，会自动得到 undefined。
2. 如果给数组中不存在的元素赋值，给给数组添加一个新元素。arr[2];
arr[4] * 67;
arr[4] = 100;
arr[5][2] = 90;2.4 稀疏数组
1. 如果数组中存在没有值的元素，那么该数组就是稀疏数组。
2. 如果给数组元素赋值的时候，使用的索引不与前面索引连续，数组会添加一些没有值的元素，保证索引连续。
3. 读取没有值的元素，自动获取 undefined。2.5 数组的遍历(迭代)
// 使用 for 循环遍历
for (var i = 0; i < 数组.length; i ++) { 数组[i];
// 获取元素的值}
// 使用 for in 遍历数组for (var i in 数组) { 数组[i];
// 获取元素的值}2.6 数组元素的添加和删除
① 添加元素
// 第一种方式 指定不存在的索引添加新元素 借助 lengtharr[5] = 新元素;arr[arr.length] = 新元素;
// 第二种方式 使用 push 方法 在数组后面追加一个或多个新元素arr.push(新元素);arr.push(新元素1, 新元素2, 新元素3...);
// 第三种方式 使用 unshift() 方法，在数组的最前面追加一个或多个元素arr.unshift(新元素);arr.unshift(新元素1, 新元素2, 新元素3...);
// 第四种方式 使用 splice() 方法，在指定位置插入一个或多个新元素arr.splice(位置, 0, 新元素);arr.splice(位置, 0, 新元素1, 新元素2, 新元素3...);② 删除元素
// 第一种方式 通过设置 length 实现删除元素的目的arr.length -= n;
// 删除最后 n 个元素
// 第二种方式 使用 pop() 方法删除最后一个元素, 与 push() 对应arr.pop();
// 第三种方式 使用 shift() 方法删除第一个元素, 与 unshift() 对应arr.shift();
// 第四种方式 使用 splice() 方法删除指定位置指定数量的元素arr.splice(位置, 数量);2.7 多维数组
1. 如果数组中元素还是个数组，这样的数组成为多维数组
2. 多维数组根据结构层次可以分为 二维数组、三维数组 ...2.8 字符串的数组特性
字符串是由字符组成的串，结构与数组有相似的地方。
像字符串这种类似于数组但又不是数组的数据，称为类数组或伪数组。
字符串具备一定的数组特性：
① 字符串具有 length 属性，可以获取字符串的长度（字符的个数）。
② 字符串中的字符也具有索引，通过索引可以读取字符串中的字符， str[1]。
③ 使用 for 循环可以遍遍历字符串。
字符串知识具备部分数组特性：
① 字符串的 length 属性无法修改。
② 无法通过索引单独修改字符串中字符的值。3 函数
3.1 函数概述
① 什么是函数
1. 函数是具有特定功能的代码块。
2. 函数本质上JS中的一种数据类型，属于对象类型，使用 typeof 判断返回 function。② 函数的作用
1. 提高代码的重用性，相同的代码不需要重复书写。
2. 函数把代码封装起来，使用函数的人只管调用函数，无需了解函数中的代码。
3. 利用函数实现代码的模块化开发③ 函数的组成
函数名： 函数的名字，本质上就是变量名。
参数： 调用函数时，写在小括号中的数据就是参数。
函数体： 函数中的代码块。
返回值： 函数调用产生的计算结果。
3.2 声明函数的三种方式
① function 关键字方式
function 函数名(参数列表...) { 语句...;}② 表达式方式
var 函数名 = function(参数列表...) { 语句...;}③ Function 构造函数方式（了解）
var 函数名 = new Function('代码...');
var 函数名 = new Function('a', 'b', 'c', '代码...');
var 函数名 = Function('代码...');
var 函数名 = Function('a', 'b', 'c', '代码...');3.3 函数的调用和返回值
① 函数调用
1. 函数名后面有小括号才是调用函数，函数体内的语句才会执行。
2. 函数名后面没有括号，就是在使用变量的值。② 返回值
1. 在函数体内使用 return 关键字可以设置函数的返回值， return 的右边写个表达式，表达式的值就是函数的返回值。
2. 如果函数体内没有return，或者 return 的右边是空着，该函数没有返回值，调用函数自动得到 undefined。
3. return 除了设置返回值，还可以结束函数的执行，函数中一旦执行到 return，return 下面的代码就不会执行到了。
4. 函数调用表达式（函数名加小括号组成函数调用表达式）的值就是函数的返回值， 返回值与输出完全是两回事。Day06 JavaScript
1 回顾 数组
1. 数组概念
数组是值的有序集合
数组是 JS 中一种数据类型，属于对象类型
数组中的成员，称为元素
元素有个位置，用数字表示，称为索引
索引是连续的数字
2. 声明数组
① 直接量方式 []
② Array函数 Array()
③ Array构造函数 new Array()
3. 读写数组中的元素
数组[索引]
4. 稀疏数组
5. 遍历数组
6. 数组元素的添加删除
添加元素：
① 指定下一个索引： 数组[数组.length] = 新元素;
② 数组后面添加元素： 数组.push(元素1, 元素2...)
③ 数组前面添加元素： 数组.unshift(元素1, 元素2...)
④ 指定位置添加元素： 数组.splice(位置, 0, 元素1, 元素2...)
删除元素：
① 修改 length 的值： 数组.length -= n;
② 删除最后一个元素： 数组.pop()
③ 删除第一个元素： 数组.shift()
④ 删除指定位置指定数量的元素： 数组.splice(位置, 数量)
7. 多维数组
8. 字符串的数组特性
2 函数
2.1 函数概述
① 什么是函数
1. 函数是具有特定功能的代码块。
2. 函数本质上JS中的一种数据类型，属于对象类型，使用 typeof 判断返回 function② 函数的作用
1. 提高代码的重用性，相同的代码不需要重复书写。
2. 函数把代码封装起来，使用函数的人只管调用函数，无需了解函数中的代码。
3. 利用函数实现代码的模块化开发③ 函数的组成
函数名： 函数的名字，本质上就是变量名。
参数： 调用函数时，写在小括号中的数据就是参数。
函数体： 函数中的代码块。
返回值： 函数调用产生的计算结果。
2.2 声明函数的三种方式
① function 关键字方式
function 函数名(参数列表...) {
语句...;
}② 表达式方式
var 函数名 = function(参数列表...) {
语句...;
}③ Function 构造函数方式（了解）
var 函数名 = new Function('代码...');
var 函数名 = new Function('a', 'b', 'c', '代码...');
var 函数名 = Function('代码...');
var 函数名 = Function('a', 'b', 'c', '代码...');2.3 函数的调用和返回值
① 函数调用
1. 函数名后面有小括号才是调用函数，函数体内的语句才会执行。
2. 函数名后面没有括号，就是在使用变量的值。② 返回值
1. 在函数体内使用 return 关键字可以设置函数的返回值， return 的右边写个表达式，表达式的值就是函数的返回值。
2. 如果函数体内没有return，或者 return 的右边是空着，该函数没有返回值，调用函数自动得到 undefined。
3. return 除了设置返回值，还可以结束函数的执行，函数中一旦执行到 return，return 下面的代码就不会执行到了。
4. 函数调用表达式（函数名加小括号组成函数调用表达式）的值就是函数的返回值， 返回值与输出完全是两回事。2.4 函数的参数
① 形参和实参
形参： 声明函数时设置的参数称为形参，形参本质上就是没有值的变量。
实参： 调用函数是所设置的参数称为实参，实参用于给形参赋值，实参可以是变量、直接量、表达式。
② 形参和实参的数量问题
1. 实参的数量应与形参保持一致，按照顺序给形参赋值。2. 如果实参数量大于形参，多余的实参就没有用了。3. 如果实参数量小于形参，后面的形参就没有对应的实参，自动得到 undefined③ 形参的默认值（可选参数）
ES5 设置方式：
function func(name, age) {
if (age === undefined) {
age = '默认值';
}
语句...;
}ES6 设置方式：
function func(name, age = '默认值') {
语句...;
}注意事项：
1. 实参会按照顺序给形参赋值，与形参有没有默认值无关。
2. 要求有默认值的形参必须放在没有默认值形参的后面。
3. 有默认值的形参可以称为可选参数。④ arguments
1. 在函数中获取调用函数时设置的实参，除了用形参外，还可以使用 arguments
2. arguments 只能在函数中使用，相当于函数内系统定义好的变量， 获取所有实参组成的集合
3. arguments 是个伪数组（类数组）， 可以通过 length 属性获取实参数量， 可以使用索引读取里面的成员。
4. 使用 arguments 可以实参可变参数数量的函数。// 定义函数，计算所有参数的和
function sum() {
// 定义变量 记录和
var res = 0;
// 遍历所有的实参
for (var i = 0; i < arguments.length; i ++) {
res += arguments[i];
}
// 返回结果 return res;
}2.5 作用域
① 变量的作用域
for循环没有作用域
1. 变量的作用域指的是变量的作用范围
2. 根据变量的作用范围可以把变量分为全局变量和局部变量
3. 在函数以外定义的变量就是全局变量，作用域是全局。
4. 在函数内定义的变量是局部变量，作用域是本函数。<span style="background-color:#f8f8f8"><span style="color:#333333">注意事项：
1. 只有函数才能影响变量的作用域， 分支、循环不会影响变量作用域。
2. 函数中的形参是局部变量，作用域就是所在函数。</span></span>② 作用域链
1. 函数体可以再声明函数，函数会嵌套函数，形成了上层作用域、下层作用域，称为作用域链
2. 可以使用本作用域或上层作用域中定义的变量，但是不能使用下层作用域定义的变量
3. 作用域链描述变量的查找过程： 当使用某个变量的时候，先从本作用域中查找是否定位过该变量，有就使用没有就去上层作用域查找， 如果上层作用域还没有继续向上层查找，哪里找到哪里停止， 一直找到全局，如果全局也没有，报错！
4. 作用域只与函数声明的位置有关，与函数在哪里调用无关！③全局作用域
<span style="background-color:#f8f8f8"><span style="color:#333333">1.直接编写在script标签中，都在全局作用域
2.全局作用域在页面打开时创建，在页面关闭时销毁
3.在全局作用域中有一个全局对象window，它由浏览器创建我们可以使用
4.创建的变量都会作为window对象的属性保存
5.创建的函数都会作为window对象的方法保存</span></span>作用域只与函数声明的位置有关，与函数在哪里调用无关！
④函数作用域
调用函数时创建的函数作用域，函数执行完毕以后，函数作用域销毁
每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的
在函数作用域中可以访问到全局作用域的变量
* 在全局作用域中无法访问到函数作用域的变量
* - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
* 如果没有则向上一级作用域中寻找，直到找到全局作用域，
* 如果全局作用域中依然没有找到，则会报错ReferenceError
* - 在函数中要访问全局变量可以使用window对象
在函数作用域也有声明提前的特性，
* 使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
* 函数声明也会在函数中所有的代码执行之前执行
*/
在函数中，不使用var声明的变量都会成为全局变量 d没有使用var关键字，则会设置为全局变量
定义形参就相当于在函数作用域中声明了变量2.6 变量提升
① 变量提升
1. 在正式执行代码之前，会进行预解析， 预解析会查找代码中的变量声明语句（var关键字），提前创建变量。
2. 变量会被提升到所在所用域的最前面，仅仅创建了变量并没有值； 当正式执行到变量声明语句，会给提升的变量进行赋值。② 函数提升
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 使用 function 关键字形式声明的函数，在预解析阶段提升，连名字带值一起提升，提升非常彻底。
2. 表达式方式和Function构造函数方式声明的变量，与普通变量的提升规则是一致的。</span></span>预解析：
找到 var 声明语句，对变量进行提升，只提升变量的声明不提升值。
找到 function 声明语句，对函数进行提升，连声明带值整体提升。
正式执行： 正式执行到变量声明语句，会对已经提升的变量进行重新赋值。
正式执行到 function 关键字声明语句，直接跳过。
变量的声明提前
使用var 关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值）
但是如果声明变量时不适用var关键字，则变量不会被声明提前
函数的声明提前
使用函数声明形式创建的函数function（）函数（）{}
它会在所有代码执行之前就被创建，所以我们可以在函数声明前来调用函数
使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
全局作用域中的变量都是全局变量，在页面任意的部分都可以访问到
//函数声明，会被提前创建
function fun() {
console.log('我就是一个fun函数')
}
//函数表达式，不会被提前创建
var fun2 = function() {
console.log('我就是一个fun2函数')
}2.7 匿名函数
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 匿名函数就是没有名字的函数，就是函数的直接量2. 匿名函数主要用作自调用函数或者回调函数</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">// 定义 number 类型的数据1023;// 定义 array 类型的数据[10,20,30,40];// 定义匿名函数 定义function 数据; 函数直接量(function() { console.log('我是一个匿名的函数');});</span></span>2.8 自调用函数 （IIFE 立即执行的函数）
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 自调用函数也叫立即执行函数，函数声明完立即调用执行。2. 自调用函数主要目的就是产生作用域，避免全局变量污染。</span></span><span style="background-color:#f8f8f8"><span style="color:#333333"> // 匿名的自调用函数(function() { console.log('hello，我是一个快乐的小函数');})();// 有名字的函数用作自调用函数(function fn() { console.log('hello，我是 fn 一个有名字的函数！');})();</span></span>总结&回顾
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 总结
函数的参数： 数量、参数默认值、arguments 作用域和作用域链 变量提升和函数提升 匿名函数 自调用函数
2. 作业
① 面试题案例
② 封装对数组进行排序的函数
要求：第一参数是数组， 第二个参数布尔值 false升序，true降序 默认值 false 返回排好序的数组 ③ 循环强化练习第8题 第9题 </span></span>Day07 JavaScript
1 回顾
1. 函数相关概念
函数名
参数
函数体
返回值
2. 函数声明 3 种方式
3. 函数的调用和返回值
4. 函数的参数
4.1 形参和实参
4.2 形参和实参的数量
4.3 形参的默认值（可选参数）
4.4 arguments
5. 变量的作用域
5.1 作用域： 全局变量、局部变量
5.2 作用链： 变量的查找过程； 作用域只与函数声明位置有关！
6. 变量提升
6.1 变量提升
6.2 函数提升
7. 匿名函数
8. 自调用函数（立即执行的函数）2 函数
2.1 回调函数
① 什么是回调函数
满足以下三个条件的函数，称为回调函数
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 我定义的函数
2. 我没有直接调用函数
3. 函数最终被执行了</span></span>② 回调函数的使用场景
<span style="background-color:#f8f8f8"><span style="color:#333333">1. DOM事件的回调函数
2. 定时器回调函数
3. Ajax 回调函数
4. 框架的钩子函数
5. 某些函数或方法需要一个回调函数作为参数</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">回调函数的形式大部分都是给其他方法或函数当参数！</span></span>2.2 递归函数
① 什么是递归函数
一个函数内部如果调用自己，我们称为函数的递归调用，这种函数就是递归函数。
② 递归函数成功的条件
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 必须有一个明确的结束条件
2. 必须有一个趋向于结束的趋势</span></span>③ 递归函数的缺点
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 递归函数容易造成内存泄漏
2. 递归函数的执行效率不高。</span></span>④ 递归函数应用场景
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 后端操作中的文件夹删除、文件夹复制等
2. 前端使用递归处理后端数据</span></span>3 Object 对象
3.1 什么是 Object
<span style="background-color:#f8f8f8"><span style="color:#333333">1. Object 对象是值的无序集合
2. Object 对象由属性组成
3. 属性由属性名和属性值组成，属性名是字符串，属性值是任意类型的数据
4. 如果某属性的值是 function 类型的属性，该属性可以称为方法。</span></span>2.2 如何声明 Object 对象
① 第一种 直接量方式
<span style="background-color:#f8f8f8"><span style="color:#333333">// 创建空的Object对象var obj = {};// 创建Object对象并设置属性var obj1 = { name: '小乐', age: 19, address: '上海', 'user-info': '小乐特别骚！', say: function() { console.log('hello world'); }};</span></span>注意：
属性名应该以字符串的形式给出，属性名没有任何规范； 但是，如果属性名满足了标识符规范（变量名规范），可以省略引号。
② 使用 Object 函数
<span style="background-color:#f8f8f8"><span style="color:#333333">Object();</span></span>③ 使用 Object 构造函数
<span style="background-color:#f8f8f8"><span style="color:#333333">new Object();</span></span>2.3 Object 对象属性的读写
① 语法
<span style="background-color:#f8f8f8"><span style="color:#333333">// 使用.语法读写对象的属性obj.name;obj.age = 10;obj.age + 100;// 使用 [] 语法读写对象的属性obj['name'];obj['age'] = 10;obj['age'] + 100;</span></span>注意：
如果读取Object对象中不存在的属性，自动得到 undefined。
如果给Object对象中不存在的属性赋值，添加一个新属性。
② 什么情况下必须使用 [] 语法读写属性
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 属性名不符合标识符规范。2. 使用变量表示属性名。</span></span>2.4 遍历对象的属性
<span style="background-color:#f8f8f8"><span style="color:#333333">for (var i in obj) { i; // 得到属性名 obj[i]; // 得到属性值}</span></span>2.5 删除对象中的属性
<span style="background-color:#f8f8f8"><span style="color:#333333">delete obj.name;delete obj['say'];</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">1. delete 运算符可以删除对象中的属性。2. delete 运算符是一元运算符，具有副作用。</span></span>2.6 判断对象中是否存在某个属性
<span style="background-color:#f8f8f8"><span style="color:#333333">'属性名' in 对象;</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">1. in 运算符可以用于判断对象中是否存在某个属性。2. in 运算符是二元运算符，无副作用，组成的表达式的值是布尔值。</span></span>Day08 JavaScript
1 回顾
<span style="background-color:#f8f8f8"><span style="color:#333333">1. Object 对象的概念
值的无序集合
由属性成员
属性包括属性名和属性值
属性名是字符串的形式、属性值可以是任意类型的数据
如果属性值是function类型的数据，该属性称为方法
2. 声明 Object 类型的对象
① 直接量方式 {}
② Object() 函数方式
③ Object() 构造函数方式
3. 读写 Object 对象的属性
.
[]
4. 遍历 Object 对象中的属性
for in
6. 删除 Object 对象中的属性
delete 运算符
7. 判断 Object 对象中是否存在某个属性
'属性名' in 对象;</span></span>2 构造函数
2.1 什么是构造函数？
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 构造函数相当于其他编程语言中的类。
2. 构造函数用于创造对象。
3. 构造函数等价于数据类型，数据类型一致的对象，构造函数是一个。</span></span>2.2 构造函数和对象的关系
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 构造函数是对象的抽象（描述），对象是构造函数的实例。
2. 一个构造函数可以对应多个对象，一个对象只能对应一个构造函数。</span></span>2.3 判断对象的构造函数
① 运算符 instanceof
<span style="background-color:#f8f8f8"><span style="color:#333333">对象 instanceof 构造函数;</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">1. 用于判断对象是否是指定构造函数的实例
2. 表达式的值的布尔值</span></span>② constructor 属性
<span style="background-color:#f8f8f8"><span style="color:#333333">对象.constructor;</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">每个对象都自带 constructor 属性，通过该属性可以读取该对象对应的构造函数</span></span>2.4 自定义构造函数
// 自定义构造函数
function User(name, age, address) {
// 设置实例的属性
this.name = name;
this.age = age;
this.address = address;
// 设置实例的方法
this.getInfo = function() {
console.log('我叫' + this.name + '，今年' + this.age + '岁, 住在' + this.address);
};
}1. 在构造函数中，可以使用 this 为该构造函数将来的实例设置属性方法。
2. 构造函数建议名字首字母大小（非强制）。
3. 构造函数中如果没有返回值或者返回原始类型数据，对实例化结果没有影响； 如果构造函数返回了对象类型数据，实例化结果就是返回的结果。2.5 实例化
1. 根据构造函数创造对象的过程称为实例化
2. 使用 new 关键字可以对构造函数进行实例化<span style="background-color:#f8f8f8"><span style="color:#333333">new User();new User;</span></span>3 this
3.1 this 的含义
<span style="background-color:#f8f8f8"><span style="color:#333333">1、this 是系统定义好的变量，值是系统设置好的。2、一般在构造函数或者函数（方法）中使用。</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">取值规则：1. this指向与方法声明的地方无关！2. 看调用方法的代码，如果前面有 `对象.`，方法中的 this 指向该对象。3. 看调用方法的代码，如果前面没有 `对象.`，方法中的 this 指向 window。 </span></span>3.2 this 的指向
在构造函数中使用 this： this 指向构造函数构造出来的实例（对象）。
在方法（函数）中使用： this 指向调用该方法的对象。
3.3 window 介绍
<span style="background-color:#f8f8f8"><span style="color:#333333">1. window 是浏览器端JS中的全局对象。2. 所有的全局变量本质上是window的属性，所有的全局函数本质上是window的方法3. 使用window的属性和方法的时候，通常可以省略 window</span></span>4 原型
4.1 原型的概念
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 每个对象有一个原型， 原型也是一个对象。2. 对象可以继承它的原型上的属性和方法。</span></span>4.2 如何获取对象的原型
① 隐式原型方式
<span style="background-color:#f8f8f8"><span style="color:#333333">对象.__proto__;</span></span>② 显示原型方式
<span style="background-color:#f8f8f8"><span style="color:#333333">构造函数.prototype</span></span>注意：
构造函数通过 prototype 属性获取的原型并不是自己的原型，是构造函数实例的原型。
4.3 对象、构造函数、原型之间的关系
① 对象和构造函数
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 对象是构造函数的实例，构造函数是对象的抽象（描述）。
2. 一个构造函数可以对应多个对象，一个对象只能对应一个构造函数。</span></span>② 对象和原型
1. 对象可以继承原型上的属性和方法。
2. 一个对象只能有一个原型，多个对象可以指向同一个原型。③ 构造函数和原型
1. 通过构造函数获取它的实例的原型
2. 具有相同构造函数的对象，它们的原型是同一个。4.4 自定义构造函数时原型的应用
// 定义构造函数
function User(name, age, address) {
// 给实例设置属性
this.name = name;
this.age = age;
this.address = address;}
// 把方法设置到实例的原型上
User.prototype.buy = function() {
console.log(this.name + '买了！');
};
// 把方法设置到实例的原型是
User.prototype.addShopcart = function() {
console.log('我叫'+this.name+',今年'+this.age+'岁，我添加了购物车！');
};4.5 判断属性是否属于对象本身
<span style="background-color:#f8f8f8"><span style="color:#333333">对象.hasOwnProperty('属性名');</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">该方法返回布尔值，判断属性是否属于对象本身，如果是原型上的属性或者不存在的属性都返回 false。</span></span>4.6 创建对象的同时指定原型
<span style="background-color:#f8f8f8"><span style="color:#333333">Object.create(对象)；Object.create(null); // 返回一个没有原型的对象</span></span>4.7 注意
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 所有内置的数据类型（Array、Number、String、Boolean、Function）它们实例的原型的构造函数都是 Object2. 对象本身的 construct 属性并不是指向自己的构造函数，指向以它为原型的对象的构造函数。</span></span>作业
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 掌握概念： 构造函数 this 原型2. 案例、面试题案例</span></span>Day09 JavaScript
1 回顾
1. 构造函数
1.1 概念： 用于创造对象
1.2 构造函数与对象关系：
① 对象是构造函数的实例，构造函数对象的抽象（描述）
② 一个构造函数对应多个对象，一个对象只有一个构造函数
1.3 自定义构造函数
2. this
2.1 概念： 在函数中使用，系统定义好的变量
2.2 this的指向（取值）：
在构造函数中： this指向构造函数的实例
在函数中： 谁调用指向谁
3. 原型
3.1 什么是原型
每个对象都有原型，对象可以继承原型上的属性和方法。
3.2 获取原型
对象.__proto___
构造函数.prototype
3.3 原型的意义
对象的属性在本身，方法设置到原型上。
3.4 判断属性属于对象本身
对象.hasOwnProperty()
3.5 创建对象的同时设置原型
Object.create()2 原型链
2.1 原型链的概念
1. 对象都有原型，原型仍然是对象，原型也有原型，构成了原型链
2. 原型链最终会到一个顶层原型对象 （顶层原型对象是一个没有原型的对象）2.2 属性查找过程
当读取对象中某个属性的值的时候，先从对象本身查找有无该属性，有该属性就返回该属性，如果没有该属性去原型上查找有无该属性，如果还没有继续沿着原型链向上查找，一直到顶层原型对象，如果还找不到还属性，返回 undefined。2.3 构造函数和原型链
1. 默认情况下，所以对象原型链中的顶层原型对象都是 Object.prototype
2. Array.prototype、Function.prototype、自定义的构造函数.prototype 它们的构造函数都是 Object
3. Function 的构造函数是自己， Function.__proto__ === Function.prototype
4. Function.prototype 的构造函数是 Object， Object 的原型是 Function.prototype3 值类型和引用类型
3.1 值类型和引用类型的概念
值类型： 就是原始类型。变量（或属性）中存的是值。
引用类型： 就对象类型。变量（或属性）中存在的地址。
值类型和引用类型主要描述变量的赋值过程， 实参赋值给形参与变量赋值是一样的3.2 值类型和引用类型的存储方式
值类型： 变量与数据（值类型）都存在栈结构中。
引用类型： 变量存在栈结构，数据（引用类型）存在堆结构，栈结构存放数据在堆里的地址，建立引用关系。
3.3 不可变类型和可变类型
不可变类型： 原始类型、值类型。数据是一个整体，无法修改其中一部分。
可变类型： 对象类型、引用类型。数据是一个集合，可以修改其中的一部分。
4 原始类型的对象特性
1. number、string、boolean 类型的数据除了值的状态还有对象状态，
2. 当把一个原始类型数据(number、string、boolean)当做对象去用的时候，会临时创建一个对象，用完立即销毁。var num = 101;
num.age = 11;
/*
1. var obj = new Number();
2. obj.age = 11;
3. 销毁对象 obj
*/
console.log(num.age)
/*
1. var obj = new Number();
2. 输出 obj.age
3. 销毁对象 obj
*/5 内置对象（内置构造函数）
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
5.1 Boolean
// 1. 直接量 值的形式
var b1 = true;
// 2. Boolean 函数 值的形式
var b2 = Boolean(false);
// 3. Boolean 构造函数 对象形式
var b3 = new Boolean(true);5.2 Number
实例的属性和方法：
<span style="background-color:#f8f8f8"><span style="color:#333333">toFixed() 保留指定位数的小数，参数指定保留的小数位置，默认是 0. 四舍五入。toString() 转为指定进制的数字，参数指定进制，范围 2 ~ 36</span></span>构造函数本身的属性和方法：
<span style="background-color:#f8f8f8"><span style="color:#333333">Number.MIN_VALUE JS中能表示的最小的数字Number.MAX_VALUE JS中能表示的最大的数字</span></span>5.3 String
实例的属性和方法：
<span style="background-color:#f8f8f8"><span style="color:#333333">length 属性，获取字符串长度（字符的个数）charAt(index) 根据指定的索引返回对应的字符indexOf(val) 返回 val 在字符串中第一次出现的位置lastIndexOf(val) 返回 val 在字符串中最后一次出现的位置slice(开始位置,结束位置) 从开始位置截取到结束位置（不包括结束位置的字符），第二个参数不指定截取到最后substring() 同 slice()substr(位置,长度) 从指定位置截取指定的长度，第二个参数不指定截取到最后split(分隔符) 把字符串分割为数组toUpperCase() 转为大写toLowerCase() 转为小写charCodeAt(index) 返回指定索引对应字符unicode编码</span></span>构造函数本身的属性和方法：
<span style="background-color:#f8f8f8"><span style="color:#333333">String.fromCharCode(编码数字) 返回编码对应的文字</span></span>Day10 JavaScript
1 回顾
1. 原型链
1.1 概念
1.2 属性查找过程
1.3 原型链与构造函数
① 顶层原型对象： Object.prototype
② Array.prototype、Function.prototype、自定义构造函数.prototype 的构造函数都是 Object
③ Function.prototype 的构造函数是 Object，Object 本身的原型是 Function.prototype
④ Function 的构造函数是自己； Function.prototype === Function.__proto__
2. 引用类型和值类型
2.1 引用类型和值类型
内存存储方式不同
描述的是数据赋值给变量或属性
2.2 可变类型和不可变类型
var arr = [100,200,300]
arr[0] = 1000;
arr = ['a','b','c']
3, 原始类型的对象特性2 内置对象（内置构造函数）
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects
2.1 Boolean
<span style="background-color:#f8f8f8"><span style="color:#333333">// 1. 直接量 值的形式
var b1 = true;
// 2. Boolean 函数 值的形式
var b2 = Boolean(false);
// 3. Boolean 构造函数 对象形式
var b3 = new Boolean(true);</span></span>2.2 Number
实例的属性和方法：
<span style="background-color:#f8f8f8"><span style="color:#333333">toFixed() 保留指定位数的小数，参数指定保留的小数位置，默认是 0. 四舍五入。
toString() 转为指定进制的数字，参数指定进制，范围 2 ~ 36</span></span>构造函数本身的属性和方法：
Number.MIN_VALUE JS中能表示的最小的数字
Number.MAX_VALUE JS中能表示的最大的数字2.3 String
实例的属性和方法：
length 属性，获取字符串长度（字符的个数）
charAt(index) 根据指定的索引返回对应的字符
indexOf(val) 返回 val 在字符串中第一次出现的位置
lastIndexOf(val) 返回 val 在字符串中最后一次出现的位置
slice(开始位置,结束位置) 从开始位置截取到结束位置（不包括结束位置的字符），第二个参数不指定截取到最后
substring() 同 slice()
substr(位置,长度) 从指定位置截取指定的长度，第二个参数不指定截取到最后
split(分隔符) 把字符串分割为数组
toUpperCase() 转为大写
toLowerCase() 转为小写
charCodeAt(index) 返回指定索引对应字符unicode编码构造函数本身的属性和方法：
String.fromCharCode(编码数字) 返回编码对应的文字2.4 Math
Math 并不是一个构造函数，而是系统定义好的对象，是 Object 的实例。
Math.PI 圆周率
Math.abs() 计算绝对值
Math.sqrt() 计算平方根
Math.pow() 计算次方
Math.max() 取参数中最大的
Math.min() 取参数中最小的
Math.floor() 舍一取整（向下取整）
Math.ceil() 进一取整（向上取整）
Math.round() 四舍五入取整
Math.random() 取随机数，范围 0 ~ 1 之间的小数随机取 0 ~ n 之间的整数：
<span style="background-color:#f8f8f8"><span style="color:#333333">Math.floor(Math.random() * (n + 1));</span></span>随机取 m ~ n 之间的整数：
<span style="background-color:#f8f8f8"><span style="color:#333333">Math.floor(Math.random() * (n - m + 1)) + m;</span></span>2.5 Date
Date 是系统内置的构造函数，使用的时候需要进行实例化。
① 实例化日期时间对象
<span style="background-color:#f8f8f8"><span style="color:#333333">var date = new Date(); // 默认此时此刻的日期时间var date1 = new Date('December 17, 1995 03:24:00');var date2 = new Date('2049-10-01T10:45:23');var date3 = new Date(1978, 0, 5, 10, 9, 23);</span></span>月的取值范围： 0 ~ 11
② 实例的属性和方法
<span style="background-color:#f8f8f8"><span style="color:#333333">getFullYear() 年getMonth() 月，取值范围 0 ~ 11getDate() 日getDay() 星期几getHours() 时getMinutes() 分getSeconds() 秒getMilliseconds() 毫秒getUTC... 获取标准时区的年月日时分秒getTime() 获取1970年1月1日0时0分0秒与对象中时间相差的毫秒数（时间戳）set... 设置年月日时分秒setUTC... 设置标准时区的年月日时分秒setTime() 根据时间戳设置日期时间</span></span>② 构造函数本身的属性和方法
<span style="background-color:#f8f8f8"><span style="color:#333333">Date.now() 获取当前日期时间的时间戳Date.UTC() 获取指定日期时间的时间戳</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">Date.UTC(2020, 10, 1, 23, 4, 10))</span></span>2.6 Array
① 实例的访问器方法
访问器方式：对象调用方法，得到返回值，但是对象本身不会被改变； 绝大部分对象的绝大部分方法都是访问器方式。
<span style="background-color:#f8f8f8"><span style="color:#333333">concat() 合并多个数组slice() 截取数组中的元素组成新数组，指定开始索引和结束索引，如果不设置第二个参数截取到最后join() 把数组元素合并为一个字符串，分隔符默认逗号，可以指定。</span></span>② 实例的修改器方法
修改器方式：对象调用方法，调用结束后对象本身会被修改，只有数组才有修改器方式。
<span style="background-color:#f8f8f8"><span style="color:#333333">push() 在数组后面添加一个或多个元素，返回新增之后的长度pop() 删除最后一个元素，返回被删除的元素shift() 删除第一个元素，返回被删除的元素unshift() 在数组前面面添加一个或多个元素，返回新增之后的长度splice() 删除、添加、替换元素，返回被删除元素组成的数组（没有元素被删返回空数组）sort() 数组排序，返回排好序的数组reverse() 翻转数组，返回翻转好的数组</span></span>③ ES5增加的实例的访问器方法
<span style="background-color:#f8f8f8"><span style="color:#333333">forEach() 遍历数组filter() 从数组中取出满足条件的元素组成新数组， 回调函数返回true，对应的元素加入新数组。map() 返回长度与原数组一致的新数组，新数组中的元素取决于回调函数每次被调用的返回值。some() 只有一个回调函数返回 true，方法就返回 trueevery() 必须所有的回调韩都返回true，方法才返回 truereduce() 最后一次回调函数返回值就是方法的返回值，回调函数接收 上一次回调返回值、当前元素、当前索引reduceRight() 规则同 reduce() 相同，从最后一个元素向前遍历。indexOf() 返回元素在数组中第一次出现的位置lastIndexOf() 返回元素在数组中最后一次出现的位置</span></span>2.7 Function
实例的方法：
<span style="background-color:#f8f8f8"><span style="color:#333333">call() 调用函数并设置里面的this， call 第二个参数以及以后的参数都会传递给函数apply() 调用函数并设置里面的this， apply 第二个参数必须是数组，数组的元素作为函数的参数bind() 返回一个设置好this和参数的新函数， bind 的语法与 call 一致。</span></span>Day11 BOM&DOM
1 回顾
1. Boolean
2. Number
toFixed()
toString()
Number.MAX_VALUE
Number.MIN_VALUE
3. String
length
charAt()
indexOf()
lastIndexOf()
slice()
substring()
substr()
split()
toUpperCase()
toLowerCase()
charCodeAt()
String.fromCharCode()
4. Math
Math.abs()
Math.sqrt()
Math.pow()
Math.ceil()
Math.floor()
Math.round()
Math.max()
Math.min()
Math.random()
5. Date
getFullyear()
getMonth()
getDate()
getDay()
getHours()
getMinutes()
getSeconds()
getMilliseconds()
getUTC...
getTime()
set...
setUTC...
setTime()
Date.now()
Date.UTC()
6. Array
访问器：
concat()
join()
slice()
修改器：
push()
pop()
unshift()
shift()
splice()
sort()
reverse()
ES5(访问器：)
forEach()
filter()
map()
every()
some()
reduce()
reduceRight()
indexOf()
lastIndexOf()
7. Function
call()
apply()
bind()2 BOM
BOM 全称 Browser Object Model，译为浏览器对象模型。
BOM 是浏览器为 JavaScript 提供的能够对浏览器进行相关操作的 API。
2.1 window
① 弹框
// 警告框 没有返回值
alert('警告！不准过来');
// 输入框 返回用户输入的类型，字符串类型的数据
prompt('请输入您的名字：');
// 确认框 返回布尔值
confirm('你确认吗?');② 打开新窗口
// 打开新的空白窗口
window.open()
// 打开新的窗口并设置地址
window.open('http://110.com');
// 在指定窗口打开页面
window.open('http://110.com', '窗口的名字')
// 打开新窗口并设置窗口大小
window.open('http://110.com', '', 'widht=600,height=400');
// 关闭本窗口 只有open打开的窗口才可以使用 close 关闭
window.close()
// 打印
window.print();③ 页面滚动
// 滚动到指定坐标
window.scrollTo(x, y);
// 滚动到指定坐标并设置效果
window.scrollTo({
left: 水平坐标,
top: 垂直坐标,
behavior: 'smooth'
});
// 设置滚动的距离
window.scrollBy(水平滚动距离, 垂直滚动距离);
// 设置滚动距离并设置效果
window.scrollTo({
left: 水平滚动距离,
top: 垂直滚动距离,
behavior: 'smooth'
})④ 定时器
多次定时：
// 创建一个定时器, 第一个参数是回调函数，第二个参数是间隔时间（单位是毫秒）
// setInterval 返回该定时器的唯一标识； 唯一标识是个数字
setInterval(function() {
}, 3000);
// 创建一个定时，有名字的函数作为回调函数
setInterval(run, 2000);
function run() {
}
// 给定时器的回调函数传递参数 '小乐' 会赋值给name，90会赋值给 age
setInterval(function(name,age) {
}, 5000, '小乐', 90);
// 清除多次定时
clearInterval(多次定时器唯一标识);单次定时器：
// 开启单次定时器
// setTimeout 的参数与 setInterval 是一样的
// setTimeout 同样返回定时器的标记
setTimeout(function() {
}, 3000);
// 清除单次定时器
clearTimeout(单次定时器唯一标识)⑤ window 对象属性和方法总结
window.name 窗口的名字
window.length 子窗口的长度，只读
window.innerWidth 视口宽度，只读
window.innerHeight 视口高度，只读
window.document 文档对象
window.history
window.location
window.screen
window.navigator
window.alert() 警告框
window.confirm() 确认框
window.prompt() 输入框
window.open() 打开新窗口
window.close() 关闭本窗口 （只有open打开的才能使用close关闭）
window.print() 打印
window.scrollTo() 滚动到指定位置
window.scrollBy() 滚动指定的距离
window.setInterval() 开启多次定时器
window.clearInterval() 删除指定的多次定时器
window.setTimeout() 开启单次定时器
window.clearTimeout() 删除指定的单次定时器2.2 history
该对象描述所在窗口的历史记录信息，有如下属性和方法：
<span style="background-color:#f8f8f8"><span style="color:#333333">history.length 获取本窗口历史记录的个数
history.back() 返回上一步（历时记录中的上一个记录）
history.forward() 下一步（历时记录中的下一个记录）
history.go(n) 上n步或下n步，n是数字，整数是下n步，负数上n步</span></span>2.3 location
该对象描述当前窗口当前页面的URL地址信息，有如下属性和方法：
<span style="background-color:#f8f8f8"><span style="color:#333333">location.href 完整的URLlocation.protocol URL中的协议部分location.hostname URL中的主机名location.port URL中的端口号location.host 主机名+端口号location.pathname URL中的路径部分location.hash URL中的锚点部分location.search URL中的搜索信息location.reload() 重新加载本页面location.assign() 跳转到新的页面， 产生新的历史记录location.replace() 跳转到新的页面， 历史记录发生替换，不增加</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">location 的属性都是可读可写，修改 locaion 的属性可以导致页面发生跳转</span></span>2.4 navigator
该对象用于描述浏览器的版本信息以及所在操作系统的信息。
<span style="background-color:#f8f8f8"><span style="color:#333333">userAgent</span></span>2.5 screen
该对象用于描述屏幕信息
<span style="background-color:#f8f8f8"><span style="color:#333333">width 屏幕的宽度height 屏幕的高度</span></span>3 DOM 介绍
MDN 文档对象模型手册：https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。
2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。
Day12 JavaScript DOM
1 回顾
① window
<span style="background-color:#f8f8f8"><span style="color:#333333">history
loaction
navigator
screen
document
name
length
innerWidth
innerHeight
alert()
confirm()
prompt()
open()
close()
print()
scrollTo()
scrollBy()
setInterval()
clearInterval()
setTimeout()
clearTimeout()</span></span>② history
<span style="background-color:#f8f8f8"><span style="color:#333333">length
back()
forward()
go()</span></span>③ location
<span style="background-color:#f8f8f8"><span style="color:#333333">href
protocol
hostname
port
host
pathname
hash
search
reload()
assign()
replace()</span></span>④ navigator
<span style="background-color:#f8f8f8"><span style="color:#333333">userAgent</span></span>④ screen
<span style="background-color:#f8f8f8"><span style="color:#333333">width
height</span></span>2 Node 节点
2.1 五大节点类型
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 元素节点 element
2. 属性节点 attribute
3. 文本节点 text
4. 注释节点 comment
5. 文档节点 document</span></span>2.2 节点的属性
<span style="background-color:#f8f8f8"><span style="color:#333333">nodeName 节点名称，元素节点的nodeName是该元素的标签名
nodeValue 节点值
nodeType 节点类型， 元素节点:1，属性节点：2，文本节点：3，注释节点：8，文档节点：9</span></span>3 获取元素
① 通过 ID 名
<span style="background-color:#f8f8f8"><span style="color:#333333">document.getElementById('ID名');</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">1. 该方法返回第一个满足条件的元素对象。2. 如果没有满足条件的元素，返回 null。</span></span>② 通过标签名
<span style="background-color:#f8f8f8"><span style="color:#333333">// 从文档中获取满足条件的元素document.getElementsByTagName('标签名');// 从某个元素的后代中获取满足条件的元素元素对象.getElementsByTagName('标签名');</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">1. 该方法返回HTMLCollection对象，是由满足条件的元素组成的集合，是个伪数组对象。2. 如果没有满足条件的元素，返回空的 HTMLCollection 对象。</span></span>③ 通过类名（了解，IE8 + 支持）
<span style="background-color:#f8f8f8"><span style="color:#333333">// 从文档中获取满足条件的元素document.getElementsByClassName('类名');// 从某个元素的后代中获取满足条件的元素元素对象.getElementsByClassName('类名');</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">1. 该方法返回HTMLCollection对象，是由满足条件的元素组成的集合，是个伪数组对象。2. 如果没有满足条件的元素，返回空的 HTMLCollection 对象。</span></span>④ 通过 name 属性值 （了解）
<span style="background-color:#f8f8f8"><span style="color:#333333">// 从文档中获取满足条件的元素 元素对象没有该方法，只有document有document.getElementsByName('name值');</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">1. 该方法返回 NodeList 对象，是由满足条件的元素组成的集合，是个伪数组对象。2. 如果没有满足条件的元素，返回空的 NodeList 对象。</span></span>⑤ 使用选择器获取元素 (推荐)
<span style="background-color:#f8f8f8"><span style="color:#333333">// 从文档中获取第一个满足条件的元素document.querySelector('选择器');// 从文档中获取所有满足条件的元素 组成的集合document.querySelectorAll('选择器');// 从某元素后代中获取第一个满足条件的元素元素对象.querySelector('选择器');// 从某元素后代中获取所有满足条件的元素 组成的集合元素对象.querySelectorAll('选择器');</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">1. querySelector() 该方法返回第一个满足条件的元素； 如果没有满足条件的元素，返回 null2. querySelectorAll() 该方法返回所有满足条件的元素组成的集合，是 NodeList 对象； 如果没有满足条件的元素，返回空的集合。</span></span>⑥ 获取所有的元素
<span style="background-color:#f8f8f8"><span style="color:#333333">document.all </span></span><span style="background-color:#f8f8f8"><span style="color:#333333">属性的值是 HTMLCOllection 对象，包括文档中所有的元素。</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">// 特殊用途：利用 document.all 可以判断浏览器是否是 IEif (document.all) { document.write('我是 IE 浏览器！');} else { document.write('我是非 IE 浏览器！');}</span></span>4 文档结构（根据元素关系获取元素）
4.1 节点树
<span style="background-color:#f8f8f8"><span style="color:#333333">firstChild 获取第一个子节点lastChild 获取最后一个子节点childNodes 获取所有子节点组成的集合，是 NodeList 类型的对象parentNode 获取父节点previousSibling 获取上一个兄弟节点nextSibling 获取下一个兄弟节点</span></span>4.2 元素树
<span style="background-color:#f8f8f8"><span style="color:#333333">firstElementChild 获取第一个子元素lastElementChild 获取最后一个子元素children 获取所有子元素组成的集合，是 HTMLCollection 类型的对象parentElement 获取父元素previousElementSibling 获取上一个兄弟元素nextElementSibling 获取下一个兄弟元素</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">注意：对于大部分元素来说，它的父节点和父元素是同一个，除了 HTML元素。HTML 元素的父节点是 document，HTML元素没有父元素。</span></span>5 元素的属性操作
5.1 读写内置属性
<span style="background-color:#f8f8f8"><span style="color:#333333">// 读取内置属性的值元素对象.属性名;元素对象['属性名'];// 设置内置属性的值元素对象.属性名 = 新值;元素对象['属性名'] = 新值；</span></span>5.2 读写自定义属性
<span style="background-color:#f8f8f8"><span style="color:#333333">// 读取属性的值元素对象.getAttribute('属性名');// 设置属性的值元素对象.setAttribute('属性名', '值');</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">注意：1. getAttribute() 和 setAttribute（） 只要写在html标签上的属性都可以读取，不分内置属性还是自定义属性。2. 如果要读写的是内置属性优先使用点语法，如果读写自定义属性的时候再使用 getAttribute() setAttribute（）</span></span>5.3 data-* 形式的自定义属性
W3C 建议所有的自定义属性以 data- 开头，可以使用快捷操作读写自定义属性。
<span style="background-color:#f8f8f8"><span style="color:#333333"> <img width="300" data-loadpic="100.jpg" data-user-address="上海"></span></span><span style="background-color:#f8f8f8"><span style="color:#333333">// 读取自定义属性的值avatorBox.dataset.loadpic;avatorBox.dataset.userAddress; // 自动把 - 转为小驼峰命名法// 设置自定义属性的值avatorBox.dataset.loadpic = 'hello world';avatorBox.dataset.userJob = '手动阀'; // 在html标签，会把小驼峰自动显示为 - 形式</span></span>Day13 DOM
1 回顾
① 五种类型的节点
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 元素节点 nodeType:1 nodeName:标签名
2. 属性节点 nodeType:2
3. 文本节点 nodeType:3
4. 注释节点 nodeType:8
5. 文档节点 nodeTYpe:9</span></span>② 获取元素的六种方式
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 根据元素的 ID
document.getElementById()
2. 根据元素的标签名
document.getElemnetsByTagName()
元素对象.getElementsByTagName
3. 根据元素的类名
document.getElementsByClassName()
元素对象.getElementsByClassName()
4. 根据元素的name属性值
document.getElementsByName()
5. 使用 CSS 选择器
document.querySelector()
document.querySelectorAll()
元素对象.querySelector()
元素对象.querySelectorAll()
6. 获取所有的元素
document.all</span></span>③ 根据元素之间的关系获取元素
<span style="background-color:#f8f8f8"><span style="color:#333333">节点树：
firstChild
lastChild
childNodes
parentNode
previousSibling
nextSibling
元素树：
firstElementChild
lastElemdentChild
children
parentElement
previousElementSibling
nextElementSibling</span></span>④ 元素的属性操作
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 读写内置属性
元素对象.属性名
2. 读写自定义属性
getAttribute()
setAttribute()
3. 读写 data- 开头的自定义属性
元素对象.dataset.属性名</span></span>2 元素的样式操作
2.1 读写行内样式
<span style="background-color:#f8f8f8"><span style="color:#333333">// 设置行内样式
元素对象.style.fontSize = '20px';
元素对象.style['font-size'] = '40px';
元素对象.style.color = 'red';
// 读取行内演示
元素对象.style.fontSize;
元素对象.style['font-size'];
元素对象.style.color;</span></span>注意：
使用该方式设置样式会设置到行内，读取样式只能读取行内样式！
2.2 读取计算样式
<span style="background-color:#f8f8f8"><span style="color:#333333">getComputedStyle(元素对象).属性名;
getComputedStyle(元素对象).['属性名'];</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">/*
* 读取元素的计算样式，兼容
* @param Element 要读取样式的元素
* @praam string 样式的CSS属性名
* @return string 样式的属性值
*/
function getStyle(ele, attrName) {
// 判断是否支持 getComputedStyle
if (window.getComputedStyle) {
// chrome firefox IE9+
return getComputedStyle(ele)[attrName];
} else if (ele.currentStyle) {
// IE8 IE8-
return ele.currentStyle[attrName];
}
}</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">1. 不论使用什么方式设置的样式，最终作用在元素上的就是计算样式
2. 即使样式没有设置，也可以读取到默认值。
3. 该方式只能读取样式，要设置样式还需 style 用法。</span></span>2.3 通过设置元素的类名操作样式
① className
<span style="background-color:#f8f8f8"><span style="color:#333333">JS 中元素对象的 className 属性对应 HTML 标签中 class 属性</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">元素对象.className; // 可读可写</span></span>② classList
<span style="background-color:#f8f8f8"><span style="color:#333333">元素对象.classList.add(); 添加一个类名元素对象.classList.remove(); 删除一个类名元素对象.classList.toggle(); 切换类名，没有添加，有删除。</span></span>3 读写元素的文本内容（可读可写）
<span style="background-color:#f8f8f8"><span style="color:#333333">元素对象.innerHTML 读写元素内部的HTML代码元素对象.outerHTML 读写包括本元素在内的HTML代码元素对象.textContent 读写元素内容的文本内容（去除HTML标签）元素对象.innerText 读写元素内容的文本内容（去除HTML标签）</span></span>注意：只有双标签元素才有可能存在文本内容！
4 读取元素的尺寸（只读）
<span style="background-color:#f8f8f8"><span style="color:#333333">offsetWidth、offsetHeight 元素整个盒子的宽高clientWidth、clientHeight 内边距加内容的宽高scrollWidth、scrollHeight client加溢出部分，如果不溢出同 clientgetBoundingClientRect() 返回对象，对象中有 width、height 属性，同 offset</span></span>获取视口的宽高：
<span style="background-color:#f8f8f8"><span style="color:#333333">// 1. 方式一 window.innerWidth;window.innerHeight;// 2. 方式二 与方式一相比，不会把滚动条本身的宽度也算进去document.documentElement.clientWidthdocument.documentElement.clientHeight</span></span>5 读取元素的位置 （只读）
<span style="background-color:#f8f8f8"><span style="color:#333333">offsetLeft、offsetTop 元素在第一个定位的祖先元素上的位置 如果没有定位的祖先元素，返回在页面中的位置clientLeft、clientTop 左边框宽度、上边框宽度。getBoundingClientRect() 返回对象，对象由如下属性： left、top 元素左上角在视口中的坐标 right、bottom 元素右下角在视口中的坐标 x、y 同 left、top</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">rectDom.right - rectDom.left === rectDom.widthrectDom.bottom - rectDom.top === rectDom.height</span></span>6 读写元素中内容的位置（可读可写）
<span style="background-color:#f8f8f8"><span style="color:#333333">scrollLeft 读取或设置元素中内容的水平位置scrollTop 读取或设置元素中内容的垂直位置</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">生效前提： 元素的 CSS 样式 overflow 属性不能设置 visible</span></span>读取页面在视口中的滚动距离：
<span style="background-color:#f8f8f8"><span style="color:#333333">// 非IE 支持 document.documentElement.scrollTop// IE 支持 document.body.scrollTopdocument.documentElement.scrollTop || document.body.scrollTop;</span></span>作业
<span style="background-color:#f8f8f8"><span style="color:#333333">1. 实现无缝滚动效果</span></span>Day14 DOM 课堂笔记
1 回顾
1.1 元素的属性
① 读写元素的内置属性
<span style="background-color:#f8f8f8"><span style="color:#333333">元素对象.属性名;
元素对象['属性名'];</span></span>② 读写元素自定义属性
<span style="background-color:#f8f8f8"><span style="color:#333333">元素对象.getAttribute();
元素对象.setAttribute();</span></span>③ 读写元素data-开头的自定义属性
<span style="background-color:#f8f8f8"><span style="color:#333333">元素对象.dataset.属性名;
元素对象.dataset['属性名'];</span></span>1.2 元素的样式
① 读写行内样式
<span style="background-color:#f8f8f8"><span style="color:#333333">元素对象.style.属性名;</span></span>② 读取计算样式
<span style="background-color:#f8f8f8"><span style="color:#333333">getComputedStyle(元素对象).属性名;</span></span>③ 元素类名操作
<span style="background-color:#f8f8f8"><span style="color:#333333">className
classList add()/remove()/toggle()</span></span>1.3 元素的内容（可读可写）
<span style="background-color:#f8f8f8"><span style="color:#333333">innerHTML
outerHTML
interText
textContent</span></span>1.4 元素的尺寸（只读）
<span style="background-color:#f8f8f8"><span style="color:#333333">offsetWidth、offsetHeight
clientWidth、clientHeight
scrollWidth、scrollHeight
getBoundingClientRect().width
.height</span></span>1.5 元素的位置（只读）
<span style="background-color:#f8f8f8"><span style="color:#333333">offsetLeft、offsetTopgetBoundingClientRect().left .top</span></span>1.6 元素中内容的位置（可读可写）
<span style="background-color:#f8f8f8"><span style="color:#333333">scrollLeftscrollTop</span></span>2 节点（元素）的创建添加删除替换克隆
2.1 创建元素节点
<span style="background-color:#f8f8f8"><span style="color:#333333">document.createElement('标签名');</span></span>2.2 添加子节点
① 在最后面添加子节点
<span style="background-color:#f8f8f8"><span style="color:#333333">父元素对象.appendChild(新节点);</span></span>② 指定位置添加子节点
<span style="background-color:#f8f8f8"><span style="color:#333333">父元素对象.insertBefore(新节点， 旧节点); // 新节点会在旧节点的前面</span></span>2.3 删除子节点
<span style="background-color:#f8f8f8"><span style="color:#333333">父元素对象.removeChild(要被删除的节点);</span></span>2.4 替换子节点
<span style="background-color:#f8f8f8"><span style="color:#333333">父元素对象.replaceChild(新元素, 旧元素);</span></span>2.5 节点克隆
<span style="background-color:#f8f8f8"><span style="color:#333333">元素.cloneNode(true)参数含义：true 表示深度克隆false或不写参数，表示浅克隆</span></span>3 HTML DOM
3.1 表单相关元素
① form 元素
<span style="background-color:#f8f8f8"><span style="color:#333333">submit()
让表单提交reset()
让表单重置</span></span>② 文本输入框和文本域（input 和 textarea）
<span style="background-color:#f8f8f8"><span style="color:#333333">blur() 让该元素失去焦点
focus() 让该元素获取焦点
select() 选中输入的文本内容</span></span>③ select 元素
<span style="background-color:#f8f8f8"><span style="color:#333333">value 可以获取被选中的选项的
valuelength 可以获取选项的个数
selectedIndex 可以获取被选中的选项的索引add() 追加一个选项remove() 删除一个选项，执行选项的索引</span></span><span style="background-color:#f8f8f8"><span style="color:#333333">// 创建 option 元素的快捷方式new Option('内容', 'value值');</span></span>3.2 表格相关元素
① table 元素
<span style="background-color:#f8f8f8"><span style="color:#333333">rows 获取表格中所有行元素的集合
insertRow(index) 插入一个新的tr，可以指定插入位置
deleteRow(index) 删除指定索引的行</span></span>② tableRow 元素（tr 元素）
<span style="background-color:#f8f8f8"><span style="color:#333333">cells 获取本行内所有单元格元素的集合
rowIndex 获取本行的索引
insertCell(index) 插入一个新的单元格，可以指定插入位置
deleteCell(index) 删除指定索引的单元格</span></span>③ tableCell 元素 （td 或 th）
<span style="background-color:#f8f8f8"><span style="color:#333333">cellIndex 获取本单元格在行中的索引</span></span>3.3 快速创建 img 元素
<span style="background-color:#f8f8f8"><span style="color:#333333">// 200 和 300 是 width和height属性值
var img = new Image(200, 300);
img.src = '';</span></span>4 document 对象
document.documentElement 获取html元素，只读
document.body 获取body元素，只读
document.head 获取head元素，只读
document.all 获取所有的元素组成的集合，只读
document.URL 获取页面的URL地址，只读
document.domain 获取页面URL中的主机名，只读
document.referrer 获取历史记录中的上一个地址，只读
document.lastModified 获取页面最后一次修改时间，只读
document.title 读写页面标题，可读可写
document.write() 将内容输出到页面
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
documnet.getElementsByName()
document.querySelector()
document.querySelectorAll()
document.createElement()5 documentFragment 对象
5.1 创建 documentFragment 对象
document.createDocumentFragment();5.2 documentFragment 对象的特点
1. documentFragment 对象是一种节点， nodeType 是 11。 该对象可以有子节点。
2. 不会出现在文档结构中，页面中没有它5.3 documentFragment 对象的应用
1. 用于批量添加新元素，减少渲染次数2. 可以实现元素顺序反转6 事件
6.1 事件监听
① 给元素监听事件的三种方式
第一种方式： 事件作为HTML标签的属性：
<button onclick="代码"></button>第二种方式： 事件作为元素对象的方法：
元素对象.onclick = function() { 代码... };监听多次相同的事件，后面覆盖前面的！第三种方式：使用 addEventListenrer 方法：
元素对象.addEventListener('click', function() { 代码... });相同的事件可以对应多个回调函数！// IE8 以及以下版本 IE浏览器 不支持 addEventListener、removeEventListenerattachEvent('on事件名'， 回调函数);
// 添加事件监听detachEvent('on事件名', 回调函数名);
// 解除事件监听② 解除事件的监听
第一种和第二种方式监听的事件：
元素对象.on事件名 = null;第三种方式监听的事件：
元素对象.removeEventListener('事件名', 回调函数名);addEventListener 方式添加的事件，如果需要解除监听，回调函数必须是有名字的函数！
Day15 DOM
1 回顾
1.1 节点（元素）的创建添加删除克隆
1. 创建一个新的元素
document.createElement('标签名');
2. 添加子节点
appendChild()
insertBefore()
3. 删除子节点
removeChild()
4. 替换子节点
replaceChild()
5. 克隆节点
cloneNode()1.2 HTML DOM
1. 表单
1.1 form元素： submit() reset()
1.2 输入框元素： blur() focus() select()
1.3 select元素： length options selectedIndex value add() remove()
2. 表格
1.1 table元素： rows insertRow() deleteRow()
1.2 tr元素： cells rowIndex insertCell() deleteCell()
1.3 单元格元素： cellIndex
3. 快捷创建元素
new Option()
new Image()1.3 document
属性：
all、documentElement、body、head
URL、referrer、domain、lastModified
title
方法：
getElementById()、getElementsByTagName()、getElementsByClassName()、getElementsByName()
querySelector() querySelecotrAll()
createElement()
createDocumentFragment()
write()1.4 documentFragment
1. 节点 nodeType:1
2. 特点： ① 节点，可以有子节点 ② 不会出现在页面中结构中，
3. 作用： ① 批量添加子元素 ② 实现元素翻转1.5 事件监听
1. 添加事件监听
① 把事件作为标签的属性
② 把事件作为元素对象的方法
③ 使用 addEventListener()
2. 解除事件监听
① 前两种方式： 覆盖
② 第三种方式： removeEventListener()2 事件流
事件触发的过程被分为 3 个阶段：
捕获阶段： 从 window、document、html、body 一直向下，找到目标元素。
目标阶段： 找到目标元素，意味着捕获阶段的结束，冒泡阶段的开始。
冒泡阶段： 从目标元素一直层层向上冒泡，是捕获的逆向操作。事件默认会在默认阶段触发。
注意：
把事件触发过程只分为捕获阶段和冒泡阶段两个阶段也是可以的！
addEventListener() 方法的第三个参数，可以设置事件在捕获阶段还是冒泡阶段触发； true 表示捕获阶段触发，false 表示冒泡阶段触发。默认值是 false。
3 事件回调函数中 this 的指向
事件监听到了哪个元素上并触发，this 就指向谁！
4 常用事件总结
4.1 鼠标事件
click 单击
dblclick 双击
contextmenu 右击
mousedown 鼠标按键按下
mouseup 鼠标按键抬起
mousemove 鼠标移动
mouseover 鼠标进入元素，淘汰
mouseout 鼠标离开元素，淘汰
mouseenter 鼠标进入元素，代替 mouseover
mouseleave 鼠标离开元素，代替 mouseout4.2 键盘事件
keydown 键盘按键按下
keyup 键盘按键抬起
keypress 键盘按键按下，只有可输入按键（字母、标点）才能触发，控制按键不可以哪些元素可以监听键盘事件？
1. document
2. 输入框或文本域4.3 文档事件
load
文档加载完毕DOMContendLoaded
文档加载完毕beforeunload
文档关闭之前1. load 事件与 DOMContentLoaded 事件的区别？
① DOMCOntentLoaded 只要文档中的元素加载完毕就可以触发事件，load 需等到页面中所有一切加载完毕，元素以及引入的外部文件
② DOMCOntentLoaded 只能使用 addEventListener 监听事件4.4 表单事件
submit 表单提交事件，需要监听给 form 元素
reset 表单重置事件，需要监听给 form 元素
blur 失去焦点事件，需要监听给表单控件元素
focus 获得焦点事件，需要监听给表单控件元素
select 当输入框或文本域中的内容被选中，需要监听给输入框或文本域元素
change 对于输入框元素：既要改变输入内容又要失去焦点
对于下拉选项、复选单向框： 一修改选项就触发Day16 DOM
1 回顾
1. 事件触发流程
捕获阶段
目标阶段
冒泡阶段
2. 事件回调函数中的 this
3. 常用事件
3.1 鼠标事件：
click
dblclick
contextmenu
mousedown
mouseup
mousemove
mouseenter
mouseleave
3.2 键盘事件
keydown
keyup
keypress
3.3 文档事件
load
DOMCnntentLoaded
beforeunload
3.4 表单事件
submit
reset
blur
focus
select
change2 常用事件总结
2.1 图片事件
load 图片加载完毕
error 图片加载失败2.2 其他事件
scroll 内容滚动，监听给window或者内容可以滚动的元素
resize 视口尺寸边框，需要监听给window3 Event 对象
3.1 获取 Event 对象
1. 如果是第一种方式监听事件， 事件名作为标签的属性，代码直接写在属性值中，属性值可以直接使用 event
2. 如果是第二种和第三种方式监听事件，回调函数的第一个参数就是 Event 对象3.2 鼠标事件对象 MouseEvent 的属性和方法
button 获取所按的鼠标按键，0:左键、1：中间件、2：右键
offsetX、offsetY 获取鼠标在目标元素上的位置
clientX、clientY 获取鼠标在视口上的位置
pageX、pageY 获取鼠标在页面中的位置
screenX、screenY 获取鼠标在屏幕上的位置3.3 键盘事件对象 KeyBorardEvent 的属性和方法
keyCOde 返回按键对应的unicode编码
which 同 keyCode
key 返回按键的值3.4 所有类型的事件对象都有的属性和方法
type 返回事件名
timeStamp 触发事件的那一刻距离打开页面时刻的毫秒数
target 获取目标元素
stopPropagation() 阻止冒泡
preventDefault() 阻止浏览器默认行为3.5 阻止事件冒泡
event.stopPropagation();3.6 浏览器的默认行为
① 浏览器有哪些默认行为
1. 右键系统菜单
2. 表单能被提交和重置
3. 超链接点击跳转
4. 文字双击被选中② 阻止浏览器默认行为
event.preventDefault()1. 如果使用第二种事件监听方式 return false 也可以阻止浏览器默认行为
2. 浏览器的默认行为发生在冒泡结束之后4 事件委托
实现原理：
事件委托给上层的祖先元素， 事件触发之后，判断目标元素是否是满足条件的// 把li的click事件委托到 ul 上
contentBox.onclick = function(event) {
// 判断目标元素是否是 li
if (event.target.nodeName.toLowerCase() === 'li') {
event.target.classList.toggle('active');
}};事件委托的作用：
1. 让新增加的元素也具有事件
2. 如果需要给大量的元素监听相同的事件，利用事件委托可以提高运行效率。5 DOM 对象深入分析
5.1 元素对象的原型链关系
div元素 --> HTMLDivElement.prototype --> HTMLElement.prototype --> Element.prototype --> Node.prototype --> EventTarget.prototype --> Object.prototype5.2 事件对象的原型链关系
鼠标事件对象 --> MouseEvent.prototype --> UIEvent.prototype --> Event.prototype --> Object.prototype5.3 HTMLCollection 和 NodeList 的区别
① HTMLCollection 对象
1. getElementsByTagName()、getElementsByClassName()、children、document.all 能够返回 HTMLCollection 对象
2. 没有 forEach 方法
3. HTMLCollection 是一个动态的集合，集合成员会实时更新② NodeList
1. getElementsByName()、querySelectorAll()、childNodes 能够返回 NodeList 对象
2. 有 forEach 方法
3. NodeList 是一个静态的集合，集合成员无法自动更新。Day17 JavaScript
1 JavaScript 中的垃圾回收机制（GC）
1.1 垃圾回收相关概念
① 什么是垃圾
没有被引用的对象，就是垃圾对象。
② 什么是垃圾回收
清除垃圾对象，释放内存，就是垃圾回收。
** 需要手动回收垃圾的编程语言：** C、C++ 等
** 自动回收垃圾的编程语法：** JavaScript、Java、Python 等
③ 变量的生命周期（何时会被回收）
** 全局变量的生命周期：** 整个脚本中的代码执行结束，全局变量被销毁。
** 局部变量的生命周期：** 函数调用结束，局部变量就被销毁。
④ 垃圾没有及时回收的后果
1. 常驻内存，占用内存空间
2. 垃圾对象越来越大，超出内存范围，造成内存泄漏⑤ 垃圾回收的常见算法
- 引用计数
- 标记清除1.2 引用计数
① 原理
- ① 对象有一个引用标记
- ② 如果增加了对对象的引用（变量或属性的值指向该对象），引用计数 +1
- ② 如果失去对对象的引用（变量或属性指向其他值或者被销毁），引用计数 -1
- ④ 如果对象的引用计数变为 0，就成为垃圾对象，会被清除。② 优缺点：
- 优点： 垃圾对象清除比较及时。
- 缺点： 互相引用的对象，无法被清除，最终容易造成内存泄漏。1.3 标记清除
① 原理
浏览器会时刻不停地进行标记清除循环，每次循环范围两个阶段：
- 标记阶段
从根对象（全局对象 window）开始，进行树状遍历，能够被指向的对象，称为可到达对象。
- 清除阶段
线性遍历内存中所有的对象，如果不是可到达对象，就被认为是垃圾对象，被回收。② 优缺点
- 优点： 不会内存泄漏
- 缺点： 深度递归变量，垃圾清除不如引用计数更及时2 执行上下文和执行栈
2.1 执行上下文
① 全局执行上下文
1. 在执行全局代码之前，确定全局执行上下文对象是 window
2. 对全局数据进行预处理
全局代码中，var 声明的变量，添加为全局执行上下文对象的属性，没有赋值。
全局代码中，function 声明的函数，添加为为全局执行上下文对象的方法，有值的属性。
给 this 赋值为 window
3. 开始执行全局代码② 函数内的执行上下文
1. 当调用函数的时候，创建一个本次调用的执行上下文对象。
2. 对函数中的局部数据进行预处理
给形参赋值，添加为执行上下文对象的属性
给 arguments 赋值，添加为执行上下文对象的属性
局部代码中，var 声明的变量，添加为执行上下文对象的属性，没有赋值
局部代码中，function 声明的函数，添加为执行上下文对象的方法，有值的属性
给 this 赋值为调用该函数的对象
3. 开始执行函数内的代码 2.2 执行栈
栈是一种数据存储结构，特点是：先进后出，后进先出。
栈的内部，创建数据称为进栈或者压栈，销毁栈中的数据称为出栈。
执行栈也可以叫调用栈，是JS代码运行过程中，用于存储产生的执行上下文对象的一种数据结构。
JS 代码开始执行之后，进行如下过程：
1. 创建执行栈
2. 当全局执行上下文对象确定为 window 之后，进栈
3. 当调用函数的时候，本次调用产生的执行上下文对象进栈
4. 函数调用结束，该函数的执行上下文对象出栈
5. 当所有代码执行完毕，全局执行上下文对象出栈2.3 作用域和执行上下文的关系
区别：
作用域是静态的，只与函数在哪里定义有关，无在哪里调用无关执行上下文是动态的，函数每调用一次就创建一个执行上下文对象联系：
执行上下文也具有作用域全局执行上下文对象的作用域是全局函数调用产生的执行上下文对象的作用域是所在函数。3. 闭包
3.1 什么是闭包？
1）简单讲，闭包就是指有权访问另一个函数作用域中的数据。
2）MDN 上面这么说：闭包是一种特殊的对象。它由两部分构成：函数，以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。3.2 如何产生闭包
1. 函数A中定义函数B
2. 函数B中使用函数A声明的数据（使用上层作用域的数据）
3. 实现从函数A以外能a够使用函数B：
① 方式一： 把函数B作为返回值返回
② 方式二： 将函数B赋值给全局变量
③ 方式三： 将函数B作为事件或定时器的回调函数function A() {
var a = 100;
var b = 200;
function B() {
console.log(a + b);
}
// 把函数B作为返回值 return B;
// 把函数B赋值给全局变量
// fn = B;
// 把函数B作为事件的回调函数
// document.onclick = B;}
// 调用函数 Avar res = A();3.3 闭包和作用域
1. 可以使用上层作用域的数据
2. 变量的作用域至于函数声明的位置有关3.4 闭包和垃圾回收
1. 正常情况下，函数调用结束，里面的局部变量指向的数据，会作为垃圾对象被回收。
2. 如果产生了闭包，函数内的数据被外部引用了，不会被垃圾回收。
闭包延长了局部变量的生命周期。3.5 闭包的缺点
闭包让函数内的数据长时间存在与内存中，增加了内存泄漏的风险！3.6 闭包的应用
Day18 JavaScript
1 回顾
1.1 垃圾回收
- 引用计数 -
- 标记清除 - 1.2 执行上下文和执行栈
① 执行上下文
全局执行上下文：
① 确定全局执行上下文是 window
② 预处理
变量提升
函数提升
this 赋值
④ 正式执行全局代码
函数的执行上下文：
1. 调用函数的时候创建执行上下文对象
2. 预处理
形参赋值
arguments 赋值
局部变量提升
局部函数提升
this 赋值
3. 正式执行函数语句② 执行栈
1. 存放执行上下文对象
2. 特点： 先进后出 后进先出1.3 闭包
1. 如何产生闭包
① 函数A 嵌套 函数 B
② 函数B 使用 函数A 中定义的数据
③ 函数B对外引用（返回、赋值给全局变量，作为事件或者定时器的回调函数）
2. 闭包与作用域
① 可以使用上层作用域的数据
② 作用域至于函数声明的位置有关
3. 闭包与垃圾回收
延长了局部变量的生命周期
4. 闭包缺点
增加了内存泄漏的风险2 对象高级
2.1 原型链总结
// 定义构造函数
function Foo() {
}
// 实例化 Foo
var f1 = new Foo();
var f2 = new Foo();
// 实例化 Object
var o1 = new Object();
var o2 = new Object();f1、f2 ---> Foo.prototype ---> Object.prototype
o1、o2 ---> Object.prototype
Foo ---> Function.prototype ---> Object.prototype
Object ---> Function.prototype ---> Object.prototype
Function ---> Function.prototype ---> Object.prototype1. __proto__ 与 prototype 的关系
f1.__proto__ === Foo.prototype
Foo.__proto__ === Function.prototype
Foo.prototype.__proto__ === Object.prototype
Function.__proto__ === Function.prototype
2. constructor
Foo.prototype.constructor === Foo;
Function.prototype.constructor === Function
Object.prototype.constructor === Object2.2 面向对象继承
① 面向对象语言的继承规则
// 作为父类
class User {
private username;
private age;
say() {}
}
// 定义子类
class VipUser extends User {
private address;
}② JS 中继承关系的特点
1. JS 中依靠原型链进行继承，对象可以使用原型链上的属性和方法-
2. instanceof 实例与自己的构造函数以及原型链上对象的构造函数，都成立-
3. 实例.__proto__ 等于 它构造函数.prototype-
4. 如果一个对象本身具有 constructor 属性，指向以该对象为原型的对象的构造函数。-
5. JS 是单继承，一个对象只能有一个原型， 而可以作为多个对象的原型。③ 实现JS中构造函数和构造函数之间继承
// 定义构造函数
User类 父类
function User(username, age) {
if (age < 0 || age > 200) {
age = 10; }
if (typeof(username) === 'string' && username.indexOf('小乐') >= 0)
{ username += '(此人危险)';
}
// 给实例添加属性
this.username = username; this.age = age;}
// 再实例的原型上设置方法
User.prototype.addShopcart = function() {
console.log(this.username + '把商品加入购物车了！');
};
User.prototype.buy = function(product) {
console.log(this.username + '买了' + product);
};
// 定义子类
function VipUser(username, age, address) {
// 调用父类构造函数 调用
User.call(this, username, age);
this.address = address;
this.getInfo = function() {
console.log('我叫' + this.username + '，今年' + this.age + '岁, 住在' + this.address );
}}
// 让VipUser的实例的原型指向User的实例
VipUser.prototype = new User();
// 设置VipUser的实例的原型上 constructor 属性
VipUser.prototype.constructor = VipUser;1. 让子类的实例的原型指向父类的实例 （最重要）
2. 子类的实例的原型设置 construct 属性，指向子类
3. 子类中，调用父类（函数），设置 this 为 子类的实例2.3 安全的类型检测
Object.prototype.toString.call(对象)；3 单线程和事件轮询机制
3.1 进程和线程
进程： 程序使用内存的最小单位，一个进程独占一块独立的内存空间
线程： 线程是CPU的最小调度单位
进程和线程：
1. 进程中至少有一个线程，主线程
2. 一个进程中可以同时运行多个线程，多线程运行
3. 同一个进程中的多个线程之间可以直接共享数据，共用一块内存。
4. 不同进程之间，无法直接共享数据。3.2 JS 单线程运行
1. JS 是单线程运行的，一次只能进行一个计算任务
2. JS 为什么设计为单线程
多线程会有线程调度以及线程开启关闭的开销
JavaScript主要在浏览器端操作DOM完成特效，如果不是单线程，不好解决页面渲染的同步问题。// 定时器时间及时到了，也必须等到for循环结束之后才执行回调函数
console.log(1000);setTimeout(function() {
console.log(2000);
}, 0);
for (var i = 0; i < 1000000000; i ++) {
var res = 100 + 2343 * 3423423 - 90 * 623424;
}3.3 同步代码和异步代码
1. 同步代码
同步代码，也叫同步任务，按照顺序依次执行，上一个任务执行结束下一个任务开始执行
2. 异步代码
异步代码，也叫异步任务，满足一条的条件且线程空闲（同步任务执行完毕）才能执行的任务。
3. 哪些是任务任务？
① 定时器的回调函数
② DOM 事件的回调函数
③ Ajax 的回调函数
④ Promise 的回调函数
4. 注意事项
① 异步任务通常都是回调函数的形式，回调函数不一定都是异步任务。
② 开启定时器、监听事件等操作是同步任务3.4 事件轮询机制
1. 利用 Worker，JS 中可以实现多线程的运算
2. 多线程运算适合进行耗时的运算，在子线程进行耗时运算不影响主线程
3. Worker创建的子线程中无法使用BOM、DOM4 JS 实现多线程（了解）
1. 利用 Worker，JS 中可以实现多线程的运算
2. 多线程运算适合进行耗时的运算，在子线程进行耗时运算不影响主线程3. Worker创建的子线程中无法使用BOM、DOMWorker 构造函数
Worker.prototype.postMessage() 用于向子线程发送数据
Wroker.prototype.onmessage 事件，监听子线程发回的数据
2123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
