程序本质上分为三大结构: 顺序结构、分支结构、循环结构
JavaScript中的程序结构也是这样,下面我们来分别介绍JS中的三种基本程序结构:
我们上篇博客中介绍到的使用逻辑运算符&&实现的就是类似于if单分支结构、
还有使用三目运算符实现的就是类似于if...else的分支结构,
下面我们就来正式介绍我们今天所要学的三个结构: 其中顺序结构在这里我们不在进行介绍,
因为JavaScript是解释型的脚本语言,所以它的执行顺序是从上而下顺序执行的, 我们主要介绍另外两种程序结构
一、分支结构
1、if语句
if 基础语法
if (条件表达式) {
代码块;
}
// 当条件表达式结果为true，会执行代码块；反之不执行
// 条件表达式可以为普通表达式
// 0、undefined、null、""、NaN为假，其他均为真
if 复杂语法
// 1.双分支
if (表达式1) {
代码块1;
} else {
代码块2;
}
// 2.多分支
if (表达式1) {
} else if (表达式2) {
}
...
else if (表达式2) {
} else {
}
if 嵌套
if 和 if 直接可以随意嵌套
if (表达式1) {
if (表达式2) {
}...
}...
if 案例:
var salary = prompt("请输入所发工资:");
if (salary > 0) {
console.log("工资已发, 打算还账!");
salary -= 100000;
if (salary > 0 ) {
console.log("拯救世界...");
} else if (salary == 0) {
console.log("家里蹲, 峡谷见");
} else {
console.log("借钱, 填窟窿, 谁来拯救我...");
console.log("借%d元钱", -salary);
}
} else {
console.log("拿我刀来, 允许你跑49m");
}
2、switch语句
switch (表达式) {
case 值1: 代码块1; break;
case 值2: 代码块2; break;
default: 代码块3;
}
// 1.表达式可以为 整数表达式 或 字符串表达式
// 2.值可以为 整数 或 字符串
// 3.break可以省略 break作用是结束分支结构(break结束所属switch语句)
// 4.default为默认代码块，需要出现在所有case最下方，在所有case均未被匹配时执行
switch案例一:
var num = prompt("请输入一个自然数") //输入接受的默认是字符串类型数据
var num = +num;
switch (num){
case"0":console.log("用户输入的数字是0");break;
case"1":console.log("用户输入的数字是1");break;
default:console.log("用户输入的数字非0和1");
}
default分支,
出现在所有case之下, 当所有case没有匹配上, 走该分支,
该分支也可以省略, 代表没有未匹配到的动作
switch案例二:
该案例想要展示的是省略break的情况, 该省的时候省,不该省的时候不能省,
比如在该程序中, 输入月份之后,省略了多个break,让case公用一个,如果在第一行匹配成功并且打印出来该月份为31天,如果后面没有break,就会继续往下执行,不会继续进行匹配,会直接进行打印操作,这样就背离了我们的需求.所以在适当的位置还是要加上break的.
var month = +prompt("请输入月份");
switch (month) {
case 1: case 3: case 5: case 7: case 8: case 10: case 12:
console.log("%d月天数为31天", month); break;
case 4: case 6: case 9: case 11:
console.log("%d月天数为30天", month); break;
case 2:
console.log("%d月天数为28天", month);
}
二、循环结构
1、for循环
for (循环变量定义并初始化①; 循环变量条件表达式②; 循环变量增量③) {
代码块④;
}
// 1.循环变量可以在外、在内声明
// 2.执行逻辑 ① ②④③ ... ②④③ ②，入口为①，出口为②(最终总会因为不满足条件而退出)，②④③个数为[0, n]
简单案例:
for (var i = 0; i < 5; i++) {
console.log("我最棒, 我最帅, 我是天下第一!");
}
2、while循环
while (条件表达式) {
代码块;
}
简单案例:
var count = 0;
while (count < 5) {
console.log("我最棒, 我最帅, 我是天下第一!");
count++;
}
小结:
所有for循环可以解决的问题,都可以由while来解决
while循环可以解决不明确循环次数的循环需求
break | continue 在JS的循环体中同样适用
break: 结束当前所属循环体
continue: 结束本次循环,进入下一次循环
简单案例:
for (var i = 0; i < 5; i++) {
if (i == 3) break;
console.log(i); // 0, 1, 2
}
for (var i = 0; i < 5; i++) {
if (i == 3) continue;
console.log(i); // 0, 1, 2, 4
}
3、do...while循环
do {
代码块;
} while (条件表达式);
无论条件是否满足,都需要执行一次循环体 (循环体至少被执行一次)
简单案例:
var num = 0;
do {
console.log("我最棒, 我最帅, 我是天下第一!");
num++;
} while (num < 5); // 当条件满足时, 返回循环体
4、for...in循环
用于遍历对象：遍历的结果为key，通过[ ]语法访问对应的value
obj = {"name": "zero", "age": 8}
for (k in obj) {
console.log(k, obj[k])
}
5、for...of循环
1.用于遍历可迭代对象：遍历结果为index，通过[]语法访问对应的value
2.ES6新增，可迭代对象有 字符串、数组、Map、Set、Anguments、NodeList等
iter = ['a', 'b', 'c'];
for (i of iter) {
console.log(iter[i])
}
6、break，continue关键词
break：结束本层循环
continue：结束本次循环进入下一次循环
三、异常处理(了解)
JS是一个处理前端的脚本语言,很大一部分页面中需要的数据都是直接从后台获取的,所以在JS中不用对数据进行太精确的处理, 所以JS中的异常处理的使用场景非常少,我们在这做一个简单的介绍:
<script>
// 了解
let num = 10;
try {
console.log(num); // try...catch捕获的是runtime时的异常
let num = 20;
} catch (e) {
console.log(e) // catch为处理异常的分支
} finally {
console.log('无论是否出现异常,该分支都会被执行')
}
</script>
四、函数初级
什么是函数: 具有特定功能的代码块
函数与方法的区别: 调用方式的不同: 函数通过函数名 | 方法通过调用者.语法调用
如何定义函数:
function 函数名(参数列表){
函数体
}
函数的分类:
无参函数:
function fn1(){
console.log("无参函数")
}
fn1();
有参函数:
function fn2(a,b){
console.log("a,b的和:".a + b)
}
fn2(10,20);
1、函数的定义
ES5中定义函数
function 函数名 (参数列表) {
函数体;
}
var 函数名 = function (参数列表) {
函数体;
}
ES6中定义函数
let 函数名 = (参数列表) => {
函数体;
}
匿名函数
(function (参数列表) {
函数体;
})
// 匿名函数需要自调用
(function (参数列表) {
函数体;
})(参数列表);
var fn3=function(){
// 匿名函数虽然没有名字,但会开辟内存空间,所以当然可以用一个变量来指向这个内存空间
console.log("没有直接定义名字的函数")
}
fn3();
匿名函数的自调用:
(function(){
// 定义一个匿名函数,至少需要使用一次,使用一次的方式就叫做匿名函数的自调用
// 如果匿名函数不存在任何使用,编译就无法通过
// 匿名函数的自调用:
// 1.将整个匿名函数作为一个整体,用()将其包裹
// 2.完成函数的调用,添加参数列表
console.log("匿名函数的自调用")
})()
为什么要出现匿名函数的自调用
在ES5 的时候,没有块级作用域的概念,想要产生局部作用域的变量只能通过在函数体内部定义变量了, 所以匿名函数的自调用很多时候是为了生成一个局部的作用域
(function(){
// 为了生成一个局部作用域
var num = 10;
})();
2、函数的调用
函数名(参数列表)
注意: 函数的调用()一定不可以省略,参数列表看情况(不管需不需要,均可以传或不传)
系统不会在()()之间添加; 作为结束语句,需要添加分号时一定需要手动添加
3、函数的参数
JS中有参函数调用的原则:
JS中只有位置参数,没有关键字参数
传参数的时候, 无论传多少个值,严格按照位置参数进行一一对应进行传值, 多传的参数没有对应的位置参数进行接收时会自动被丢弃
在传参的时候指定哪个值为多少时要按照位置进行传值,按照参数名进行传值是无效的
function func1() {
console.log("无参");
}
// 传不传参数均可以调用
func1();
func1(10, 20);
function func2(a, b) {
console.log(">>>", a + b);
}
func2()
func2(10)
func2(10, 20)
func2(10, 20, 30)
默认值参数
使用默认值参数时,传入的值也是按照位置进行传值的
不管该位置参数是否有默认参数,只要该位置有值传进来该位置上的参数值就会被替代
function func3(a, b=20, c, d=40) { // 定义在函数声明中的参数为形参
console.log("***", a + b + c + d);
}
var temp = 1000;
func3(10, 100, temp) // 函数调用传入的实际值,或拥有实际值的变量为实参
JS中函数传参时的大致规则:
个数不需要统一
function fn (a, b, c) {
console.log(a, b, c); // 100 undefined undefined
}
fn(100);
function fn (a) {
console.log(a) // 100
}
fn(100, 200, 300) // 200,300被丢弃
可以任意位置具有默认值
function fn (a, b=20, c, d=40) {
console.log(a, b, c, d); // 100 200 300 40
}
fn(100, 200, 300);
通过...语法接收多个值
function fn (a, ...b) {
console.log(a, b); // 100 [200 300]
}
fn(100, 200, 300);
// ...变量必须出现在参数列表最后
函数的参数小结::
1.实参与形参个数可以不匹配,随意规定
2.形参可以设置默认值(并非为py中的关键字参数)
3.实参对形参进行传值时,完全采用位置匹配(eg:第n个实参一定将值传递给第n个形参)
4、返回值
function fn () {
return 返回值;
}
// 1.可以空return操作，用来结束函数
// 2.返回值可以为任意js类型数据
// 3.函数最多只能拥有一个返回值
js的函数只能返回一个值, 这个值可以为任意类型(如果想返回多个值,将多个值放到数组或对象中)
let func4 = () => {
// return 1000, 8888, 6666; // 这种情况返回的是最后一个值
return [1000, 8888, 6666];
};
console.log(func4())
函数的返回值小结::
1.函数的返回值有return来明确,没有明确,则相当于返回undefined
2.函数只能返回一个值
3.函数的返回值就是函数的执行结果,也就是函数值
---------------------
原文：https://blog.csdn.net/Onion_cy/article/details/85075731