JS流程控制-分支
目标
- 能够使用 if 分支语句
- 能够使用 switch 分支语句
- 能够使用三元表达式
分支语句
- if 语句
案例（为啥不用转换类型也可以？？？)
<input type="button" value="if语句案例" onclick="wangba()">
<script>
function wangba(){
var wbage = prompt('how old r u');
// if((Number(wbage)) >= 18){
// alert('come in');
// }
if(wbage >= 18){
alert('come in');
}
}
</script>
案例判断闰年（总是忘记调用html调用函数后加（）!)
<input type="button" value="判断闰年" onclick="every4Year()">
<script>
function every4Year(){
var urYear = prompt('年份');
if(urYear % 4 == 0){
alert('闰年');
}else{
alert('平年');
}
}
</script>
(omg闰年除了能被4整除还要不能整除100,或者能够被400整除【四年一闰，百年不闰，四百年再闰】，所以应该是if(uryear %4 == 0 && uryear%100 != 0 || uryear % 400 == 0)！！！）
案例判断是否中奖
<input type="button" value="判断是否中奖" onclick="andy()">
<script>
function andy(){
var andy = prompt("w ur name");
if(andy == 'andy'){
alert('surprise5');
}else{
alert('nothing');
}
}
</script>
- 三元表达式 （像if else）
条件表达式 ? 表达式1 : 表达式2 ;
var num = 10;
var result = num > 5 ? 'yes' : 'no';
console.log(result); //表达式是由返回值的
var blingnum = prompt('num');
var result = blingnum < 10 ? blingnum = '0' + blingnum : blingnum;
console.log(blingnum);
-
switch 语句
多分支语句 进行匹配 可以多选一（特定值比较合适，有范围的用 if else更合适）
switch(表达式){
case 1: 执行语句; break;
case 2: 执行语句;
default: 执行语句;break；
在实际开发中，表达式经常写为变量，变量的值与 case 的值匹配时是全等的，值和数据都相等，如果case里没有break，则继续执行下一个case案例 查询水果
var melon = prompt('水果'); switch(melon){ case 'apple': alert('5.5yuan'); break; case 'banana': alert('bananayuan'); break; case '西瓜': alert('dont wanna melon'); break; default: alert('nothing'); break; }switch 语句和 if else if语句的区别
①一般情况下两个语句可以互换
②switch…case 语句通常处理case比较稳定的情况，而 if else语句更加灵活（常用于范围判断）
③switch 语句进行条件判断后直接执行到程序的条件语句，效率更高，而 if else需要执行多种条件判断
④当分支较少时，if else语句执行率比 switch高
⑤当分支较多时，switch 语句的执行效率更高，且结构更清晰
200422补充：
if (num == 1){}
else if(num == 2) {}
else if(num == 3){}
分支多时，每个 if 都要进行判断，效率降低
+++++++++++++++++
switch 执行时 将条件表达式的值和 case 后的表达式的值 依次作全等比较 若相等则开始执行case 后的代码
循环结构
目标
- 能够说出循环的目的
- 能够说出 for 循环的执行过程
- 能够使用断点调试来观察代码的执行过程
- 能够使用 for 循环完成累加求和等案例
- 能够使用双重 for 循环完成乘法表案例
- 能够说出 while循环和 do while 循环的区别
- 能够说出 break 和 continue 的区别
断点调试
sources设置号好断点以后再刷新浏览器即可
案例 1-100累加和
var sum = 0;
for(i=1;i<=100;i++){
sum += i;
}
console.log(sum);
//奇偶数累加和
var even = 0, odd = 0;
for(i=1;i<=100;i++){
if(i % 2 == 0){
even += i;
}else{
odd += i;
}
}
console.log(even);
console.log(odd);
//求学生成绩案例
var numcheng = prompt('总人数');
var sum = 0;
var average = 0;
for(var i = 1;i <= numcheng;i++){
var chengji = prompt('第' + i + '个成绩');
sum += Number(chengji); //注意转换数据类型
}
average = sum / numcheng;
alert(average);
写学生成绩时没有考虑数据类型转换问题，除了prompt接受的数据为字符串，还有求average时使用除法也是一个隐式转换（弹幕看见的）
- 双重 for 循环
外层执行一次，里面的循环执行全部
for(var i = 1;i <= 3; i++){
console.log('外层循环' + i);
for(var j = 1;j <= 3;j++){
console.log('里层循环' + j);
}
}
}
//倒三角形案例
var star = '';
for(i = 1;i <= 10;i++){
for(j = i; j <=10;j++){//j=1;j<10-i;j++
star += '⭐';
}
// console.log(star);
star += '\n';
}
console.log(star);
var star = '';
for(i = 1;i <= 10;i++){
for(j = 1;j <= i;j++){//j = 10;j <= 10;j--死循环
star += '⭐';
}
star += '\n';
}
console.log(star);
天哪这两个三角形真的把我整傻了！！不过为啥要小于等于啊？直接等于好像也没问题啊？？
案例九九乘法表
var result = '';
for(i = 1;i <= 9;i++){
for(j = 1;j <= i;j++){
result += j +'*' + i + '=' + (i*j) + ';';
}
result += '\n';
}
console.log(result);
}
总是在小细节上面绊倒……原来不能直接等于的原因是要依次循环 好困啊啊啊
- while循环
var i = 1;
while(i <= 10){
console.log(i);
i++;
}
//1~100之间的整数和
var j = 1;
var sum = 0;
while(j <= 100){
sum += j;
j++;
}
console.log(sum);
//弹出提示框”你爱我吗“，输入我爱你则结束，否则循环
var valuelove = prompt('do u love me?');
while(valuelove !== 'yep'){
//注意赋值重新判断，否则造成死循环
valuelove = prompt('do u love me');
}
}
- do while循环
do {
//循环体代码- 条件表达式为 true 时重复执行循环体代码
}while (条件表达式);
先执行循环体，再进行判断，至少执行一次循环体
案例
function dothree(){
//打印人的一生
var doage = 1;
do{
console.log(doage);
doage++;
}while(doage <= 10);
//1~100整数和
var sum = 0;
var j = 1;
do{
sum += j;
j++;
}while(j <= 100);
console.log(sum);
//提示框
do{
var message = prompt('do u love me?');
}while(message !== 'yep');
alert('fine');
}
-
循环小结
- ① 在实际工作中更常用 for 循环语句，写法更简洁直观
- ② 计次数，与数字相关的更常用 for
- ③ while 和 do while执行顺序与次数都不同 -
continue 和 break
continue退出当前次循环，break 退出整个循环
JS命名规范
-
标识符命名规范
- 变量、函数的命名必须要有意义，变量一般使用名词，函数一般使用动词 -
操作符命名规范
- 一般操作符前后都由空格 -
单行注释规范
- 单行注释前有个空格 -
其他规范
- 括号前后空格，花括号对齐
JS数组Array
目标
-
知道为什么要有数组
-
创建数组
-
能够获取数组中的元素
-
对数组进行遍历
-
给数组新增一个元素
-
独立完成冒泡排序案例
-
数组的创建方式
- 利用 new 创建数组var arr = new Arry();
- 利用数组字面量（见名知意？）创建数组var arry = [];更常见 -
遍历数组
var arry = ['关羽','张飞','马超','赵云','黄忠','刘备','姜维'];
for (i = 0;i <= 6;i++) {
console.log(arry[i]);
}
数组的长度
数组名.length
- 数组的长度是元素个数，不要与索引号混淆
- arr.length 动态获取数组个数
200422补充：
length 获取不连续的数组时返回的是数组最大索引号+1，而不是数组实际元素。
案例遍历数组
var arry = [2,6,1,7,4],
sum = 0,
average = 0;
for (i = 0; i < arry.length;i++) {
sum += arry[i]; //i是计数器，加的是数组元素
}
average = sum / arry.length;
console.log(sum,average);
- 新增数组长度
- ① 修改 length 长度
arr.length = 5;新增空元素初始值为 undefined
- 新增数组元素 修改索引号 追加数组元素，不要直接给数组名赋值，会直接覆盖数组原本数组内容
arr1[5] = ‘新增’ ;
200422补充：
通过 arr[arr.length] = 10; 往数组内添加元素
+++++++++++++++
arr = [10]; arr = [20,30]; // 输出arr 20，30
筛选数组案例
var arr1 = [2,0,6,1,77,0,52,0,25,7];
var newArr = [],
j = 0;
//第二种方法
//刚开始 newArry.lengrh 就是0
for (i = 0 ;i < arr1.length; i++) {
if (arr1[i] >= 10) {
newArr[j++] = arr1[i];
// 新数组索引号从零开始
// newwArr[newArr.length] = arr1[i];
}
}
console.log(arr2);
案例翻转数组
var arr1 = ['red','green','blue','pink','purple'];
var newArry = [];
for (i = arr1.length; i > 0; i--) {
//i >= 0的话会多出一个
//数组arr1内的第0，1，2，3，4个
//老师的答案： i = arr1.length - 1;i >= 0;i--;
newArry[newArry.length] = arr1[i-1];
}
console.log(newArry);
案例冒泡排序
var arr1 = [5,4,3,2,1];
// 比较四趟
for (i = 0; i < arr1.length - 1;i++) {
//每趟比较次数不同
for (var j = 0;j < arr1.length - i - 1;j++) {
// 每个数两两比较
// if 里的 j 写成了 i ，出错 原因咦想通，花费30分钟
if (arr1[j] > arr1[j + 1]) {
var temp = arr1[j];
arr1[j] = arr1[j + 1];
arr1[j + 1] = temp;
}
}
}
console.log(arr1);
扫一扫
6525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
