1229-js数组与对象的解构-常用的流程控制

js解构赋值
任何类型都可以解构,但是工作中基本上只会用到对象和数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 任何类型都可以解构,但是工作中基本上只会用到对象和数组 -->
    <script>
        // 1. 对象解构
        // 原始结构
        const user = {
            name: 'js老师',
            age: 18,
        };
        // 解构要求等号二边类型一致例如：
        // 注意： 对象解构时需要用（）将其全部包住
        ({ name, age } = { name: 'js', age: 18 });
        console.log(name, age);
        // 对象解构支持默认值如下
        ({ name, age, sex = '男'} = { name: 'js', age: 18 });
        console.log(name, age, sex);
        // 数组解构
        const colors = ['red', 'green', 'blue'];
        // 将左边看成模板
        // 将左边看成模板
        // 将colors数组中的值依次赋值到左边的变量中
        let [color1, color2, color3] = colors;
        console.log(color1, color2, color3);
        // 数组嵌套解构
        let [a, [b, c], d] = [1, [2, 3], 4];
        console.log(a, b, c, d);
        // 数组解构的默认值
        let [x, y, z = 999] = [100, 200];
        console.log(x, y, z);
    </script>
</body>
</html>

流程控制:分支

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>流程控制:分支</title>
</head>
<body>
    <script>
        // if单分支判断语句
        let score = 120;
        if(score>=60) console.log('及格');
        // if双分支判断语句
        if(score>=60) console.log('及格');
        else console.log('不及格');
        // if多分支判断语句
        // &&可以理解为 并且
        // ||为或，与 都可以
        if(score>= 60&& score<=80) console.log('及格');
        else if(score>80&&score<=100) console.log('学霸');
        else if(score>100||score<0) console.log('分数无效');
        else console.log('不及格');
        // switch语句 通常不去做区间判断,而是用于单值判断
        score =70
        switch(true){
            case score>=60&&score<=80:
                console.log('及格');break;
            case score>80&&score<=100:
                console.log('学霸');break;
            case score>100||score<0:
                console.log('分数无效');break
            default:console.log('不及格');
        }
        // switch对于单值的字符器需要将格式统一化,例如全转为大写或小写
        let response = 'Success';
        switch (response.toLowerCase()) {
            case 'fail':
                console.log('请求失败'); break;
            case 'success':
            // 当response中的值与success相同时执行
                console.log('请求成功'); break;
            case 'error':
                console.log('参数错误'); break;
            default: console.log('未知错误');
        }
         // 使用三元运算来简化"双分支"
         score = 30
         console.log(score >= 60 ? '及格了' : '补考吧,兄弟');
        //  score >= 60为表达式
        // ？判断值为真时输出
        // :相当于else
    </script>
</body>
</html>

流程控制-循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>流程控制-循环</title>
</head>
<body>
    <script>
        // while循环 
        // 定义数组
        const arr = [1,2,3,4,5,6];
        // let i =0;
        // while(i<arr.length){
        //     console.log(arr[i]);
        //     i++
        // }
        // for (初始化循环变量; 设置循环条件; 更新循环条件) { ...}
        for(let i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
        // 对象的遍历for - in 
        const user = {
            id: 5,
            name: 'php老师',
            email: 'php@php.cn'
        };
        for(let k in user){
            // console.log(user[k]);
            console.log(`${k}=>${user[k]}`);
        }
        // for - of 更加通用 它可以对象和数组的遍历
        for (let value of arr) {
            console.log(value);
        }
    </script>
</body>
</html>

相关文章