首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >ES6 | 前端必备技能:变量的数据解构赋值

ES6 | 前端必备技能:变量的数据解构赋值

作者头像
倾盖
发布于 2022-08-16 06:23:50
发布于 2022-08-16 06:23:50
21800
代码可运行
举报
文章被收录于专栏:RivenCabinRivenCabin
运行总次数:0
代码可运行

本文参考地址:变量的解构赋值 - ECMAScript 6入门 (ruanyifeng.com)

我的代码实践:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ES6解构赋值</title>
</head>
<body>

<script>
    /*
    * 数组的解构赋值
    * */
    let [a, b, c] = [1, 2, 3]
    console.log("a:" + a);//a=1
    console.log("b:" + b);//b=2
    console.log("c:" + c);//c=3

    let arr = [4, 5, 6]
    let [d, e, f] = arr
    console.log("d:" + d);//d=4
    console.log("e:" + e);//e=5
    console.log("f:" + f);//f=6

    let [, , g] = [7, 8, 9]
    console.log("g:" + g)//g=9

    let [h, ...y] = [10, 11, 12, 13]
    console.log("y:" + y)//h=10,y=11,12,13

    let [aaa, bbb] = [14]
    console.log("aaa:" + aaa)//aaa=14
    console.log("bbb:" + bbb)//bbb=undefined

    let [ccc, ddd = 16] = [15]
    let [eee = 17, fff = 18] = [null, undefined]
    console.log("ccc:" + ccc)//ccc=15
    console.log("ddd:" + ddd)//ddd=16
    console.log("eee:" + eee)//eee=null
    console.log("fff:" + fff)//fff=18

    function fn() {
        console.log("fn")
    }

    let [i = fn()] = []//输出fn

    let [j, k = j] = [19]
    console.log("j:" + j)//j=19
    console.log("k:" + k)//k=19

    let [l = 20, m = l] = [21, 22]
    console.log("l:" + l)//l=21
    console.log("m:" + m)//m=22

    /*
    * 对象的解构赋值
    * */
    let {o1, o2} = {o2: "1", o1: "2"}
    console.log("o1:" + o1);//o1=2
    console.log("o2:" + o2);//o2=1

    let {o3, o4} = {o4: "4"}
    console.log("o3:" + o3)//o3=undefined
    console.log("o4:" + o4)//o4=4

    let {o5: o6} = {o5: "5"}
    console.log("o6:" + o6)//o6=5,o5 is not defined

    // let obj = {
    //     oo: [
    //         "hello",
    //         {jj: "world"}
    //     ]
    // }
    // let {oo: [hh, {jj}]} = obj
    // console.log("hh:" + hh);  //hh:hello
    // console.log("jj:" + jj);  //jj:world
    // console.log("oo:" + oo);  //oo is not defined

    // let {oo, oo: [hh, {jj}]} = obj;
    // console.log("hh:" + hh);//hh:hello
    // console.log("jj:" + jj);//jj:world
    // console.log("oo:" + oo);//oo=hello,[object Object]

    let obj = {
        ob: {
            st: {
                first: 1,
                last: "hello"
            }
        }
    }
    let {ob, ob: {st}, ob: {st: {first, last}}} = obj
    //第一个ob是变量
    //第二个ob和第三个ob是匹配模式
    //第一个st是变量
    //第二个st是匹配模式
    console.log("ob:" + ob)
    console.log("st:" + st)
    console.log("first:" + first)
    console.log("last:" + last)

    /*
    * 数据结构的用途
    * */
    //1.交换变量的值
    let x = 1;
    let z = 2;
    [x, z] = [z, x];
    console.log("x:", x);
    console.log("z:", z);

    //2.从函数返回多个值
    //函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
    //返回一个数组
    function f1() {
        return [11, 22, 33]
    }

    let [v1, v2, v3] = f1();
    console.log("v1", v1)
    console.log("v2", v2)
    console.log("v3", v3)

    //返回一个对象
    function f2() {
        return {
            e1: "hello",
            e2: "world"
        }
    }

    let {e1, e2} = f2()
    console.log("el:", e1)
    console.log("e2:", e2)

    //3.函数参数的定义
    //解构赋值可以方便地将一组参数与变量名对应起来。

    //参数是一组有次序的值(数组)
    function f3([c1, c2, c3]) {
        return c1 + c2 + c3
    }

    let result = f3([3, 6, 9]);
    console.log("result:", result)

    //参数是一组无次序的值(对象)
    function f4({c4, c5, c6}) {
        return c4 + c5 + c6
    }

    let result2 = f4({c4: 10, c5: 20, c6: 30})
    console.log("result2:", result2)

    //4.提取 JSON 数据
    let jsonData = {
        id: 1,
        name: '张三',
        age: 19,
        hobby: ["唱", "跳", "rap"]
    }
    let{id,name,age,hobby:aiHao}=jsonData;
    console.log(id)
    console.log(name)
    console.log(age)
    console.log(aiHao)

    //5.函数参数的默认值
    function f5({f1=10,f2=true,f3="你好"}={}) {
        console.log("f1:",f1)
        console.log("f2:",f2)
        console.log("f3:",f3)
    }
    f5();
    f5({f1:20,f2:false,f3:"世界"});

    //6.遍历map结构
    //任何部署了 Iterator 接口的对象,都可以用for...of循环遍历。
    //Map 结构原生支持 Iterator 接口,配合变量的解构赋值,获取键名和键值就非常方便。
    let map = new Map();
    map.set('k1',"值1")
    map.set('k2',"值2")
    map.set('k3',"值3")
    for (let [key, value] of map) {
        console.log(key + "==" + value);
    }
    //只取key
    for (let [key] of map) {
        console.log(key)
    }
    //只取value
    for (let [, value] of map) {
        console.log(value);
    }

    //7.输入模块的指定方法
    // 输入模块的指定方法
    const { SourceMapConsumer, SourceNode } = require("source-map");
</script>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
浅谈Java异常及其编译时异常和运行时异常的区别[通俗易懂]
异常是程序编码和运行时经常发生的事件,了解异常有助于我们提高代码质量,增强系统的健壮性,这里总结一下Java编程中的异常、以及Java编译时异常和运行时异常的区别,并列举几种常见的异常,以供参考学习。
全栈程序员站长
2022/11/11
2K0
浅谈Java异常及其编译时异常和运行时异常的区别[通俗易懂]
Java面试题系列之基础部分(六)——每天学5个问题
Java基础部分学习的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io的语法,虚拟机方面的语法,这些都是最基本而且最易问到的,我们只要每天学一点点,
用户1289394
2018/02/26
6830
Java面试题系列之基础部分(六)——每天学5个问题
JavaSE面试深度剖析 第三讲
按照异常需要处理的时机分为编译时异常(也叫强制性异常)也叫CheckedException 和运行时异常(也叫非强制性异常)也叫RuntimeException。只有 java 语言提供了 Checked 异常,Java 认为 Checked 异常都是可以被处理的异常,所以 Java 程序必须显式处理 Checked 异常。如果程序没有处理 Checked 异常,该程序在编译时就会发生错误无法编译。这体现了 Java 的设计哲学:没有完善错误处理的代码根本没有机会被执行。对 Checked 异常处理方法有两种: 1 当前方法知道如何处理该异常,则用 try…catch 块来处理该异常。 2 当前方法不知道如何处理,则在定义该方法是声明抛出该异常。
易兮科技
2020/09/25
4910
java运行时异常和非运行时异常区别_常用的运行时异常
Java把异常当做对象来处理,并定义一个基类java.lang.Throwable作为所有异常的超类。Java中的异常分为两大类:错误Error和异常Exception,Java异常体系结构如下图所示:
全栈程序员站长
2022/11/11
1.3K0
Java中的异常(Error与Exception)
异常机制是指当程序出现错误后,程序如何处理。具体来说,异常机制提供了程序退出的安全通道。当出现错误后,程序执行的流程发生改变,程序的控制权转移到异常处理器。
conanma
2021/12/06
8350
Java面试题-基础篇三(干货)
感谢原文出处:https://www.cnblogs.com/javazhiyin/
阮键
2019/08/01
5180
Java异常 Throwable、Exception、Error
  Java通过API中Throwable类的众多子类描述各种不同的异常。因而,Java异常都是对象,是Throwable子类的实例,描述了出现在一段编码中的 错误条件。当条件生成时,错误将引发异常。
chenchenchen
2022/03/09
2.5K0
Java异常 Throwable、Exception、Error
运行时异常和一般异常的区别[通俗易懂]
大家好,又见面了,我是你们的朋友全栈君。 Java提供了两类主要的异常:runtime exception和checked exception。checked 异常也就是我们经常遇到的IO 异常,以及SQL异常都是这种异常。对于这种异常,JAVA编译器强制要求我们必需对出现的这些异常进行catch。所以, 面对这种异常不管我们是否愿意,只能自己去写一大堆catch块去处理可能的异常。 但是另外一种异常:runtime exception,也称运行时异常,我们可以不处理。当出现这样的异常时,总是由虚拟 机接管。比如:我们从来没有人去处理过NullPointerException异常,它就是运行时异常,并且这种异常还是最常见 的异常之一。 出现运行时异常后,系统会把异常一直往上层抛,一直遇到处理代码。如果没有处理块,到最上层,如果是多线程就 由Thread.run()抛出,如果是单线程就被main()抛出。抛出之后,如果是线程,这个线程也就退出了。如果是主程序 抛出的异常,那么这整个程序也就退出了。运行时异常是Exception的子类,也有一般异常的特点,是可以被Catch块 处理的。只不过往往我们不对他处理罢了。也就是说,你如果不对运行时异常进行处理,那么出现运行时异常之后,要 么是线程中止,要么是主程序终止。 如果不想终止,则必须扑捉所有的运行时异常,决不让这个处理线程退出。队列里面出现异常数据了,正常的处理应 该是把异常数据舍弃,然后记录日志。不应该由于异常数据而影响下面对正常数据的处理。在这个场景这样处理可能是 一个比较好的应用,但并不代表在所有的场景你都应该如此。如果在其它场景,遇到了一些错误,如果退出程序比较好, 这时你就可以不太理会运行时异常,或者是通过对异常的处理显式的控制程序退出。
全栈程序员站长
2022/11/10
5530
Java面向对象基础(封装继承多态)【4】 异常处理
在实际工作中,我们遇到的情况不可能是非常完美的。比如:你写的某个模块,用户输入不一定符合你的要求;你的程序要打开某个文件,这个文件可能不存在或者文件格式不对;你要读取数据库的数据,数据可能是空的;我们的程序再运行着,但是内存或硬盘可能满了等等。
徐建国
2021/08/03
6010
Java面向对象基础(封装继承多态)【4】 异常处理
Java:面试官上来就问:遇到异常怎么办?我懵了
异常主要处理编译期不能捕获的错误。出现问题时能继续顺利执行下去,而不导致程序终止。确保程序的健壮性。Throwable 是所有 Java 程序中错误处理的父类 ,有两个子类:Error 和 Exception 。
Java帮帮
2019/12/27
2K0
Java异常(Error与Exception)分析与常见异常处理
代码中,我们也看到代码写错了编译器会提示报错,或者编译器没有提示,但是运行的时候报错了,比如前面的数组查询下标超过数组的长度。所以在使用计算机语言进行项目开发的过程中,即使程序员把代码写得很完美, 在系统的运行过程中仍然会遇到一些问题,因为很多问题不是靠代码能够避。
小明爱吃火锅
2023/09/21
1.5K0
Java异常(Error与Exception)分析与常见异常处理
Java面试手册:核心基础-3
1.如何把一段逗号分割的字符串转换成一个数组? 用正则表达式,代码大概为:String [] result = orgStr.split(“,”); 用 StringTokenizer 代码为(高逼
南风
2018/10/18
6820
Java:详解Java中的异常(Error与Exception)[通俗易懂]
异常机制是指当程序出现错误后,程序如何处理。具体来说,异常机制提供了程序退出的安全通道。当出现错误后,程序执行的流程发生改变,程序的控制权转移到异常处理器。
全栈程序员站长
2022/09/08
2.7K0
Java:详解Java中的异常(Error与Exception)[通俗易懂]
经典笔试题-异常篇
62、Java 中的异常处理机制的简单原理和应用?【基础】 答:当JAVA 程序违反了JAVA 的语义规则时,JAVA 虚拟机就会将发生的错误表示为一个异常。违反语义规则包括2 种情况。一种是JAVA 类库内置的语义检查。例如数组下标越界,会引发IndexOutOfBoundsException;访问null 的对象时会引发NullPointerException。另一种情况就是JAVA 允许程序员扩展这种语义检查,程序员可以创建自己的异常,并自由选择在何时用throw 关键字引发异常。所有的异常都是java.lang.Thowable 的子类。
cwl_java
2020/02/18
6350
【Java基础】异常?NullPointException?世界上怎么会存在这种东西?
如果某个方法不能按照正常的途径完成任务,就可以通过另一种路径退出方法。在这种情况下会抛出一个封装了错误信息的对象。此时,这个方法会立刻退出同时不返回任何值。另外,调用这个方法的其他代码也无法继续执行,异常处理机制会将代码执行交给异常处理器。
全栈程序员站长
2022/11/15
5550
【Java基础】异常?NullPointException?世界上怎么会存在这种东西?
Java【8】异常处理
编译错误–因为程序没有遵循语法规则,编译程序能够自己发现并且提示我们错误的原因和位置;
哲洛不闹
2020/07/02
6570
Java Exception
异常指不期而至的各种状况,如:文件找不到、网络连接失败、非法参数等。异常是一个事件,它发生在程序运行期间,干扰了正常的指令流程。Java通 过API中Throwable类的众多子类描述各种不同的异常。因而,Java异常都是对象,是Throwable子类的实例,描述了出现在一段编码中的 错误条件。当条件生成时,错误将引发异常。 Java异常类层次结构图:
conanma
2021/12/06
9200
运行时异常和检查性异常区别
Throwable是所有异常的根,java.lang.Throwable Error是错误,java.lang.Error Exception是异常,java.lang.Exception
全栈程序员站长
2022/09/30
3440
Java中异常的种类
就是指在程序运行过程中发生非常严重的错误,导致程序无法继续正常运行,甚至崩溃或宕机,这种错误不是不可以恢复,但恢复需要很大 代价(比较重启系统,重启服务器) 。
用户7886150
2021/04/06
1.1K0
Java异常Error和Exception的区别「建议收藏」
Exception 和 Error 都是继承了 Throwable 类,在 Java 中只有 Throwable 类型的实例才可以被抛出(throw)或者捕获(catch),它是异常处理机制的基本组成类型。
全栈程序员站长
2022/09/14
2K0
Java异常Error和Exception的区别「建议收藏」
相关推荐
浅谈Java异常及其编译时异常和运行时异常的区别[通俗易懂]
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验