JS 解构、数组扩展符和模板字符串的常见用法
文章目录
- 解构
- 1. 对象解构
- 2. 数组解构
- 数组扩展符
- 模板字符串
解构
1. 对象解构
想把对象中的属性赋值给变量时, 需要一次一次的赋值，很麻烦。而对象解构, 就是把对象的结构拆解开, 然后把拆解后的属性自动赋值给匹配的变量。
(1) 对象属性赋值变量的传统写法：
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>对象解构</title>
</head>
<body>
<script>// 对象let obj = {name: 'ares5k',age: 27}// 用对象中的属性赋值（需要一个一个赋值）let name = obj.namelet age = obj.ageconsole.log('姓名：' + name + ' \t年龄：' + age)
</script>
</body>
</html>
(2) 对象属性赋值变量的对象解构写法：
<html lang="en">
<head><meta charset="UTF-8"><title>对象解构</title>
</head>
<body>
<script>// 对象let obj = {name: 'ares5k',age: 27}// 场景 1： 变量名与属性名相同时，自动匹配赋值// 使用对象解构语法, 将 obj 的结构拆解开, 然后赋值给与其属性名对应的变量上// 对象解构的语法就是声明变量时, 使用 {} 将变量括起来, 被括起来的变量会被对象属性匹配赋值let {name, age} = objconsole.log('姓名：' + name + ' \t年龄：' + age)// 场景 2：变量名与对象属性名不同时, 需要指定映射关系// 冒号左侧是对象的属性, 冒号右侧是声明的变量let {name: varName, age: varAge} = objconsole.log('姓名：' + varName + ' \t年龄：' + varAge)
</script>
</body>
</html>
2. 数组解构
与对象解构大同小异, 是为了方便把数组元素快速赋值给变量的功能。
(1) 数组元素赋值变量的传统写法：
<html lang="en">
<head><meta charset="UTF-8"><title>数组解构</title>
</head>
<body>
<script>// 数组let array = [1, 2, 3, 4, 5]// 传统方式逐个赋值let a = array[0]let b = array[1]let c = array[2]let d = array[3]let e = array[4]console.log('' + a + b + c + d + e)
</script>
</body>
</html>
(2) 数组元素赋值变量数组的解构写法：
<html lang="en">
<head><meta charset="UTF-8"><title>数组解构</title>
</head>
<body>
<script>// 数组let array = [1, 2, 3, 4, 5]// 数组解构赋值let [a, b, c, d, e] = arrayconsole.log('' + a + b + c + d + e)
</script>
</body>
</html>
数组扩展符
数组扩展符 ( … ) 就是把数组内容自动展开，可以更简洁的实现数组浅拷贝，数组拼接，伪数组转真数组等操作。
数组拼接 - 传统方式与扩展符方式对比:
<html lang="en">
<head><meta charset="UTF-8"><title>数组扩展符</title>
</head>
<body>
<script>// 声明两个数组let a = [1, 2, 3, 4, 5]let b = [6, 7, 8, 9, 10]// 传统方式实现数组拼接let c = a.concat(b)console.log(c)// 扩展符方式实现数组拼接let d = [...a, ...b]console.log(d)
</script>
</body>
</html>
数组浅拷贝 - 传统方式与扩展符方式对比:
<html lang="en">
<head><meta charset="UTF-8"><title>数组扩展符</title>
</head>
<body>
<script>// 声明数组let a = [1, 2, 3, 4, 5]// 传统方式实现数组浅拷贝let b = a.concat()console.log(b)// 扩展符方式实现数组拼接let c = [...a]console.log(c)
</script>
</body>
</html>
伪数组转真数组 - 传统方式与扩展符方式对比:
<html lang="en">
<head><meta charset="UTF-8"><title>数组扩展符</title>
</head>
<body>
<div></div>
<div></div>
<script>// 伪数组let divs = document.getElementsByTagName('div')console.log(Array.isArray(divs))// 传统方式转换成真数组let a = [].slice.call(divs)console.log(Array.isArray(a))// 扩展符方式转换成真数组let b = [...divs]console.log(Array.isArray(b))
</script>
</body>
</html>
模板字符串
模板字符串可以让字符串拼接变得更简洁, 语法就是用 ( ESC键下面的 ` 键 ) 括起来。
我自己常用的场景有两个：
(1) 变量拼接
(2) 字符串换行
原始方式：字符串拼接变量需要使用 ‘+’ 加号的方式，字符串换行需要使用 \n
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<label for="userName"></label><input id="userName" type="text"/>
<script>let text = document.querySelector('#userName')text.addEventListener('blur', (e) => {let output = '用户：' + e.target.value + '， 你好！\n' +'今天天气真好啊, 一起散步吧！！'window.alert(output)})
</script>
</body>
</html>
模板字符串方式：变量拼接直接使用 ${}，换行直接回车。
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<label for="userName"></label><input id="userName" type="text"/>
<script>let text = document.querySelector('#userName')text.addEventListener('blur', (e) => {let output = `用户：${e.target.value} ， 你好！
今天天气真好啊, 一起散步吧！！`window.alert(output)})
</script>
</body>
</html>
相关文章：
JS 解构、数组扩展符和模板字符串的常见用法
文章目录 解构1. 对象解构2. 数组解构 数组扩展符模板字符串 解构 1. 对象解构 想把对象中的属性赋值给变量时, 需要一次一次的赋值，很麻烦。而对象解构, 就是把对象的结构拆解开, 然后把拆解后的属性自动赋值给匹配的变量。 (1) 对象属性赋值变量的传统写法&…...
低代码开源项目Joget的研究——Joget7社区版安装部署
大纲 环境准备安装必要软件配置Java配置JAVA_HOME配置Java软链安装三方库 获取源码配置MySql数据库创建用户创建数据库导入初始数据 配置数据库连接配置sessionFactory编译下载tomcat启动下载aspectjweaver移动jw.war文件编写脚本运行 测试参考资料 Joget，作为一款开…...
Golang 为什么没有注解？
Go 的哲学是：“少就是多，显式优于隐式。”注解虽然方便，但会违背 Go 追求简洁和清晰的设计理念。 什么是注解？为什么看起来很实用？ 注解的定义：注解是一种特殊的元信息，用于修饰代码（如类、方法、字段等），让程序或工具在运行时或编译时解析和处理这些信息。例如： …...
Visual Studio Code(VS Code)配置C/C++环境
一、Visual Studio Code安装 Visual Studio Code，下文中简称为VS Code的详细安装方法请参考VSCode安装教程（超详细）-CSDN博客 二、MinGW编译器下载与配置 1、MinGW介绍 MinGW(Minimalist GNU for Windows)是一款用于Windows 平台的轻…...
LabVIEW软件开发的未来趋势
LabVIEW软件开发的未来趋势可以从以下几个方面来分析： 1. 与AI和机器学习的深度结合 趋势：LabVIEW正在向集成AI和机器学习方向发展，尤其是在数据处理、预测性维护和自动化控制领域。 原因：AI技术的普及使得实验和工业场景中的…...
Node.js 助力前端开发：自动化操作实战
前端开发中，重复性任务如新建文件、配置路由、生成组件等，往往耗时且容易出错。借助 Node.js 的强大能力，我们可以实现开发过程中的自动化操作，提高效率。 文章目录 自动生成 router 配置文件自动生成组件模板动态构建导航菜单自…...
HuggingFace peft LoRA 微调 LLaMA
1. 安装必要库 pip install transformers peft accelerate2. 加载 LLaMA 模型和分词器 从 Hugging Face Transformers 加载预训练的 LLaMA 模型和分词器。 from transformers import AutoModelForCausalLM, AutoTokenizer# 加载 LLaMA 模型和分词器 model_name "meta-…...
记-编译magisk_v22
1) 下载源码 git clone gitgitee.com:MayuriNFC/Magisk.git 使用国内镜像站 2) 切换标签: git checkout v22.0 3)下载/更新依赖 git submodule initgit sumodule update 4)下载对应ndk(自动下载出错了,用了手动下载), wget -c https://dl.google.com/android/reposito…...
前端登录业务
1.用户登录成功拿到token，放在请求拦截器的请求头中，调用户接口才可以获取到用户信息，存储到仓库中，以便其他组件使用用户信息 2.退出登录需要清空用户数据，以及本地存储，调退出登录接口告诉服务器当前toke…...
项目2路由交换
背景 某学校为满足日常教学生活需求，推动数字校园的建设，学校有办公楼和学生宿舍楼和服务器集群三块区域，请合理规划IP地址和VLAN，实现企业内部能够互联互通现要求外网能通过公网地址访问服务器集群，学生和老师能正常…...
易语言 OCR 文字识别
一.引言 文字识别，也称为光学字符识别（Optical Character Recognition, OCR），是一种将不同形式的文档（如扫描的纸质文档、PDF文件或数字相机拍摄的图片）中的文字转换成可编辑和可搜索的数据的技术。随着技…...
云手机+YouTube：改变通信世界的划时代技术
随着科技的不断进步，手机作为人们生活中不可或缺的工具，也在不断地更新换代。近年来，一个名为“油管云手机”的全新产品正在引起广泛的关注和讨论。作为一个运用最新科技实现的新型手机，它在通信领域带来了全新的体验和革命性的变…...
C++-----------映射
探索 C 中的映射与查找表 在 C 编程中，映射（Map）和查找表（Lookup Table）是非常重要的数据结构，它们能够高效地存储和检索数据，帮助我们解决各种实际问题。今天，我们就来深入探讨一下…...
清空DNS 缓存
如果遇到修改了host文件，但是IP和域名的映射有问题的情况，可以尝试刷新DNS缓存。 ipconfig/flushdns win建加R建，然后输入cmd，然后回车 然后回车，或者点击确定按钮。 出现如下所示标识清空DNS 缓存成功。...
计算机网络习题( 第3章 物理层 第4章 数据链路层 )
第3章 物理层 一、单选题 1、下列选项中，不属于物理层接口规范定义范畴的是（ ）。 A、 接口形状 B、 引脚功能 C、 传输媒体 D、 信号电平 正确答案： C 2、在物理层接口特性中，用于描述完成每种功能的事件发…...
UE5 崩溃问题汇总！！！
Using bundled DotNet SDK version: 6.0.302 ERROR: UnrealBuildTool.dll not found in "..\..\Engine\Binaries\DotNET\UnrealBuildTool\UnrealBuildTool.dll" 在你遇到这种极奇崩溃的BUG ，难以解决的时候。 尝试了N种方法，都不行的解决方法。…...
基于ArcGIS Pro的SWAT模型在流域水循环、水生态模拟中的应用及案例分析；SWAT模型安装、运行到结果读取全流程指导
目前，流域水资源和水生态问题逐渐成为制约社会经济和环境可持续发展的重要因素。SWAT模型是一种基于物理机制的分布式流域水文与生态模拟模型，能够对流域的水循环过程、污染物迁移等过程进行精细模拟和量化分析。SWAT模型目前广泛应用于流域水文过程研究…...
Docker下TestHubo安装配置指南
TestHubo是一款开源免费的测试管理工具， 下面介绍Docker 私有部署的安装与配置。TestHubo 私有部署版本更适合有严格数据安全要求的企业，支持在本地或专属服务器上运行，以实现对数据和系统的完全控制。 1、Docker 服务端安装 Docker安装包下…...
、Microsoft Azure、Linode和 桔子数据 的 价格对比)
AWS、Google Cloud Platform (GCP)、Microsoft Azure、Linode和 桔子数据 的 价格对比
要对比 AWS、Google Cloud Platform (GCP)、Microsoft Azure、Linode 和 桔子数据 的 价格，我们需要先了解每个平台的定价模型、服务类型以及不同服务之间的价格差异。以下是根据各个平台常见服务（如计算实例、存储、数据传输等）做的一个 简化…...
基础优化方法
梯度下降 学习率代表每一次沿着这个方向走多远， batchsize的概念 梯度下降通过不断沿着反梯度方向更新参数求解 两个重要的超参数是 batchsize 和 学习率...
DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径
目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
家政维修平台实战20：权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系，主要是分成几个表，用户表我们是记录用户的基础信息，包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题，不同的角色…...
【单片机期末】单片机系统设计
主要内容：系统状态机，系统时基，系统需求分析，系统构建，系统状态流图 一、题目要求 二、绘制系统状态流图 题目：根据上述描述绘制系统状态流图，注明状态转移条件及方向。 三、利用定时器产生时…...
三体问题详解
从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...
Ascend NPU上适配Step-Audio模型
1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如 中文，英文，日语），语音情感（如 开心，悲伤）&#x…...
拉力测试cuda pytorch 把 4070显卡拉满
import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试，通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小，增大可提高计算复杂度duration: 测试持续时间（秒&…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA：通过低成本全身远程操作学习双手移动操作 传统模仿学习（Imitation Learning）缺点：聚焦与桌面操作，缺乏通用任务所需的移动性和灵活性 本论文优点：（1）在ALOHA…...
Java 二维码
Java 二维码 **技术：**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念，确保一个租户（在这个系统中可能是一个公司或一个独立的客户）的数据对其他租户是不可见的。在 RuoYi 框架（您当前项目所使用的基础框架）中，这通常是通过在数据表中增加一个…...