JS数据类型转换与流程控制教程：类型转换、条件判断与循环结构

JavaScript数据类型转换与流程控制概述

本文通过具体实例，系统讲解JavaScript中数据类型转换与流程控制的核心操作，旨在为读者提供实用的参考代码与逻辑解析。

JavaScript数据类型转换详解

在JavaScript开发中，数据类型转换是基础且关键的操作，主要涉及将数值、字符串和布尔值之间进行相互转换。


//number转换成str
// var str=a+'';
// console.log(str);
// console.log(typeof str); //转换成字符串了


var str2=a.toString(); //强制转换成 string
console.log(typeof str2);


//str转换成 number
var stringNum='789';
var num2=Number(stringNum);
console.log(num2);
console.log(typeof num2);


//特殊情况
var stringNum='789dejafdf';
var num2=Number(stringNum);
console.log(typeof num2); //结果number
console.log(num2); //结果NaN ；not a number
console.log(Boolean(num2));//结果为False


var c=5/0;
console.log(Boolean(c)); //结果为True


var d;
console.log(Boolean(d)); //结果为False

JavaScript流程控制语句

流程控制决定了代码的执行路径，包括条件判断和循环结构，是编写复杂逻辑的基础。

条件判断：if语句

条件判断语句if用于根据特定条件执行不同的代码块，是流程控制中最常用的结构之一。


var ji = 20;
if(ji >= 20){
  console.log('恭喜你，吃鸡成功，大吉大利')
}
alert('alex');//下面的代码还会执行


if (true) {
  //执行操作
}else if(true){
  //满足条件执行
}else if(true){
  //满足条件执行
}else{
 //满足条件执行
}

需要特别注意，浏览器执行JavaScript代码时遵循自上而下、从左到右的顺序，这直接影响代码的执行结果。

逻辑运算符：与和或

逻辑运算符&&（逻辑与）和||（逻辑或）用于组合多个条件，其中&&要求所有条件均为真，而||只需一个条件为真即可。


//1.模拟 如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
  console.log('清华大学录入成功')
}else{
  alert('高考失利')
}


//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
//逻辑或 只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
  alert('被复旦大学录入')
}else{
  alert('高考又失利了')
}

多分支选择：switch语句

switch语句用于多分支选择，通过匹配表达式的值来执行对应的case代码块，配合break可避免穿透执行。


var gameScore = 'better';
switch(gameScore){
//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止
  case 'good':
  console.log('玩的很好')
  //break表示退出
  break;
  case 'better':
  console.log('玩的老牛逼了')
  break;
  case 'best':
  console.log('恭喜你 吃鸡成功')
  break;
  default:
  console.log('很遗憾')
}

循环结构：while与do-while

while循环是一种先判断后执行的循环结构，当条件满足时重复执行代码块，适用于未知次数的循环场景。

任何循环结构的执行都包含三个关键步骤：初始化循环变量、判断循环条件以及更新循环变量。

第一步是初始化循环变量，通常用于设置循环的起始状态，如定义计数器i的初始值。

第二步是判断循环条件，在每次循环开始前检查条件是否成立，若为假则终止循环。

第三步是更新循环变量，在每次循环结束后修改变量值，以确保循环能最终终止，避免死循环。


var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
  console.log(i);
  i = i+1; //更新循环条件
}

do-while循环与while类似，但它是先执行代码块再判断条件，因此无论条件是否满足，代码块至少会执行一次。


//不管有没有满足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{
  console.log(i)
  i++;//更新循环条件
}while (i<10) //判断循环条件

循环结构：for与双重循环

for循环将初始化、条件判断和变量更新整合在一行语句中，结构紧凑，适用于已知循环次数的场景。


for(var i = 1;i<=10;i++){
   console.log(i)
}

双重for循环即在循环体内嵌套另一个循环，常用于处理二维数据或生成具有行列结构的图形。


for(var i=1;i<=3;i++){
   for(var j=0;j<6;j++){
    document.write('*')
   }
   document.write('<br>')
}

实战练习：打印三角形

作业1要求使用JavaScript打印一个直角三角形，通过控制内层循环的输出次数实现逐行递增的效果。

                *
                **
                ***
                ****
                *****
                ******

实现直角三角形的代码逻辑如下：外层循环控制行数，内层循环根据当前行号打印对应数量的星号。


for(var i=1;i<=6;i++){
  for(var j=1;j<=i;j++){
   document.write("*");
  }
  document.write('<br>');

作业2要求打印等腰三角形，相比直角三角形，需要在每行星号前添加空格以形成对称形状。

          *
         ***
        *****
       *******
      *********
     ***********

实现等腰三角形的代码需计算每行的空格数与星号数，通过嵌套循环分别处理空格和星号的输出。


for(var i=1;i<=6;i++){ //行数
  //控制我们的空格数
  for(var s=i;s<6;s++){
    document.write('&nbsp;')
  }
  for(var j=1;j<=2*i-1;j++){
    document.write('*')
  }
  document.write('<br>')
}

读者可使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun对上述代码进行测试，验证运行效果。

如需深入学习JavaScript其他技巧，可参考本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》。

希望本文关于JavaScript数据类型转换与流程控制的详细解析，能对读者的程序设计工作提供实质性帮助。

JavaScript数据类型转换与流程控制详解