前端(JavaScript)------运算符及分支语句、循环语句

简介: 先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。

(1)  if条件语句    

先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。

 语法:

if(表达式){
            语句;
      }
           if (m === 3) {
                   console.log(“你居然猜到了m变量的值!”); 
                 }

//这个结构表示当表达式m===3为真的时候,执行if结构内部的语句,否则就不执行

ps:表达式必须放在小括号之中。执行语句必须放在大括号内。

pss:if条件语句最后不用加分号。

psss:执行语句如果只有一句,那么大括号可以不写。但是推荐所有情况都加上大括号


(2)  if else条件语句

if else语句可以认为是if语句的升级版本。判断表达式值的真伪,若结果为真则执行语句1,否则就执行语句2。  语法:    

if(表达式){
     语句1;
    }else{
       语句2;
   }
if ( xiaoHong === “cuteGirl”) {
                    console.log(“既然小红是个可爱的小女孩,那么奖励你一套花裙子吧”); 
             }else{
                     console.log(“虽然小红不可爱,但是我还是请你吃棒棒糖!嘿嘿嘿!”);
}

(3)  if else if else条件语句

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

 语法

      if(表达式1){
            语句1;
      }else if(表达式2){
            语句2;
      }else if(表达式3){
             语句3;
      }else{
             语句4;
      }

pselse语句不能单独存在,他总是向上匹配离他最近的if语句

if ( xiaoHong === “cuteGirl”) 
{
  console.log(“小红是个可爱的小女孩,那么奖励你一套花裙子吧”);  
}
else if ( xiaoHong === “sexyGirl”) 
{
  console.log(“小红是个性感的小女孩,那么奖励你一双高跟鞋吧”);
} 
else if ( xiaoHong === “goodJobGirl”) 
{
  console.log(“小红是个爱工作的小女孩,那么奖励你一台笔记本吧”);
}
else
{
  console.log(“小红…恩,继续努力的好好活下去吧!”);
}

(4)  switch条件语句

switch语句和if语句表达的含义基本相同。其实switch语句很像if else if else结构。

 语法:

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

上面语法结构表达的含义是:

   a.判断表达式值是否和结果1相等,如果相等就执行语句1,然后跳出switch结构。

  b.否则判断表达式值是否和结果2相等,如果相等就执行语句2,然后跳出switch结构。

  c.如果表达式的值与上述case中的结果都不相等,那么直接执行default中的语句,然后结束switch结构。

switch (xiaoHong) 
{
  case "cuteGirl":{console.log("小红是个可爱的小女孩,那么奖励你一套花裙子吧");};
    break;
  case "sexyGirl":{console.log("小红是个性感的小女孩,那么奖励你一双高跟鞋吧");};
    break;
  case "goodJobGirl":{console.log("小红是个爱工作的小女孩,那么奖励你一台笔记本吧"); };
    break;
  default:{console.log("小红…恩,继续努力的好好活下去吧!");};
}

ps:  case语句default语句中间的冒号不能省略,必须存在。

pss:  break语句表示此判断结束,也必须存在。否则一次判断结束会继续进行下一次判断,直到结束为止。


(1)  while循环

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

语法

while (表达式) {
      语句;
  }
例:
var i = 0;
while(i < 100){
  console.log("i当前为:"+i);
  i++;
}
每次循环执行打印当前i所表示的值,直到循环100次后i=100时为止  

while循环的注意事项:

   (1)因为while循环是先判断循环条件的,因此while循环的最少执行次数为0

   (2)while循环之所以能结束,是因为每次循环执行的过程中都会改变循环变量。

   (3)执行while循环之前,必须给循环变量设初值。

   (4)if条件语句一样,如果while循环体中只有一条语句,那么大括号可以不写。当然我不推荐。

   (5)while循环结构末尾不需要加分号。

  var i = 0;  //为循环变量设初值
        while(i < 100){
               console.log("i当前为:"+i);
               //i++;
             }

上述例子如果没有在循环体中改变循环变量的语句,那这个while循环就变成了一个无限循环。也叫死循环。

ps:循环条件恒成立的循环被称为死循环。


(2)  do while循环

 do while循环和while循环结构基本相同。唯一不同的是do while循环会先将循环体执行一遍后在进行判断。

语法:

 do{
     语句;
  } while (表达式) ;
例:
var i = 0;
do{
  console.log("i当前为:"+i);
  i++;
} while(i < 100); 

do while循环的注意事项:

   

(1)因为do while循环是先执行循环体,因此do while循环不管循环条件真假,最少执行次数为1。

(2)do while循环之所以能结束,是因为每次循环执行的过程中都会改变循环变量。

(3)如果循环体中只有一条语句,那么大括号可以不写。当然我不推荐。

(4)do while循环结构末尾必须加分号!

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

(3)  for循环

 for循环是循环中使用的较为广泛的一种循环结构。

 for循环分两种,一种叫做标准for循环,一种叫做快速遍历。而我们通常意义上的for循环指的是标准for循环

   语法

for(表达式1;表达式2;表达式3){
  循环体;
  }
for(var num = 0; num<10; num++){
  console.log(num);
}

上述代码的含义是:

a.首先执行表达式1,进行循环变量num的初始化

b.然后判断表达式2结果是否为真,如果为真,执行循环体。否则就跳出循环。

c.当表达式2结果为真,并且循环体执行完毕后,执行表达式3,然后重复步骤b

for(表达式1; 表达式2; 表达式3) {
      循环体;
}

表达式1:确定循环的初始值,只在循环开始时执行一次。

表达式2:检查循环条件,只要为真就进行后续操作。

表达式3:完成后续操作,然后返回上一步,再一次检查循环条件。

for循环的注意事项:

(1) for循环表达式1可以不写。如果不写表达式1则需要在循环结构外为循环变量赋初值。

 var num = 0;
  for(;num<10; num++){
  console.log(num);
  }

(2) for循环表达式2可以不写。如果不写表达式2,则表示循环条件恒成立。(死循环)

  for(var num = 0; ;num++){
  console.log(num);
  }

(3) for循环表达式3可以不写。如果不写表达式3则需要在循环结构内部为循环变量增加改变条件

  for(var num = 0; num<10;){
  console.log(num);
  num++;
  }

ps:根据以上三点,其实for循环三个表达式都可以不写。但是括号中的分号不能省略!!

for(; ;){
  console.log(“hello javascript!”);
}

ps:尝试解释一下上述循环结构表达的是什么意思。

pss:所有的for循环都能够改写成while循环,尝试改写一下试试

快速遍历

 for循环快速遍历是一种快速浏览容器内元素的手段。快速遍历的最大特点是不管有多少个元素,一定都能循环一遍。

 语法:  

for(var 变量名 in 容器){
  循环体;
  }
var arr = [1,2,3,4,5];
       for(var num in arr){
              console.log(arr[num]);
    }

上述代码的含义是:

创建一个局部变量num,然后从数组arr逐个取出每个元素下标赋值给num,并且打印这个元素的值

循环的嵌套使用

循环和条件语句可以进行嵌套使用来进行更复杂的逻辑处理。

例子:

for(var i = 0;i<100;i++){
  if(i == 10){
  console.log(“我需要这个10”);
  }
}
for(var i=0;i<10;i++){
  for(var j=0;j<10;j++){
  console.log(i*j);
  }
}

4.js运算符

 

js中有很多种类的运算符,不同的运算符拥有不同的作用。

(1)算数运算符

  加法运算符:x+y    减法运算符:x - y   乘法运算符:x * y    除法运算符:x / y  

 余数运算符:x % y  自增运算符(单目运算符):++x 或者 x++  

  自减运算符(单目运算符):--x 或者 x--  

(2)赋值运算符

   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

(3)比较运算符

 x==y  //判断是否相等(忽略变量类型)            x===y  //判断是否严格相等(计算变量类型)

 x!=y  //判断是否不相等(忽略变量类型)          x!==y  //判断是否严格不相等(计算变量类型)

 x<y  //判断是否小于                                            x<=y  //判断是否小于或者等于

 x>y  //判断是否大于                                            x>=y  //判断是否大于或者等于

psundefinednull与自身严格相等。

  var value1; var value2;
  console.log(value1===value2;);//true

(4)布尔运算符

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

 非运算符(!)

 表达式的值为假的时候,运算结果为真

 与运算符(&&)

 当运算符两端的表达式值均为真时,运算结果为真,否则为假

 或运算符(||)

 当运算符两端的表达式值有一个为真,运算结果为真,都为假时结果才假

运算符

描述

例子

&&

and

(x < 10 && y > 1) 为 true

||

or

(x==5 || y==5) 为 false

!

not

!(x==y) 为 true

(5)三目运算符

     三元条件运算符用问号(?)和冒号(:),分隔三个表达式。如果第一个表达式的布尔值为true,则返回第二个表达式的值,否则返回第三个表达式的值

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

var min = (a<b)?a:b;

Js运算符优先级

 1、. [] {} 提取属性与函数调用                      2、 delete new typof + - ! 一元运算符

  3、  * / %    乘法、除法、求余                   4、 + - 加法/连接、减法

  5、》= 《= > <   不等式运算符                  6、=== !== 等式运算符

  7、&&  逻辑与                                           8、||  逻辑或

  9、?:  三元运算符   int 1=0?true:false;

目录
相关文章
|
2月前
|
JavaScript 前端开发 API
|
3月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
188 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
2月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
106 8
|
3月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
1953 23
|
4月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
119 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
7月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
121 3
springboot解决js前端跨域问题,javascript跨域问题解决
|
8月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
640 14
|
8月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
137 0
|
8月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
238 6
|
8月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
294 1