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

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

news 2026/4/4 0:11:58

文章目录

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

从火柴盒到AI：探索MENACE的数字化旅程

在计算机科学的历史中，有许多有趣的实验和发明，其中之一便是由唐纳德米奇（Donald Michie）设计的“火柴盒计算机”（Matchbox Educable Noughts and Crosses Engine，简称MENACE）。这个装置使用了火柴盒和彩色珠子来模拟人工智能，教机器玩井字游戏（Tic-Tac-Toe）。本文将…...

编程新知 2026/4/3 22:56:39

FreeRTOS 工程化要点：任务划分、优先级设计与 CPU 占用率监控

大家好，我是杂烩君。今天我们来简单分享：FreeRTOS任务怎么拆、优先级怎么配、CPU 占用怎么看。1. 任务划分原则 1.1 单一职责：一个任务只干一件事把"串口接收数据解析指令执行结果反馈"全塞一个任务，解析环节一…...

编程新知 2026/4/3 22:50:33

基于51单片机的电子秤（4挡）proteus、原理图、流程图 1185-基于51单片机的电子秤...

基于51单片机的电子秤（4挡）proteus、原理图、流程图 1185-基于51单片机的电子秤（4挡）proteus、原理图、流程图、物料清单、仿真图、源代码功能介绍： 1、基本部分 （1）称重范围用开关分为三挡&am…...

编程新知 2026/4/3 20:39:31

别再让用户装Python了！手把手教你用PyInstaller把Tkinter小工具变成独立EXE

告别Python依赖：用PyInstaller打造零配置的Tkinter桌面应用每次看到同事对着你开发的工具一脸茫然地问"Python是什么？pip又该怎么装？"，作为开发者的你是否感到深深的无力？这种技术鸿沟正在吞噬无数优秀工具…...

编程新知 2026/4/3 20:27:26

所有下载都一定要直接从个人服务器直接下载--------因为个人宽带的上传速度一点也不慢

可以看到居然速度高达10M/S如果你直接从云服务器下载速度就非常慢：这就是1M的宽带，所以很慢。所以如果是下载apk文件，一定要从自己的服务器直接下载：就是带10001端口号的个人服务器。...

编程新知 2026/4/3 20:25:24

手把手教你用ESP32-S3开发智能语音设备：麦克风选型+WAV录音全流程

ESP32-S3智能语音设备开发实战：从麦克风选型到WAV录音全流程解析 1. 智能语音设备开发的核心挑战与ESP32-S3解决方案在智能家居和物联网设备爆发式增长的今天，语音交互已成为人机交互的重要方式。然而，开发一款高性能的智能语音设备并非易…...

编程新知 2026/4/3 20:19:17

当 95% 泳池拒绝轮椅人群时，“泳池升降机” 正在创造包容性蓝海

在一座城市的游泳馆里，坐在轮椅上的小李望着眼前的泳池，眼神中满是渴望却又带着一丝无奈。以往，他只能看着别人在水中畅游，因为大部分泳池没有适合他这样行动不便者入水的设施。但最近，这家游泳馆引入了一款便携式泳池…...

编程新知 2026/4/3 19:00:27

保姆级教程：用PyTorch从零复现DeepLab v3+（附MobileNet v2/Xception双Backbone代码详解）

从零构建DeepLab v3语义分割模型：MobileNet v2/Xception双主干网络实战指南 1. 语义分割与DeepLab v3架构精要语义分割作为计算机视觉领域的核心任务之一，要求模型对图像中的每个像素进行分类，实现像素级的语义理解。不同于传统的图像分类…...

编程新知 2026/4/3 18:38:19

Comsol 双层结构曲界面声场仿真探索

comsol 双层结构曲界面声场仿真聚焦探头（焦距60mm，晶片直径14mm）辐射声场在双层介质（水钢）中声压分布，钢为凸界面，曲率半径50mm 当第二层介质声速大于第一层介质声速时，凸界面使声场…...

编程新知 2026/4/3 16:50:32

跨境多币种支付系统的实现

随着全球化贸易与数字经济深度融合，跨境多币种支付已成为跨境电商、外贸 B2B、SaaS 出海、国际文旅等场景的核心基础设施。一套稳定、合规、低成本的多币种支付系统，既要解决多币种兑换、跨境清算、汇率波动等技术难题，也要满足全球范围内反洗…...

编程新知 2026/4/3 15:00:51

文章目录

解构

1. 对象解构

2. 数组解构

数组扩展符

模板字符串

相关文章：