JavaScript三 - 运算符 & 流程控制 & 循环

2020-11-13  本文已影响0人  Anwfly

2.1. 解释型语言编译型语言

2.1.1 概述

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。


图片22.png

2.1.2 执行过程

图片23.png

类似于请客吃饭：

2.2. 关键字保留字

2.2.1 标识符

标识符：就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或保留字。

规范：
1.标识符中可以含有字母、数字、_、$
2.不能以数字开头
3.不能是JS中的关键字和保留字
4.采用驼峰命名法
例：xxxYyyZzz，helloWorld

2.2.2 关键字

关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。

关键字.png

2.2.3 保留字

保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。

保留字.png

注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

2.3. 运算符

2.3.1 运算符分类

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有：

2.3.2 算术运算符

算术运算符.png

2.3.3 递增和递减运算符

注意：递增和递减运算符必须和变量配合使用。

2.3.4 比较运算符

图片2.png 图片3.png

代码如下

console.log(18 == '18');//ture
console.log(18 === '18'); //false

2.3.5 逻辑运算符

图片4.png 图片5.png

两侧只要有一个true就为true，否则返回 false


图片7.png

2.3.6 赋值运算符

概念：用来把数据赋值给变量的运算符。

图片9.png

代码如下：

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

2.3.7 运算符优先级

图片10.png

2.4. 流程控制

2.4.1 流程控制概念

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解：流程控制就是来控制代码按照一定结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，代表三种代码执行的顺序。

图片11.png

2.4.2 顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，它没有特定的语法结构，程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。


图片12.png

JS 语言提供了两种分支结构语句：if 语句、switch 语句

2.4.3 分支流程控制

图片16.png

2.4.4 三元表达式

2.4.5 switch分支流程控制

注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

3.1 循环

3.1.1 for循环

  1. 执行操作表达式，此时第一轮结束。
  2. 第二轮开始，直接去执行条件表达式（不再初始化变量），如果为 true ，则去执行循环体语句，否则退出循环。
  3. 继续执行操作表达式，第二轮结束。
  4. 后续跟第二轮一致，直至条件表达式为假，结束整个 for 循环。

3.1.2 断点调试

断点调试：断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。断点调试可以帮助观察程序的运行过程

断点调试的流程：
1、浏览器中按 F12--> sources -->找到需要调试的文件-->在程序的某一行设置断点
2、Watch: 监视，通过watch可以监视变量的值的变化，非常的常用。
3、摁下F11，程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。

3.1.3 双重for循环

3.1.4 while循环

while语句的语法结构如下：

while (条件表达式) {
    // 循环体代码 
}

执行思路：

注意：

3.1.5 do while循环★★★

do... while 语句的语法结构如下：

do {
    // 循环体代码 - 条件表达式为 true 时重复执行循环体代码
} while(条件表达式);

执行思路

3.1.6 continue & break★★★★★

continue 关键字用于立即跳出本次循环，继续下一次循环（本次循环体中 continue 之后的代码就会少执行一次）。

例如，吃5个包子，第3个有虫子，就扔掉第3个，继续吃第4个第5个包子，其代码实现如下：

 for (var i = 1; i <= 5; i++) {
     if (i == 3) {
         console.log('这个包子有虫子，扔掉');
         continue; // 跳出本次循环，跳出的是第3次循环 
      }
      console.log('我正在吃第' + i + '个包子呢');
 }

break 关键字用于立即跳出整个循环（循环结束）。
例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个for 循环，跳到整个for下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
 }

3.2 代码规范

3.2.1 标识符命名规范Standard/Airbnb

3.2.2 操作符规范

// 操作符的左右两侧各保留一个空格
for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 直接退出整个 for 循环，跳到整个for循环下面的语句
   }
   console.log('我正在吃第' + i + '个包子呢');
}

3.2.3 单行注释规范

for (var i = 1; i <= 5; i++) {
   if (i == 3) {
       break; // 单行注释前面注意有个空格
   }
   console.log('我正在吃第' + i + '个包子呢');
}

3.2.4 其它规范

关键词、操作符之间后加空格


图片3.png
上一篇下一篇

猜你喜欢

热点阅读