当前位置: 首页 > news >正文

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

前言:

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

主要语法:

一、[变量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.lryc.cn/news/345338.html

相关文章:

  • 【SpringBoot整合系列】SpringBoot整合RabbitMQ-消息可靠性
  • Hbase 常用shell操作
  • 数据库被攻击后出现1044 - access denied for user ‘root‘@‘% ‘ to database table
  • 在哪里打印资料比较便宜
  • leetcode 2606.找到最大开销的子字符串
  • 超标量处理器设计:重排序缓存(ROB)
  • nginx常用内置变量
  • MySQL技能树学习——数据库组成
  • OpenCV入门1:Python基础编程
  • C++ Builder XE EnumWindowsProc遍历所有窗口的名称
  • Qt QInputDialog详解
  • 最新盘点!2024年20大好用的项目管理软件(后续持续更新)
  • Linux:配置客户端默认autofs服务
  • Kotlin版本的Gradle全局配置init.gradle.kts及参考文档
  • react18【实战】tab切换,纯前端列表排序(含 lodash 和 classnames 的安装和使用)
  • C++学习第二十七课:C++ 输入输出流详解:从基础到高级应用
  • 【Unity AR开发系列】介绍如何使用这个支持热更的AR开发插件,快速地开发AR应用
  • Nginx - 配置文件结构(一)
  • 暗区突围进不去/游戏无法启动/掉帧卡顿/报错的解决方法
  • 基于FPGA的视频矩阵 视频拼接 无缝切换解决方案
  • LeetCode 513.找树左下角的值
  • redis分片java实践、redis哨兵机制实现、redis集群搭建
  • 2024年四千价位段最具统治力的投影仪,坚果N1S 4K: 4K+三色激光=下一代4K
  • MySQL8.3升级踩坑记录
  • 你写的每条SQL都是全表扫描吗
  • 每日两题 / 24. 两两交换链表中的节点 25. K 个一组翻转链表(LeetCode热题100)
  • 【Linux】模拟实现bash(简易版)
  • C++ | Leetcode C++题解之第67题二进制求和
  • 如何确保UDP文件传输工具有最低稳定的传输速度?
  • 力扣爆刷第133天之动态规划收尾(距离编辑与回文子串)