JavaScrip 基础第三篇

JS分支结构

流程控制

在一个程序执行的过程中，各条代码执行顺序对程序结果是有直接影响的，很多时候需要通过控制代码

执行顺序来实现完成的功能

简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构:

分别是顺序结构分支结构和循环结构 这三种结构代表三种代码执行顺序

顺序结构

顺序结构是程序中最简单、最基本的流程控制

没有特定的语法结构，程序按照代码的先后顺序依次执行

程序中大多数代码都是这样执行

分支结构

由上到下执行代码的过程中，根据不同的天剑执行不同的代码，从而得到不同的结果

分支结构常见有两种语句

一种是 if语句

另一种为 switch语句

if 分支语句

语法结构：

if (满足条件表达式) {执行代码或者是执行语句
}
else {不满足表达式时，执行代码或者是执行语句
}

举例：

var age = prompt("请输入年龄")
if (age >= 18){alert("允许进入网吧")
} else {alert("年龄不够 ，无法进入网吧")
}

举例判断闰年：

var year = prompt("请输入年份")
if (year % 400 === 0 && year % 100  != 0 || year % 4 ===0){alert("是闰年")
} else {alert("不是闰年")
}

if else if 语句（多分支语句）

语法结构：

if (满足条件表达式1) {语句1
} else if (条件表达式2){语句2
} else if (条件表达式3){语句3
} else {最后语句
}

举例：判断成绩级别

要求：接收用户输入成绩判断成绩对应字母大于90(含)分 输出                          A大于80(含)分至90分(不含) 输出     B大于70(含)分至80分(不含) 输出     C大于60(含)分至70分(不含) 输出     D小于60(含)分输出                           E

var score = parseFloat(prompt("请输入成绩"))
if (score >= 90){alert("A")
} else if (score >= 80){alert("B")
} else if (score >= 80){alert("C")
} else if (score >= 80){alert("D")
} else {alert("E")
}

三元表达式

三元表达式能做一些简单的条件选择，有三元运算符组成的式子称为三元表达式

语法结构

条件表达式 ? 表达式1 : 表达式2
// 如果 条件表达式 为真  返回表达式1   否则返回表达式2

举例：数字补o


用户输入数字，如果数字小于10，则在前面补0，比如 01 09如果数字大于10，则不需要补0 比如20

var num = parseFloat(prompt("请输入数字"))
alert(num < 10 ? "0" + num  : num)

分支流程控制switch语句

switch 语句也是多分支语句

用于基于不同条件来执行不同的代码

当要针对变量设置一系列的特定值的选项时，就可以使用switch。

语法结构：

switch (表达式) {case value1:执行语句1;break;case value2:执行语句2;break;......default:执行最后的语句;
}

案例：

switch (2) {case 1:console.log('这是1')break;case 2:console.log('这是2')break;case 3:console.log('这是3')break;default:console.log('没有匹配到')
}

注意：如果没有break 会继续下一个case进行操作

break 是当匹配到当前结果会跳出当前结构语句

var fruit = prompt("请输入查询水果")
switch (fruit) {case "苹果":alert("苹果价格 3.5元/斤")break;case "榴莲":alert("榴莲价格 35元/斤")break;default:console.log('没有此水果')
}

switch 和 if 语句区别

一般情况下两个语句可以相互转换

switch case 语句通常处理 case 有教确定的值时进行判断 if else 语句更加灵活常用于范围判断

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

当分支比较少时 if else 执行效率比switch语句更高

当分支比较多时，switch 语句得执行效率比较高，结构更清晰

循环

循环的目的

在实际问题中有许多具有规律性得重复操作，因此在程序中要完成此类操作就需要重复执行某些语句

JS中的循环

js中主要有三种类型得循环

for 循环

while 循环

do... while循环

for 循环

在程序中，一组被重复执行得语句被称之为循环体，能否继续重复执行，取决于循环的终止条件，由循环体及循环的终止条件组成的语句，被称之为循环语句

语法结构：

for (初始化变量; 条件表达式; 操作表达式) {// 循环体 循环语句
}
// 初始化变量 就是用var 声明的普通变量 常用计数器使用
// 条件表达式 就是终止条件，每一次表达式循环是否继续执行
// 操作表达式 是每次循环代码最后执行得代码，经常用于计数器进行更新（递增或者递减）

案例：

for (var i = 1; i <= 100; i++) {console.log(i)
}

for 循环可以重复不同得代码，主要因为使用了计数器，计数器在每次循环过程中都会由变化

for (var i = 1; i <= 100; i++) {if (i == 1) {console.log("这个人今年1岁了,他出生了")} else if (i == 100) {console.log("这个人今年100岁了，但他已经死了")} else {console.log("这个人今年"+i+ "岁了")}
}

案例：求1-100和

var sum = 0
for (var i = 1; i<=100; i++) {sum += 0
}

案例：求3得倍数之和

var sum = 0;
for (var i = 1; i <= 100; i++) {i % 3 == 0 ? sum += i : 0
}
alert(sum)

案例：输入班级每个人的成绩进行计算平均成绩

var numPeople = parseInt(prompt("请输入班级人数"));
var soceAll = 0;
for (var i=1; i <= numPeople; i++) {var soce =  parseFloat(prompt("请输入第"+ i +"位学生成绩"))soceAll += soce
}
alert(soceAll/numPeople)

案例：一行打印五个星星

var str = '';
for (var i = 1; i <= 5; i++) {str += '⭐'
}
console.log(str)

案例：输入几个打印几个

var num = parseInt(prompt("请输入星星个数"));
var str = '';
for (var i = 1; i <= num; i++) {str += '⭐'
}
console.log(str)

双重for 循环

很多情况下单层for循环并不能满足我们的需求，比如我们要打印一个5行5列得图形，打印一个倒直角三角形等，此时就可以通过循环嵌套来实现

循环嵌套就是指在一个循环语句中再定义一个循环语句得语法结构，例如在for 循环中，可以在嵌套一个for 循环，这样的for循环语句我们称之为双重for循环

案例：打印几行几列星星

var line = parseInt(prompt("请输入星星行数"));
var colu = parseInt(prompt("请输入星星列数"));
var str = '';
for (var i = 1; i <= line; i++) {for (var j = 1; j <= colu; j++) {str += '⭐'}str += '\n'
}
console.log(str)

案例：打印直角三角型得星星

方法1：

var line = parseInt(prompt("请输入星星行数"));
var colu = parseInt(prompt("请输入星星列数"));
var str = '';
for (var i = 1; i <= line; i++) {for (var j = 1; j <= colu; j++) {str += '⭐'}str += '\n'colu -= 1
}
console.log(str)

方法2：

var line = parseInt(prompt("请输入星星行数"));
var colu = parseInt(prompt("请输入星星列数"));
var str = '';
for (var i = 1; i <= line; i++) {for (var j = i; j <= colu; j++) {str += '⭐'}str += '\n'
}
console.log(str)

案例：打印九九乘法口诀表

var str = '';
for (var i = 1; i <= 9; i++) {for (var j = 1; j <= i; j++) {var str += j + "x" + i  + "=" + i * j + "\t"}str += '\n'
}
console.log(str)

while 循环

while 语句可以在条件表达式为真得前提下，循环执行指定得一段代码，直到表达式不为真时循环结束

语法结构：

while (条件表达式) {// 循环体代码
}
// 执行流程 先执行条件表达式 如果位true 则执行循环体代码 如果为false则退出执行后面的代码

案例：

var i = 1
while (i <= 100) {console.log('继续');i++;
}
// 注意一定还需要条件表达式 进行对条件限制 否则会出现死循环 也即是说上方的案例中 如果 i++ 不存在就会产生死循环

案例：打印 1-100岁

var i = 1
while (i <= 100) {console.log(i+"岁了");i++;
}

do while 循环

语法结构：

do {// 循环体
} while (条件表达式)// 会先执行一次循环体，在判断条件，如果为真就继续执行循环体，否则推出循环

案例：

var i = 1;
do {console.log("我先做一个月,再发工资");i++;
} while (i<=100)

案例：打印1-100岁

var i = 1
do {console.log(i+"岁了");i++;
} while (i <= 100)

JS中循环由 for while do while循环

三种循环很多情况下都可以相互代替
如果用来计次数，与数字相关基本相同但是常用for循环
后面得开发过程中常用 for 循环

continue break

coutinue 关键字

continue 关键字用于立即跳出本次循环，继续下一次循环

案例：

for (var i =1; i <= 5; i++) {if (i == 3) {continue;}console.log('我正在吃第'+ i + '个包子');
}// 当判断条件结果 i 为 第3个时直接跳过这个循环，进入下一个 i 为4的 循环执行

案例：例如求1-100之间的和，除了能被 8整除的

var sum = 0;
for (var i = 1; i <= 100; i++){if (i % 8 == 0) {continue;}sum += i;
}
console.log(sum)

break 关键字

break 关键字用于立即跳出整个循环也就是跳出当前循环循环结束

案例：

for (var i =1; i <= 5; i++) {if (i == 3) {break;}console.log('我正在吃第'+ i + '个包子');
}// 当判断条件结果 i 为 第3个时直接跳出循环 后面不会执行 立即结束循环

JavaScript 规范

标识符命名规范

变量、函数的命名必须要有意义

变量的名称一般用名词

函数的名称一般用动词

操作符的规范

操作符的左右两侧各保留一个空格

单行注释保留一个空格

数组

数组的概念：数组可以把一组相关的数据一起存放，并提供方便的获取访问的方式

数组是指一组数据的集合，其中每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一钟将一组数据存储在单个变量名下的优雅方式

创建数组方式：

利用 new 创建数组

var arr = new Array(); //创建一个新的空数组

利用数组字面量创建数组

var arr1 = [];
var arr2 = ['苹果', '香蕉']

数组字面量是方括号 [ ]声明数组并赋值称为数组的初始化这种字面量方式也是使用最多的方式数组中可以存放任意类型的数据 ，例如字符串 布尔值  数值等等

数组的索引：

索引(下标)：用来访问数组元素的序号（数组下标从0开始）

数组元素获取

通过索引获取访问元素
数组可以通过索引访问修改获取对应的元素

案例：

var arr = ['苹果', '香蕉'];
arr[0]; // '苹果'
arr[2]; // 超出索引会返回值为undefined

数组遍历

将数组的全部元素取出

var arr = ['苹果', '香蕉', '榴莲', '西瓜'];
for (var i = 1; i < 4; i++) {console.log(arr[i])
}

数组长度

length 属性
数组.length 获取数组的长度，那么上方的方法可以修改为

var arr = ['苹果', '香蕉', '榴莲', '西瓜'];
for (var i = 1; i < arr.length; i++) {console.log(arr[i])
}

数组的长度 和元素个人有关   与索引无关索引是从0开始数组长度 是数组元素的个数 也就是从1开始  （空元组除外）案例： 求数组 [2, 6, 1, 7, 4] 所有元素的和及平均值

var arr = [2, 6, 1, 7, 4]
var sum = 0
var average = 0
for (var i = 0; i < arr.length; i++) {sum += arr[i];
}
average = sum / arr.length
console.log(sum, average)

数组最大值

var arr = [2, 6, 1, 7, 4]
var maxValue = 0;
for (var i = 0; i < arr.length; i++) {if (maxValue < arr[i]) {maxValue = arr[i]}
}
console.log(sum, maxValue)

数组转换为字符串

var arr = ["王朝", "马汉", 1, 7, 4]
var str = ''
for (var i = 0; i < arr.length; i++) {str += arr[i]
}
console.log(str, typeof(str))

数组中新增元素

可以通过修改length长度以及索引号增加数组元素

修改length长度

var arr = ["王朝", "马汉", 1, 7, 4]
arr.length = 7
console.log(arr)
console.log(arr[6]) // undefined
console.log(arr[5]) // undefined

修改索引号新增追加数组元素

var arr = ["王朝", "马汉", 1, 7, 4];
arr[5] = "牛头"
arr[6] = "马面"
// ["王朝", "马汉", 1, 7, 4, "牛头", "马面"]

如果索引存在，那么是修改元素

var arr = ["王朝", "马汉", 1, 7, 4]
arr[0] = "展昭"
["展昭", "马汉", 1, 7, 4]

循环新增数组元素

var arr = [];
for (var i = 0; i <10 ; i++) {arr[i] = i;
}

删除指定数组元素 :例如删除0元素

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {if (arr[i] != 0) {newArr[newArr.length] = arr[i];}
}
console.log(newArr)

反转元素

var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
console.log(newArr.length)
for (var i = 1; i < arr.length; i++) {newArr[newArr.length] = arr[(arr.length-i)];
}
console.log(newArr)

数组排序（冒泡排序）

冒泡排序：是一种算法，把一系列的数据按照一定的顺序进行排列显示（从大到小或从小到大）。

冒泡排序是一种简单的排序算法

它重复地走访过要排序的数列，一次比较两个元素

如果顺序错误，或者是说顺序不是按照要求的就进行交换，走访的数列工作是重复进行的直到没有在需要交换

也就是说该数列已经排序完成，这个算法的名字由来是因为越小的元素会经由交换慢慢，“浮” 到数列的顶端

算法：是观察执行过程，找到其中的规律，

案例：按照一定的排序，从小到大进行排序

var arr = [7, 54, 9, 45, 6, 2, 0, 7];
for (var i = 0; i <= arr.length-1; i++) {for (var j = 0; j <= arr.length-i-1; j++) {if (arr[j] > arr[j+1]) {var temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}}
}

函数的概念

在JS里面，可能会定义非常多的相同的代码，或者功能相似的代码，代码大量复用

虽然for 循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时就可以使用JS中的函数

函数：就是封装了一段可被重复调用执行的代码块，通过此代码块可以实现大量代码的重复使用

function getSum (num1, num2) {var sum = 0;for (var i = num1, i <= num2; i++) {sum += i}
}
getSum(1, 100)