javascript 基本结构解释以及理解

2023-12-20 19:50:25

JavaScript简介

JavaScript 最开始是专门为浏览器设计的一门语言，但是现在也被用于很多其他的环境。如今，JavaScript 已经成为了与
HTML/CSS 完全集成的，使用最广泛的浏览器语言。有很多其他的语言可以被“编译”成
JavaScript，这些语言还提供了更多的功能。建议最好了解一下这些语言，至少在掌握了 JavaScript 之后大致的了解一下。

编程的三大结构

（1）顺序结构
（2）选择结构
（3）循环结构

1.顺序结构

顺序结构的程序设计是最简单的，只要按照解决问题的顺序写出相应的语句就行，它的执行顺序是自上而下，依次执行。不过大多数情况下顺序结构都是作为程序的一部分，与其它结构一起构成一个复杂的程序，例如分支结构中的复合语句、循环结构中的循环体等。

2.选择结构

选择结构用于判断给定的条件，根据判断的结果判断某些条件，根据判断的结果来控制程序的流程。选择结构也称分支结构，就是让程序“拐弯”，有选择性的执行代码；换句话说，可以跳过没用的代码，只执行有用的代码。

程序按照某个条件执行（出口只有一个）。

（1） if 选择结构

执行逻辑：对条件进行判断，如果条件返回值为true (满足条件)则执行。
if 语句：只有当指定条件为true (满足条件)时，该语句才会执行代码，在条件为false时执行其他代码。

① if 单分支

语法格式：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    if (条件为true){
        满足条件需要执行的代码
    }
    注意：
    （1）括号内的条件为true时，进入大括号里执行代码；
    （2）小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型。
    // 例如：判断3是否小于6，如果为真就输出"这是真的" 。
    if (3 < 6) {
        alert('这是真的');
    }
</script>
</body>
</html>

② if 双分支

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    语法格式：
		if（条件）{
        满足条件要执行的代码
    } else {
        不满足条件执行的代码
    }
    注意：
    （1）双分支语句是两个互斥条件(两个条件一定会满足一个，不会同时满足，也不会同时不满足);
     （2）if 大括号代码 和 else大括号代码 一定会执行一个,不会同时执行，也不会同时不执行。
    // 例如：输入一个年份，判断输入的年份是闰年还是平年。
    let year = +prompt('请输入年份：');
    if (year % 4 === 0 && year % 100 === 0 || year % 400 === 0) {
        alert(`${year}年是闰年`);
    }
    else {
        alert(`${year}年是平年`);
    }
    

</script>
</body>
</html>

③ 多个 if 语句

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    语法格式：

     if(条件1){
         需要执行的代码
     }
    if(条件2){
        需要执行的代码
    }
    if(条件3){
        需要执行的代码
    }

    注意：
    （1）所有的条件都会进行判断，无论是否满足条件都会向下执行，直到程序结束；
    （2）由于if都会执行一遍，则可能会同一个需要判断的事件，会进入2个if语句中，出现错误。
    （3）这个语句并不常用，了解下就行。


    // 例如：输入一个数字判断是否满足条件输出
    let a = 12;
    if (a > 10) {
        document.write(`a大于10`)
    }
    if (a > 5) {
        document.write(`a大于5`)
    }
</script>
</body>
</html>

④ 多分支 else if

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    语法格式：

    if(条件1){
        条件1成立时需要执行的代码
    }else if(条件2){
        条件2成立时需要执行的代码
    }else if(条件3){
        条件3成立时需要执行的代码
    }
    .....
    else{
        如果前面所有条件都不满足，则执行else代码
    }

    注意：
 (1) 多分支所有的大括号代码最多只会执行一个，只有当前面的条件不满足，才会进入后面的条件判断;
    (2) 多分支一定要以if开头，后面else if可以多个，结尾else可以省略。


    //例如：根据输入不同时间，输出不同的问候语。
    let time = +prompt('请输入时间：');
    if (time > 0 && time <= 12) {
        document.write('上午好');
    } else if (time > 12 && time <= 18) {
        document.write('下午好');
    } else if (time > 18 && time <= 20) {
        document.write('晚上好');
    } else {
        document.write('夜深了');
    }
</script>
</body>
</html>

④ 嵌套if

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    语法格式：
	if （表达式）
　　　{
       if （表达式）
　　　　　　　语句1;
   else if (表达式）
       语句2;
   else if (表达式）
       语句3;
   else
       语句4;
   }
    else if （表达式）
　　　{
       if （表达式）
　　　　　　　语句1;
   else if (表达式）
       语句2;
   else if (表达式）
       语句3;
   }
    else
    {
        if （表达式）
　　　　　　　语句1;
    else if (表达式）
        语句2;
    else if (表达式）
        语句3;
    else
        语句4;
    }

    注意：
    （1）只有一条语句时if后面的大括号可以省略；
    （2） if else是一个整体，当 if else后面的大括号被省略时，else会自动和距离最近的一个 if 匹配；
（3） 分号 ; 也是一条语句, 空语句;
（4） 非Boolean类型的值,会先转换为Boolean类型后再判断。


    // 例如：判断成绩是否达到三好学生标准。
    let chinese = +prompt(`请输入语文成绩：`);
    if (chinese == 100) {
        let math = +prompt(`请输入数学成绩：`);
        if (math == 100) {
            let english = +prompt(`请输入英语成绩：`);
            if (english == 100) {
                alert(`恭喜你获得三好学生称号`);
            }
            else {
                alert(`不是三好学生`);
            }
        }
        else {
            alert(`不是三好学生`);
        }
    }
    else {
        alert(`不是三好学生`);
    }

</script>
</body>
</html>

（2）switch 选择结构

原理：	注意：
① 每计算一次 switch 表达式，会把得到的值与每个 case 的值进行对比，如果匹配就会执行相关的代码。	① switch case语句一般用于等值判断,不适合于区间判断。
② break语句则会跳出switch，一旦遇到它，那么它后面的语句都不会执行。	② switch case一般需要配合break关键字使用没有break会造成case穿透。
③ break语句可以节省一些时间，如果没有break语句则会一直执行到最后。	③ case有一个满足条件，后面的将不再判断，直接输出，直到遇到break。
④ default ：不存在 case 匹配时所执行的代码。	④ default可以放任意地方，但是一般还是放在switch末尾。
	⑤ case判断相等，是全等比较。

语法格式：

switch(表达式) {
     case n:
        符合条件执行语句
        break;
     case n:
        符合条件执行语句
        break;
     default:
        默认代码块(都不能匹配以上条件执行的语句)
	  } 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    //例如：简单的计算器。
    let num1 = +prompt(`请输入第一个数：`);
    let num2 = +prompt(`请输入第二个数：`);
    let count = prompt(`请输入运算符号：`);
    switch (count) {
        case '+':
            alert(`输出结果为：${num1+num2}`);
            break;
        case '-':
            alert(`输出结果为：${num1-num2}`);
            break;
        case '*':
            alert(`输出结果为：${num1*num2}`);
            break;
        case '/':
            alert(`输出结果为：${num1/num2}`);
            break;
        default:
            alert(`输入有误`);
    }
</script>
</body>
</html>

3.循环结构

循环结构是指在程序中需要反复执行某个功能而设置的一种程序结构。它由循环体中的条件，判断继续执行某个功能还是退出循环。根据判断条件,循环结构又可细分为以下两种形式：先判断后执行的循环结构和先执行后判断的循环结构。循环结构就是让程序“杀个回马枪”，不断地重复执行同一段代码。

循环需要具备的三要素：
（1）变量起始值
（2）终止条件（没有终止条件，循环会一直执行，造成死循环)
（3）变量变化量（用自增或者自减)

循环语句

（1）while 循环

语法格式：

while(表达式){
	循环语句
 }

注意：
1、先判断表达式，表达式成立执行循环语句。
2、循环条件中使用的变量（循环变量）需要经过初始化。
3、循环体中，应有结束循环的条件，否则会造成死循环。
4、循环体中，可以写若干JS代码，包括if，也可以再套一个循环。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    // 例如：求1-100的和。
    let i = 1;
    let sum = 0;
    while (i <= 100) {
        sum += i;
        i++;
    }
    document.write(sum);
</script>
</body>
</html>

（2）do-while 循环

语法格式：

do{
//循环操作
}while(条件判断);

注意：
（1）特点：先执行，后判断；至少执行1次;
（2）当不确定要执行循环主体多少次时，可以使用do-while循环语句;
（3）由于while条件是在循环末尾求值的，因此循环体将至少执行一次。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    // 例如：求1-100之间的和。
    let sum = 0;
    let i = 1;
    do {
        sum += i;
        i++;
    } while (i <= 100);
    //条件表达式也可以写成(i<101)
    document.write("1~100的和为:" + sum);

</script>
</body>
</html>

（3）for 循环

语法格式：

for (语句 1; 语句 2; 语句 3) {
 			要执行的代码
	}

注意：
（1）语句1在循环开始之前执行;
（2）语句2判断循环的条件;
（3）语句3在循环每执行一次后执行。
（4）break语句可以中断循环,也就是遇到它后,后面的语句以及循环将不再执行。
（5）continue语句是跳过本次循环,也就是本次循环后面的语句不会执行,然而循环不会受影响,不会被中断。

执行顺序：

 1. 初条件;
  2. 条件判断;
  3. 条件为真，执行循环操作;
  4. 条件改变;
  5. 重复2,3,4直到条件为假时，结束循环。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    // 例如：打印100–200之间所有能被3或者7整除的数。
    for (let i = 100; i <= 200; i++) {
        if (i % 3 == 0 || i % 7 == 0) {
            console.log(i);
        }
    }

</script>
</body>
</html>

（4）嵌套循环案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script type="text/javascript">
    （1）假如每天记住5个单词，3天后一共能记住多少单词?
    for (let i = 1; i < 4; i++) {
        document.write(`第${i}天<br>`)
        for (let j = 1; j < 6; j++) {
            document.write(`记住${j}个单词<br>`)
        }
    }

</script>
</body>
</html>

for…in 循环

for…in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
语法

For(varizble in object){statement}

variable
在每次迭代时，variable会被赋值为不同的属性名。
object
非Symbol类型的可枚举属性被迭代的对象。
数组迭代和 for…in

提示：for…in不应该用于迭代一个 Array，其中索引顺序很重要。
for … in是为遍历对象属性而构建的，不建议与数组一起使用，数组可以用Array.prototype.forEach()和for … of，那么for … in的到底有什么用呢？

它最常用的地方应该是用于调试，可以更方便的去检查对象属性（通过输出到控制台或其他方式）。尽管对于处理存储数据，数组更实用些，但是你在处理有key-value数据（比如属性用作“键”），需要检查其中的任何键是否为某值的情况时，还是推荐用for … in。

例：

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
console.log("obj." + prop + " = " + obj[prop]);
}
// Output:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

三元表达式

三元表达式的运算规则，如果第一个表达式成立的话，也就是返回True，则第二个表达式就是整个表达式的值，如果第一个表达式的结果不成立，也就是返回false,则第三个表达式就是整个表达式的值

var result =  str =="学习"?"前端":"后端";console.log(result);

什么是表达式

凡是有值的式子，都可以看成是一个表达式，比如： “abc”，20，30>50 ,20+50

break跟continue

在执行循环时，只要遇到break就直接退出循环
在执行循环时，continue是跳出本次循环，进入下一次循环

逻辑运算符 && ||

如果逻辑运算符两边是boolean类型的时候，进行的是逻辑运算，如果两边不是boolean类型的时候，则进行短路运算。

&& ：找假

&&的两边不是boolean类型的时候，则进行短路运算，找假，也就是说，如果第一个操作数为false的话，则直接返回第一个操作数，
如果第一个操作数为true的话，则直接返回第二个数，不管第二个数是什么。
在这里会默认做一个隐式转换，将这些值隐式转换为Boolean类型的值

文章来源:https://blog.csdn.net/tdx03/article/details/135109196
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！

javascript 基本结构 解释以及理解

for…in 循环

三元表达式

break跟continue

逻辑运算符 && ||

javascript 基本结构解释以及理解