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

JS 解构、数组扩展符和模板字符串的常见用法

news 2025/9/21 23:30:18

文章目录

解构
- 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) 对象属性赋值变量的传统写法&…...

编程日记 2024/12/27 19:26:24

低代码开源项目Joget的研究——Joget7社区版安装部署

大纲环境准备安装必要软件配置Java配置JAVA_HOME配置Java软链安装三方库获取源码配置MySql数据库创建用户创建数据库导入初始数据配置数据库连接配置sessionFactory编译下载tomcat启动下载aspectjweaver移动jw.war文件编写脚本运行测试参考资料 Joget，作为一款开…...

编程日记 2024/12/27 19:25:22

Golang 为什么没有注解？

Go 的哲学是：“少就是多，显式优于隐式。”注解虽然方便，但会违背 Go 追求简洁和清晰的设计理念。什么是注解？为什么看起来很实用？注解的定义：注解是一种特殊的元信息，用于修饰代码（如类、方法、字段等），让程序或工具在运行时或编译时解析和处理这些信息。例如： …...

编程日记 2024/12/27 19:24:21

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 平台的轻…...

编程日记 2024/12/27 19:22:18

LabVIEW软件开发的未来趋势

LabVIEW软件开发的未来趋势可以从以下几个方面来分析： 1. 与AI和机器学习的深度结合趋势：LabVIEW正在向集成AI和机器学习方向发展，尤其是在数据处理、预测性维护和自动化控制领域。原因：AI技术的普及使得实验和工业场景中的…...

编程日记 2024/12/27 19:20:17

Node.js 助力前端开发：自动化操作实战

前端开发中，重复性任务如新建文件、配置路由、生成组件等，往往耗时且容易出错。借助 Node.js 的强大能力，我们可以实现开发过程中的自动化操作，提高效率。文章目录自动生成 router 配置文件自动生成组件模板动态构建导航菜单自…...

编程日记 2024/12/27 19:13:11

HuggingFace peft LoRA 微调 LLaMA

1. 安装必要库 pip install transformers peft accelerate2. 加载 LLaMA 模型和分词器从 Hugging Face Transformers 加载预训练的 LLaMA 模型和分词器。 from transformers import AutoModelForCausalLM, AutoTokenizer# 加载 LLaMA 模型和分词器 model_name "meta-…...

编程日记 2024/12/27 19:09:08

记-编译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…...

编程日记 2024/12/27 19:06:05

前端登录业务

1.用户登录成功拿到token，放在请求拦截器的请求头中，调用户接口才可以获取到用户信息，存储到仓库中，以便其他组件使用用户信息 2.退出登录需要清空用户数据，以及本地存储，调退出登录接口告诉服务器当前toke…...

编程日记 2024/12/27 19:03:02

项目2路由交换

背景某学校为满足日常教学生活需求，推动数字校园的建设，学校有办公楼和学生宿舍楼和服务器集群三块区域，请合理规划IP地址和VLAN，实现企业内部能够互联互通现要求外网能通过公网地址访问服务器集群，学生和老师能正常…...

编程日记 2024/12/27 18:56:56

易语言 OCR 文字识别

一.引言文字识别，也称为光学字符识别（Optical Character Recognition, OCR），是一种将不同形式的文档（如扫描的纸质文档、PDF文件或数字相机拍摄的图片）中的文字转换成可编辑和可搜索的数据的技术。随着技…...

编程日记 2024/12/27 18:53:54

云手机+YouTube：改变通信世界的划时代技术

随着科技的不断进步，手机作为人们生活中不可或缺的工具，也在不断地更新换代。近年来，一个名为“油管云手机”的全新产品正在引起广泛的关注和讨论。作为一个运用最新科技实现的新型手机，它在通信领域带来了全新的体验和革命性的变…...

编程日记 2024/12/27 18:50:50

C++-----------映射

探索 C 中的映射与查找表在 C 编程中，映射（Map）和查找表（Lookup Table）是非常重要的数据结构，它们能够高效地存储和检索数据，帮助我们解决各种实际问题。今天，我们就来深入探讨一下…...

编程日记 2024/12/27 18:48:49

清空DNS 缓存

如果遇到修改了host文件，但是IP和域名的映射有问题的情况，可以尝试刷新DNS缓存。 ipconfig/flushdns win建加R建，然后输入cmd，然后回车然后回车，或者点击确定按钮。出现如下所示标识清空DNS 缓存成功。...

编程日记 2024/12/27 18:43:42

计算机网络习题( 第3章物理层第4章数据链路层 )

第3章物理层一、单选题 1、下列选项中，不属于物理层接口规范定义范畴的是（ ）。 A、接口形状 B、引脚功能 C、传输媒体 D、信号电平正确答案： C 2、在物理层接口特性中，用于描述完成每种功能的事件发…...

编程日记 2024/12/27 18:42:41

UE5 崩溃问题汇总！！！

Using bundled DotNet SDK version: 6.0.302 ERROR: UnrealBuildTool.dll not found in "..\..\Engine\Binaries\DotNET\UnrealBuildTool\UnrealBuildTool.dll" 在你遇到这种极奇崩溃的BUG ，难以解决的时候。尝试了N种方法，都不行的解决方法。…...

编程日记 2024/12/27 18:39:38

基于ArcGIS Pro的SWAT模型在流域水循环、水生态模拟中的应用及案例分析；SWAT模型安装、运行到结果读取全流程指导

目前，流域水资源和水生态问题逐渐成为制约社会经济和环境可持续发展的重要因素。SWAT模型是一种基于物理机制的分布式流域水文与生态模拟模型，能够对流域的水循环过程、污染物迁移等过程进行精细模拟和量化分析。SWAT模型目前广泛应用于流域水文过程研究…...

编程日记 2024/12/27 18:33:33

Docker下TestHubo安装配置指南

TestHubo是一款开源免费的测试管理工具， 下面介绍Docker 私有部署的安装与配置。TestHubo 私有部署版本更适合有严格数据安全要求的企业，支持在本地或专属服务器上运行，以实现对数据和系统的完全控制。 1、Docker 服务端安装 Docker安装包下…...

编程日记 2024/12/27 18:31:31

AWS、Google Cloud Platform (GCP)、Microsoft Azure、Linode和桔子数据的价格对比

要对比 AWS、Google Cloud Platform (GCP)、Microsoft Azure、Linode 和桔子数据的价格，我们需要先了解每个平台的定价模型、服务类型以及不同服务之间的价格差异。以下是根据各个平台常见服务（如计算实例、存储、数据传输等）做的一个简化…...

编程日记 2024/12/27 18:30:29

基础优化方法

梯度下降学习率代表每一次沿着这个方向走多远， batchsize的概念梯度下降通过不断沿着反梯度方向更新参数求解两个重要的超参数是 batchsize 和学习率...

编程日记 2024/12/27 18:28:27

网络编程（Modbus进阶）

思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以高效率、强健性、易实现的特点成为工业控制系统的通信标准。包…...

编程新知 2025/9/20 0:09:21

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/9/15 18:06:39

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/7/12 22:48:51

反射获取方法和属性

Java反射获取方法在Java中，反射（Reflection）是一种强大的机制，允许程序在运行时访问和操作类的内部属性和方法。通过反射，可以动态地创建对象、调用方法、改变属性值，这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/7/5 23:14:36

三体问题详解

从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...

编程新知 2025/9/19 3:30:35

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。本期公布试题111~120 试题1…...

编程新知 2025/8/26 23:06:46

零基础设计模式——行为型模式 - 责任链模式

第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。核心思想：使多个对象都有机会处…...

编程新知 2025/8/27 2:56:26

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03