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  （更常用）
• while
• do...while
• label
• for...in
• for...of

8.2.1 for 循环

/

 for 循环重复相同代码

  for 循环重复不相同代码

案例：

 打印成绩案例

一行打印五颗星星 

 双重 for 循环

九九乘法表案例（重点） 

8.2.2  while 循环

8.2.2  do while 循环

8.2.3 continue break

continue 关键字用于立即跳出本次循环，继续下一次循环 

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