目录
数据类型转换
由于 javascrip 这个语言它是弱类型语言，即它对类型的要求不是很强，我们变量的类型最终取决于最后一次赋给这个变量的值。但是，我们在开发中还是会遇到要对数据进行转换的需求。
在进行数据类型转换时，有两种方式：
向下类型转换：也叫强制类型转换，一般发生在大的数据类型向小的数据类型转换。需要强制类型转换
向上类型转换：也叫自动类型转换，一般是小类型向大类型转换，这种方式是自动完成的。
自动类型转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动类型转换</title> </head> <body> <script> let a = 10 // int console.log(typeof a) // number a = 5.6 // float console.log(typeof a) // number </script> </body> </html>
强制类型转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>强制类型转换</title> </head> <body> <script> let input = prompt('请输入一个整数') console.log(input, typeof input) // 将字符串转换为数值类型 let result = parseInt(input) console.log(result, typeof result) </script> </body> </html>
如果我们希望把数字字符串类型转换为数值类型，我们可以使用 paraseInt() ，使用这个函数时，它会把字符串转换为数值，但是如果这个字符串不能转，则返回 NaN
流程控制语句
流程控制语句也是我们经常听说的三大流程：顺序、选择、循环。
顺序流程
顺序流程指的是：代码的运行顺序是从左到右，从上到下的顺序来执行。
选择流程
选择结构主要是指：程序在运行过程中，有时需要面临一些不同情况的选择，根据情况执行不同的代码。这个选择结构三种：单分支、双分支、多分支。
单分支
单分支主要是针对一种情况下的判断，需要使用 if 语句来完成。它的使用结构为：
if (条件表达式) {
执行语句
}它的执行流程：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>单分支</title> </head> <body> <script> let age = prompt('请输入你的年龄', '18') age = parseInt(age) if (age >= 18) { console.log('你已经成年了。') } </script> </body> </html>
双分支
在单分支的基础上，还可以增加一种情况，当其中一种情况不满足时，就执行另一种情况。它的语法结构如下：
if (条件表达式) {
条件为true时执行的代码
} else {
条件为false时执行的代码
}它执行流程图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双分支</title> </head> <body> <script> let age = parseInt(prompt('请输入你的年龄', '18')) if (age >= 18) { console.log('你已经成年了') } else { console.log('你还未成年') } </script> </body> </html>
多分支
有时我们的情况可能有多种，这时就需要使用多分支，多分支就是多重嵌套的使用。它的语法为：
if (条件表达式1) {
表达式1为 true 时执行
} else if (条件表达式2) {
表达式2为 true 时执行
} else if (条件表达式3) {
表达式3为 true 时执行
} else {
以上条件都不满足时执行
}执行流程：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多分支</title> </head> <body> <script> let age = parseInt(prompt('请输入你的年龄', '18')) if (age <= 12) { console.log('你还要读小学') } else if (age <= 18) { console.log('你在读中学') } else if (age <= 22) { console.log('你在读大学') } else { console.log('你已经进入社会了') } </script> </body> </html>
switch
多分支我们也可以使用 switch 语句来实现，它的语法为：
switch(表达式) {
case 值1:
语句块1
break
case 值2:
语句块2
break
case 值n:
语句块n
break
default:
默认语句块
break
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>switch语句</title> </head> <body> <script> let week = parseInt(prompt('请输入今天是星期几')) switch (week) { case 1: console.log('今天是星期一') break case 2: console.log('今天是星期二') break case 3: console.log('今天是星期三') break case 4: console.log('今天是星期四') break case 5: console.log('今天是星期五') break case 6: console.log('今天是星期六') break case 7: console.log('今天是星期天') break default: console.log('你是火星来的') break } </script> </body> </html>
代码分析：
如果case语句中没有 break，那么它会继续向下执行，直到遇到 break 为止或 switch 代码块结束。
default 语句可以放到 switch 语句的最后，也可以放到 switch 块的意义位置
如果 default 语句放到最后，则它的 break 是可以省略的；如果不在最后，则 break 语句不能省略
switch语句和多分支的使用场景：
-
switch语句是多分支语句的简写方式，它的执行效率要比多分支高
-
多分支这种方式的使用场景比swtich语句要宽
循环流程
我们有时希望我们某些功能反复的执行，这时就需要使用循环流程。在 JS 中循环流程有以下三种：
-
for 循环
-
while 循环
-
do..while循环
for循环
它的语法格式为：
for (let|var 变量=初值; 条件达式; 变量的步长) {
循环体
}执行流程分析：整个 for 循环分为四步：
第一步：给变量赋初值；
第二步：判断表达式的值是否为 true，如果为 true 则继续执行后面的步骤，如果值为 false 则退出循环
第三步：执行循环体
第四步：执行变量的步长
重复第二步到第四步。也就是说第一步只会执行一次。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for循环</title> </head> <body> <script> for (let i = 1; i <= 5; i++) { console.log(i) } </script> </body> </html>
需求：计算用户指定的数值内的和。
分析：
-
接收用户输入 prompt
-
将输入的值转换为整数 parseInt()
-
计算结果 for 循环
实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>for循环案例-求和</title> </head> <body> <script> const num = parseInt(prompt('请输入一个整数', '1')) let sum = 0 // 用于存放计算的结果 for (let i = 1; i <= num; i++) { sum += i } console.log('sum = ' + sum) </script> </body> </html>
while循环
它的语法如下：
let 循环变量 = 初值
while (条件表达式) {
循环体
循环变量步长
}简单使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>while循环</title> </head> <body> <script> let i = 1 while (i<=5) { console.log(i) i++ } </script> </body> </html>
使用 while 循环来计算用户输入的值的和
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>while循环案例-求和</title> </head> <body> <script> let num = parseInt(prompt('请输入一个整数', '1')) let sum = 0 // 定义一个接收循环计算结果的变量 let i = 1 // 循环变量并给他的初值为 1 while (i <= num) { sum += i i++ } console.log('sum = ' + sum) </script> </body> </html>
do...while循环
它的语法结构：
let 循环变量 = 初值
do {
循环体
循环变量步长
} while(条件表达式)简单使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>do...while循环</title> </head> <body> <script> let i = 0 do { console.log(i) i-- } while (i > 0) // 不 i 的值等于 0 时就退出 </script> </body> </html>
从上面的代码运行结果可以发现，虽然条件表达式不满足，但是程序依然执行了一次。
如何选择
-
如果循环次数确定，那么优先选择 for 循环
-
如果循环次数不确定，那么优先选择 while 循环
-
如果循环至少要执行一次，则选择 do...while循环
continue和break
continue 它的作用是结束它所在层本次循环，进入到下一次循环。
break 它的作用是结束它所在层循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>continue和break</title> </head> <body> 需求：输出 1 ~ 10 之间的偶数，当数为 8 时就结束循环 <script> let num = 10 for (let i = 1; i <= num; i++) { if (i === 8) break // 如果 if 语句块中只有一行，则大括号可以省略 if (i % 2 === 0) { console.log(i) } else { continue } } </script> </body> </html>
循环案例
需求：输入九九乘法表
1 * 1 = 1 1 * 2 = 2 2 * 2 = 4 1 * 3 = 3 2 * 3 = 6 3 * 3 = 9 1 * 4 = 4 2 * 4 = 8 3 * 4 = 12 1 * 5 = 5 2 * 5 = 10 3 * 5 = 15 1 * 6 = 6 2 * 6 = 12 3 * 6 = 18 1 * 7 = 7 2 * 7 = 14 3 * 7 = 21 1 * 8 = 8 2 * 8 = 16 3 * 8 = 24 1 * 9 = 9 2 * 9 = 18 3 * 9 = 27
分析：
-
九九乘法表是有行有列，因此需要循环嵌套，外层循环是行，内层循环是列
-
我们可以使用 for、while、do..while，我们在这里循环 for 循环
-
我们需要使用制表符（\t）来让每一列有间隔
-
我们把九九乘法表输出到页面中，document.write()
实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>循环嵌套-九九乘法表</title> </head> <body> <script> for (let i = 1; i <= 9; i++) { for (let j = 1; j <= i; j++) { document.write(i + ' * ' + j + ' = ' + (i*j) + '\t\t') } document.write('<br>') } </script> </body> </html>