JavaScript基础语法(codewhy版本)(二)

简介: JavaScript基础语法(codewhy版本)

JavaScript基础语法(codewhy版本)(一)https://developer.aliyun.com/article/1469643



05-JavaScript分支语句和逻辑运算符

程序的执行顺序

首先我们要知道,在程序开发的过程中,程序有三种不同的执行方式

  1. 顺序——顾名思义,就是从头到尾执行程序,严格按照从上至下的顺序执行代码
  2. 分支——代表着有选择,有判断,这时候需要计算机根据你编写的程序从而决定执行某一些代码
  3. 循环——代表着我们不想写某些重复性的代码🤬,这时候我们就会需要使用循环来省事🤗

代码块的理解

代码块我们可以理解成多行代码的集合,集合是什么意思相信大家都学过,说白了代码块就是把若干代码放在一块

代码块存在的意义

我们在开发中,有时候经常会遇到一行代码很难完成某一个特定的功能,为了便于管理,我们就把能够实现这个功能的这些代码统一放在一个代码块中

image.png

什么是分支结构?

在我们日常开发中,我们经常要根据一定的条件来决定代码的执行方向

  • 如果条件满足,就做事情1
  • 如果条件不满足,就做事情2

JavaScript中常见的分支结构

  • if分支结构
  • switch分支结构

if分支语句

分支结构

if(...)语句计算亏耗里面的条件表达式,如果计算结果是true,就会执行相应的代码块

image.png

案例一

如果小明考试超过90分,就去游乐场;否则不去

image.png

案例二

单位5元/斤的苹果,如果购买超过5斤,立减8元

要求:让用户输入购买的重量,计算出最后的价格并且弹出结果

image.png

if语句的细节补充

  1. 如果代码块中只有一行代码,那么if语句的{}可以省略。不过作者在这里建议大家不要省略,养成一种良好的编码习惯😋
  2. 数字0、空字符从“”、null、undefined和NaN都会被转换成false其他值都会被转换成true

多分支结构

有时候我们需要判断多个条件,简简单单的一个if语句显然已经不能满足我们的要求

image.png

案例

  • 考试分数大于90:优秀
  • 大于80小于等于90:良好
  • 大于60小于等于80:合格
  • 小于60分:不及格

image.png

三元运算符

用途

有时候我们需要比较数字的大小,去获取数字比较大的那个数,这个时候如果我们使用if-else结构未免过于臃肿,这时候我们就可以通过三元运算符来很好的解决这个问题

使用方法

  1. 这个运算符通过来进行表示
  2. 之所以被称为三元运算符的原因是因为该运算符中有三个操作数(运算元)
  3. 它是JavaScript里面唯一一个有这么多操作数的运算符🤣

使用格式

image.png

案例一

m = 20 ,n = 30,比较两个数字的大小,获取较大数字的那个

image.png

案例二

判断一个人是否成年

image.png

逻辑运算符

逻辑运算符主要由以下三部分组成:||(或)、&&(与)、!(非),它们可以将多个表达式或值放到一起来获取一个最终的结果

运算符

运算规则

范例

结果

&&

与: 同时为真

false && True

false

||

或: 一个为真

false or frue

true

!

非: 取反

!false

true

逻辑或的本质

||表示或运算符,也称为短路或

image.png

运算规则及注意事项

  1. 从左至右依次计算操作数
  2. 处理每一个操作数的时候,都将其转换为布尔值进行比较
  3. 如果结果是true,就停止计算返回这个操作数的初始值
  4. 如果所有的操作数都被计算过,换句话说,也就是转换结果都是false,则返回最后一个操作数
  5. 返回的值是操作数的初始形式,并不会自动转换为Boolean类型
  6. 换句话说,一个含有||的运算,将返回第一个真值如果不存在真值,就返回该链的最后一个值

逻辑与的本质

&&表示与运算符,也称为短路与

image.png

  1. 从左到右依次计算操作数。
  2. 在处理每一个操作数时,都将其转化为布尔值(Boolean)
  3. 如果结果是false,就停止计算,并返回这个操作数的初始值(一般不需要获取到初始值)
  4. 如果所有的操作数都被计算过 (例如都是真值),则返回最后一个操作数
  5. 换句话说,与运算返回第一个假值,如果没有假值就返回最后一个值

!(非)

逻辑非运算符接受一个参数,并按如下运算

  1. 将操作数转化为布尔类型:true/false
  2. 返回相反的值

两个非运算!!有时候用来将某个值转化为布尔类型

  • 第一个非运算将该值转化为布尔类型并取反,第二个非运算再次取反
  • 最后我们就得到了一个任意值到布尔值的转化

Switch语句

Switch是一种分支结构的一种语句,它是通过判断表达式的结果(或者变量)是否等于case语句的常量,来执行相应的分支体的。与if语句不同的是,switch语句只能做值的相等判断  (使用全等运算符===),而if语句可以做值的范围判断

Switch语法

switch语句有至少一个case代码块和一个可选的default代码块

image.png

Switch语句补充

case穿透问题

  • 一条case语句结束之后,会自动执行下一个case语句,这种现象叫作case穿透

break关键字

通过在每个case的代码块后添加break关键字来解决这个问题

注意事项

被比较的值必须是相同类型的才能进行进行匹配

06-JavaScript的while和for循环

while语法

  1. 当条件成立的时候,语句执行
  2. 当条件不成立的时候,跳出循环

注意事项

如果while语句中的条件为true,则会产生死循环,在开发中我们尽量避免死循环等一些bug出现

while循环的练习

练习一:打印10次Hello World

image.png

练习二:打印0-99的数字

image.png

练习三:计算0-99的数字和

image.png

练习四:计算0-99所有奇数的和

image.png

练习五:计算0-99所有偶数的和

image.png

do-while循环

do-while有个最大的特点:不管条件成不成立,先执行一次再说

image.png

在开发中我们一般不使用do-while循环,毕竟这个写法实在是太超前了🤣🤣

for循环

我们在开发中,用的最多的就是for循环

image.png

语句段

例子

执行过程

begin

let i = 0

进入循环时执行一次。

condition

i < 3

在每次循环迭代之前检查,如果为 false ,停止循环。

body (循环体)

alert(i)

条件为真时,重复运行。

step

i++

在每次循环体迭代后执行。

begin执行一次,然后进行迭代处理,每次检查condition后,执行bodystep

for循环嵌套

循环的嵌套,顾名思义就是在一层for循环里面又加了一层for循环,这种写法在开发中用的不算多(会严重影响代码的执行效率😑),在我们一些算法中可谓是相当常见🥰

案例一:在屏幕上显示包含很多的的矩形

image.png

案例二:在屏幕上显示一个三角的图像

image.png

案例三:在屏幕上显示一个九九乘法表

image.png

循环控制

在我们进行循环的过程中,我们可能会要干一些其它的事情,比如终止这个循环||本次循环不再执行,执行下一次循环体

循环的跳转控制

break:直接跳出循环,循环结束

continue:跳过本次循环,执行下一次循环体

  • continue指令是break的轻量版
  • continue某一条件满足时,不执行后续重复的代码

综合案例:猜数字游戏

image.png



目录
相关文章
|
8天前
|
存储 JavaScript 前端开发
Node.js的基本语法
【8月更文挑战第12天】Node.js的基本语法
36 1
|
5天前
|
JavaScript 前端开发
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。
JavaScript基础&实战(1)js的基本语法、标识符、数据类型
|
20天前
|
JavaScript NoSQL Serverless
函数计算产品使用问题之如何创建一个自定义运行时并指定Node.js版本
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
1天前
|
缓存 JavaScript Serverless
阿里云云效产品使用合集之如何在Serverless Devs阶段指定Node.js版本
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
4天前
|
前端开发 JavaScript 程序员
前端 JavaScript 的 _ 语法是个什么鬼?
前端 JavaScript 的 _ 语法是个什么鬼?
|
11天前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)
|
1月前
|
缓存 JavaScript 前端开发
前端框架与库 - Vue.js基础:模板语法、数据绑定
【7月更文挑战第14天】Vue.js 是渐进式框架,以简洁API和高效数据绑定知名。本文聚焦模板语法与数据绑定,解释常见问题和易错点,助力初学者避坑。模板语法中,{{ expression }} 用于渲染值,v-bind/: 用于动态绑定属性。数据绑定涉及文本、属性和事件,注意v-model适用于表单元素,计算属性有缓存。理解正确用法,借助文档和IDE,可提升开发质量和效率。善用Vue.js,打造响应式UI。
|
2月前
|
存储 JavaScript 前端开发
JavaScript 语法
JavaScript 语法
22 5
|
1月前
|
存储 JavaScript 前端开发
|
2月前
|
JavaScript 前端开发
JavaScript语法关键点:变量用`var`、`let`、`const`声明
【6月更文挑战第22天】JavaScript语法关键点:变量用`var`、`let`、`const`声明;七种数据类型包括`Number`、`String`、`Boolean`、`Null`、`Undefined`、`Symbol`和`Object`;运算符如算术、比较、逻辑和赋值;流程控制有`if...else`、`switch`和各种循环。了解这些是JS编程的基础。
43 3

热门文章

最新文章