JavaScript——JS基础部分

4.1 ECMAScript：ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
4.2 DOM ——文档对象模型：是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
4.3 BOM ——浏览器对象模型：它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

5.JS三种书写位置

5.1 行内式

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用

5.2 内嵌式

可以将多行JS代码写到 <script> 标签中
内嵌 JS 是学习时常用的方式

5.3 外部式

利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况

6.JS输入输出语句

alert(msg)	浏览器弹出警示框
console.log(msg)	浏览器控制台打印输出信息
prompt(info)	浏览器弹出输入框，用户可以输入

alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

二.变量

1.变量概述

什么是变量：变量就是一个装东西的盒子。变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

变量在内存中的存储：变量是程序在内存中申请的一块用来存放数据的空间。

2.变量的使用

变量的使用：1.声明 2.赋值

2.1 声明变量

var age;

var 是一个 JS关键字，用来声明变量( variable 变量的意思 )。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管
age 是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

2.2 赋值

age = 18;

= 用来把右边的值赋给左边的变量空间中此处代表赋值的意思
变量值是程序员保存到变量空间里的值

声明一个变量并赋值，我们称之为变量的初始化

2.3 变量语法扩展

2.3.1 更新变量：一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

2.3.2 同时声明多个变量：

同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。

var age = 22,  name = 'WJF', sex = 2;

2.3.3 声明变量的特殊情况：

只声明，不赋值结果是undefined

不声明，不赋值，直接使用报错

不声明，直接赋值使用允许，但不提倡

2.4 变量命名规则

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。 myFirstName
推荐翻译网站：有道爱词霸

三.数据类型

1.数据类型简介

变量：变量是用来存储值的所在处，它们有名字和数据类型。
JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
在代码运行时，变量的数据类型是由 JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。
JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型。

2.简单数据类型

2.1 数字型number

1.JavaScript 数字类型既可以用来保存整数值，也可以保存小数(浮点数）。

2.最常见的进制有二进制、八进制、十进制、十六进制。在JS中八进制前面加0，十六进制前面加 0x

3.JavaScript中数值的最大和最小值：

最大值：Number.MAX_VALUE，这个值为：1.7976931348623157e+308
最小值：Number.MIN_VALUE，这个值为：5e-32

4.数字型的三个特殊值：

Infinity ，代表无穷大，大于任何数值
-Infinity ，代表无穷小，小于任何数值
NaN ，Not a number，代表一个非数值

5.isNaN() :用来判断一个变量是否为非数字的类型，返回 true 或者 false

2.2 字符串型string

1.字符串引号嵌套：JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)

2.字符串转义符：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
\'	' 单引号
\"	”双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

3.字符串的长度：

字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。alert(str.length);

4.字符串的拼接：

多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
+ 号总结口诀：数值相加 ，字符相连
我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
变量是不能添加引号的，因为加引号的变量会变成字符串
如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间

5.布尔型Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
一个声明后没有被赋值的变量会有一个默认值undefined

undefined和字符串相加最后的结果是 undefined和字符串拼接
undefined 和数字相加最后的结果是 NaN

一个声明变量给 null 值，里面存的值为空

2.3 获取变量数据类型

1.typeof 可用来获取检测变量的数据类型

2.字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

数字字面量：8, 9, 10
字符串字面量：'黑马程序员', "大前端"
布尔字面量：true，false

2.4 数据类型转换

什么是数据类型转换：

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换：转换为字符串类型、转换为数字型、转换为布尔型

1.转换为字符串：

// 1. 把数字型转换为字符串型变量.toString()
var num = 10;
var str = num.toString();
console.log(str);
console.log(typeof str);
// 2. 我们利用 String(变量)
console.log(String(num));
// 3. 利用 + 拼接字符串的方法实现转换效果隐式转换
console.log(num + '');

toString() 和 String() 使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

2.转换为数字型

// 1. parseInt(变量) 可以把字符型的转换为数字型得到是整数
console.log(parseInt(age));
console.log(parseInt('3.14')); // 3 取整
console.log(parseInt('120px')); // 120 会去到这个px单位
console.log(parseInt('rem120px')); // NaN
// 2. parseFloat(变量) 可以把字符型的转换为数字型得到是小数浮点数
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 会去掉这个px单位
console.log(parseFloat('rem120px')); // NaN

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

2.5 转换为布尔型

代表空、否定的值会被转换为 false ，如 ''、0、NaN、null、undefined
其余值都会被转换为 true

四.运算符

1.运算符

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符

2.算术运算符（+ - * / %）

概念：算术运算使用的符号，用于执行两个变量或值的算术运算。

浮点数精度问题：浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。所以：不要直接判断两个浮点数是否相等 !

算数运算符优先级：先乘除，后加减，有小括号先算小括号里面的

表达式和返回值：

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合；简单理解：是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果，返回给我们，我们称之为返回值

3.递增和递减运算符(++ --)

3.1 概述

在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

3.2 递增运算符

3.2.1 前置递增运算符：++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。使用口诀：先自加，后返回值

3.2.2 后置递增运算符：num++ 后置递增，就是自加1，类似于 num = num + 1 ，但是 num++ 写起来更简单。使用口诀：先返回原值，后自加

注意：

后置：先原值运算，后自加（先人后己）
前置：先自加，后运算（先已后人）
开发时，大多使用后置递增/减，并且代码独占一行，例如：num++; 或者 num--;

4.比较运算符（> < =）

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

程序里面的等于符号是== ：默认转换数据类型会把字符串型的数据转换为数字型只要求值相等就可以

5.逻辑运算符（& | ！）

概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。后面开发中经常用于多个条件的判断

逻辑与&&：两边都是 true才返回 true，否则返回 false
逻辑或 | |：两边都为 false 才返回 false，否则都为true
逻辑非 ! ：逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

短路运算：当有多个表达式（值）时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值;

逻辑与：

语法：表达式1 && 表达式2
如果第一个表达式的值为真，则返回表达式2
如果第一个表达式的值为假，则返回表达式1

逻辑或：

语法：表达式1 || 表达式2
如果第一个表达式的值为真，则返回表达式1
如果第一个表达式的值为假，则返回表达式2

6.赋值运算符

概念：用来把数据赋值给变量的运算符。

var age = 10;
age += 5; // 相当于 age = age + 5;
age -= 5; // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

7.运算符优先级

一元运算符里面的逻辑非优先级很高
逻辑与比逻辑或优先级高

五.流程控制——分支

1.流程控制概述

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行。

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

2.顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

3.分支流程控制

3.1 分支结构

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。

JS 语言提供了两种分支结构语句：if语句和switch 语句。

3.2 if 语句

语法结构：

if (条件表达式) {

// 条件成立执行的代码语句

}

3.3 if else 语句

语法结构：

if (条件表达式) {

// [如果] 条件成立执行的代码

} else {

// [否则] 执行的代码

}

3.4 if else if 语句

语法结构：

if (条件表达式1) {

语句1；

} else if (条件表达式2) {

语句2；

} else if (条件表达式3) {

语句3；

....

} else {

// 上述条件都不成立执行此处代码

}

3.5 switch语句

语法结构：

switch( 表达式 ){

case value1:

// 表达式等于 value1 时要执行的代码

break;

case value2:

// 表达式等于 value2 时要执行的代码

break;

default:

// 表达式不等于任何一个 value 时要执行的代码

}

switch 语句和 if else if 语句的区别：

如果表达式1为 true ，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值
一般情况下，它们两个语句可以相互替换switch...case 语句通常处理 case为比较确定值的情况，而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
当分支比较少时，if… else语句的执行效率比 switch语句高。
当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

4.三元表达式

语法结构：表达式1 ? 表达式2 : 表达式3;

六.流程控制——循环

1.循环

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句
在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句

2.for 循环

2.1 语法结构

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}

初始化变量：通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式：用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式：每次循环的最后都要执行的表达式。通常被用于更新或者递增计数器变量。当然，递减变量也是可以的。

执行过程：

1. 初始化变量，初始化操作在整个 for 循环只会执行一次。

2. 执行条件表达式，如果为true，则执行循环体语句，否则退出循环，循环结束。

3. 执行操作表达式，此时第一轮结束。

4. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。

5. 继续执行操作表达式，第二轮结束。

6. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

2.2 双重 for 循环

循环嵌套：是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环

语法结构：

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) { 
       需执行的代码;
   }
}

内层循环可以看做外层循环的语句
内层循环执行的顺序也要遵循 for 循环的执行顺序
外层循环执行一次，内层循环要执行全部次数

3.for循环小结：

for 循环可以重复执行某些相同代码
for 循环可以重复执行些许不同的代码，因为我们有计数器
for 循环可以重复执行某些操作，比如算术运算符加法操作
随着需求增加，双重for循环可以做更多、更好看的效果
双重 for 循环，外层循环一次，内层 for 循环全部执行
for 循环是循环条件和数字直接相关的循环
分析要比写代码更重要
一些核心算法想不到，但是要学会，分析它执行过程
举一反三，自己经常总结，做一些相似的案例

4.while和do while循环

4.1 while循环

概念：while 语句可以在条件表达式为真的前提下，循环执行指定的一段代码，直到表达式不为真时结束循环。

语法结构：

while (条件表达式) {

// 循环体代码

}

注意：

使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环
while 循环和 for 循环的不同之处在于 while 循环可以做较为复杂的条件判断，比如判断用户名和密码

4.2 do while 循环

概念：do... while 语句其实是 while 语句的一个变体。该循环会先执行一次代码块，然后对条件表达式进行判断，如果条件为真，就会重复执行循环体，否则退出循环。

语法结构：

do {

// 循环体代码 - 条件表达式为 true 时重复执行循环体代码

} while(条件表达式);

注意：

先执行一次循环体代码
再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码
先再执行循环体，再判断，所以do…while 循环语句至少会执行一次循环体代码

5.循环小结

JS 中循环有 for 、while 、 do while
三个循环很多情况下都可以相互替代使用
如果是用来计次数，跟数字相关的，三者使用基本相同，但是我们更喜欢用 for
while 和 do…while 可以做更复杂的判断条件，比 for 循环灵活一些
while 和 do…while 执行顺序不一样，while 先判断后执行，do…while 先执行一次，再判断执行
while 和 do…while 执行次数不一样，do…while 至少会执行一次循环体，而 while 可能一次也不执行
实际工作中，我们更常用for 循环语句，它写法更简洁直观，所以这个要重点学习

6.continue break

6.1 continue

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子。

6.2 break

break 关键字用于立即跳出整个循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了。

七.数组

1.数组的概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。

数组是一种将一组数据存储在单个变量名下的优雅方式。

// 普通变量一次只能存储一个值

var num = 10;

// 数组一次可以存储多个值

var arr = [1,2,3,4,5];

2.创建数组

2.1 利用new创建数组

var 数组名 = new Array() ；

var arr = new Array(); // 创建一个新的空数组

2.2 利用数组字面量创建数组

//1. 使用数组字面量方式创建空的数组

var 数组名 = []；

//2. 使用数组字面量方式创建带初始值的数组

var 数组名 = ['小白','小黑','大黄','瑞奇'];

注意：

数组的字面量是方括号 [ ]
声明数组并赋值称为数组的初始化
这种字面量方式也是我们以后最多使用的方式
数组元素类型：数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

3.获取数组中的元素

数组可以通过索引来访问、设置、修改对应的数组元素，我们可以通过“数组名[索引]”的形式来获取数组中的元素。访问就是获取得到的意思

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）。

// 定义数组

var arrStus = [1,2,3];

// 获取数组中的第2个元素

alert(arrStus[1]);

4.遍历数组

遍历: 就是把数组中的每个元素从头到尾都访问一次（类似我们每天早上学生的点名）。

数组的长度：使用“数组名.length”可以访问数组元素的数量（数组长度）。

注意：

此处数组的长度是数组元素的个数，不要和数组的索引号混淆。
当我们数组里面的元素个数发生了变化，这个 length 属性跟着一起变化。

5.数组中新增元素

5.1 通过修改 length 长度新增数组元素

可以通过修改 length 长度来实现数组扩容的目的
length 属性是可读写的

5.2 通过修改数组索引新增数组元素

可以通过修改数组索引的方式追加数组元素
不能直接给数组名赋值，否则会覆盖掉以前的数据

八.函数

1.函数的概念

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。

函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

2.函数的使用

函数在使用时分为两步：声明函数和调用函数。

2.1 声明函数

// 声明函数

function 函数名() {

//函数体代码

}

function 是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum

2.2 调用函数

// 调用函数

函数名(); // 通过调用函数名来执行函数体代码

调用的时候千万不要忘记添加小括号
口诀：函数不调用，自己不执行。

2.3 函数封装

函数的封装是把一个或者多个功能通过函数的方式封装起来，对外只提供一个简单的函数接口

简单理解：封装类似于将电脑配件整合组装到机箱中 ( 类似快递打包）

3.函数的参数

3.1 形参和实参

在声明函数时，可以在函数名称后面的小括号中添加一些参数，这些参数被称为形参

在调用该函数时，同样也需要传递相应的参数，这些参数被称为实参。

参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去。

3.2 函数参数的传递过程

1. 调用的时候实参值是传递给形参的

2. 形参简单理解为：不用声明的变量

3. 实参和形参的多个参数之间用逗号（,）分隔

3.3 函数形参和实参个数不匹配问题

3.4 小结

函数可以带参数也可以不带参数
声明函数的时候，函数名括号里面的是形参，形参的默认值为 undefined
调用函数的时候，函数名括号里面的是实参
多个参数中间用逗号分隔
形参的个数可以和实参个数不匹配，但是结果不可预计，我们尽量要匹配

4.函数的返回值

return 语句：我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。

// 声明函数

function sum（）{

...

return 666；

}

// 调用函数

sum(); // 此时 sum 的值就等于666，因为 return 语句会把自身后面的值返回给调用者

return 终止函数：return 语句之后的代码不被执行。

return 的返回值：return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

break ,continue ,return 的区别：

break ：结束当前的循环体（如 for、while）
continue ：跳出本次循环，继续执行下次循环（如 for、while）
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

九.作用域

1.作用域

概述：通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

局部作用域（函数作用域）：作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

2.变量的作用域

JS中变量作用域分为：全局变量和局部变量

2.1 全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。

全局变量在代码的任何位置都可以使用
在全局作用域下 var 声明的变量是全局变量
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）

2.2 局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）

局部变量只能在该函数内部使用
在函数内部 var 声明的变量是局部变量
函数的形参实际上就是局部变量

2.3 全局变量和局部变量的区别

全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

3.作用域链

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
作用域链：根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
作用域链：采取就近原则的方式来查找变量最终的值。

十.预解析

1.预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。

JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

预解析：在当前作用域下, JS代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
代码执行： 从上到下执行JS语句。预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

2.变量预解析和函数预解析

2.1 变量预解析（变量提升）

预解析也叫做变量、函数提升。

变量提升： 变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

2.2 函数预解析（函数提升）

函数提升： 函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

十一.对象

1.对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

2.创建对象的三种方式

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

利用字面量创建对象
利用 new Object 创建对象
利用构造函数创建对象

2.1 利用字面量创建对象

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取键值对的形式表示：

键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

对象的调用：

对象里面的属性调用 : 对象.属性名，这个小点 . 就理解为“ 的 ” ；
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用；
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号。

变量、属性、函数、方法总结：

变量：单独声明赋值，单独存在；使用时直接写变量名
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征；使用时必须是对象.属性
函数：单独存在的，通过“函数名()”的方式就可以调用；
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能。

2.2 利用new Object创建对象

Object() ：第一个字母大写
new Object() ：需要 new 关键字
使用的格式：对象.属性 = 值;
利用等号赋值的方法添加对象的属性和方法
每个属性和方法之间用分号隔开

2.3 利用构造函数创建对象

前面的方法一次只能创建一个对象。

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数要时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写
构造函数要和 new 一起使用才有意义

注意：

1. 构造函数约定首字母大写。

2. 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。

3. 构造函数中不需要 return 返回结果。

4. 当我们创建对象的时候，必须用 new 来调用构造函数。

2.4 构造函数和对象

构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

3.new关键字

new 在执行时会做四件事情：

1. 在内存中创建一个新的空对象。

2. 让 this 指向这个新的对象。

3. 执行构造函数里面的代码，给这个新对象添加属性和方法。

4. 返回这个新对象（所以构造函数里面不需要return）。

4.遍历对象属性

for...in 语句用于对数组或者对象的属性进行循环操作。

其语法如下：

for (变量 in 对象名字) {

// 在此执行代码

}

小结：

1. 对象可以让代码结构更清晰

2. 对象复杂数据类型object。

3. 本质：对象就是一组无序的相关属性和方法的集合。

4. 构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。

5. 对象实例特指一个事物，比如这个苹果、正在给你们讲课的pink老师等。

6. for...in 语句用于对对象的属性进行循环操作。

十二.内置对象

1.内置对象

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
前面两种对象是JS 基础内容，属于 ECMAScript；第三个浏览器对象属于我们JS 独有的，我们JS API 讲解
内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
内置对象最大的优点就是帮助我们快速开发
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

2.查文档

2.1 MDN

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询。

Mozilla 开发者网络（MDN）提供了有关开放网络技术（Open Web）的信息，包括 HTML、CSS 和万维网及 HTML5 应用的 API。

MDN: MDN Web Docs

2.2 学习对象中的方法

查阅该方法的功能
查看里面参数的意义和类型
查看返回值的意义和类型
通过 demo 进行测试

3.Math对象

3.1 Math概述

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

Math.PI // 圆周率

Math.floor() // 向下取整

Math.ceil() // 向上取整

Math.round() // 四舍五入版就近取整注意 -3.5 结果是 -3

Math.abs() // 绝对值

Math.max()/Math.min() // 求最大和最小值

3.2 随机数方法 random()

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1

4.日期（Date）对象

4.1 Date概述

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
Date 实例用来处理日期和时间

4.2 Date()方法的使用

1. 获取当前时间必须实例化

var now = new Date();

console.log(now);

2. Date() 构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为‘2021-8-11’，可以写成new Date('2021-8-11') 或者 new Date('2021/8/11')

如果Date()不写参数，就返回当前时间
如果Date()里面写参数，就返回括号里面输入的时间

4.3 日期格式化

5.数组对象

5.1 数组对象的创建

创建数组对象的两种方式

字面量方式
new Array()

5.2 检测是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray()用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

5.3 添加删除数组元素的方法

5.4 数组排序

sort里面写一个函数修复问题：

var arr = [1, 64, 9, 6];

arr.sort(function(a, b) {

return b - a; // 降序

// return a - b; // 升序

});

console.log(arr);

5.5 数组索引方法

5.6 数组转换为字符串

6.字符串对象

6.1 基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

6.2 字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

6.3 根据字符返回位置

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串。

6.4 根据位置返回字符（重点）

6.5 字符串操作方法（重点）

6.6 replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符。

其使用格式如下：

replace(被替换的字符串，要替换为的字符串)；

6.7 split()方法

split()方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

十三.简单数据类型和复杂数据类型

1.简单类型与复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型

string ，number，boolean，undefined，null；

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型；

通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等。

2.堆和栈

堆栈空间分配区别：

　　1、栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

　　2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

复杂数据类型存放到堆里面

3.简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null；
值类型变量的数据直接存放在变量（栈空间）中。

4.复杂类型的内存分配

引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等；
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中。

5.简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

6.复杂类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。