ES6-数组的解构赋值

news2024/9/26 5:22:21

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CSS 外边距合并、塌陷和BFC

外边距合并 CSS中的外边距合并指的是当两个相邻元素都设置了上下外边距时,它们之间会发生重叠。这种现象被称为"margin collapsing"(外边距合并)或者"margin collapse"(外边距塌陷)。 可以看出上…

【PTA浙大版《C语言程序设计(第4版)》编程题】练习7-4 找出不是两个数组共有的元素(附测试点)

目录 输入格式: 输出格式: 输入样例: 输出样例: 代码呈现 测试点 给定两个整型数组,本题要求找出不是两者共有的元素。 输入格式: 输入分别在两行中给出两个整型数组,每行先给出正整数N(≤20),随后是N个整数&a…

【DDD】学习笔记-代码模型的架构决策

代码模型属于软件架构的一部分,它是设计模型的进化与实现,体现出了代码模块(包)的结构层次。在架构视图中,代码模型甚至会作为其中的一个视图,通过它来展现模块的划分,并定义运行时实体与执行视…

Leetcode—203. 移除链表元素【简单】

2024每日刷题(一零九) Leetcode—203. 移除链表元素 实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(n…

ffmpeg 时间裁剪之-ss -t与滤镜中trim=start=*:duration=*的区别和联系

背景 工作中遇到的呗。记下来贡着。 滤镜重置时间戳:setptsPTS-STARTPTS 在FFmpeg中,setptsPTS-STARTPTS是一种用于调整视频时间戳(PTS)的滤镜表达式。这个表达式通常用于视频编辑和处理过程中,用于修改视频的时间轴…

H5 加密(MD5 Base64 sha1)

1. 说明 很多的时候是避免不了注册登录这一关的,但是一般的注册是没有任何的难度的,无非就是一些简单的获取用户输入的数据,然后进行简单的校验以后调用接口,将数据发送到后端,完成一个简单的注册的流程,那…

代码随想录 Leetcode93. 复原 IP 地址

题目&#xff1a; 代码(首刷看解析 2024年2月3日&#xff09;&#xff1a; class Solution { public:vector<string> res;bool Enligible(string& s, int left, int right) {if (left > right) return false;if (s[left] 0 && left ! right) return fal…

类银河恶魔城学习记录1-1 Player状态机的搭建 P28

对状态机的介绍 什么是状态机&#xff1f;一篇文章就够了 - 知乎 说实话&#xff0c;目前并不能深入理解状态机的奇妙之处&#xff08;当然&#xff0c;我觉得状态机作为教程的重要组成部分是不得不理解的&#xff0c;所以以下我会对游戏教程内的状态机做一些我认为的解释&am…

通过 ChatGPT 的 Function Call 查询数据库

用 Function Calling 的方式实现手机流量包智能客服的例子。 def get_sql_completion(messages, model"gpt-3.5-turbo"):response client.chat.completions.create(modelmodel,messagesmessages,temperature0,tools[{ # 摘自 OpenAI 官方示例 https://github.com/…

element-ui link 组件源码分享

link 组件的 api 涉及的内容不是很多&#xff0c;源码部分的内容也相对较简单&#xff0c;下面从以下这三个方面来讲解&#xff1a; 一、组件结构 1.1 组件结构如下图&#xff1a; 二、组件属性 2.1 组件主要有 type、underline、disabled、href、icon 这些属性&#xff0c;…

云服务器安全组、防火墙、端口问题,结合telnet解决项目部署无法访问

无论是运维还是后台亲自操刀在云服务器上部署项目&#xff0c;往往会遇到项目部署上去了&#xff0c;也确定项目正常运行&#xff0c;但还是没法访问的问题。 如果没有经验的小伙伴&#xff0c;很容易陷入疑惑的状态&#xff0c;无从下手解决。 其实这涉及到云平台安全组、服…

centos7安装oracle

1 安装虚拟机 设置4G内存&#xff0c;硬盘40G 2 配置网络环境 2.1配置主机名 # vi /etc/hostname 修改为 oracle2.2 配置IP地址 # vi /etc/sysconfig/network-scripts/ifcfg-ens33 修改 BOOTPROTO"static" ONBOOT"yes" IPADDR192.168.109.110 NETMAS…

如何过滤离线logcat日志文件?

1.需求&#xff1a; How did Android Studio Logcat to read the files which have save in logcat? I saved some logs and would like to open them with Android Studio - Logcat interface and be able to see the colours and apply some filters just as if the pho…

【PostgreSQL内核学习(二十五) —— (DBMS存储空间管理)】

DBMS存储空间管理 概述块&#xff08;或页面&#xff09;PageHeaderData 结构体HeapTupleHeaderData 结构 表空间表空间的作用&#xff1a;表空间和数据库关系表空间执行案例 补充 —— 模式&#xff08;Schema&#xff09; 声明&#xff1a;本文的部分内容参考了他人的文章。在…

小华和小为的聚餐地点 - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 小华和小为是很要好的朋友&#xff0c;他们约定周末一起吃饭。 通过手机交流&#xff0c;他们在地图上选择了多个聚餐地点(由于自然地形等原因&#xff0c;部分聚…

支付宝直连商户处理支付交易投诉管理,支持多商户

大家好&#xff0c;我是小悟 1、问题背景 玩过支付宝生态的&#xff0c;或许就有这种感受&#xff0c;如果收到投诉单&#xff0c;不会通知到手机端&#xff0c;只会在支付宝商家后台-账号中心-安全中心-消费者投诉-支付交易投诉那里显示。那你能一直盯着电脑看吗&#xff1f;…

多维时序 | Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序列预测

多维时序 | Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序列预测 目录 多维时序 | Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序…

梳理cuda算子编译与python调用的流程_以vllm为例

最近在使用vllm框架,部署大语言模型的时候。发现吞吐量提升比较明显。对里面用到的技术比较感兴趣。后来发现vllm使用了一些新的技术,如kv cache,page attention等。其中很多是用cuda编写加速的。并且对cuda算子如何应用到python服务中比较感兴趣,现在就自己的了解,用文章…

如何进行嵌入式系统的软件性能监测和优化

嵌入式系统的软件性能监测和优化是确保系统能够高效运行和性能稳定的关键步骤。嵌入式系统通常包含有限的计算资源和受限的能源消耗&#xff0c;因此对其进行有效的性能监测和优化是至关重要的。本文将介绍嵌入式系统软件性能监测和优化的基本概念、常见方法和技术&#xff0c;…

SQL报错注入

SQL注入报错注入 报错注入原理:报错注入是通过特殊函数错误使用并使其输出错误结果来获取信息的在遇到有报错回显的时候&#xff0c;但是没有数据回显的情况下可以利用报错注入的函数: 1.floor():向下取整 2.extractvalue(): 对XML文档进行查询的函数&#xff0c;当参数的格式…