ES6-数组的解构赋值

一、数组的解构赋值的规律

- 只要等号两边的模式相同,左边的变量就会被赋予对应的值

二、数组的解构赋值的例子讲解

1)简单的示例(完整的解构赋值)

  • 示例
//基本的模式匹配
// a,b,c依次和1,2,3对应let [a, b, c] = [1, 2, 3];console.log("a=" + a);console.log("b=" + b);console.log("c=" + c);
  • 效果
    在这里插入图片描述

2)简单的示例(部分的解构赋值)

  • 示例一(逗号占位符)
      let [, , c] = [1, 2, 3];console.log("c=" + c);
  • 效果
    在这里插入图片描述
  • 示例二(前者部分赋值)
      let [a, b] = [1, 2, 3];console.log("a=" + a);console.log("b=" + b);
  • 效果
    在这里插入图片描述

3)过度解构赋值

  • 如果解构不成功,一般变量的值就等于undefined
      let [a, b, c, d] = [1, 2, 3];console.log("a=" + a);console.log("b=" + b);console.log("c=" + c);console.log("d=" + d);
  • 效果
    在这里插入图片描述

4)较为复杂的解构赋值

  • 嵌套示例
      //模式匹配//令arr_end=[[b],c],arr_init=[[2],3]//则[a,[[b],c]]=[a,arr_end]=[1,[[2],3]]=[1,arr_init]//即[a,arr_end]=[1,arr_init]//即a和1对应,arr_end和arr_init对应//同理b和2对应,c和3对应let [a, [[b], c]] = [1, [[2], 3]];console.log("a=" + a);console.log("b=" + b);console.log("c=" + c);
  • 效果
    在这里插入图片描述

5)剩余运算符

  • 示例
      let [first, ...other] = [1, 2, 3, 4];console.log("first=" + first);console.log("other=" + other);
  • 效果
    在这里插入图片描述

6)默认值

- 解构赋值允许指定默认值
  • 示例
      //有对应的值let [a, b = 1] = [1, 2, 3];console.log("a=" + a + ",b=" + b);//无对应的值let [a1, b1 = 1] = [1];console.log("a1=" + a1 + ",b1=" + b1);//对应的值为nulllet [a2 = 1] = [null];console.log("a2=" + a2);//对应的值为undefinedlet [a3 = 1] = [undefined];console.log("a3=" + a3);
  • 效果
    在这里插入图片描述
  • 问题
- 大家可能有个疑惑
- 问题:为什么语句let [a3 = 1] = [undefined];中a3对应的值为undefined,为什么运行结果a3=1?
- 答案:ES6 内部使用严格相等运算符(===),判断一个位置是否有值,当一个数组成员严格等于undefined,默认值就会生效
  • 注意
- 默认值可以引用解构赋值的其他变量,但该变量必须已经声明
let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/251473.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法学习——华为机考题库1(HJ1 - HJ10)

算法学习——华为机考题库1(HJ1 - HJ10) HJ1 字符串最后一个单词的长度 描述 计算字符串最后一个单词的长度,单词以空格隔开,字符串长度小于5000。(注:字符串末尾不以空格为结尾) 输入描述&…

Linux下tar命令详解

tar #归档命令 格式 • Tar -参数 [args]..... 参数: 必选参数: 辅助参数: 额外参数: # 打包时排除某个文件 tar cf 文件名.tar --exclude路径/文件 路径 注:此处的路径前后需要保持保持一致,统一…

【实战系列----消息队列 数据缓存】rabbitmq 消息队列 搭建和应用

线上运行图,更新不算最新版,但可以使用修改线程等补丁功能,建议使用新版本。 远程服务器配置图: 这个可以更具体情况,因为是缓存队列理所当然 内存越大越好,至于核心4核以上足够使用。4核心一样跑 这里主要是需要配置服…

微服务—Docker

目录 初识Docker Docker与虚拟机的区别 镜像与容器 Docker架构 常见Docker命令 镜像命令 容器命令 数据卷挂载 直接挂载 初识Docker 在项目部署的过程中,如果出现大型项目组件较多,运行环境也较为复杂的情况,部署时会碰到一些问题&…

MySql 慢SQL配置,查询,处理

一.慢SQL配置相关 1.查看慢SQL是否开启 执行下面命令查看是否开启慢SQL show variables like %slow_query_log; 复制代码 OFF: 未开启ON: 2.打开慢SQL配置 执行下面的命令开启慢查询日志 set global slow_query_logON; 复制代码 3.修改慢查询阈值 前面介绍了SQL执行到达了…

DATAX改造支持geometry类型数据同步

数据库使用postgresql安装了postgis插件存储了geometry空间数据,想使用datax做数据同步,但datax本身不支持geometry类型数据,如何改造呢? 1.首先下载已改造支持geometry类型的datax引擎,下载地址 https://download.c…

九州金榜|孩子不想上学的原因是什么

在当今社会,越来越多的孩子表现出对上学的抵触情绪。这不仅让家长们感到困惑,也给教育工作者带来了挑战。那么,孩子不想上学的原因究竟是什么呢?九州金榜家庭教育带大家一起探讨孩子不想上学的原因以及解决办法: 一、…

[SWPUCTF 2021 新生赛]easy_md5

用get给name 用post给password 二个值不相等MD5相等 可以通过php的弱类型绕过 $a!$b md5($a)md5($b)找到不同 a 和 a和 a和b,两者的md5值均为0e开头的形式

Banana Pi BPI-R4开源路由器开发板快速上手用户手册,采用联发科MT7988芯片设计

介绍 Banana Pi BPI-R4 路由器板采用 MediaTek MT7988A (Filogic 880) 四核 ARM Corex-A73 设计,4GB DDR4 RAM,8GB eMMC,板载 128MB SPI-NAND 闪存,还有 2x 10Gbe SFP、4x Gbe 网络端口,带 USB3 .2端口,M.2…

华为---STP(二)---STP报文和STP端口状态

目录 1. STP报文简介 1.1 Configuration BPDU 1.2 TCN BPDU 2. STP交换机端口状态 2.1 STP交换机端口状态表 2.2 STP交换机端口状态迁移过程图 2.3 STP交换机端口状态变化举例说明 3 引起的STP网络拓扑改变的示例 3.1 根桥出现故障 3.2 有阻塞端口的交换机根端口所在…

电脑用的视频编辑软件有哪些 视频剪辑软件排行榜 视频剪辑软件推荐 视频剪辑培训学习 视频剪辑制作自学 电脑视频剪辑需要什么配置

电脑视频剪辑软件这么多,到底哪些比较好用?下面就让我们以十大电脑视频剪辑软件排行榜来细数好用的软件。另外,电脑视频剪辑需要什么配置?本文也会给大家从内存、CPU等参数上介绍,并推荐好用的电脑设备。 一、十大电脑…

深度学习技巧应用35-L1正则化和L2正则在神经网络模型训练中的应用

大家好,我是微学AI,今天给大家介绍一下深度学习技巧应用35-L1 正则化和L2正则在神经网络模型训练中的应用。L1正则化和L2正则化是机器学习中常用的两种正则化方法,用于防止模型过拟合并提高模型的泛化能力。这两种正则化方法通过在损失函数中添加惩罚项来控制模型的复杂性。…

1 月 30 日算法练习-数论

唯一分解定理 唯一分解定理指的是:对于任意一个>1的正整数,都可以以唯一的一种方式分解为若干质因数的乘积。 x p 1 k 1 ⋅ p 2 k 2 ⋅ … ⋅ p m k m x p_1^{k_1} \cdot p_2^{k_2} \cdot \ldots \cdot p_m^{k_m} xp1k1​​⋅p2k2​​⋅…⋅pmkm​…

Web服务器之Tomcat

文章目录 Web 服务器软件简介资源分类访问流程常见的Web服务器软件 Tomcat简介使用步骤使用Tomcat注意事项部署项目的方式方式一方式二方式三 问题中文乱码黑窗口一闪而过启动报错 Web 服务器软件 简介 服务器:安装了服务器软件的计算机服务器软件:接收…

hbuilderx uniapp运行到真机控制台显示手机端调试基座版本号1.0.0,调用uni.share提示打包时未添加share模块

记录一个困扰了几天的一个蠢问题,发现真相的我又气又笑。 由于刚开始接触uniapp 移动端开发,有个需求需要使用uni.share API,但是我运行项目老提示打包时没配置share模块 我确实没在manifest内配置。网上搜了一些资料,但是我看官…

Allegro中设置让Route Keepout(禁止布线区)允许布线或打过孔的方法

Allegro中设置让Route Keepout(禁止布线区)允许布线或打过孔的方法 Chapter1 Allegro中设置让Route Keepout(禁止布线区)允许布线或打过孔的方法一、前言二、设置方法 Chapter2 Cadence Allegro PCB设计88问解析(二十三) 之 Alleg…

Ai知识图谱

总结:从AI技术栈全貌来看,基础模型、基础算法,个人及小公司是玩不起的,大公司才有对应人力、财力、算力 去做,个人更多的是要在应用场景上创新,几个关键的技术必须会:编码语言(Pytho…

聊聊ClickHouse MergeTree引擎的固定/自适应索引粒度

前言 我们在刚开始学习ClickHouse的MergeTree引擎时,就会发现建表语句的末尾总会有SETTINGS index_granularity 8192这句话(其实不写也可以),表示索引粒度为8192。在每个data part中,索引粒度参数的含义有二&#xf…

Qt多语言翻译

Qt多语言翻译概述 Qt提供了非常简单易用的多语言翻译机制,其核心类为QTranslator.概括来说就是利用Qt的lupdate工具将项目中所有tr函数包裹的字符串提取到.ts文件中,然后使用Qt Linguist由专门的翻译人员对提取的.ts文件进行逐个单词短语的翻译工作. 翻译…

Node.js Express 框架 2024版 笔记

1.0 操作命令 Node.js express 框架 https://www.expressjs.com.cn/ npm install -g express-generator expressexpress --pug --git // --pug 添加对 pug 模板引擎的支持 // --git 添加 .gitignore 代码仓库排除 //无法直接安装新版pug模板 npm i npm …