js之if和流程控制

最新推荐文章于 2024-05-20 15:17:08 发布
最新推荐文章于 2024-05-20 15:17:08 发布
阅读量24 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56436093/article/details/134110820
版权

02-JavaScript

1. 操作符

1.1 算术运算符

算数运算符和我们在数学中的学的一样，主要用于数值的运算，JavaScript中提供的算数运算符有下面这些：

操作符作用
+加
-减
*乘
/除（斜杠）
%取余数
( )提高优先级

  • 特殊情况-字符型数据运算

    //减、乘、除、取余运算时，首先会将字符串转换成数字，然后再进行运算。
​
console.log('28' - '18'); // 10 
​
console.log('32' / '4'); // 8 
​
console.log('3' * '4'); // 12 
​
console.log('12' % '5'); // 2 
​
// 数值和字符运算
​
console.log(12 + ''); // '12'
​
console.log(12 + 3 + '4'); // '154'
​
console.log('4'+ 12 + 3); // '4123'
​
//特殊情况
console.log('123abc' - '123'); //NaN
​

  • 特殊情况-浮点数进行运算

    console.log(0.1 + 0.2) //0.30000000000000004

    参照阅读-为什么 0.1 + 0.2 不为0.3

1.2 赋值运算符

简单的赋值操作符由等号（=）表示，它的作用就是把右侧的值赋值给左侧的变量，如下所示：

var num = 7; //刚开始班里有7个人

如果在等号（=）前面再添加算术运算符的话，就可以完成复合赋值操作。如下所示：

var num = 7; //刚开始班里的人数
​
num = num + 9 //后来有来了9个

第二行代码可以用一个复合赋值来代替：

var num = 7; //刚开始班里的人数
​
num += 9 //后来有来了9个

每个算术操作符都有对应的复合赋值操作符，如下表所示：

操作普通写法简写形式
普通赋值var age = 20var age = 20
加法赋值age = age + 1age += 1
减法赋值age = age - 1age -= 1
乘法赋值age = age * 2age *= 2
除法赋值age = age / 2age /=2
求余赋值age = age % 3age %= 3

1.3 自增自减操作符

i++ ++i

  • 在不参与运算的情况下：它们都是自增1

  • 在参与运算的情况下，++写在后面，先参与运算，然后加1；++写在前面，在参与运算前，i先加1，然后再参与运算。

    // 在不参与运算的情况下，无论 ++ 写在操作数（age）的前面还是后面，结果都是 age 自身加一。
var age = 18;
age++;
++age;
console.log(age); 
​
// 在参与运算的情况下，++ 写在操作数后面，age 先参与运算，然后再自身加一。
// ++ 写在操作数前面，age 先自身加一，然后再参与运算。
​
var age1 = 18;
var  num1 = 82 + age1++;
console.log(num1, age1);  // 100, 19
​
var age2 = 18;
var num2 = 82 + (++age2);
console.log(num2, age2);  // 101, 19

i-- --i

  • 在不参与运算的情况下，都是自减1

  • 在参与运算的情况下，--写在后面，先参与运算，然后减1；--写在前面，在参与运算前，i先减1，然后再参与运算。

    // 在不参与运算的情况下，无论 -- 写在操作数（age）的前面还是后面，结果都是 age 自身减一。
var age = 18;
age--;
--age;
console.log(age);  // 16 
​
// 在参与运算的情况下，-- 写在操作数后面，age 先参与运算，然后再自身减一。
// -- 写在操作数前面，age 先自身减一，然后再参与运算。
​
var age1 = 18;
var  num1 = 82 + age1--;
console.log(num1, age1);  // 100, 17
​
var age2 = 18;
var num2 = 82 + (--age2);
console.log(num2, age2);  // 99, 17

1.4 逻辑运算符(重点)

运算符含义
&&与（且）
||或
!非

逻辑与（&&）

逻辑与操作符由符号 && 表示，有两个操作数，如下例所示：

var result = true && false;  //false

逻辑与的真值表如下：

第一个操作数第二个操作数结果
truetruetrue
truefalsefalse
falsetruefalse
falsefalsefalse

当然，逻辑与的操作数不仅仅是布尔值，还可以应用于任何类型的操作数。此时，它遵循下列规则：

  • 如果两个操作数被转换成布尔值第一个是 true，则返回第二个操作数；

  • 如果两个操作数被转换成布尔值第一个为false，则返回第一个操作数；

console.log(false && true); // false
console.log('abc' && 1); // 1
console.log(0 && 1); // 0
console.log('' && 0); // ''

逻辑与操作属于短路操作，即如果第一个操作数是 false，那么无论第二个操作数是什么值，结果都不可能是true了。我们来看个例子：

var found = true;
​
var result = (found && undefinedVariable);  //这里会发生错误
​
alert(result);  //这一行不会执行

在上面的代码中，当执行逻辑与操作时会发生错误，因为变量undefinedVaribale没有定义。由于变量found的值是true，所以逻辑与操作符会继续对变量undefinedVariable求值。但undefinedVaribale尚未定义，所以会报错。下面我们来改一改上例中的代码：

var found = false;
​
var result = (found && undefinedVariable);  //这里不会发生错误
​
alert(result);  //这一行会执行

在这个例子中，警告框会显示出来。无论变量undefinedVariable有没有定义，都不会对它求值，因为第一个操作数的值是false。也就是说如果第一个操作数能够决定结果，那么就不会再对第二个操作数求值。

逻辑或（||）

逻辑或操作符由两个竖线符号（||）表示，由两个操作数，如下所示：

var result = true || false;  //true

逻辑或的真值表如下：

第一个操作数第二个操作数结果
truetruetrue
truefalsetrue
falsetruetrue
falsefalsefalse

与逻辑与操作符一样，逻辑或的操作数也不仅限于布尔值，它也可以是其他类型的操作数。此时，它遵循下列规则：

  • 如果两个操作数被转换成布尔值第一个是 true，则返回第一个操作数；

  • 如果两个操作数被转换成布尔值第一个为false，则返回第二个操作数；

console.log(false || true); // true
console.log('abc' || 1);    // 'abc'
console.log('' || 0);       // 0

与逻辑与操作符一样，逻辑或操作符也是短路操作符。也就是说，如果第一个操作数的求值结果为true，就不会对第二个操作数求值了。示例如下：

var found = true;
​
var result = (found || undefinedVariable);  //这里不会发生错误
​
alert(result);  //这一行会执行

这个例子更前面的例子一样，变量undefinedVariable也没有定义。但是，由于变量found的值是true，而变量undefinedVariable永远不会被求值，因此结果就会输出“true”。如果把found的值改为false，就会导致错误：

var found = false;
​
var result = (found && undefinedVariable);  //这里会发生错误
​
alert(result);  //这一行不会执行

逻辑非（!）

逻辑非操作符由一个叹号（！）表示，可以应用于 ECMAScript 中的任何值。无论这个值是什么数据类型，这个操作符都会返回一个布尔值。逻辑非操作符首先会将它的操作数转换为一个布尔值，然后再对其求反。逻辑非操作符遵循下列规则：

  • 如果操作数被转换成布尔值之后是true，直接返回布尔值：false；

  • 如果操作数被转换成布尔值之后是false，直接返回布尔值：true；

下面举几个例子：

alert(!new Object());    //false
alert(!"");               //true
alert(!"hello world");  //false
alert(!0);               //true
alert(!23);              //false
alert(!null);            //true
alert(!NaN);             //true
alert(!undefined);        //true

1.5 关系运算符

操作符作用
>大于号
<小于号
>=大于或等于
<=小于或等于
==等于
===全等于
!=不等于
!==不全等于

小于（<）、大于、小于或等于、大于或等于这几个关系操作符用于对两个值进行比较，比较的规则与我们在数学课上学的一样。这几个操作符都返回一个布尔值，看下面的例子：

    var result = 5 > 3;  //true
    var result = 5 < 3;  //false

当参与比较的操作数是非数值类型时，则会先进行数据类型转换，然后再参与比较。比较规则如下：

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

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

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

我们来看一个例子：

var result = "Brick" < "alpha";  //true

很多人会认为，在比较字符串值时，小于的意思是“在字母表中位置靠前”，而大于则意味着“在字母表中的位置靠后”，但实际上完全不是那么回事。在比较字符串时，实际上比较是连个字符串中对应位置的每个字符在ASCii编码表中对应的编码值（字母B的编码值为66，字母a的编码值是97）。再看一个例子：

var result = "23" < "3";  //true

当比较字符串“23”是否小于“3”时，结果居然也是true。这是因为两个操作数都是字符串，而字符串比较的是字符编码（“2”的字符编码是50，而“3”的字符编码是51）。如果是将一个操作数改为数值呢：

var result = "23" < 3;  //false

此时，字符串“23”会被转换成数值23，然后再与3进行比较，因此就会得到合理的结果。在比较数字和字符串时，字符串都会被转换成数值，然后再进行比较。这个规则对上面的例子是使用的，可是，如果那个字符串不能转换成一个合理的数值呢？比如：

var result = "a" < 3;  //false，因为 "a" 被转换成了NaN

由于字母“a”不能转换成合理的数值，因此就被转换成了 NaN。根据规则，任何操作数与 NaN 进行关系比较，结果都是 false。于是就出现了下面的情况：

var result1 = NaN < 3;  //false
​
var result2 = NaN >= 3;  //false

按照常理，如果一个值不小于另一个值，则一定是大于或等于那个值。然而，在与 NaN 进行比较时，这两个比较操作的结果都返回了 false。

连比的写法

比如，我们想看看 2 这个数字，是不是在 3 和 15 之间，你可能会像下面这样写：

alert(3 < 2 < 15)  //true

结果与预想的结果好像不符，这是为什么呢？其实这种写法是错误的。

这是因为，计算机会先比较 3 < 2，得到的结果是 false。然后再比较 false < 15，false 会被隐式转换为0，所以 0 < 15 的结果是 true。

正确的写法应该先拆开，中间用一个 && 连接。也就是说：3 小于 2 且 2 小于15 。

alert(3 < 2 && 2 < 15)  //false

==和===的用法

  • 对于基本数据类型来说： ==当类型相等时，判定值是否相等，当类型不相等时，转换成相同的类型后，比较值是否相等。 ===只有当类型相等时，判定值是否相等。

!==运算符(不等值或不等型)

  console.log(30 !== 30);   //false
  console.log('20' !== '20');   //false
  console.log(11 !== 30);   //true
  console.log('202' !== '20') //true
​

1.6 条件运算符（三元运算符）

语法：

表达式 ? 如果表达式结果为true,执行这里的代码1 : 如果表达式结果为false,执行冒号后面的代码2 ;

执行顺序：

  1. 判断条件表达式是否为 true。

  2. 如果为 true，执行问号（?）后面的代码。

  3. 如果为 false，执行冒号（:）后面的代码。

1.7 运算符优先级

常用运算符优先级从高到底 1. ( )优先级最高 2. 一元运算符 ++ -- ! 3. 算数运算符 先* / % 后 + - 4. 关系运算符 > >= < <= 5. 相等运算符 == != === !== 6. 逻辑运算符 先&& 后|| 7. 赋值运算符

// 练习1：
4 >= 6 || '人' != '好谷' && !(12 * 2 == 144) && true
// 练习2：
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'

2. 流程控制语句

2.1 if-else语句

根据条件返回的结果（真或假或其它预定义的），来判断下一步要执行的语句。JavaScript提供了两种条件判断语句：if...else 和 switch。

if (如果明天不下雨) {  
​
    我就出去玩;
​
}else {
​
    我就在家写作业;
}

条件可以是任何返回结果是 true 或 false 的表达式。如果条件表达式返回的是 true，语句1 会被执行；否则，语句2 被执行。

如果有多个判断条件，可以使用 else if 来进行判断，就像下面这样:

if (如果明天不下雨) {
​
    我就出去嗨;
​
} else if (如果爸妈不在家) {
​
    我就在家玩游戏;
​
} else if (如果没有带书包){
​
    我就睡觉;
​
} else {
​
    我就乖乖地在家写作业;
}

2.2 switch语句

switch 语句允许用一个表达式的值或一个变量和 case 标签后面的值相匹配。如果匹配成功，就执行这个 case 标签后面的代码。

语法：

switch (一个表达式的值或一个变量) {
​
   case 常量1:
      要执行的代码1
      break;
   case 常量2:
      要执行的代码2
      break;
   ...
   default:
      要执行的代码
      break;
}
​

switch ：开关 ， case ：选项

执行顺序：

  1. 首先会判断第一个 case 后面的值是否与表达式的结果相等；

  2. 如果相等，就会执行 case 后面代码，当遇到 break 时，switch 语句停止执行；

  3. 如果不匹配，接着判断下一个 case 后面的值；

  4. 如果所有的 case 都不匹配， 程序会去执行 default 后面的代码；

  5. switch比较的值是===等关系。

注意：default 语句不是必须的，在不需要的时候可以不写。如果需要的话，应该写在switch语句的最后。

多学一招

switch 语句和 if else if 语句的区别

  • 一般情况下，它们两个语句可以相互替换

  • switch...case 语句通常处理 case为比较确定值的情况， 而 if…else…语句更加灵活，常用于范围判断(大于、等于某个范围)

  • switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而if…else 语句有几种条件，就得判断多少次。

  • 当分支比较少时，if… else语句的执行效率比 switch语句高。

  • 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

2.3 break语句

break语句可以在循环体或判断语句中，只要代码遇到break，就会立马结束当前循环或者判断。

2.4 for语句

语法：

for(var i = 0; i <= 10; i++){
​
    循环体代码
    
}

执行顺序：

  1. 首先进行变量初始化（var i = 0）,通常被用于初始化一个计数器，该表达式可以使用 var 关键字声明新的变量，这个变量帮我们来记录次数。；

  2. 判断条件表达式是否成立（i <= 10）;

  3. 如果条件成立，则执行循环体内的代码，执行完之后，执行 i++，让 i 自增 1 ，接着再次判断条件表达式是否成立，如此循环往复，直到条件表达式不成立为止；

  4. 如果条件不成立，则循环体内的代码不会执行，循环结束。

    应用

  • 100以内数值的和

  • 双层for循环（打印直角三角形）

2.5 continue语句

continue语句的作用是终止本次循环，接着进行下一次循环。

举例子：过7游戏

//过7游戏
for(var i = 1; i < 100; i++){
​
  if(i % 7 == 0){
     console.log("过");
     continue;
  }
  console.log(i);
}

2.6 while语句

语法：

while(条件表达式){
​
    循环体内的代码
​
}

执行顺序：

  1. 首先判断条件表达式是否成立；

  2. 如果成立，执行大括号中的代码，然后再次判断条件表达式是否成立；

  3. 如果不成立，就不执行大括号中的代码，循环结束。

举例子

// 当条件表达式结果为true,会一直执行while循环体内的代码。 // 当条件表达式的结果为false，while循环不再执行。

2.7 do-while语句

语法：

do{
​
  循环体;
  
}while(条件表达式);

执行顺序：

  1. 程序一开始，直接进入循环体内，执行一遍循环体内的代码；

  2. 判断条件表达式是否成立，如果条件成立，那么继续执行循环体内的代码；

  3. 如果条件表达式是否成立，那么循环体内的代码就不再执行，循环结束；

注意：do-while 循环在条件不满足的情况下会比 while 循环多执行一次循环体内的代码。

2.8 布尔类型的隐式转换

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

转换为true   非空字符串  非0数字  true 任何对象
转换成false  空字符串  0   null  undefined NaN  false
// 结果是什么？
var a = !!'123';

举例

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

Waldeinsamkeit46
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript流程控制语句集合
10-19
流程控制语句在JS中是至关重要的。JS中的流程控制语句包括if条件判断语句、for循环语句、while循环语句、do……while循环语句、break语句、continue语句和switch语句等7种语句,需要的朋友可以参考下
JavaScript 流程控制语句（if和switch）
weixin_64899102的博客
07-25 865
js中关于if和switch一些基础的概念和应用
JavaScript-流程控制if
L1416279170的博客
05-04 541
流程控制语句 JS中的程序是从上到下执行的。 通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行。 语句的分类及使用 条件判断语句 使用条件判断语句可以在执行某个语句之前进行判断，如果条件成立才会执行语句，条件不成了则语句不执行。 if语句 语法一 if(条件表达式)｛ 语句 ｝ if语句在执行时，会先对条件表达式进行判断，如果条件表达式的值为true，则执行if后的语句，如果条件表达式的值为false，则不会执行if后的语句。 a = 10 if (a &g
JavaScript运算符和流程控制（if、switch、）
Dummerd的博客
07-28 371
JavaScript运算符和流程控制（if、switch、）
JavaScript之流程控制
m0_46324704的博客
07-29 389
在JavaScript中，流程控制决定了我们的代码按照什么顺序结构执行，有时候，我们需要流程控制来控制我们的代码执行顺序。
JavaScript的流程控制 if、 if else if、 switch
zaxuezhe的博客
04-22 1980
if，语法结构，如果括号里面的表达式为真，则执行大括号里面的语句，否则不执行。 if（表达式）{执行语句；} 示例1： if else：如果括号里面的表达式为真，则执行大括号里面的语句，否则执行else语句中的语句。 if（表达式）{执行语句1；}else{执行语句2；} 示例2： if else if else：当任意一个条件满足后，语句执行完毕后则推出整个if语句，如果都不满足，则执行else中的语句 if（表达式）{执行语句1；}else if（表达式）{执行表达式2；}el
JavaScript程序设计课件：if语句.pptx
06-15
JavaScript程序设计 控制语句-if语句 if语句 1、if语句语法结构 if (条件){ 条件为true时执行的代码块 } 2、示例 if (age){ people = “未成年”； } if...else语句 1、if…else语法结构 if (条件) { 当条件为 true ...
JavaScript程序中的流程控制语句用法总结
11-26
1.if语句 if (condition) statement1 else statement2 其中的condition条件可以是任意表达式，而且对这个表达式的求值结果不一定是布尔值。ECMAScript会自动调用Boolean()转换函数将这个表达式的结果转换为一个...
Javascript流程控制语句
05-22
学习要点： 1.语句的定义 2.if 语句 3.switch 语句 4.do...while 语句 5.while 语句 6.for 语句 7.for...in 语句 8.break 和continue 语句 9.with 语句
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 185
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
React Suspense与Concurrent Mode：异步渲染的未来
最新发布
天涯学馆
05-20 582
React的Suspense和Concurrent Mode是React 16.8及更高版本引入的概念，旨在提升用户体验和性能，特别是在处理异步数据加载和动画时。它们是React的下一代渲染策略的一部分，目的是实现更流畅的交互和更高效的资源调度。
(Vue3+TS+Volar) 全局组件配置类型声明的最佳实践
从今年开始写写博客~~
05-14 223
简评：Volar官方全局组件的推荐写法，基于Volar，必须安装该插件，GlobalComponents是Volar专门为了解决全局组件类型而新增的类型接口。定义全局组件：使用GlobalComponents类型接口声明类型。
Vue.js的发展史（一）
2301_79683791的博客
05-15 751
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
setImmediate不能在浏览器中执行
Keep trying, keep going
05-14 161
的延迟时间设置为 0，但实际的延迟可能会因浏览器的最小延迟时间限制而稍有不同。函数实现类似的效果。函数不是浏览器的标准 API，而。
Vue3详细讲解
贫僧法号依平
05-15 851
Vue 3 介绍为什么要学习 vue 3Vue3 动机 和 新特性Vite 的使用vite介绍为什么选 Vite？Vite 的基本使用Vue3.0项目介绍vscode插件说明组合式API体验 composition APIsetup 函数reactive 函数ref 函数script setup语法(★)案例：显示鼠标案例计算属性computed函数侦听器watch函数钩子函数的使用组件通讯-父传子组件通讯-子传父依赖注入 - provide 和 inject模板中 ref 的使用vue3中废弃了过滤器。
springboot+vue2+elementui实现时间段查询
2301_76604664的博客
05-20 166
将前端传来的时间数组，赋值给对应的属性；
echarts的柱状图使用
qq_45331969的博客
05-15 184
【代码】echarts的柱状图使用。
vue3专栏项目 -- 五、权限管理（下）
m0_64931189的博客
05-15 814
我们这一系列做的就是，我们刚开始做了message组件，我们可以直接在某个组件中通过即可调用这个message组件，从而展示出这个提示信息框但是我们觉得它可以像以前用过的alert一样，直接通过一个函数调用就可以展示出这个组件，所以有了如下一步步改进：
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
Dnn01的博客
05-14 284
vue3 el-date-picker设置禁用日期,只能选今天或者今天之后的日期
js switch case和if else哪个好
07-15
在 JavaScript 中，`switch` 和 `case` 以及 `if` 和 `else` 都是条件语句，用于根据不同的条件执行不同的代码逻辑。它们各自有不同的使用场景和优势。 `switch` 语句适用于在多个固定值之间进行选择。它可以清晰地...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值