JS基础--判断+ 循环

AsiaFT.

已于 2022-08-17 14:31:37 修改

阅读量422

点赞数

文章标签： javascript 前端开发语言

于 2022-07-30 12:15:59 首次发布

本文链接：https://blog.csdn.net/m0_46181452/article/details/126067710

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

JS基础--判断+ 循环

JS判断
JS循环

JS判断

if/else if/ else

三元运算符

简单的if else 书写，如果复杂的话，就不要写成三元运算符了。如果判断后没有执行语句，则需要写null 或 undefined来占位
例：将如下if else 判断转为三元运算符

let a = 10;
if (a > 0) {
    if (a < 10) {
        a++;
    } else {
        a--;
    }
} else {
    if (a > -10) {
        a += 2;
    }
}

由于最后一个if没有else 语句，所以需要加null 或者undefined进行赋值。转换后的结果为：

a > 0 ? (a < 10 ? a++ : a--) : (a > -10 ? a += 2 : null);

如果不加null或undefined，则报错：

Uncaught SyntaxError: Unexpected token ')'

在这里插入图片描述

switch case

每种case之后最好都加上brea。不加break，则不管后面条件是否成立，都要执行，直到遇到break为止。
每种条件都不成立，则写default；
** 当一个变量在不同几种值下，执行的语句是一样的时候，可以不加break；**
每种case里的等号是绝对相等（‘=’包括数值类型），和if else里面不同，if else里面是。为了业务严谨，使用===

例：幂的表示： Math.pow(x,次方数)

let a = 10;
switch (a) {
    case 1:
        a += 1;
        break;
    case 5:
        a += 5;
        break;
    default:
        a = Math.pow(a, 2);
}
console.log(a);
//输出100

例：如果将case1里的break去除，则为：

let a = 1;
switch (a) {
    case 1:
        a += 1;
    case 5:
        a += 5;
        break;
    default:
        a = Math.pow(a, 2);
}
console.log(a);

输出7

case 1 执行，case 5 虽然不符合a=1，但是由于case1 没有break，则也会被执行。

当然，break 不加也是有用处的。比方说，不同的取值，对应同一个执行语句时，就可以不加break；
例：

let a = 1;
switch (a) {
    case 1:
    case 5:
        a++;
        break;
    default:
        a = Math.pow(a, 2);
}
console.log(a);
// 2

a为1或5 时，做自增操作。因为case 1 里面没有内容，且没有break，所以继续执行5里面的内容，遇到break 跳出判断。

例：年终奖计算
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>年终奖计算</title>
</head>

<body>
    工龄: <input type="text" value="1" id='year' />
    <br> 月薪: <input type="text" value="5000" id='salary' />
    <br>
    <button type="submit" id="sub">计算年终奖</button>
    <br> 您的年终奖为:￥
    <span id='bonus'></span>
</body>
<script>
    let year = document.getElementById('year');
    let salary = document.getElementById('salary');
    let sub = document.getElementById('sub');
    let bonus = document.getElementById('bonus');

    sub.onclick = function() {
        // 获取year 和 salary的值, 在点击onclick 需要重新获取值， 所以将这个值放在函数体内
        let y = Number(year.value);
        console.log(y);
        let s = Number(salary.value);
        console.log(typeof s);
        console.log(s);
        let result = null;
        if (isNaN(y) || isNaN(s)) {
            alert("请检查输入是否有误。");
            // 终止函数执行
            return;
        }
        if (y > 0 && y <= 1) {
            result = (s <= 8000 ? s : s * 1.2);
            console.log(result);
        } else if (y > 1 && y <= 2) {
            result = s < 10000 ? 1.5 * s : 1.7 * s;
            console.log(result);

        } else {
            result = s < 12000 ? 3 * s : 3.2 * s;
            console.log(result);

        }
        // 将值写入span的内容,调用innerHTML
        bonus.innerText = result;

    }
</script>

</html>

JS循环

for

for in

for in 循环是遍历对象中所有的属性名对应的属性值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>for in 循环</title>
</head>

<body>
    <script>
        let stu = {
            name: 'Amy',
            ID: 10,
            1: 90,
            2: 98
        };
        // key是属性名对应的变量,对象中有多少组键值对，循环就执行几次（除非break结束）
        // 获取属性值：obj[属性值]， 不能写成obj['key']或者obj.key ，这样就代表键名为'key' , 而实际没有这个key，所以结果为undefined。
        for (var key in stu) {
            console.log("属性名：" + key + "， 属性值：" + stu[key]);
        }
        console.log(stu.key); //undefined
        console.log(stu['key']); //undefined
    </script>
</body>

</html>

结果为：

属性名：1， 属性值：90
属性名：2， 属性值：98
属性名：name， 属性值：Amy
属性名：ID， 属性值：10
undefined
undefined

结果发现，属性名为数字的在最上面按照大小展示（属性名：1，2， name， ID ）

属性名和变量的区别

例:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>变量名和属性名的区别</title>
</head>

<body>
    <script>
        var name = 10;
        var obj = {
            name: "Asia",
            10: "Happy"
        };
        // 1. 属性名只能是数字或者字符串，在对象中，属性值name虽然没有加“”， 但本质是“name”。
        // 2. 对象属性名的调用方式有两种， obj.name 和 obj['name']
        // 3. name 是变量名， 代表的是这个变量对应的值， obj[name] 和 obj['name'] 是两个不同的符号. 
        // obj[name] 表示obj[10]
        console.log(obj.name); // "Asia"
        console.log(obj['name']); //"Asia"
        console.log(obj[name]); //"Happy"
    </script>
</body>

</html>

总结:
1. 属性名只能是数字或者字符串，在对象中，属性值name虽然没有加“”，但本质是“name”。
2. 对象属性名的调用方式有两种， obj.name 和 obj[‘name’]
3. name 是变量名，代表的是这个变量对应的值， obj[name] 和 obj[‘name’] 是两个不同的符号.

for of (ES6 新增)

while 循环

do while 循环

continue 和 break 区别

continue 是跳出本次循环，继续执行下一次循环。break 是立即跳出循环，执行循环后面的语句。
示例：

for (var i = 0; i < 10; i++) {
    if (i >= 2) {
        i += 2;
        continue;
    }
    if (i >= 6) {
        i--;
        break;

    }
    i++;
    console.log(i);
}
console.log(i);

/*
i=0, i++, i=1, 输出， i又进行循环体的自增，i=2;
i=2，i>=2 满足，i=4，continue 表示i执行i++ 后，继续下一次循环，则i=5；
i=5, i>=2 满足，i=7，continue ， i=8;
i=8, i>=2 满足，i=10, continue, i=11;
i=11, 不满足<10, 不执行循环体， 直接输出i=11
 */