前端基础知识-ES6解构赋值(将数组内元素、字符串内字符、对象内属性值快速赋值给其他变量)

news2024/11/16 19:07:11

前言:

将数组、字符串、对象进行展开,并将展开的数据赋值给指定变量,以达到语法简化的目的,日常开发中可以大大提升我们的效率。

主要语法:

一、[变量1,变量2。。。]=目标数组

将数组里面的内容赋给其他变量

场景1:
      let arr = ["1", "2", "3"];
      let [a, b, c] = arr;
      console.log(a, b, c);

 控制台输出:

场景2:

将数组内部分值赋值给其他变量

      let arr = ["1", "2", "3"];
      let [, , c] = arr;
      console.log(c);

控制台输出:

场景3:

与扩展运算符搭配使用,赋值指定变量,将余下的元素赋值指定数组

      let arr = ["1", "2", "3"];
      let [a, ...demo] = arr;
      console.log(a, demo);

 控制台输出:

 二、[变量1,变量2。。。]=目标字符串

场景1:

赋值全部字符串

      let str = "1234567";
      let[a,b,c,d,e,f,g]=str;
      console.log(a,b,c,d,e,f,g);

控制台输出: 

场景2:

赋值部分字符

      let str = "1234567";
      let [a, b, c] = str;
      console.log(a, b, c);
      let [, , , , , , g] = str;
      console.log(g);

控制台输出:

场景3:

与扩展运算符搭配使用,赋值指定变量,将余下的字符赋值指定数组

      let str = "1234567";
      let [a, ...demo] = str;
      console.log(a, demo);

 控制台输出:

三、{变量1,变量2}=目标对象

场景1:

 赋值全部属性值

      let obj = {
        id: 1,
        name: "admin",
        age: 22,
      };
      let { name, id, age } = obj;
      console.log(name, id, age);

控制台输出:

场景2:

赋值部分属性值

      let obj = {
        id: 1,
        name: "admin",
        age: 22,
      };
      let { name, age } = obj;
      console.log(name, age);
      let { id } = obj;
      console.log(id);

 控制台输出:

四、 {属性名称1:变量名称1}=目标对象

场景1:

赋值部分属性

      let obj = {
        id: 1,
        name: "admin",
        age: 22,
      };
      let { name: sname } = obj;
      console.log(sname);

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

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

相关文章

Linux流程控制

if语句 基本格式 if condition thencommand1 fi 写成一行 if [ $(ps -ef | grep -c "ssh") -gt 1 ]; then echo "true"; fi if-else语句 格式 if condition thencommand1 command2...commandN elsecommand fi if else- if else if condition1 th…

3月空气净化器市场数据分析,热门品牌排行榜揭晓!

三月上旬以来,中国空气净化器行业的规模持续扩大,市场规模和消费需求也在不断提升,消费者对高质量空气的需求增加。智能化是当前空气净化器市场的一个重要发展方向,这类产品集成了空气过滤、监测等功能,满足了现代消费…

信创 | 信创基础设施建设:国内外对比分析研究

信创基础设施建设在国内外的比较分析涉及到多个方面,包括政策支持、产业发展现状、技术进步、市场应用等。通过综合分析,我们可以得出以下结论: 政策支持与发展方向:中国自2019年以来,陆续出台了一系列政策支持信创产业…

[C++基础编程]----预处理指令简介、typedef关键字和#define预处理指令之间的区别

目录 引言 正文 01-预处理指令简介 02-typedef关键字简介 03-#define预处理指令简介 04-#define预处理指令和typedef关键字的区别 (1)原理不同 (2)功能不同 &#xf…

贪心+线段树,CF720A. Closing ceremony

目录 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 二、解题报告 1、思路分析 2、复杂度 3、代码详解 一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 Problem - 720A - Codeforces 二、解题报告 1、思路分析 如果人都在左上角…

顶级SCI优化!24年新算法冠豪猪算法CPO优化无人机集群三维路径规划!先用先发!

声明:文章是从本人公众号中复制而来,因此,想最新最快了解各类智能优化算法及其改进的朋友,可关注我的公众号:强盛机器学习,不定期会有很多免费代码分享~ 目录 结果展示 原理讲解 一、路径长度成本 F1 …

斯坦福大学的在线密码学课程

密码学是保护计算机系统信息不可或缺的工具。在本课程中,您将了解密码系统的内部工作原理,以及如何在实际应用中正确使用它们。课程首先将详细讨论当强大的对手窃听和篡改流量时,拥有共享密钥的双方如何进行安全通信。我们将研究许多已部署的…

EtherCAT运动控制器Delta机械手应用

ZMC406硬件介绍 ZMC406是正运动推出的一款多轴高性能EtherCAT总线运动控制器,具有EtherCAT、EtherNET、RS232、CAN和U盘等通讯接口,ZMC系列运动控制器可应用于各种需要脱机或联机运行的场合。 ZMC406支持6轴运动控制,最多可扩展至32轴&#…

【数据库原理及应用】期末复习汇总高校期末真题试卷08

试卷 一、选择题(每题 2 分,共 30 分)    1. ___ ____是长期存储在计算机内的有组织,可共享的数据集合. A.数据库管理系统 B.数据库系统 C.数据库 D.文件组织 2. 数据库类型是按照 来划分…

【ITK配准】第十期 进化优化配准样例

很高兴在雪易的CSDN遇见你 VTK技术爱好者 QQ:870202403 公众号:VTK忠粉 前言 本文分享ITK配准中的进化优化配准样例,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我的动力(^U^)ノ~YO 进化优化配准 …

Baidu Comate:智能编码,编程效率的革新者

文章目录 一、何为智能编码助手?二、Baidu Comate智能编码助手简介三、Baidu Comate注册四、Baidu Comate体验Comate插件功能1.注释生成代码2.函数注释生成3.行间注释生成4.生成代码解释5. 调优建议 五、插件功能的使用体验感受和建议 🚩结语 一、何为智…

Linux|了解如何使用 awk 内置变量

引言 当我们揭开 Awk 功能部分时,我们将介绍 Awk 中内置变量的概念。您可以在 Awk 中使用两种类型的变量:用户定义的变量和内置变量。 内置变量的值已经在 Awk 中定义,但我们也可以仔细更改这些值,内置变量包括: FILEN…

三.搜索与图论(未完结)

DFS(深搜) 之前写过三篇关于dfs的 练习总结: 基础算法--递归搜索DFS练习总结(上)-CSDN博客 基础算法--递归搜索DFS练习总结(中)-CSDN博客 基础算法--递归搜索DFS练习总结(下)-CSDN博客 以下题目均为 补充练习: P1460 [USACO2.1] 健康的荷斯坦奶牛 Healthy Holsteins …

【隧道篇 / WAN优化】(7.4) ❀ 03. WAN优化的原理 ❀ FortiGate 防火墙

【简介】相信对WAN优化感兴趣的人都会有疑问,WAN优化真的有作用吗?如果真的有作用,那是根据什么原理呢?让我们来更深入的了解一下。 客户端和服务器端 其实很多人在一开始看到WAN优化这个词,就自然的以为上网速度太慢&…

C++学习第十三天(多态)

1、多态的概念 概念 就是指多种形态,具体点就是去完成某个行为,当不同的对象去完成时会产生不同的状态 2、多态的定义及实现 多态的构成条件 多态是在不同继承关系的类对象,去调用同一函数,产生了不同的行为。 要在继承中构成…

linux权限维持-HackerPermKeeper

🔒 HackerPermKeeper 通过渗透拿到权限之后,为了不让权限丢失,都会进行权限维持,而在进行权限维持的时候,红队需要花费大量的时候,来验证是否合适,因此在这款工具就诞生 HackerPermKeeper[黑客…

【动态规划】子数组、子串系列I|最大子数组和|环形子数组的最大和|乘积最大子数组|乘积为正数的最长子数组长度

一、最大子数组和 最大子数组和 算法原理: 💡细节: 1.返回值为dp表每个位置的最大值,而不是只看最后一个位置,因为可能最后一个位置都不选 2.可以直接在填dp表的时候就进行返回值的比较 3.如果初始化选择多开一个位…

vue+lodop实现web端打印标签功能

背景:项目要求在web端连接标签打印机,打印收件人信息 lodop打印插件地址:Lodop和C-Lodop官网主站 在项目中使用 1、去官网下载lodop包下载中心 - Lodop和C-Lodop官网主站 windows系统直接下载windows32版的就可以 2、解压安装 点击CLodop…

gtest的编译与使用

文章目录 gtest的编译与使用概述笔记CMake参数官方文档测试程序测试效果END gtest的编译与使用 概述 gTest是 googletest的缩写,如果直接找gTest项目,是找不到的。 库地址 https://github.com/google/googletest.git 迁出到本地后,切到最新…

vue中使用element的i18n语言转换(保姆式教程-保证能用)

1、项目中需要使用的插件,vue2或vue3、element、vue-i18n、js-cookie、vuex我是在vue2中使用 npm i element-ui -S npm i js-cookie -S npm i vue-i18n8.28.2 //因为我项目使用的vue2,直接安装报错了,就下载了固定的版本2、在main.js中引入i18n impor…