JS 学习笔记 | 运算符、分支语句和循环语句

一、运算符

1.基本运算符

  • typeof

    可以用于获取当前变量的类型

  • =

    赋值运算符

  • ==

    双等号可以用于判断等号左右两边的值是否相等(不判断类型),相等返回 true,否则返回 false

  • ===

    三等号的作用和双等号相同,但是三等号必须要求等号两边的值全等才会返回 true

2.算数运算符

  • +: 将符号两边的值进行相加操作,也可以用于字符串的拼接,当左右两端有一端是字符串时会将值进行拼接,例如:
    var num1 = "5";
    var num2 = 3;
    var res = num1 + num2;
    console.log(res);   // 53
    console.log(typeof res);    // string
    
  • -:将符号两边的值进行相减操作
  • *:将符号两边的值做乘法运算
  • /:将符号两边的值做除法运算
  • %:将符号两边的值做取余运算,例如:5 % 3 = 2.
  • ++:自增运算符,例如:
    var num = 5;
    num++;  // 6
    
  • --:自减运算符,例如:
    var num = 5;
    num--;  // 4
    

3.赋值运算符

  • +=:举例:x += y; 和 x = x + y;是等价的。
  • -=:举例:x -= y; 和 x = x - y;是等价的。
  • *=:举例:x *= y; 和 x = x * y;是等价的。
  • /=:举例:x /= y; 和 x = x / y;是等价的。
  • %=:举例:x %= y; 和 x = x % y;是等价的。

4.比较运算符

比较运算符用于比较两个值,然后返回一个布尔值,表示是否满足条件。JavaScript提供了8个比较运算符:

  • x == y 判断是否相等(忽略变量类型)
  • x === y 判断是否相等(计算变量类型)
  • x != y 判断是否不等(忽略变量类型)
  • x !== y 判断是否不等(计算变量类型)
  • x < y 判断 x 是否小于 y
  • x > y 判断 x 是否大于 y
  • x <= y 判断 x 是否小于等于 y
  • x >= y 判断 x 是否大于等于 y

ps :undefinednull 与自身严格相等,例如:

var m;
var n;
console.log(m === n);   // true

注意:如果整数和其它类型进行比较,那么会先将其它类型转换为整数再进行比较。比如,布尔类型中的 false 会被转换成0,true 会被转换为1。

5.逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。常见的布尔运算符有以下三种:

  • 非运算符( !)
    表达式的值为假的时候,结果为真。
  • 与运算符(&&)
    运算符两边的表达式必须都为 true 时才会为 true,否则为 false
  • 或运算符(||)
    运算符两边的表达式必须都为 false 时才会为 false,否则为 true

给定 x = 6, y = 3 下表解释了逻辑运算符


在这里插入图片描述

6. 三目运算符

三目运算符用 ? 和 : 分割表达式,如果第一个表达式的值为 true,则会返回 : 前面的值,否则返回后面的值。

语法:表达式1 ? 值1 : 值2;

例如:

var age = 21;
var res = age > 18 ? "成年" : "未成年";
console.log(res);   // 成年

二、分支语句

顺序结构的程序虽然能解决计算、输出等问题,但不能做判断再选择。对于需要先判断再选择的情况可以选择分支结构。
分支结构的执行是依据一定的条件选择执行路径,而不是按照语句出现的物理顺序。
分支结构的程序设计方法的关键在于构造合适的分支条件和分析程序流程,根据不同的分支流程选择适当的分支语句。

1.if 条件语句

先判断一个表达式的布尔值,然后根据布尔值的真伪,来选择对应的操作。

语法:

if (条件) {
    执行逻辑
}

2.if-else 语句

if-else 可以被当作 if 语句的升级版,如果结果符合执行语句1,否则执行语句2.
语法:

if (条件) {
    语句1;
} else {
    语句2;
}

3.if-else if-else 语句

当我们需要对一个变量判断多次的时候,我们就可以使用此结构进行判断。可以认为 if-else if-else 结构是多个 if-else 结构的嵌套。
语法:

if (条件1) {
    语句1;
} else if (条件2) {
    语句2;
} else {
    语句3;
}

注意else 语句不能单独存在,他总是向上匹配离它最近的 if 语句。

4.switch 语句

switch 语句和 if 语句的含义基本相同,其实 switch 更像 if-else if-else 语句。
语法:

switch (表达式) {
    case 结果1: 
        语句1;
        break;
    case 结果2:
        语句2;
        break;
    default:
        默认执行的语句;
        break;
}

上面语句的含义是:
判断表达式的值是否与结果1相同,如果相同则执行结果1下的逻辑,如果不匹配就查看是否匹配结果2,如果匹配则执行,否则再去查看别的 case,如果所有 case 都不满足就执行 default 块下的逻辑。

三、循环语句

在不少实际问题中有许多规律性的重复操作,因此在程序中就需要重复执行某些语句。
一组被重复执行的语句被称为循环体
能够决定循环是否可以继续下去的语句叫做终止条件
循环语句是由循环体和循环终止条件两部分组成

在这里插入图片描述

1.while 循环

while 循环包含一个循环条件和一段代码块,事先不知道要执行多少次,只要条件为真,就不断执行代码块,知道条件为假为止。
语法:

while (条件) {
    表达式;
}

例如:

var i = 0;
while (i < 100) {
    console.log("i 当前的值为:" + i);
    i++;
}

如果 i 小于 100 就会一直打印 i 当前的值,知道 i = 100 时条件不符合,就会停止掉。
注意:如果循环的条件不发生改变就会一直执行循环体,这样有可能导致程序崩溃。

2.do-while 循环

do-while 循环和 while 循环结构基本形同,唯一不同的是 do-while 循环会先将循环体执行一遍再进行判断。

在这里插入图片描述

语法:

do {
    执行的语句;
}  while (条件);

例如:

var num = 1;
do {
    console.log("num 的值是:" + num);
    num++;
} while (num <= 10);

3.for 循环

for 循环是循环中使用较多的一种循环结构。
for 循环分为两种,一种叫做标准 for 循环,一种叫做for-in循环。而我们通常意义上的 for 循环指的是标准的 for 循环。

在这里插入图片描述

3.1 for 循环

语法:

for (表达式1; 表达式2; 表达式3) {
    执行的逻辑;
}

表达式1用于初始化变量
表达式2用于做循环条件的判断
表达式3用于给变量做改变

例如:

for (var i = 0; i < 10; i++) {
    console.log("i 的值为:" + i);
}

for 循环执行顺序
表达式1只会执行1次,接着执行表达式2,表达式2执行完成之后会进入循环体,循环体执行完成之后会将初始值进行修改,接着再进行判断如果满足就进入循环体再执行,不满足就结束循环。

3.2 for-in 循环

for-in 循环是一种快速浏览容器内的元素的手段,for-in 循环最大的特点是不管容器中有多少个元素都可以遍历一遍。
语法:

for (var 变量名 in 容器) {
    循环体;
}

例如:

var arr = [4, 53, 32, 56, 14];
for (var num in arr) {
     console.log(arr[num]);
}

上述代码的含义是,创建局部变量 num,然后从数组中取出元素下标赋值给 num,并且打印这个值。

4. break 和 continue

break 语句和 continue 语句都具有跳转作用,可以让代码不按原有的顺序执行,

break:用于跳出循环体,终止循环。
continue:用于结束本次循环,开始新一轮的循环。

4.1 演示 break

当 i === 10 的时候结束循环

for (var i = 0; i < 100; i++) {
 if (i === 10) {
        break;
    }
    console.log(i);
}

4.2 演示 continue

在 i === 10 的时候结束本次循环

for (var i = 0; i < 100; i++) {
    if (i === 10) {
        continue;
    }
    console.log(i);
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348