JavaScript入门之分支语句

简介: 引入我们知道,当今世界丰富多彩的代码世界如果用语句来区分的话,不外乎三种:顺序语句分支语句循环语句正是这简简单单的三类控制语句,构成了花样繁多的程序世界。


引入


我们知道,当今世界丰富多彩的代码世界如果用语句来区分的话,不外乎三种:

顺序语句

分支语句

循环语句

正是这简简单单的三类控制语句,构成了花样繁多的程序世界。

在之前的JavaScript快速入门学习中,我们了解的大部分是顺序语句,即从上到下依次运行。这期我们来看看第二个控制语句——分支,是怎么一回事


1.条件判断


和许多编程语言一样,JavaScript也使用if、else等字眼来表示条件判断,以此构成分支。

但不一样的是,JS需要用小括号把条件括起来,再用语句块的方式来执行该分支的内容——if () { ... } else { ... }

例如,一个很常见的根据年龄判断案例,可以用if语句实现如下:

var age = 20;
if (age >= 18) { // 如果年龄age >= 18为true,则执行if语句块
    alert('adult');
} else { // 年龄age小于18执行else语句块
    alert('teenager');
}

注意:其实{}是可以省略的,但是省略之后js默认只执行if和else下的一个语句:

var age = 20;
if (age >= 18) // 如果年龄age >= 18为true,则执行if语句块
    alert('adult');
else // 年龄age小于18执行else语句块
    alert('teenager');
    console.log('age < 18');

此时执行完alert之后console.log便不再执行了。所以建议在写的时候多养成打{}的习惯。 很多时候你会发现有些人打代码经常出错,事后要花费大量精力在一堆代码中找错误修复bug,有些人却基本不需要怎么调试,关键问题解决了就能一次跑通,本质上或许就是练习的时候注重不注重习惯的差距吧


2. 多行条件判断


如果需要细分的分支不止两个,我们可以使用else if来创建更多分支——

我们还是拿年龄判断案例来看看:

var age = 3;
if (age >= 18) {
    alert('adult');
} else if (age >= 6) {
    alert('teenager');
} else {
    alert('kid');
}


else if是在if判断为false之后再运行并判断的。允许存在多个else if,优先级按从上到下的顺序来,先判断上面的,为false的时候再依次往下判断。只有在if和所有else if都判断为false的时候才会执行最后else的语句

从原理上理解,其实else if相当于多层if else嵌套:


var age = 3;
if (age >= 18) {
    alert('adult');
} else {
    if (age >= 6) {
        alert('teenager');
    } else {
        alert('kid');
    }
}

只不过实际操作起来嵌套太多层会降低代码可读性,我们就用这样的else if来帮助我们编写代码。(可以看到,我们其实就是把else后面的{}去除了,相当于else后紧跟一个if语句,因为只有一个语句所有并不需要加{})


相关文章
|
2月前
|
JavaScript 前端开发 C语言
javascript基础入门
javascript基础入门
24 1
|
4月前
|
JSON JavaScript 前端开发
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
47 0
|
4月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
51 2
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
28 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
77 0
|
4月前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
37 0
|
4月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(上)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
43 0
|
4月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)(下)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
26 0
|
1天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
2天前
|
JSON JavaScript 前端开发
深入探讨javascript的流程控制与分支结构,以及js的函数
深入探讨javascript的流程控制与分支结构,以及js的函数