JavaScript-运算符、流程控制

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

JavaScript中常用的运算符有：

  • 算数运算符
  • 递增和递减运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

一元运算符：只有一个操作数的运算符，5 + 6 是有两个操作数的运算符，是二元运算符。

1 - 运算符

1.1 算数运算符

算术运算符是算术运算使用的符号，用于执行两个变量或值的算术运算。

  • 浮点数的精度问题

    浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。

    var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001

    所以：不要直接判断两个浮点数是否相等 !

1.2 递增和递减运算符

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。

在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。

  • 前置递增运算符

使用口诀：先自加1，后返回值

var num = 10;
alert(++num + 10);   // 21
  • 后置递增运算符

使用口诀：先返回原值，后自加 1

var num = 10;
alert(10 + num++);  // 20

1.3 比较运算符

比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

  • 等号比较

== 与 === 的区别：== 只进行值的比较，=== 值和类型同时相等，则相等，如下：

var result = '55' == 55;    // true
var result = '55' === 55;   // false 值相等，类型不相等
var result = 55 === 55;     // true

1.4 逻辑运算符

逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值，后面开发中经常用于多个条件的判断。

  1. 逻辑与：表达式1 && 表达式2

两边都是 true 才返回 true，否则返回 false。

  1. 逻辑或：表达式1 || 表达式2

两边只要有一边返回true，就返回true，两边都为false，则返回false。

  1. 逻辑非：！表达式

逻辑非（!）也叫作取反符，用来取一个布尔值相反的值，如 true 的相反值是 false

短路运算：

短路运算的原理：当有多个表达式（值）时，左边的表达式值可以确定结果时，就不再继续运算右边的表达式的值。

① 逻辑与

  • 如果第1个表达式的值为真，则返回表达式2的值。
  • 如果第1个表达式的值为假，则返回表达式1的值（假），不会继续运算表达式 2 。
console.log( 123 && 456 );        // 返回表达式 2 的值：456
console.log( 0 && 456 );          // 返回表达式 1 的值 0，不会继续运算表达式 2。 
console.log( 123 && 456 && 789 ); // 返回表达式 2 的值：789

② 逻辑或

  • 如果第1个表达式的值为真，则返回表达式1的值（真），不会继续运算表达式 2 。
  • 如果第1个表达式的值为假，则返回表达式2的值。
 console.log( 123 || 456 );         // 返回表达式 1 的值：123，不会继续运算表达式 2。
 console.log( 0 ||  456 );          // 返回表达式 2 的值：456
 console.log( 123 || 456 || 789 );  // 返回表达式 1 的值：123

1.5 赋值运算符

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

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

1.6 运算符优先级

  • 小括号优先级最高
  • 一元运算符里面的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高

2 - 流程控制

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

2.1 顺序

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

2.2 分支

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。

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

① if 语句

语法结构如下：

// 条件成立执行代码，否则什么也不做
if (条件表达式) {
    // 条件成立执行的代码语句
}

// 条件成立 执行 if 里面代码，否则执行 else 里面的代码
if (条件表达式) {
    // [如果] 条件成立执行的代码
} else {
    // [否则] 执行的代码
}


// 适合于检查多重条件。
if (条件表达式1) {
    语句1；
} else if (条件表达式2)  {
    语句2；
} else if (条件表达式3)  {
   语句3；
 ....
} else {
    // 上述条件都不成立执行此处代码
}
  • 三元表达式
// 如果表达式1为 true，则返回表达式2的值，如果表达式1为 false，则返回表达式3的值，就类似于 if else 的简写
表达式1 ? 表达式2 : 表达式3;
  • 布尔类型的隐式转换

流程控制语句会把后面的值隐式转换成布尔类型：

转换成false：空字符串、0、false、null、undefined。
转换为true：非空字符串、非0数字、true、任何对象。

var message;
// 会自动把message转换成false
if (message) {     
  // todo...
}

② switch语句

switch 语句也是多分支语句，它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时，就可以使用 switch。

switch( 表达式 ) { 
    case value1:
        // 表达式 等于 value1 时要执行的代码
        break;
    case value2:
        // 表达式 等于 value2 时要执行的代码
        break;
    default:
        // 表达式 不等于任何一个 value 时要执行的代码
}
  • switch ：开关 转换 ，case ：小例子 选项
  • 关键字 switch 后面括号内可以是表达式或值，通常是一个变量
  • 关键字 case 后跟一个选项的表达式或值，后面跟一个冒号
  • switch 表达式的值会与结构中的 case 的值做比较，在比较值时使用的是全等操作符（===），因此不会发生类型转换（例如，switch语句进行比较的时候，字符串'10' 不等于数值10）
  • 如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch 语句代码执行结束
  • 如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码
    注意：执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。
  • switch 语句和 if else if 语句的区别：
    • 一般情况下，它们两个语句可以相互替换
    • switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)
    • switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。
    • 当分支比较少时，if… else语句的执行效率比 switch语句高。
    • 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

2.3 循环

在javascript中，循环语句有三种，for、while、do...while循环。

① for循环

for循环一般在循环次数确定的时候比较方便，while 和 do...while一般用来解决无法确认次数的循环。

语法结构：

for(初始化变量; 条件表达式; 操作表达式 ){
    //循环体
}
名称 作用
初始化变量 通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。
条件表达式 用于确定每一次循环是否能被执行。如果结果是 true 就继续循环，否则退出循环。
操作表达式 用来增加初始值。

执行过程：

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

例如：

//  基本写法
for (var i = 0; i < 100; i++) {
      console.log('这个人今年' + i + '岁了');
}

② 双重for循环

循环嵌套是指在一个循环语句中再定义一个循环语句的语法结构，例如在for循环语句中，可以再嵌套一个for 循环，这样的 for 循环语句我们称之为双重for循环。

双重 for 循环语法如下：

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
    for (内循环的初始; 内循环的条件; 内循环的操作表达式) {  
       需执行的代码;
   }
}
  • 内层循环可以看做外层循环的循环体语句，内层循环执行的顺序也要遵循 for 循环的执行顺序。
  • 外层循环执行一次，内层循环要执行全部次数。

例如，打印五行五列星星：

var star = '';
for (var j = 1; j <= 5; j++) {
    for (var i = 1; i <= 5; i++) {
      star += '☆'
    }
    // 每次满 5个星星 就 加一次换行
    star += '\n'
}
console.log(star);
打印结果：          
          ☆☆☆☆☆
          ☆☆☆☆☆
          ☆☆☆☆☆
          ☆☆☆☆☆
          ☆☆☆☆☆

核心逻辑：

  1. 内层循环负责一行打印五个星星
  2. 外层循环负责打印五行

③ while循环

while语句的语法结构如下：

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

执行思路：

  1. 先执行条件表达式，如果结果为 true，则执行循环体代码；如果为 false，则退出循环，执行后面代码
  2. 执行循环体代码
  3. 循环体代码执行完毕后，程序会继续判断执行条件表达式，如条件仍为true，则会继续执行循环体，直到循环条件为 false 时，整个循环过程才会结束
// 计算1-100之间所有数的和
// 初始化变量
var i = 1;
var sum = 0;
// 判断条件
while (i <= 100) {
  // 循环体
  sum += i;
  // 自增
  i++;
}
console.log(sum);

注意：使用 while 循环时一定要注意，它必须要有退出条件，否则会成为死循环

④ do-while循环

do...while循环和while循环非常像，二者经常可以相互替代，但是do...while的特点是：不管条件成不成立，都会先执行一次。

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

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

执行思路

  1. 先执行一次循环体代码
  2. 再执行条件表达式，如果结果为 true，则继续执行循环体代码，如果为 false，则退出循环，继续执行后面代码

注意：先再执行循环体，再判断，do…while循环语句，所以至少会执行一次循环体代码

⑤ continue

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

break 关键字用于立即跳出整个 for 循环（循环结束）。

例如，吃5个包子，吃到第3个发现里面有半个虫子，其余的不吃了，其代码实现如下：

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

运行结果：

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,734评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,931评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,133评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,532评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,585评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,462评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,262评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,153评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,587评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,635评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,237评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2赞 354

推荐阅读更多精彩内容