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);
      //对应的值为null
      let [a2 = 1] = [null];
      console.log("a2=" + a2);
      //对应的值为undefined
      let [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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Element UI+Spring Boot进行CRUD的实例

ElementUI安装与使用指南 前端代码:点击查看learnelementuispringboot项目源码 后端代码:点击查看 LearnElementUiAndSpringBoot 一、前端配置 安装axios Gitee的axios介绍与使用 GitHub的axios介绍与使用 方式一:使用npm安装 $ npm in…

深度学习(生成式模型)—— Consistency Models

文章目录 前言预备知识:SDE与ODEMethod实验结果 前言 Diffusion model需要多次推断才能生成最终的图像,这将耗费大量的计算资源。前几篇博客我们已经介绍了加速Diffusion model生成图像速率的DDIM和Stable Diffusion,本节将介绍最近大火的Co…

力扣热门100题刷题笔记 - 5.最长回文子串

力扣热门100题 - 5.最长回文子串 题目链接:5. 最长回文子串 题目描述: 给你一个字符串 s,找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同,则该字符串称为回文字符串。示例: 输入:s "…

【DDD】学习笔记-数据设计模型

通过分析活动获得的数据项模型,可以认为是数据分析模型,它确定了系统的主要数据表、关系及表的主要属性。到了建模的设计活动,就可以继续细化数据项模型这个分析模型,例如丰富每个表的列属性,或者确定数据表的主键与外…

从零开始手写mmo游戏从框架到爆炸(二)— 核心组件抽离与工厂模式创建

上一章我们已经完成了一个基本netty的通信,但是netty的启动很多代码都是重复的,所以我们使用工厂模式来生成不同的ServerBootstrap。 首先创建一个新的组件core组件,和common组件,主要用于netty通信和工具类,从server…

[Android] 240204批量生成联系人,短信,通话记录的APK

平常在做测试的时候,需要批量生成很多测试数据; 陌生人 联系人名字的生成支持随机生成,也可以自定义生成,自定义生成陌生人的数据,联系人的名字是否带索引; 通话记录 随机生成通话记录,在生…

在vscode上传项目到gitee

一、在Gitee上新建一个仓库 Tip:若已经创建过了,直接跳到第二部分看VsCode如何上传代码到Gitee 创建仓库比较简单,下面两张图就是整个过程,这里不在赘述,具体如下: 二、VsCode连接Gitee上创建的仓…

AtCoder Regular Contest 171(A~B)

A - No Attacking N*N棋盘上,放A个rook棋和B个pawn棋。 条件1:假设(i,j)上有一个rook,那么这 i 行和这 j 列,都不能再有其他棋子。 条件2:假设(i,j&#x…

Cadence——输出文件部分

本文章基于凡亿教育基础入门66讲 (一)MARK点,工艺边,阻抗说明相关准备文件 (1)MARK点 a,点击设置,用户偏好设置 b,指定MARK焊盘路径和封装路径 c,点击放置,手动 d,点击高级设置,将…

什么是TCP三次握手、四次挥手?

🎬作者简介:大家好,我是小徐🥇☁️博客首页:CSDN主页小徐的博客🌄每日一句:好学而不勤非真好学者 📜 欢迎大家关注! ❤️ 1、三次握手 你(客户端)给一个朋友(服务器)打电…

文心一言 VS 讯飞星火 VS chatgpt (194)-- 算法导论14.3 2题

二、用go语言,改写 INTERVAL-SEARCH 的代码,使得当所有区间都是开区间时,它也能正确地工作。 文心一言,代码正常运行: 在Go语言中,处理开区间(open intervals)时,我们需…

034 多维数组

二维数组理解图例 示例 int[][][] nums new int[2][2][2]; Random random new Random(); for (int[][] num : nums) {for (int[] ints : num) {for (int i 0; i < ints.length; i) {// 生成100以内的随机数ints[i] random.nextInt(100);}} } for (int[][] num : nums)…

Bard 最新更新:全球开放访问Gemini Pro并生成图片

深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领域的领跑者。点击订阅&#xff0c;与未来同行&#xff01; 订阅&#xff1a;https://rengongzhineng.io/ 。 今…

[嵌入式AI从0开始到入土]5_炼丹炉的搭建(基于wsl2_Ubuntu22.04)

[嵌入式AI从0开始到入土]嵌入式AI系列教程 注&#xff1a;等我摸完鱼再把链接补上 可以关注我的B站号工具人呵呵的个人空间&#xff0c;后期会考虑出视频教程&#xff0c;务必催更&#xff0c;以防我变身鸽王。 第一章 昇腾Altas 200 DK上手 第二章 下载昇腾案例并运行 第三章…

【5G SA流程】5G SA下终端完整注册流程介绍

博主未授权任何人或组织机构转载博主任何原创文章,感谢各位对原创的支持! 博主链接 本人就职于国际知名终端厂商,负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作,目前牵头6G算力网络技术标准研究。 博客内容主要围绕: 5G/6G协议讲解 …

JVM工作原理与实战(三十五):性能调优

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、性能调优 1.性能调优方法 二、性能调优案例 案例1&#xff1a;解决CPU占用率高问题的方案 案例2&#xff1a;接口响应时间长问题 案例3&#xff1a;定位底层性能问题 案例4&a…

echarts使用之地图(五)

1 基本使用 百度地图 API : 使用百度地图的 api , 它能够在线联网展示地图 , 百度地图需要申请 ak 矢量地图 : 可以离线展示地图 , 需要开发者准备矢量地图数据。本文使用该方式。 json格式的数据如下&#xff1a; 格式参照&#xff1a;GeoJSON <!DOCTYPE html&…

车载充电器(OBC)氮化镓(GaN)驱动(高压高功率)设计(第四篇)

上图来自于网络 1、GaN FET概念 GaN FET&#xff0c;全称为Gallium Nitride Field-Effect Transistor&#xff08;氮化镓场效应晶体管&#xff09;&#xff0c;是一种采用氮化镓&#xff08;Gallium Nitride, GaN&#xff09;材料制作的新型功率半导体器件。相较于传统的硅基…

枚举(Java)

一、概念 枚举是一种特殊的类。 格式&#xff1a; 修饰符 enum 枚举类名{ 对象名称1&#xff0c;对象名称2&#xff0c;....; 其他成员... } 二、枚举类的特点 1.枚举类的第一行只能罗列一些名称&#xff0c;并且这些名称都是常量&#xff0c;每个常量记住一个枚举类对象…

【Java程序设计】【C00247】基于Springboot的农机电招平台(有论文)

基于Springboot的农机电招平台&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的农机电招平台 本系统分为系统功能模块、管理员功能模块、农机机主功能模块以及使用者功能模块。 系统功能模块&#xff1a;农机电招…