js-day03 流程控制语句 对象

流程控制语句

分类

流程控制语句: 代码按照什么顺序执行的语句

顺序语句: 默认从上到下执行

条件语句(分支语句): 多条(2条以上)分支中选择 if if-else if-else-if switch

循环语句: for while do-while for-in

其他语句: break continue

分支语句

if

if: 判断代码是否执行

if(条件){

条件为真的时候执行的代码;

}

var core = prompt('请输入成绩');
console.log(core);
// 如果core大于60 弹出及格
// if(core > 60){
//     alert('及格');
// }

if-else

if-else:

if(条件){

条件为真的时候执行的代码;

} else {

条件为假的时候执行的代码;

}

// 如果core大于60 弹出及格 否则弹出继续努力
if(core > 60){
    alert('及格');
} else {
    alert('继续努力');
}

if-else-if

if-else-if: 用于多个条件

if(条件1){

条件1为真，执行的代码;

} else if(条件2){

条件2为真, 执行的代码;

} else if(条件3){

条件3为真, 执行的代码;

} else {

以上条件都不符合的时候，执行的代码;

}

if (core >= 80) {
    alert('A');
} else if (core >= 70 && core < 80) {
    alert('B');
} else if (core >= 60 && core < 70) {
    alert('C');
} else {
    alert('D');
}

switch

switch: 适用于条件和结果都单一的时候

条件: 判断某一个变量或者是某一个具体的值

结果: 指向的是具体的一个值 + - * / 100 60

break: 防止穿透, 如果不加, 当条件匹配到一个符合的结果后, 后续的结果都不匹配, 直接执行后面所有的代码;

switch(条件){
    case 结果1:
        当条件符合结果1执行的代码;
        break;
    case 结果2:
        当条件符合结果2执行的代码;
        break;
    case 结果3:
        当条件符合结果3执行的代码;
        break;
    default:
        以上结果都不符合的时候 执行的代码;
        break;
}

switch (str) {
    case '+':
        console.log(10 + 20);
        break;
    case '-':
        console.log(10 - 20);
        break;
    case '*': 
        console.log(10 * 20)
        break;
    case '/': 
        console.log(10 / 20);
        break;
    default: 
        console.log('超出运算范围了');
        break;
}

分支嵌套

两个及以上分支语句嵌套使用

// 弹出输入框 输入成绩 0-100
var core = prompt('请输入成绩');
​
// 判断成绩的可选范围
if(core >= 0 && core <= 100){
    if (core >= 80) {
        alert('A');
    } else if (core >= 70 && core < 80) {
        alert('B');
    } else if (core >= 60 && core < 70) {
        alert('C');
    } else {
        alert('D');
    }
} else {
    alert('请输入0-100之间的数字');
}

循环语句

for

语法

将一段代码重复执行多次(指定循环次数)

将一段代码执行指定的循环次数的过程

for(表达式1; 表达式2; 表达式3){

循环体;

}

for(初始化变量; 循环结束条件; 变量更新){

重复执行的代码块

}

初始化变量: var 变量 = 起始值; 数字 0 1 循环的次数从几开始的

循环结束的条件: 条件为真 循环执行 条件为假 循环结束

变量更新: 变量++ 变量--

循环结束的条件必须可用的 否则形成死循环

// 1--100
for(var i = 1; i <= 100; i++){
    console.log(i);
}
​
// 从50输出到0
for(var i = 50; i >= 0; i--){
    console.log(i);
}
​
// 循环结束的条件必须可用的 否则形成死循环
// for(var i = 5; i < 10; i--){
//     console.log(i);
// }

变异for

初始化变量;

for(;循环条件;){

循环体;

变量更新;

}

var j = 1;
for(;j<=5;){
    console.log(j);
    j++;
}

注意:

\1. 变异格式中两个分号不能省略

\2. 初始化的变量都是全局变量

\3. 循环执行完成后, 变量留在循环结束的数值

var j = 1;
for(;j<=5;){
    console.log(j);
    j++;
}

console.log(j); // 6

使用情况:

连续的数值

每一个

所有

渲染页面

数据一般都是通过数据请求的方式 由后台返回给我们

页面的数据一般都不是固定数据

数组、对象

多个数据的时候一般用数组

var 变量 = [值, 值1, 值2, ... 值n];

有长度有下标 通过下标的方式从数组中取出对应下标的值

取值: 数组[下标]

<!-- 1. 先布局页面 -->
<ol>
    <!-- 2. 注释掉页面的组成部分 -->
    <!-- <li>31个省市...</li>
    <li>中国队有望递补...</li>
    <li>中国队有望递补...</li>
    <li>中国队有望递补...</li>
    <li>中国队有望递补...</li> -->
</ol>
<script>
    /* 
        数据一般都是通过数据请求的方式 由后台返回给我们
        页面的数据一般都不是固定数据
        数组、对象
        多个数据的时候一般用数组 
        var 变量 = [值, 值1, 值2, ... 值n];
        有长度有下标 通过下标的方式从数组中取出对应下标的值
        取值: 数组[下标]
    */
    var arr = ['31个省市区...', '中国队有望递补男子4*100米', '苹果13真香吗?', '郑州市民再乘地铁后称鼻子酸酸的'];
    console.log(arr);
    console.log(arr[1]);

    // 将数组的每一个数据添加到ol中
    // 获取元素
    var ol = document.getElementsByTagName('ol')[0];
    console.log(ol);

    //  将数组的每一个数据
    for(var i = 0; i < arr.length; i++){
        // 数组的指定下标的数据
        console.log(arr[i]);
        // 将内容添加到ol的内容中
        ol.innerHTML += '<li>' + arr[i] + '</li>';
    }
</script>

while

初始化变量;

while(条件){

循环体;

变量更新;

}

var i = 1;
while(i <= 5){
    console.log(i);
    i++;
}

do-while

初始化变量;

do{

循环体;

变量更新;

}whlie(循环条件);

var j = 1;
do{
    console.log(j, 'j');
    j++;
}while(j <= 5);

for和while

for: 明确循环次数 length 5 10 100

while: 不明确循环次数

while和do-while

while: 先判断后执行

do-while: 先执行后判断

其他语句

break: 防止穿透; 结束整个循环;

continue: 结束本次循环;

// 水饺: 20
for(var i = 1; i <= 20; i++){
    if(i == 5){
        // break; // 吃到虫子 1-4
        continue; // 掉到地上 1-4 6-20
    }
    console.log(i);
}

循环嵌套

for(外层初始化变量; 外层判断条件; 外层变量更新){

for(内层初始化变量; 内层判断条件; 内层变量更新){

内层循环体;

}

}

外层循环执行一次 内层循环执行一轮

// 行循环
for (var i = 1; i <= 5; i++) {
    // 列循环
    for (var j = 1; j <= 5; j++) {
        document.write('⭐️');
    }
    // 行结束之前添加换行
    document.write('<br>');
}

对象

对象: 用来存储无长度、无顺序的数据

一般用来做前后台交互

{键: 值, 键: 值} 键值对

键建议加引号, 不加引号可以使用

也叫做json格式的数据

取值: 对象.键 对象['键'/变量]

存值: 对象.键 = 值; 对象['键'/变量] = 值;

在js中 .相当于白勺的 .后面本身就是字符串 在整个js中都适用

var user = {
    'name': '杨洋',
    age: 33,
    'height': 188
};
console.log(user);

// 取值: 对象.键
console.log(user.name);
// console.log(user.'name'); // .后面不能直接加字符串
// 在js中 .相当于白勺的 .后面本身就是字符串 在整个js中都适用
// 取值: 对象['键'/变量]
console.log(user['name']);

var a = 'name';
console.log(user[a]);

// 存值: 对象.键 = 值; 对象['键'/变量] = 值;
user.girlFriend = '迪丽热巴';
user['gf1'] = '古力娜扎';

console.log(user);

for-in

for(var 变量 in 数据){

变量: 键

数据[变量]: 值

}

for(var key in user){
    console.log(key, user[key]);
}

// forin不仅仅可以遍历对象 也可以遍历数组、集合
var arr = ['a', 'b', 'c'];
for(var i in arr){
    console.log(i, arr[i]);
}