【JavaScript】JS基础&实战 | JS入门到精通全套完整版的学习笔记

bilibili https://www.bilibili.com/video/BV1YW411T7GX?p=29&spm_id_from=333.880.my_history.page.click

尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版

JavaScript

第一章

1.1 JS的HelloWorld

JS代码需要编写到 下的script标签中

JS中是代码从上到下一行一行执行的

1.2. JS编写位置

在html的标签下的、标签中

注意：虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用

1.2.1 button下的onclick属性中

可以将JS代码编写到标签的onclick属性中

当我们点击按钮时，JS代码才会执行

例： 点我一下 button>

1.2.2 a标签下的href属性中

可以将JS代码写在超链接的href属性中，这样当点击超链接时，会执行JS代码

会跳转链接

例： 你也点我一下a>

不会跳转链接

你也点我一下a>

1.2.3 写到head下的script标签中

例：

1.2.4 写到外部JS文件中

可以将JS代码编写到外部JS文件中，然后通过Script标签引入，可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐使用

注意：script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略。如果需要则可以再创建一个新的script标签用于编写内部代码

例：

1.3 JS基本语法

1.3.1 注释

/* 多行注释 */

// 单行注释

1.3.2 其他语法

1. JS中严格区分大小写
2. JS中每一条语句以分号: 结尾
3. JS中会自动忽略多个空格和换行，利用它来进行格式化和美化

1.4 字面量和变量

1.4.1 字面量

字面量都是一些不可改变的值，可以直接使用，我们不会直接使用字面量

例：1 2 3 4

1.4.2 变量

变量可以用来保存字面量，而且变量的值是可以任意改变的，变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量

1､ //声明变量

//在JS中使用var关键字来声明一个变量

例：var a;

//为变量赋值

例：a = 3456788;

声明和赋值同时进行

例：var a = 34455;

1.5 标识符

1. 在JS中所有的可以由我们自主命名的都可以称为是标识符

   如：变量名、函数名、属性名都属于标识符

2. 命名一个标识符需要遵守如下的规则：

   2.1 标识符中可以含有字母、数字、_、$

   2.2 标识符不能以数字开头

   2.3 标识符不能是ES中的关键字或保留字

   例：var $adb = 123;

   2.4 标识符一般都采用驼峰命名法：

   首字母小写，每个单词的开头字母大写，其余字母小写

3. JS底层保存标识符实际上是采用Unicode编码

1.6 数据类型

数据类型指的就是字面量的类型

在JS中一共有六种数据类型：

1. String 字符串
2. Number 数值
3. Boolean 布尔值
4. Null 空值
5. Undefined 未定义
6. Object 对象

其中String 字符串、Number 数值、Boolean 布尔值 、Null 空值 、Undefined 未定义 是基本数据类型，而Object属于引用数据类型

注意：可以使用一个运算符typeof来检查一个变量的数据类型。

语法：typeof 变量

例: typeof a; 或 console.log(typeof a);

1.6.1 String 字符串

1. 在JS中字符串需要使用引号引起来,使用双引号或单引号

例：var str = “Hello”;

2. 引号不能混着用

例：var str = 'Hello";

3. 引号不能嵌套，即双引号里不能入双引号，单引号里不能入单引号

例：var str = “Hello”world" ";

4. 但可以双引号里放单引号，单引号里放双引号

例：var str = “Hello’world’ ";

5. 要想引号混着用也行，但要经过处理

在字符串中我们可以使用\作为转义字符

当表示一些特殊符号时可以使用\进行转义

’ 表示 ’

" 表示 "

\n 表示 回车换行

\t 表示 制表符

\ \表示 \ \

1.6.2 Nunber 数值

在JS中所有的数值都是number类型

包括整数和浮点数（小数）

1. Number.MAX_VALUE可以表示数字的最大值

例：console.log(Number.MAX_VALUE);

1.797631348623157e+308

2. 如果使用Number表示的数字超过了最大值，则会返回一个Infinity表示正无穷（-Infinity表示负无穷）

   注意：

   1. Infinity 是一个字面量 数据类型是Number

   2. NaN是一个特殊的数字，表示Not A Numbr,也是一个字面量 数据类型是Number

3. Number.MIN_VALUE可以表示大于0的最小值

例：console.log(Number.MIN_VALUE);

5e-324

4. 在JS中整数的运算基本可以保证精确

   但如果使用JS进行浮点数计算，能会得到一个不精确的结果

例：var c = 0.1 + 0.2;

1.6.3 Boolean 布尔值

只有两个值：false表示假和true表示真

主要用来做逻辑判断

1.6.4 Null 空值

1. Null类型的值只有一个，就是null

   null这个值专门用来表示一个为空的对象

注意：使用typeof检查一个null值时，会返回一个object

1.6.5. Undefined 未定义

Undefined 类型的值只有一个，就是Undefined

当声明一个变量，但是并不给变量赋值时，它的值就是Undefined

例：var b ;

Console.log(b);

返回Undefined

1.7 强制类型转换

指将一个数据类型强制转换为其他的数据类型

类型转换主要指，将其他的数据类型，转换为String、 Number、 Boolean

1.7.1 将其他的数据类型转换为String

1. 方式一：调用被转换数据类型的toString()方法
   1. 注该方法不会影响到原变量，它会将转换的结果返回
   2. 注意：null和undefined这两个值没有toString()方法，如果调用他们的方法，会报错

例：

var a = 123;

a = a.toString(); //调用a的toString()方法

//调用xxx的yyy()方法，就是xxx.yyy

2. 方式二：调用String()函数，并将被转换的数据作为参数传递给函数

   注意：

   1. 对于Number和boolean实际上就是调用的toString()方法
   2. 但是对于null和undefined，就不会调用toString()方法，它会将null直接转换为字符串"null"，将undefined直接转换为字符串"undefined"

例：

var a = 123;

//调用String()函数，来将a转换为字符串

a = String(a);

1.7.2 将其他的数据类型转换为Number

注意：只有toString() 没有toNumber、toBoolean等

1. 方式一：使用Number()函数

   Null 转为数字：为 0

   Undefined 转为数字：为 NuN

   布尔转为数字

   1. true 转成 1
   2. false 转成 0

   字符串转为数字

   1. 如果是纯数字的字符串，则直接将其转换为数字
   2. 如果字符串中有非数字的内容，则转换为NuN
   3. 如果字符串是一个空串或者是一个全是空格的字符串则转换为0

例：

var a = “23455”;

//调用Number()函数来将a转换为Number类型

a = Number(a);

2. 方式二：这种方式专门用来对付字符
   1. parseFloat() 把一个字符串转换为一个整数
   2. parseFloat() 把一个字符串转换为一个浮点数

例：

var a = “123px”;

//调用parseInt()函数将a转换为Number

a = parseInt(a); //结果为：123

//var a = “123a23444px”;结果为：123

//var a = “b123ddd”;结果为：NuN

//var a = “123.345666dff”;结果为：123

parseInt()可以将一个字符串中的有效的整数内容取出来，然后转换为Number

1. parseFloat()作用和parseInt()类似，不同的是它可以获得有效的小数

例：

var a = “123.345px”;

//调用parseFloat()函数将a转换为Number

a = parseFloat(a); //结果为：123.345

2. 如果对不是String使用parseInt()和parseFloat()，它会将其转换为String，然后再操作

1.7.3 将其他的数据类型转换为Boolean

方式一：使用Boolean()函数

例：a = Boolean(a);

1. 数字转为布尔

​ 除了0 和NuN是false外，其余的都是true

2. 字符串转为布尔

   除了空串是false外，其余的都是true

3. null和undefined都会转换为false

4. 对象也会转换为true

方式二：隐式类型转换

为任意的数据类型做两次非运算，即可将其转换为布尔值

例：

var a = “Hello”;

a = !!a; //true

1.8 其他进制的数字

1.8.1 16进制的数字

在JS中，如果需要表示16进制的数字，则需要以0x开头

例：

Var a = 0x10;

1.8.2 8进制的数字

在JS中，如果需要表示8进制的数字，则需要以0开头

例：

Var a = 010;

1.8.3 2进制的数字

在JS中，如果需要表示2进制的数字，则需要以0b开头，但不是所有的浏览器都支持

例：

Var a = 0b10;

注意：像“070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析

var a= “070”;

解决：可以在parseInt()中传递一个第二参数，来指定数字的进制

a = parseInt( a , 10 );//指定转换为10进制

第二章

2.1 运算符

运算符也叫做操作符

通过运算符可以对一个或多个值进行运算，并获取运算结果

例：typeof就是运算符，可以获得一个值的类型，它会将该值的类型以字符串的形式返回

值的类型有：Number String Boolean Undefined Object

例：

var a = 123;

var result = typeof a ;

console.log(typeof result); //结果为：String

2…2 算数运算符

+、-、*、/、 %

任何值做- 、 * 、 / 、运算时都会自动转换为Number，我们可以利用这一特点做隐式的类型转换，可以通过一个值 -0､*1､/1将其做类型转换

2.2.1 +

当对不是Number类型的值进行运算时，会将这些值转换为Number然后再进行计算

例：var result = true + false ; //1

任何值和NuN做运算都得NuN

1. 但是有一个特例：var result =“123" + “456" ; //123456 是字符串拼接

2. 可以对两个值进行加法运算，并将结果返回

3. 如果对两个字符串进行加法运算，则会做拼串

   会将两个字符串拼接为一个字符串，并返回

例：var result =“123" + “456" ; //123456 是字符串拼接

4. 任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼串的操作

例：var result =true + “hello" ;

5. 利用这一特点，来将一个任意的数据类型转换为String，我们只需为任意的数据类型 + 一个空串""即可将其转换为String，这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用了String()

例：var c = 123;

c = c + “”; //c的类型为String

6. 小练习

注意：浏览器代码是从左往右依次执行的

result = 1 + 2 + “3”; //33

result = “1” + 2 +3; //123

2.2.2 -

可以对两个值进行减法运算，并将结果返回

除了加法的字符串拼接，其余的都是将这些值转换为Number然后再进行计算

2.2.3 *

可以对两个值进行法运算，并将结果返回

2.2. 4 %

取模运算（取余数）

2.3 一元运算符

只需要一个操作数

1. 正号：+

   正号不会对数字产生任何影响

2. 负号：-

   负号可以对数字进行负号取反

3. 对于不是Number类型的值，它会先将其转换为Number，然后再运算

4. 可以对一个其他的数据类型使用 + ，来将其转换为Number，它的原理和Number()函数是一样的

例：a = +a;

2.4 自增和自减

2.4.1 自增++

1. 通过自增可以使变量在自身的基础上增加 1

2. 对于一个变量自增以后，原变量的值会立即自增1

3. 自增分成两种：后++（例：a++）和 前++ （例：++a），无论是a++ 还是++a，都会立即使变量的值自增1

   不同的是a++ 和++a 的值不同：

   a++的值等于原变量的值（自增前的值）

   ++a的值等于原变量自增后的值（自增后的值）

4. 小练习

var d = 20 ;

var result = d++ + ++d + d; // 20+ 22+ 22= 64

var d =20;

d = d++; //分解： var e = d++; d = e; 看d++的值为多少

console.log(“d =” + d); // 20

2.4.2 自减–

1. 通过自减可以使变量在自身的基础上进行减1

2. 自减分成两种：后–（例：a–）和 前–（例：–a），无论是a-- 还是–a，都会立即使变量的值自减1

   不同的是a-- 和–a 的值不同：

   a–的值等于原变量的值（自减前的值）

   –a的值等于原变量自减后的值（自减后的值）

3. 小练习

var n1 = 10, n2 = 20;

var n = n1++;//n1 = 11, n1++ = 10

console.log(‘n=’ + n);//10

console.log(‘n1=’ + n1); //11

n = ++n1;//n1 = 12 , ++n1 =12

console.log(‘n=’ + n); //12

console.log(‘n1=’ + n1); //12

n = n2–;//n2 = 19 , n2-- = 20

console.log(‘n=’ + n); //20

console.log(‘n2=’ + n2);//19

n = --n2;//n2 = 18 , --n2 = 18

console.log(‘n=’ + n); //18

console.log(‘n2=’ + n2);//18

2.5. 逻辑运算符

！非 、&&与、||或

2.5.1 ！非

1. 可以用来对一个值进行非运算
2. 所谓非运算就是值对一个布尔值进行取反操作，true变false, false变true

var a = false;

a = !a; // 对a进行非运算

//true

3. 如果对一个值进行两次取反，它不会变化

var a = false;

a = !!a; // 对a进行非运算

// false

4. 如果对非而尔值进行运算，则会将其转换为布尔值，然后再取反

   所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值，可以为一个任意数据类型取两次反，来将其转换为布尔值，原理和Boolean()函数一样

2.5.2 &&与

1. &&可以对符号两侧的值进行与运算并返回结果
2. 如果两个值都是true，则返回true

例：var result = true && true; //true

3. 只要有一个false，就返回false

例：result = true && false;

result =false && true;

result =false && false;

4. JS中的“与”属于短路的与，

   如果第一个值为false，则不会看第二个值 ，如果第一个值为true，会检查第二个值

2.5.3. || 或

||可以对符号两侧的值进行或运算并返回结果

运算规则：

1. 两个都是false，则返回false

例：result = false || false ; // false

2. 只要有一个true，就返回true

例：result =true || false ; //true

result = false ||true ; //true

result =true ||true ; //true

3. S中的“或”属于短路的或，

   如果第一个值为false，则会检查第二个值

   如果第一个值为true，则不再检查第二个值

2.5.4 && || 非布尔值的情况

1. 对于非布尔值进行与、或运算时，会先将其转换为布尔值，然后再进行运算，并且返回原值

2. 与运算：

   1. 如果第一个值为true，则必然返回第二个值

   2. 如果第一个值为false，则直接返回第一个值

//true && true

//与运算：如果两个值都为true，则返回后边的

例：var result = 5 && 6; // 6

//与运算：如果两个值中有false，则返回靠前的

//false && false

result = 0 && 2; //0

result = 2 && 0; // 2

///false && true

result = NaN && 0; // NaN

result = 0 && NaN; //0

3. 或运算：
   1. 如果第一个值为true，则直接返回第一个值
   2. 如果第一个值为false，则直接返回第二个值

//true && true

//或运算：如果第一个值为true，则直接返回第一个值

例：var result = 2 || 1; //2

var result = 2 || NuN; //2

var result = 2 || 0; //2

//或运算：如果第一个值为false，则直接返回第二个值

var result = NuN || 1; //1

var result = NuN || 0; //0

2.6 赋值运算符

1. = ： 可以将符号右侧的值赋给符号左侧的变量
2. +=： 例：a += 5 等价于 a = a + 5
3. -= 、 *= 、 /= 、 %= 同理2

2.7 关系运算符

1. 通过关系运算符可以比较两个值之间的大小关系，如果关系成立它会返回true，如果关系不成立则返回false

2. “>”大于号：判断符号左侧的值是否大于右侧的值，如果关系成立，返回true

3. “>=" 、“<=" 同理2

4. 非数值情况：

   1. 对于非数值进行比较时，会将其转换为数字然后再进行比较

   2. 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会分别比较字符串中字符的Unicode编码

   3. 注意：比较字符编码时是一位一位进行比较的，如果两位一样，则比较下一位，所以借用它来对英文进行排序

      比较中文时没有意义

   Eg:

   console.log(“abc” < “bcd”); //true

   4. 如果比较两个字符串型数字，可能会得到不可预期的结果

      注意：在比较两个字符串型的数字时，一定一定在要转型

5. 任何值和NaN做比较都是false

Eg:

console.log(10 <= “helle”); //true

2.8 Unicode编码

1. 在网页中使用Unicode编码：html的body标签中

   格式：&#编码;

   这里的编码需要的是 10 进制

Eg:

⚀

2. 在JS中：在字符串中使用转义字符输入Unicode编码

   格式：\u四位编码

   这里的编码需要的是 16 进制

eg: console.log(“\u2620”);

2.9 相等运算符

2.9.1 相等运算符 ==

相等运算符：用来比较两个值是否相等，如果相等会返回true,否则返回false

1. 当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较

2. Undefined i衍生自null，所以这两个值做相等判断时，会返回true

Eg: console.log(undefined == null);

3. NaN不和任何值相等，包括他本身

Eg: console.log(NaN == NaN); //false

//判断b的值是否是NaN

//可以通过isNaN()函数来判断一个值是否是NaN，如果该值是NaN则返回true，否则返回false

console.log(isNaN(b));

2.9.2 不相等运算符 !=

不相等运算符：用来比较两个值是否不相等，如果不相等会返回true,否则返回false

1. 与相等运算符正好相反
2. 不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

Eg: console.log(“abc” != “abc”); // false

2.9.3 全等 ===

用来判断两个值是否全等，它和相等类似，不同的是它不会进行自动类型转换，如果两个值的类型不同，直接返回false

2.9.4 不全等 !==

用来判断两个值是否不全等，它和不相等类似，不同的是它不会进行自动类型转换，如果两个值的类型不同，直接返回true

2.10 条件运算符（三元运算符）

1. 语法：

   条件表达式？语句1:语句2;

2. 执行的流程：

   条件运算符在执行时，首先对条件表达式进行求值，如果该值为true，则执行语句1,并返回执行结果。如果该值为false，则执行语句2, 并返回执行结果。

3. 这种写法不推荐使用，不方便阅读

var mac = a > b ? (a > c ? a : c ) : (b > c ? b : c);

4. 如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值，然后再运算

2.11 运算符的优先级

1. 使用逗号,可以分割多个语句，一般可以声明多个变量时使用

var a, b , c;

2. 优先级：

   在JS中有一个运算符优先级的表，在表中越靠上优先级越高，优先级越高越优先计算，如果优先级一样，则从左往右计算

   注意：这个表并不需要记忆，如果遇到优先级不清楚的，可以用括号

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AZVsC855-1675660464531)(/Users/zengguili/Desktop/屏幕快照 2022-05-27 下午4.25.46.png)]

第三章

3.1 代码块

程序是由一条一条语句构成的

1. 语句是按照自上向下的顺序一条一条执行的

2. 在JS中可以使用{}来为语句进行分组，同一个{}中的语句我们称为是一组语句，它们要么都执行，要么都不执行，一个{}中的语句我们也称为叫一个代码块，在代码块的后边就不用再编写;了

3. JS中的代码块，只具有分组的作用，没有其他的用途

   注意：代码块中的内容，在外都是完全可见的

3.2 流程控制语句

1. JS中和程序是从上到下一行一行执行的
2. 通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行
3. 语句的分类：
   1. 条件判断语句
   2. 条件分支语句
   3. 循环语句

3.2.1 条件判断语句

1. 使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成立则语句不执行。

2. if 语句语法一：

   if (条件表达式 ) {

语句…

}

if语句

在执行时，会先对表达式进行求值判断，如果条件表达式的值为true，则执行if后的语句，如果条件表达式的值为false，则不会执行if后的语句。if语句只能控制紧随其后的那个语句，如果希望if语句可以控制多条语句，可以将这些语句统一放到代码块中。

3. if 语句语法二：

   if (条件表达式){

   语句…

   } else {

   语句…

   }

   If…else…语句

   当该语句执行时，会先对if后的条件表达式进行求值判断，如果该值为true，则执行if后的语句，如果该值为false，则执行else后的语句

4. if 语句语法三：

   if (条件表达式){

   语句…

   } else if(条件表达式) {

   语句…

   }else if(条件表达式){

   语句…

   }else if(条件表达式){

   语句…

   }else if(条件表达式){

   语句…

   }else {

   语句…

   }

   if …else if …else if …else…语句

   当该语句执行时，会从上到下依次对条件表达式进行求值判断，如果该值为true，则执行当前的语句，如果该值为false，则继续向下判断，如果所有的条件都不满足，则执行最后一个else后的语句。该语句中，只会有一个代码块被执行，一旦代码块执行了，则直接结束该语句。

对比下例三个例子，第二个例子是错误示范

//最好是这样写

age = 80;

if (age > 80) {

​ alert(‘你岁数挺大的了’);

} else if (age > 60) {

​ alert(‘退休了’);

} else if (age > 30) {

​ alert(‘中年了’);

} else if (age > 17) {

​ alert(‘成年了’);

} else {

​ alert(‘未成年’);

}

if (age > 17) {

​ alert(‘成年了’);

} else if (age > 30) {

​ alert(‘中年了’);

} else if (age > 60) {

​ alert(‘退休了’);

} else {

​ alert(‘你岁数挺大的了’);

}

//第一个和第二个else if 永远不会执行

改良后

age = 80;

if (age > 17 && age <= 30) {

​ alert(‘成年了’);

} else if (age > 30 && age <= 60) {

​ alert(‘中年了’);

} else if (age > 60 && age <= 80) {

​ alert(‘退休了’);

} else {

​ alert(‘你岁数挺大的了’);

}

3.2.2 if语句练习

练习一：

/*

从键盘上输入小明的期末成绩：

当成绩为 100 时，‘奖励一辆BMW’

当成绩为[80 - 99] 时，‘奖励一台iphone15s’

当成绩为[60 - 80] 时，‘奖励一本参考书’

其他时，什么奖励也没有

*/

/*

prompt()可以弹出一个提示框，该提示框中带有一个文本输入框 prompt(‘请输入小明的期末成绩：’)

用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字

用户输入的内容将会作为函数的返回值返回，可以定义一变量来接收该内容

var score = prompt(‘请输入小明的期末成绩：’);

score就是小明的期末成绩

*/

var score = prompt(‘请输入小明的期末成绩：’);

// 判断值是否合法

if (score > 100 || score < 0 && isNaN(score)) {//如果是> 100或< 0或是字符串的

​ alert(‘值不合法，请重新输入 0-100 的值’);

} else {

​ //根据score的值来决定给小明什么奖励

​ if (score == 100) {

​ //奖励一台宝马

​ alert(“宝马，拿去”);

​ } else if (score >= 80) {

​ //奖励一台手机

​ alert(“手机，拿去”);

​ } else if (score >= 60) {

​ //奖励一参考书

​ alert(“参考书，拿去”);

​ } else {

​ alert(“棍子一根”)

​ }

}

练习2:

/*

大家都知道，男大当婚，女大当嫁，那么女方家长要嫁女儿，当然要提出一定的条件

高：180CM以上；富：1000万以上；帅：500以上

如果这三个条件同时满足，则“我一定要嫁给他”

如果三个条件有为真的情况，则“嫁吧，比上足，比下有余”

如果三个条件都不满足，则“不嫁”

*/

var height = prompt(“请输入你的身高(CM):”);

var money = prompt(“请输入你的财富(万):”);

var face = prompt(“请输入你的颜值(px):”);

alert(height + “,” + money + “,” + face);

// 如果这三个条件同时满足，则“我一定要嫁给他”

if (height > 180 && money > 1000 && face > 500) {

​ alert(‘我一定要嫁给他’);

} else if (height > 180 || money > 1000 || face > 500) {

// 如果三个条件有为真的情况，则“嫁吧，比上足，比下有余”

​ alert(‘嫁吧，比上足，比下有余’);

} else {

// 如果三个条件都不满足，则“不嫁”

​ alert(‘不嫁’)

}

练习3:

/*编写程序，由键盘输入三个整数分别存入变量num1 num2 num3

对他们进行排序，并且从小到大输出

*/

// 获取用户输入的三个数

/*

prompt()函数的返回值是String类型的,使用+进行类型转换成number类型

*/

var num1 = +prompt(“请输入第一个数：”);

var num2 = +prompt(“请输入第二个数：”);

var num3 = +prompt(“请输入第三个数：”);

// 找到三个数中最小的数

if (num1 < num2 && num1 < num3) {

​ //则有num1最小，比较num2和num3

​ if (num2 < num3) {

​ //则有num1<num2<num3

​ alert(num1 + “,” + num2 + “,” + num3);

​ } else {

​ //则有num1<num3<num2

​ alert(num1 + “,” + num3 + “,” + num2);

​ }

} else if (num2 < num1 && num2 < num3) {

​ //则有num2最小，比较num1和num3

​ if (num1 < num3) {

​ //则有num2<num1<num3

​ alert(num2 + “,” + num1 + “,” + num3);

​ } else {

​ //则有num2<num3<num1

​ alert(num2 + “,” + num3 + “,” + num1);

​ }

} else {

​ //则有num3最小，比较num1和num2

​ if (num1 < num3) {

​ //则有num3<num1<num2

​ alert(num3 + “,” + num1 + “,” + num2);

​ } else {

​ //则有num3<num2<num1

​ alert(num3 + “,” + num2 + “,” + num1);

​ }

}

3.3 条件分支语句

条件分支语句也叫switch语句

1. 语法：

   1. switch(条件表达式){

      ​ case 表达式:

      ​ 语句…

      ​ break;

      case 表达式:

      ​ 语句…

      ​ break;

      case 表达式:

      ​ 语句…

      ​ break;

      case 表达式:

      ​ 语句…

      ​ break;

      ​ default:

      ​ 语句…

      ​ break;

      }

2. 执行流程：

   switch…case…语句

   在执行时会一次将case后的表达式的值和switch后的条件表达式的值进行全等比较，

   如果比较结果为true，则从当前case处开始执行代码（当前后面所有的case都会执行，要使用break来退出switch语句，所以我们可以在case的后面跟着一个break，这样可以确保只会执行当前case后的语句，而不会执行其他的case）。如果比较结果为false，则继续向下比较。如果所有的比较结果都为false，则只执行default后的语句

   注意：switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能，同样使用if也可以实现switch的功能，所以我们在使用时，可以根据自己的习惯选择

3. 例子：

   num = 1;

   switch (num) {

   ​ case 1:

   ​ console.log(‘壹’);

   ​ break;//使用break来退出switch语句

   ​ case 2:

   ​ console.log(‘贰’);

   ​ break;//使用break来退出switch语句

   ​ case 3:

   ​ console.log(‘叁’);

   ​ break;//使用break来退出switch语句

   ​ default:

   ​ console(‘非法数字’);

   ​ break;

   }

3.3.1 switch练习

对于成绩大于 60 分的，输出“合格”，低于 60 分的，输出”不合格“

法 1:

var score = 62;

switch (score) {

​ // …

​ case 64:

​ case 63:

​ case 62:

​ case 61:

​ case 60:

​ console.log(“合格”);

​ break;

​ case 59:

​ case 58:

​ case 57:

​ //…

​ console.log(“不合格”);

​ break;

​ //但这种方法有点麻烦要一一列举

}

法 2:改良

var score = 62;

switch (parseInt(score/100)) {//取整

​ // 60〜69 / 10 = 6

​ // 70〜79 / 10 = 7

​ // 80〜89 / 10 = 8

​ // 90〜99 / 10 = 9

​ // 100 / 10 = 10

​ case 10:

​ case 9:

​ case 8:

​ case 7:

​ case 6:

​ console.log(“合格”);

​ break;

default:

​ console.log(“不合格”);

​ break;

}

法 3: JS独有 类似于 for

var score = 62;

switch (true) {

​ case score >= 60:

​ console.log(“合格”);

​ break;

​ default:

​ console.log(“不合格”);

​ break;

}

3.4 循环语句

3.4.1 while 循环

循环语句：通过循环语句可以反复的执行一段代码多次

while 循环

语法：

while (条件表达式){

​ 语句…

}

whiile语句在执行时，先对条件表达式进行求值判断，如果值有true,则执行循环体，循环体执行完毕以后，继续对表达式进行判断，如果为true，则继续执行循环体，以此类推。如果值为false，则终止循环

例：

var n = 1;

/*

像这种将条件表达式写为true的循环，叫做死循环

该循环不会停止，除非浏览器关闭，死循环在开发中慎用

可以使用break，来终止循环

*/

while (true) {

​ alert(n++);

​ //判断n是否是10

​ if (n == 10) {

​ //退出循环

​ break;

​ }

}

创建一个循环，往往需要三个步骤：

// 1. 创建一个初始化变量

var i = 0;

//2. 在循环中设置一个条件表达式

while ( i < 10){

​ alert (i);

​ //3. 定义一个更新表达式

​ I++;

}

3.4.2 do…while循环

语法：

do{

​ 语句…

}while (条件表达式)

执行流程：

do…while语句在执行时，会先执行循环体，循环体执行完毕以后，在对while后的条件表达式进行判断，如果结果为true，则继续执行循环体，执行完毕继续判断。如果结果为false，则终止循环

实际上这两个语句功能类似，不同的是while是先判断后执行，而do…while会先执行后判断，do…while可以保证循环体至少执行一次，而while不能

var i = 11;

do{

​ document.write(i++ + “
”); //会先执行一次，再判断 ，“
”是网页中的换行

}while (i <=10);

这种死循环不要去测试，会导致浏览器关不上，这时候需要强制关闭 同时按回车+点击浏览器关闭网页

while (true){

alert(1)

}

3.4.3 while循环练习

假如投资的年利为 5%，试求从1000块增长到 5000块，需要花费多少年

1000 1000*1.05

1050 1050*1.05

// 定义一个变量，表示当前的钱数

var money = 1000;

// 定义一个计数器(计数器是用来计算循环或代码执行了多少次)

var count = 0;

//定义一个while循环来计算每年的钱数

while (money < 5000) {

​ money *= 1.05;

​ //使count自增

​ count++;

}

console.log(‘一共需要’ + count + ‘年’);

是if练习的改写

/*

从键盘上输入小明的期末成绩：

当成绩为 100 时，‘奖励一辆BMW’

当成绩为[80 - 99] 时，‘奖励一台iphone15s’

当成绩为[60 - 80] 时，‘奖励一本参考书’

其他时，什么奖励也没有

*/

/*

prompt()可以弹出一个提示框，该提示框中带有一个文本输入框 prompt(‘请输入小明的期末成绩：’)

用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字

用户输入的内容将会作为函数的返回值返回，可以定义一变量来接收该内容

score就是小明的期末成绩

*/

//将prompt放入到一个循环中

while(true){

​ var score = prompt(‘请输入小明的期末成绩：’);

​ if (score >= 0 && score <= 100){

​ //满足该条件则证明用户的输入合法，退出循环

​ break;

​ }

}

// 判断值是否合法

if (score > 100 || score < 0 && isNaN(score)) {//如果是> 100或< 0或是字符串的

​ alert(‘值不合法，请重新输入 0-100 的值’);

} else {

​ //根据score的值来决定给小明什么奖励

​ if (score == 100) {

​ //奖励一台宝马

​ alert(“宝马，拿去”);

​ } else if (score >= 80) {

​ //奖励一台手机

​ alert(“手机，拿去”);

​ } else if (score >= 60) {

​ //奖励一参考书

​ alert(“参考书，拿去”);

​ } else {

​ alert(“棍子一根”)

​ }

}

3.4.4 for 循环

for语句也是一个循环语句，也称为for循环

1. 在for循环中，为我们提供了专门的位置用来放三个表达式

   1. 初始化表达式
   2. 条件表达式
   3. 更新表达式

2. for循环的语法

for (1初始化表达式; 2条件表达式; 4更新表达式) {

​ 3语句…

}

for (var i = 0 ; i < 10 ; i++) {

​ alert(i);

}

3. for循环执行流程：

   1执行初始化表达式，初始化变量，只会执行一次

   2执行条件表达式，判断是否执行循环，如果为true，则执行循环3, 如果为false，终止循环

   4执行更新表达式，更新表达式执行完毕继续重复2

4. for循环中的三个部分都可以省略，也可以写在外部，但如果在for循环中不写任何的表达式，只写两个; 此时循环是一个死循环会一直执行下去

var i = 0 ;

for ( ; i < 10 😉 {

​ alert(i++);

}

或

for ( ; 😉 {//死循环

​ alert(hello);

}

5. for与while一样，但for循环用得多

3.4.5 for循环练习

1. 打印1~100之间的所有奇数之和

// 创建一个变量，用来保存奇数之和

// var sum = 0;

//打印1~100之间的数

for (var i = 1, sum = 0; i <= 100; i++) {

​ // 判断i是否是奇数

​ // 不能被2整除的数就是奇数

​ if (i % 2 != 0) {

​ // 如果i除以2有余数则证明i是奇数

​ console.log(i);

​ }

}

console.log(‘奇数之和为：’ + sum);

2. 打印 1〜100之间所有 7 的倍数的个数及总和

// 创建一个变量，用来保存总和

var sum = 0;

// 定义一个计数器，来记录数量

var count = 0;

//打印1~100之间的数

for (var i = 1; i <= 100; i++) {

​ // 判断i是否是7的倍数

​ if (i % 7 == 0) {

​ // 如果i除以7没有余数则证明i是问题的倍数

​ sum += i;

​ // 使计数器自增 1

​ count++;

​ }

}

// 输出总和

console.log(‘总和为：’ + sum);

// 输出总数

console.log(‘总数量为：’ + count);

3. 水仙花是指一个 3 位数，它的每个位上的数字的3次幂之和等于它本身。

   （例如：1^3 + 5^3 + 3^3 = 153)，请打印所有的水仙花数

// 打印所有的三位数

for (var i = 100; i < 1000; i++) {

​ // 获取i的百位 十位 个位的数字

​ var bai = parseInt(i / 100); //获取百位的数字，取整parseInt(i / 100)

​ var shi = parseInt(i - bai * 100 / 10); //获取十位的数字

​ var ge = i % 10; //获取个位的数字

​ // 判断i是否是水仙花数

​ if (bai * bai * bai + shi * shi * shi + ge * ge * ge == i) {

​ console.log(i);

​ }

}

3.5 质数

在页面中接收一个用户输入的数字，并判断该数是否是质数。

质数：只能被1和它自身整除，1不是质数也不是合数，质数必须是大于1的自然数

var num = prompt(‘请输入一个大于1的整数：’);

// 判断这个值是否合法

if (num <= 1) {

​ alert(‘该值不合法！’);

} else {

​ 创建一个变量来保存

​ // 判断num是否是质数

​ // 获取2-num之间的数

​ for (var i = 2; i < num; i++){

​ // 判断num是否能被i 整除

​ if (num % i == 0) {

​ // 如果num能被i整除，则说明num一定不是质数

​ }

​ }

​ // 如果num是质数则输出

}