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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 1229-js数组与对象的解构-常用的流程控制

博主信息

博文 37

粉丝 2

访问量 34610

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

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

世纪天城

原创

651人浏览过

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>