JavaScript 基础

引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式

内部方式

通过 script 标签包裹 JavaScript 代码

外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

注释和结束符

通过注释可以屏蔽代码被执行或者添加备注信息，JavaScript 支持两种形式注释语法：

单行注释

使用 //  注释单行代码

多行注释

使用 /* */ 注释多行代码

输入和输出

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出：

alert()、document.wirte()

以数字为例，向 alert() 或 document.write()输入任意数字，他都会以弹窗形式展示（输出）给用户。

输入

向 prompt() 输入任意内容会以

变量

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）

弹窗形式出现在浏览器中，一般提

声明

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

示用户输入一些内容。

let 和 var 都是 JavaScript 中的声明变量的关键字，推荐使用 let 声明变量！！！

• const 声明的值不能更改，而且const声明变量的时候需要里面进行初始化
• 但是对于引用数据类型，const声明的变量，里面存的不是 值，不是值，不是值，是 地址。

赋值

声明（定义）变量相当于创造了一个空的“容器”，通过赋值向这个容器中添加数据。

关键字

大部分情况使用 let 和 var 区别不大，但是 let 相较 var 更严谨，因此推荐使用 let，后期会更进一步介绍二者间的区别。

变量名命名规则

遵守驼峰命名

常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

数据类型

通过 typeof 关键字检测数据类型

数值类型

字符串类型

布尔类型

undefined

null

类型转换

隐式转换

显式转换

运算符

算术运算符

运算符	作用
+	求和
-	求差
*	求积
/	求商
%	取模（取余数），开发中经常用于作为某个数字是否被整除

赋值运算符

运算符	作用
+=	加法赋值
-+	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

自增/自减运算符

符号	作用	说明
++	自增	变量自身的值加1，例如: x++
--	自减	变量自身的值减1，例如: x--

比较运算符

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
===	左右两边是否类型和值都相等（重点）
==	左右两边值是否相等
!=	左右值不相等
!==	左右两边是否不全等

逻辑运算符

使用场景：可以把多个布尔值放到一起运算，最终返回一个布尔值

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边有一个假的结果为假	一假则假
||	逻辑或	或者	符号两边有一个真的结果为真	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真

运算符优先级

语句

表达式和语句

分支语句

if 分支语句

语法：

if(条件表达式) {
  // 满足条件要执行的语句
}

小括号内的条件结果是布尔值，为 true 时，进入大括号里执行代码；为false，则不执行大括号里面代码

小括号内的结果若不是布尔类型时，会发生类型转换为布尔值，类似Boolean()

if双分支语句

如果有两个条件的时候，可以使用 if else 双分支语句

if (条件表达式){
  // 满足条件要执行的语句
} else {
  // 不满足条件要执行的语句
}

if 多分支语句

使用场景： 适合于有多个条件的时候

三元运算符（三元表达式）

使用场景： 一些简单的双分支，可以使用 三元运算符（三元表达式），写起来比 if else双分支 更简单

符号：? 与 : 配合使用

语法：

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

switch语句

使用场景： 适合于有多个条件的时候，也属于分支语句，大部分情况下和 if多分支语句 功能相同

if 多分支语句和 switch的区别：

1. 共同点

   • 都能实现多分支选择， 多选1
   • 大部分情况下可以互换

2. 区别：

   • switch…case语句通常处理case为比较确定值的情况，而if…else…语句更加灵活，通常用于范围判断(大于，等于某个范围)。
   • switch 语句进行判断后直接执行到程序的语句，效率更高，而if…else语句有几种判断条件，就得判断多少次
   • switch 一定要注意 必须是 === 全等，一定注意 数据类型，同时注意break否则会有穿透效果
   • 结论：
     • 当分支比较少时，if…else语句执行效率高。
     • 当分支比较多时，switch语句执行效率高，而且结构更清晰。

循环语句

while循环

while : 在…. 期间， 所以 while循环 就是在满足条件期间，重复执行某些代码。

语法：

while (条件表达式) {
   // 循环体    
}

循环三要素：

1.初始值 （经常用变量）

2.终止条件

3.变量的变化量

中止循环

break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）

continue 中止本次循环，一般用于排除或者跳过某一个选项的时候

无限循环

1.while(true) 来构造“无限”循环，需要使用break退出循环。（常用）

2.for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。

for 语句

for语句的基本使用

1. 实现循环的 3 要素

2. 变化量和死循环，for 循环和 while 一样，如果不合理设置增量和终止条件，便会产生死循环。

3. 跳出和终止循环

循环嵌套

数组

数组：(Array)是一种可以按顺序保存数据的数据类型

使用场景：如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

遍历数组(重点)

目标：能够遍历输出数组里面的元素

用循环把数组中每个元素都访问到,一般会用for循环遍历

语法：

for (let  i = 0 ; i < 数组名.length; i++){

     数组名【i】

}

函数

声明和调用

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

声明（定义）

声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分

调用

声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数。

参数

通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量。

声明（定义）一个功能为打招呼的函数

• 传入数据列表
• 声明这个函数需要传入几个数据
• 多个数据用逗号隔开 

形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

返回值

函数的本质是封装（包裹），函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？要想获得函数内部逻辑的执行结果，需要通过 return 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值。

作用域

全局作用域 

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

处于全局作用域内的变量，称为全局变量

局部作用域

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

处于局部作用域内的变量称为局部变量 

匿名函数

函数可以分为具名函数和匿名函数

匿名函数：没有名字的函数,无法直接使用。

对象

语法

声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。

属性和访问

数据描述性的信息称为属性，如人的姓名、身高、年龄、性别等，一般是名词性的。

1. 属性都是成 对出现的，包括属性名和值，它们之间使用英文 : 分隔
2. 多个属性之间使用英文 , 分隔
3. 属性就是依附在对象上的变量
4. 属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

1. 对象访问属性

• 点形式 对象.属性
•  [ 形式 对象[‘属性’]

2. 两种方式有什么区别？

•  点后面的属性名一定不要加引号
•  [] 里面的属性名一定加引号
•  后期不同使用场景会用到不同的写法

方法和调用

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
2. 多个属性之间使用英文 , 分隔
3. 方法是依附在对象中的函数
4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

1. 对象访问方法

• 对象.方法()
•  person.sayHi()

2. 对象方法可以传递参数

• 跟函数使用方法基本一致

遍历对象

• 一般不用这种方式遍历数组、主要是用来遍历对象
•  for in语法中的 k 是一个变量, 在循环的过程中依次代表对象的属性名
• 由于 k 是变量, 所以必须使用 [ ] 语法解析
• 一定记住： k 是获得对象的属性名， 对象名[k] 是获得 属性值

for(let k in obj) {

 // k 属性名  字符串  带引号
 // obj[k]  属性值
}

内置对象

Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

属性

• Math.PI，获取圆周率

方法

• Math.random，生成 0 到 1 间的随机数
• Math.ceil，数字向上取整
• Math.floor，数字向下取整
• Math.round，四舍五入取整
• Math.max，在一组数中找出最大的
• Math.min，在一组数中找出最小的
• Math.pow，幂方法
• Math.pow，幂方法