JavaScript中的语言结构知识点总结（附实例、图解）

目录

1. js中的语言结构
2. If的用法
3. If-esle的用法
4. If -else-if结构
5. Switch-case结构
6. If-else-if与switch-case的区别
7. for循环
8. for…in 循环
9. 三元表达式
10. 什么是表达式
11. While循环
12. break跟continue
13. 短路运算

正文

1. js中的语言结构

• 顺序结构:页面在执行js代码时，从上到下依次执行
• 分支结构：if if else
• 选择结构:代码在执行时出现分叉，需要我们做出选择，然后执行代码if else if switch for()
• 循环结构 while do-while for()

2. If的用法

If(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式
要执行的代码;
}

执行过程：

首先代码运行到if处的小括号处，判断条件是否成立，

如果条件成立，也就是返回true,则进入大括号里面，执行里面的代码，

如果判断条件不成立，也就是返回false,则跳过大括号，执行后面的代码。

If只能判断执行一种情况，如果要判断两种情况，就得用if-else结构

3. If-esle的用法

if(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式
		要执行的代码;
	}else {
		要执行的代码
			}

执行过程：

首先代码运行到if处的小括号处，判断条件是否成立，

如果条件成立，也就是返回true,则进入大括号里面，执行里面的代码，

如果判断条件不成立，也就是返回false,则执行else大括号里面的代码，

执行完毕 跳出当前结构。

4. If -else-if结构

if(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式
要执行的代码;
}else if(判断条件){
要执行的代码;
}else if(判断条件){
要执行的代码;
}else if(判断条件){
要执行的代码;
}else {
要执行的代码;
}

执行过程：

首先代码运行到if处的小括号处，判断条件是否成立，

如果条件成立，也就是返回true,则进入大括号里面，执行里面的代码，

如果条件不成立，则依次的进行else if小括号里面，判断条件是否成立，

如果成立，也就是返回true,则进入对应的else if里面的大括号，执行里面的代码，

如果所有的条件都不成立，也就是返回false，则要看是否有else,

如果有，则进入else里面，执行代码，

如果没有，则跳出当前结构。

5. switch-case结构

 Switch(值){   变量的值或是数据值
    case 值1：
要执行的代码;
break;
case 值2：
要执行的代码;
break;

case 值3：
要执行的代码;
break;

case 值4：
要执行的代码;
break;
...
default:
要执行的代码;
break;
}

执行过程：

程序执行到swtich处的小括号，先计算里面的值，拿着计算后的定值，依次和case中的值进行匹配，如果匹配成功，则执行此case里面的代码，执行完毕之后，遇到break,则跳出当前结构，如果匹配都不成功，则要看当前结构当中有没有default,如果有的话，则进入到dafault处执行里面的代码，如果没有，则跳出当前结构，执行后面的代码。

6. If-else-if与switch-case的区别

If-else-if多用于区间的判断

switch-case多用于定值的判断

7. for循环

for(表达式1;表达式2;表达式3){
             循环体
         }

例：计算1~100的和

 // 计算1-100之间所有偶数的和
    var sum = 0;
    for(var i=1;i<=100;i++){
        if(i%2==0){
            sum += i;
        }
    }
    alert(sum);

8. 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"

9. 三元表达式

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

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

10. 什么是表达式

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

11. While循环

所谓的循环就是重复的做同一件事情。

while(循环条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式
		循环体(需要重复执行的代码);
	}

执行过程：

程序运行到while处的小括号处，先判断循环条件是否成立，如果成立，也就是返回true，则进行大括号执行里面的循环体，执行完毕之后，再次回到小括号处，判断循环条件是否成立，如果成立，继续执行里面的代码，如果不成立，则跳出当前循环结构。只要是循环，总有一行码可以改变循环条件，如果没有改变循环条件的代码，这样的循环叫做死循环。

12. break跟continue

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

13. 短路运算

逻辑运算符 && ||

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

&& ： 找假

&&的两边不是boolean类型的时候，则进行短路运算，找假，也就是说，

如果第一个操作数为false的话，则直接返回第一个操作数，

如果第一个操作数为true的话，则直接返回第二个数，不管第二个数是什么。

在这里会默认做一个隐式转换，将这些值隐式转换为Boolean类型的值

|| 找真

|| 的两边不是boolean类型的时候，则进行短路运算。找零点，也就是说，

如果第一个操作数转换为对应的boolean类型为true的话，则直接返回第一个操作数，

相反，则返回第二个操作数，不管第二个操作数是什么。