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

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

news 2026/2/11 3:27:54

文章目录

解构
- 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

CMake基础：构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

编程新知 2026/2/2 7:39:34

STM32标准库-DMA直接存储器存取

文章目录一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51

页面渲染流程与性能优化

页面渲染流程与性能优化详解（完整版） 一、现代浏览器渲染流程（详细说明） 1. 构建DOM树浏览器接收到HTML文档后，会逐步解析并构建DOM（Document Object Model）树。具体过程如下： (…...

编程新知 2026/1/31 11:58:35

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域，高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表，以及基于它们实现的 Reactor 模式，为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。一、I…...

编程新知 2026/2/10 11:29:59

浅谈不同二分算法的查找情况

二分算法原理比较简单，但是实际的算法模板却有很多，这一切都源于二分查找问题中的复杂情况和二分算法的边界处理，以下是博主对一些二分算法查找的情况分析。需要说明的是，以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南在数字化营销时代，邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天，我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。多个 Bean 的依赖关系构成环形链路，例如：双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下，推客小程序系统凭借其裂变传播、精准营销等特性，成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径，助力开发者打造具有市场竞争力的营销工具。一、系统核心功能架构&…...

编程新知 2025/8/21 16:28:18

文章目录

解构

1. 对象解构

2. 数组解构

数组扩展符

模板字符串

相关文章：