JS基础知识 变量 数据类型 运算符 流程控制
1. JS 三大组成
- ECMAScript
- DOM
- BOM
1. ECMAScript ： ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。
2. DOM-文档对象模型：是W3C组织推荐的处理可扩展标记语言的标准编程接口通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
3. BOM-浏览器对象模型： 提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。
2. JS初体验
行内式JS
- 可以将单行或少量JS代码写在HTML标签的事件属性中（以on开头的属性） ，如： onclick
- 注意单双引号的使用：在HEML中我们推荐使用双引号，JS中我们推荐使用单引号。
- 可读性差，在html中编写JS大量代码时，不方便阅读；引号易错，引号多层嵌套匹配时，非常容易弄混；
- 特殊情况下使用
内嵌式JS (常用)
外部JS文件（常用）
- 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
- ==引用外部JS文件的script标签中间不可写代码==
- 适合于JS代码量比较大的情况
快捷键：
- 单行注释：ctrl + /
- 多行注释：shift + alt + a
- 多行注释：在vscode中修改多行注释的快捷键：ctrl + shift + /
3. JS 输入输出语句
4. 变量
本质：变量是程序在内存中申请的一块用来存放数据的空间。
变量的初始化：声明并赋值。
5. 命名规范
- 由字母（A—Za—z）、数字（0—9）、下划线（）、美元符号（5）组成，如： usrAge， num01，_name。
- 严格区分大小写。var app；和var App；是两个变量。
- 不能以数字开头。18age是错误的
- 不能是关键字、保留字。例如： var， for， while
- 变量名必须有意义。MMD BBD nl— age
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName推荐翻译网站：有道爱词霸
- 尽量不要使用
name作为变量名
6. 数据类型
JavaScript 是一种弱类型 / 动态语言
在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕后，变量就去掉了数据类型。
JavaScript 拥有动态类型，同时也意味着相同的变量可用作不同的类型： var x = 6; //x为数字 var x = "bill"; //x 为字符串
6.1 数据类型的分类
6.1.1 简单数据类型：
| 简单数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型,包含整型值和浮点型值,如21、0.21 | 0 |
| Boolean | 布尔值类型,如true、false,等价于1和0 | false |
| String | 字符串类型,如"张三",注意咱们js里面,字符串都带引号 | “ ” |
| Undefined | var a; 声明了变量a但是没有给值,此时a= undefined | undefined |
| Null | var a=null;声明了变量a为空值 | null |
JavaScript中数值的最大最小值：
- 最大值：Number.MAX_VALUE，这个值为：1.797631348623157e+308
- 最小值：Number.MIN_VALUE，这个值为：5e-32
数字型的三个特殊值：
- alert(Infinity); 代表无穷大，大于任何数值
- alert(-Infinity); 代表无穷小，小于任何数值
- alert(NaN); Not a number,代表一个非数值
1. 数字型 number：isNaN
2. 字符串型 string："" / '' （推荐使用单引号）
可以使用单引号嵌套双引号，或双引号嵌套单引号（外双内单 / 内单外双）
转义符：\n——换行符； \\——斜杆 \ ;
\'—— ’ 单引号； \"—— ” 双引号；
\t——tab 缩进； \b——空格，blank
字符串长度：
字符串的拼接：
- 多个字符串之间可以用 + 进行拼接，拼接方式为：字符串 + 任何类型 = 新字符串
+ 号总结口诀：数值相加，字符相连
显示年龄案例：
3. 布尔型 Boolean
4. Undefined 和 Null
6.1.2 获取检测变量的数据类型
typeof 可以用来获取检测变量的数据类型
6.1.3 数据类型转换
转换为字符串
转换为数字型（重点）
转换为布尔型 ：
- 代表空、否定的值会被转换为false，如：“” 、 0 、 NaN 、null 、 undefined
- 其余值都会被值为true
7. 运算符
7.1 算数运算符
浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数。
不要直接判断两个浮点数是否相等
1 + 2 * 3 = 7 算术运算符也有优先级，先乘除，后加减，有小括号先算小括号里面的
7.2 递增和递减运算符
前置递增和后置递增小结
- 单独使用时，运行结果相同
- 后置：先原值计算，在自加
- 前置：先自加，后运算
- 开发时，大多使用后置递增，并且代码单独占一行，例如：num++; 或 num--;
7.3 比较运算符
- == 判断等 （会转型）如：18 = '18'; 为true
- != 不等号
- === 或 !== 全等，要求数值和数据类型都一致
一个等号是赋值，两个等号是判断，三个等号是全等
7.4 逻辑运算符
逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值。
| 逻辑运算符 | 说明 | 案例 |
|---|---|---|
| && | "逻辑与", 简称"与" and | 全true 才true |
| || | "逻辑或", 简称"或" or | 有true 则true |
| ！ | "逻辑非", 简称"非" not | ! true |
短路运算 （逻辑中断）
原理：当有多个表达式（值）时，左边的表达式值可以确定结果时就不再运算右边的表达式值
逻辑与/或短路运算：
- 语法：表达式1 && 表达式2
- 如果第一个表达式为真，则返回表达式2， 后面的不再执行
- 如果第一个表达式为假，则返回表达式1 ，后面的不再执行
- 语法：表达式1 || 表达式2
- 如果第一个表达式为真，则返回表达式1 ，后面的不再执行
- 如果第一个表达式为假，则返回表达式2， 后面的不再执行
注意：
7.5 赋值运算符
7.6 运算符优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++ -- ！ |
| 3 | 算数运算符 | 先* / % 后 + - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先 && 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | ， |
一元运算符里面的逻辑非优先级很高
8. JS流程控制
- 顺序结构
- 分支结构
- 循环结构
8.1 分支结构
- if 语句
- switch 语句
8.1.1 if 语句
8.1.2 if 多分支语句
8.1.3 三元表达式（可以当做简化版的 if 表达式）
8.1.4 switch 语句
当要针对变量设置一系列的特定值的选项时适用
// 1. switch 语句也是多分支语句，也可以实现多选1
// 2. 语法结构 switch 转换、开关 case 小例子或者选项的意思
/* 3. 执行思路：利用表达式的值和case后面的选项值相匹配，
如果匹配的上，就执行里面的语句，如果都匹配不上，则执行default里面的语句 */
// 4. 表达式里的值和case里的值必须全等，也就是值和数据类型都一致才执行
// 5. 如果当前case 里面没有break ，则不会退出switch，而是继续执行下一个case（不管是否匹配）,直到遇到 break 或 default 为止。
switch (表达式) {
case value1:
执行语句1;
break;
case value2:
执行语句2;
break;
...
default:
执行最后的语句；
}switch 语句和 if else if 语句的区别
- 一般情况下，它们两个语句可以相互替换
- switch..case语句通常处理case为比较确定值的情况，而if..else语句更加灵活，常用于范围判断(大于、等于某个范围)
- switch语句进行条件判断后直接执行到程序的条件语句，效率更高 高。而if.else语句有几种条件，就得判断多少次
- 当分支比较少时，if...else语句的执行效率比switch语句高。
- 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰
8.2 循环结构
for （更常用）whiledo...whilelabelfor...infor...of
8.2.1 for 循环
/for 循环重复相同代码
for 循环重复不相同代码
案例：
打印成绩案例
一行打印五颗星星
双重 for 循环
九九乘法表案例（重点）
8.2.2 while 循环
8.2.2 do while 循环
8.2.3 continue break
continue 关键字用于立即跳出本次循环，继续下一次循环
break 关键字用于立即跳出整个循环（循环结束）