博客

JavaScript旅途之运算符和判断语句-详细用法（笔记）

  • Post author:
  • Post category:java




第二章



运算符


运算符(operator)

也被称为操作符，适用于实现赋值、比较和执行算数运算等功能符号.




Js里的运算符有:

  • 算数运算符

  • 递增和递减运算符

  • 比较运算符

  • 逻辑运算符

  • 赋值运算符



算数运算符

  1. 算数运算符使用的符号，用于执行两个变量或值的算数
运算符 描述 示例
+ 加 1 + 1 = 2
– 减 1 – 1 = 0
* 乘 1 * 1 = 1
/ 除 10 / 20 = 0.5
% 取模（取余） 9 % 2 = 1 
//练习
<script>
    console.log(1+1);//2
    console.log(1-1);//0
    console.log(1*1);//1
    console.log(10/20);//0.5
    console.log(9%2);//1
    console.log(0.1+0.2);//0.30000000000000004
    console.log(0.1+0.2==0.3);//false
    //所以对比出来的结果是false,0.1+0.2的结果并不是0.3
</script>



知识扩展

浮点数值的精度问题
浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数，而且浮点数值的精确度会随着计算的进行而降低,所以永远不要测试某个特定的浮点数值



表达式和返回值


表达式是由操作符和操作数组成的

，而表达式的值则是运算后得到的值,

称为返回值

.简单来说就是由数字,字符串或者变量等组成的简单表达式.



递增和递减运算符

  • 概述

    如果需要反复给数字变量添加或减去1,可以使用

    递增(++)和递减(–)

    运算符来完成.

    递增运算符由

    两个加号(++)表示

    ,递减运算符由

    两个减号(–)表示.


    递增运算符和递减运算符都是单目运算符,即只能操作一个值

    递增运算符和递减运算符可以放在包含它们的

    语句之前(前置递增/递减运算符)或之后(后置递增/递减运算符)




前置递增递减

//++num前置递增,自加1,与表达式num+1类似,++num写起来方便些
var num = 1;
nmu = ++num;//再加1
console.log(num);//2
var a = 1;
console.log(++a + num);//a先加1,再加num
//小结:先自加(减),后返回值




后置递增递减

//后置递减
var num = 1;//定义一个变量
var num1 = num++ + 1;//先将num的值赋值给num1,然后num的值加1
console.log(num);//2
console.log(num1);//2 首先num把自己的值返回1,然后num的值加1



总结

自增（++）和自减（–）运算符在编程中经常使用，它们分为前置和后置两种形式。下面是一个简单的口诀

前置加加，先加后用；后置加加，先用后加。

前置减减，先减后用；后置减减，先用后减。


  1. 前置自增（++variable）

    ：首先将变量的值增加 1，然后返回新值。

  2. 后置自增（variable++）

    ：首先返回变量的值，然后将变量的值增加 1。

  3. 前置自减（–variable）

    ：首先将变量的值减少 1，然后返回新值。

  4. 后置自减（variable–）

    ：首先返回变量的值，然后将变量的值减少 1。

举个例子： 

let num = 1;

let preIncrement = ++num; // num = 2, preIncrement = 2
let postIncrement = num++; // num = 3, postIncrement = 2

let preDecrement = --num; // num = 2, preDecrement = 2
let postDecrement = num--; // num = 1, postDecrement = 2

以下是三道关于自增和自减运算符的练习题。


练习 1：
 

let a = 5;
let b = a++ * 2;

在执行完这段代码后，

a

和

b

的值分别是多少？


练习 2：
 

let x = 10;
let y = --x + 3;

在执行完这段代码后，

x

和

y

的值分别是多少？


练习 3：
 

let m = 3;
let n = 4;
let result = ++m + n--;

在执行完这段代码后，

m

、

n

和

result

的值分别是多少？



递增和递减运算符

  • 概念:比较运算符用于比较两个值，并返回一个布尔值，比较运算符包括小于<,大于>,小于等于<=,大于等于>=,等于==,不等于!=,全等===,不全等!==
比较运算符 符号 示例 结果
等于
==
5 == 5
true
不等于
!=
5 != 3
true
大于
>
5 > 3
true
小于
<
5 < 3
false
大于等于
>=
5 >= 5
true
小于等于
<=
5 <= 3
false
严格等于
===
5 === '5'
false
严格不等于
!==
5 !== '5'
true

比较规则

1.如果两个操作数都是数值，则执行数值比较

2.如果两个操作数都是字符串，则比较两个字符串对应的字符编码值

3.如果一个操作数是数值，则将另一个操作数转换为数值，然后执行数值比较

4.如果一个操作数是对象，则调用对象的valueOf()方法，用得到的结果按照前面的规则执行比较，如果对象没有valueOf()方法，则调用toString()方法，用得到的结果按照前面的规则执行比较

5.如果一个操作数是布尔值，则将其转换为数值，然后执行比较

6.如果一个操作数是null或undefined，则将其转换为0，然后执行比较

7.如果一个操作数是NaN，则返回false

8.如果两个操作数都是对象，则比较两个对象的引用

//比较规则如上,操作数会字形转换
console.log(1<2);//true
console.log(1>2);//false
console.log(1<=2);//true
console.log(1>=2);//false
console.log(1==2);//false
console.log(1!=2);//true
console.log(1===2);//false
console.log(1!==2);//true
console.log(1===1);//true 
console.log(1==='1');//false 检查类型和值是否相等
console.log('小明'=='小红');//false
console.log('小红'=='小红');//true
console.log(1>"2");//false
console.log(1<true);//false
console.log(1>false);//true
console.log(1<false);//false



=的小结

运算符 符号 描述 示例 结果
赋值 = 将右操作数的值赋给左操作数 var a = 5 将 5 赋值给 a
等于 == 检查两个操作数是否相等，如果相等则返回 true 5 == ‘5’ true
严格等于 === 检查两个操作数是否完全相等（类型和值），如果相等则返回 true 5 === ‘5’ false



逻辑运算符

  • 概念

    是用来判断两个表达式的逻辑关系，逻辑运算符包括与&&,或||,非!,三种逻辑运算符的运算结果都是布尔值，逻辑运算符的运算规则如下：

    运算符 描述 示例 结果
    && 逻辑与,简称”与” and 5 > 3 && 2 < 4 true
    || 逻辑或,简称”或” or 5 > 3 || 2 > 4 true
    ! 逻辑非,简称”非” not !(5 > 3) false 
    console.log(3>6 && 2<4);//false 两个都为true才为true
console.log(3>6 || 2<4);//true 只要有一个为true就为true
console.log(!(3>6));//true 取反
console.log(!(3<6 && 2<4));//true取反为false
console.log(!(3>6 || 2>4));//false取反为true



位运算符(目前了解即可)

  • 概念

    位运算符是将数字转换为32位整数，然后对整数进行运算，最后将结果转换为数字，位运算符包括按位与&,按位或|,按位异或^,按位非~,左移<<,右移>>,无符号右移>>>，位运算符的运算规则如下：

    运算符 描述 示例 结果
    & 按位与 5 & 1 1
    | 按位或 5 | 1 5
    ^ 按位异或 5 ^ 1 4
    ~ 按位非 ~5 -6
    << 左移 5 << 1 10
    >> 右移 5 >> 1 2
    >>> 无符号右移 5 >>> 1 2 
    console.log(5 & 1);//1
console.log(5 | 1);//5
console.log(5 ^ 1);//4
console.log(~5);//-



逻辑中断逻辑与和逻辑或

  • 短路运算(逻辑中断)

短路运算的原理:

当有多个表达式(值)时,会从左到右依次判断,如果能够判断出结果,则不再继续判断,直接返回结果,这种现象称为短路运算(逻辑中断)

  • 逻辑与&& 
//逻辑与短路运算
//如果表达式1的值为true，则返回表达式2的值，如果表达式1的值为false，则返回表达式1的值
console.log(1&&2);//2 1为true,返回2
console.log(0&&2);//0 0为false,返回0
console.log(1&&0);//0 0为false,返回0
console.log(123&&456);//456 456为true,返回456
console.log(''&&456);//'' ''为false,返回''
  • 逻辑或|| 
//逻辑或短路运算
//如果表达式1的值为true，则返回表达式1的值，如果表达式1的值为false，则返回表达式2的值
console.log(1||2);//1 1为true,返回1
console.log(0||2);//2 0为false,返回2
console.log(1||0);//1 1为true,返回1
console.log(123||456);//123 123为true,返回123
console.log(''||456);//456 ''为false,返回456
//小练
var a = 1;
console.log(123 || a++);//123
console.log(a);//1



赋值运算符

  • 概念

赋值运算符是将右边的值赋值给左边的变量，赋值运算符包括=,+=,-=,*=,/=,%=,<<=,>>=,>>>=,&=,|=,^=，赋值运算符的运算规则如下：

运算符 描述 示例 结果
= 赋值 var a = 1 1
+= 加后赋值 var a = 1;a += 2 3
-= 减后赋值 var a = 1;a -= 2 -1
*= 乘后赋值 var a = 1;a *= 2 2
/= 除后赋值 var a = 1;a /= 2 0.5
%= 取模后赋值 var a = 1;a %= 2 1
<<= 左移后赋值(了解即可) var a = 1;a <<= 2 4
>>= 无符号右移后赋值(了解即可) var a = 1;a >>>= 2 0
&= 按位与后赋值(了解即可) var a = 1;a &= 2 0 
      var a = 1;
      a += 2;
      console.log(a);//3
      a -= 2;
      console.log(a);//1
      a *= 2;
      console.log(a);//2
      a /= 2;
      console.log(a);//1
      a %= 2;
      console.log(a);//1
      a <<= 2;
      console.log(a);//4 
      a >>>= 2;
      console.log(a);//1 
      a &= 2;
      console.log(a);//0



运算符优先级

  • 概念

    运算符优先级是指多个运算符同时出现时，先执行哪个运算符，运算符优先级的规则如下：

    优先级 运算符 顺序
    1 括号 () 从左到右
    2 一元运算符 ++ — ！
    3 算数运算符 先* / %后+ –
    4 关系运算符 >= > < <=
    5 相等运算符 == != === !==
    6 逻辑运算符 先&& 后||
    7 赋值运算符 =
    8 逗号运算符 ,

  • 一元运算符逻辑非优先级比较高

  • 逻辑与比逻辑或优先级高



流程控制分支结构



流程控制

  • 概念

    流程控制是指程序的执行顺序，流程控制分为顺序结构、分支结构、循环结构，顺序结构是指程序按照代码的先后顺序执行，分支结构是指程序按照条件的不同执行不同的代码，循环结构是指程序按照条件的不同重复执行相同的代码。

  • 分类

    流程控制分为顺序结构、分支结构、循环结构，顺序结构是指程序按照代码的先后顺序执行，分支结构是指程序按照条件的不同执行不同的代码，循环结构是指程序按照条件的不同重复执行相同的代码。



顺序结构

  • 概念

    顺序结构是指程序按照代码的先后顺序执行，顺序结构是程序的默认结构，不需要任何关键字。



分支结构

  • 概念

    分支结构是指程序按照条件的不同执行不同的代码，分支结构分为单分支结构和双分支结构，单分支结构是指程序按照条件的不同执行不同的代码，双分支结构是指程序按照条件的不同执行不同的代码，分支结构的关键字为if、else、switch。


1.if语句(单分支语句)

  • 概念

    if语句是指程序按照条件的不同执行不同的代码，if语句的语法如下： 

    if(条件){
  执行语句
}

    执行思路：如果条件为true则执行if语句中的代码，如果条件为false则不执行if语句中的代码。

  • 示例 

      var a = 1;
  if(a == 1){
    console.log("a等于1");
  }

  • 注意

if语句的条件为布尔值，如果条件为true则执行if语句中的代码，如果条件为false则不执行if语句中的代码，if语句中的代码只有一行时可以省略大括号，但是不建议省略大括号，因为省略大括号会造成代码的可读性差，容易出错。 

//练习:弹出输入框，输入一个数字，如果数字大于10则弹出“数字大于10”，如果数字小于10则弹出“数字小于10”，如果数字等于10则弹出“数字等于10”。
var a = prompt("请输入一个数字");
if(a>10){
    alert("大于10");
}if(a<10){
    alert("小于10");
}
if(a==10){
    alert("等于10");
}


2.if…else语句(双分支语句)

  • 概念

    if…else语句是指程序按照条件的不同执行不同的代码，if…else语句的语法如下： 

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

    执行思路：如果条件为true则执行if语句中的代码，如果条件为false则执行else语句中的代码。

  • 示例 

      var a = 1;
  if(a == 1){
    console.log("a等于1");
  }else{
    console.log("a不等于1");
  }

  • 注意

if…else语句的条件为布尔值，如果条件为true则执行if语句中的代码，如果条件为false则执行else语句中的代码，if…else语句中的代码只有一行时可以省略大括号，但是不建议省略大括号，因为省略大括号会造成代码的可读性差，容易出错。 

//练习:弹出输入框，输入一个数字，如果数字大于10则弹出“数字大于10”，如果数字小于10则弹出“数字小于10”。

var a = prompt("请输入一个数字");
if(a>10){
    alert("大于10");
}else{
    alert("小于10");
}
  • 练习 
var a = prompt("请输入年份");
if (a % 4 == 0 && a % 100 != 0 || a % 400 == 0){
    alert("闰年");
}else{
    alert("平年");
}


3.if…else if…else语句(多分支语句)

  • 概念

    if…else if…else语句是指程序按照条件的不同执行不同的代码，if…else if…else语句的语法如下： 

    if(条件1){
  执行语句1
}else if(条件2){
  执行语句2
}else if(条件3){
  执行语句3
}else{
  执行语句4
}

    执行思路：如果条件1为true则执行if语句中的代码，如果条件1为false则判断条件2，如果条件2为true则执行else if语句中的代码，如果条件2为false则判断条件3，如果条件3为true则执行else if语句中的代码，如果条件3为false则执行else语句中的代码。

  • 示例 

      var a = 1;
  if(a == 1){
    console.log("a等于1");
  }else if(a == 2){
    console.log("a等于2");
  }else if(a == 3){
    console.log("a等于3");
  }else{
    console.log("a不等于1、2、3");
  }

  • 注意

if…else if…else语句的条件为布尔值，如果条件1为true则执行if语句中的代码，如果条件1为false则判断条件2，如果条件2为true则执行else if语句中的代码，如果条件2为false则判断条件3，如果条件3为true则执行else if语句中的代码，如果条件3为false则执行else语句中的代码，if…else if…else语句中的代码只有一行时可以省略大括号，但是不建议省略大括号，因为省略大括号会造成代码的可读性差，容易出错。 

    //练习：接收用户输入的分数，根据分数给出到对应的等级，分别是：90以上为A，80-89为B，70-79为C，60-69为D，60以下为不及格。
var c = prompt('请输入成绩');
if(c>=90){
    alert("A");
}else if(c>=80&&c<90){
    alert("B");
}else if(c>=70&&c<80){
    alert("C");
}
else if(c>=60&&c<70){
    alert("D");
}
else{
    alert("不及格");
}



三元表达式

  • 概念

    三元表达式是由三个表达式组成的运算符，三元表达式的运算规则如下：

    运算符 描述 示例 结果
    ? 三元表达式 5 > 3 ? 1 : 0 1 
    //语法:条件表达式 ? 表达式1 : 表达式2
//根据条件表达式的结果,来决定返回表达式1的值还是表达式2的值
console.log(5 > 3 ? 1 : 0);//1
console.log(5 < 3 ? 1 : 0);//0


//练习：用户输入数值，如果数值小于10，则在前面补0，否则不补0
  var a = prompt("请输入一个数值");
  a < 10 ? a = "0" + a : a = a;
  alert(a);
  console.log(a < 10 ? '0'+ a : '大于10了' );



switch语句

  • 概念

switch语句是指程序按照条件的不同执行不同的代码，switch语句的语法如下： 

  switch(条件){
    case 值1:
      执行语句1
      break;
    case 值2:
      执行语句2
      break;
    case 值3:
      执行语句3
      break;
    default:
      执行语句4
  }

执行思路：如果条件等于值1则执行case值1中的代码，如果条件等于值2则执行case值2中的代码，如果条件等于值3则执行case值3中的代码，如果条件不等于值1、值2、值3则执行default中的代码。

  • 示例 

      var a = prompt("请输入一个数字");
  a = parseInt(a);//将字符串转换为数字
  switch(a){
    case 1:
      console.log("a等于1");
      break;
    case 2:
      console.log("a等于2");
      break;
    case 3:
      console.log("a等于3");
      break;
    default:
      console.log("a不等于1、2、3");
  }

  • 注意

switch语句中的条件为数值，数据类型必须相同且每一次判断时都要加上break，否则会造成程序的错误，switch语句中的代码只有一行时可以省略大括号，但是不建议省略大括号，因为省略大括号会造成代码的可读性差，容易出错。

//练习 

    var a = prompt("请输入一个水果");
    switch(a){
      case "苹果":
        alert("苹果");
        console.log("苹果");
        break;
      case "香蕉":
        alert("香蕉");
        console.log("香蕉");
        break;
      case "橘子":
        alert("橘子");
        console.log("橘子");
        break;
      default:
        alert("不是水果");
        console.log("不是水果");
    }



ifelseif和switch区别

  • ifelseif和switch都是多分支语句，都可以根据条件的不同执行不同的代码，但是ifelseif和switch的区别如下：

    1. if-else if 语句适合判断连续范围的条件,switch-case 适合判断离散的条件。

例如: 

// if-else if 适用
if (age > 0 && age < 18) {
    // ...
} else if (age >= 18 && age < 60) {
    // ...
} else {
    // ... 
}

// switch-case 适用  
switch (color) {
  case "red": 
    // ... 
    break;
  case "blue":
    // ...
    break;
  default:
    // ...
}
  1. if-else if 语句可以判断复杂的逻辑条件,switch-case 只能判断是否相等。

例如: 

// if-else if 可以判断
if (age > 0 && age < 18) {
  // ...
}  

// switch-case 只能判断相等
switch (age) {
  case 18: 
    // ...
    break;  
}

  1. if-else if 语句没有 break,会执行所有的语句,switch-case 需要 break 否则会继续执行下一个 case。

  2. if-else if 语句可以判断NaN或undefined,switch-case 会报错。

所以总结来说:

  • 如果需要判断连续范围或复杂条件,if-else if 更合适。
  • 如果只是判断几个离散值的相等,且值只能是整数或字符串,switch-case 更简洁。
  • 如果值可能是NaN或undefined,只能使用if-else if。

if-else if 语句更通用,switch-case 语句在某些情况下更高效、简洁,所以可以根据需求灵活选择。


版权声明：本文为weixin_53882894原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Tags: