前端JavaScript篇之对 rest 参数的理解、ES6中模板语法与字符串处理

目录

    • 对 rest 参数的理解
    • ES6中模板语法与字符串处理


对 rest 参数的理解

rest参数是一种在函数定义中使用的特殊语法,它允许函数接受任意数量的参数,并将它们收集到一个数组中。通俗地说,rest参数就像是一个容器,用来存放函数接收到的额外参数。

  • 在函数定义中,可以使用...语法来声明rest参数。
  • rest参数必须是函数参数列表中的最后一个参数。
  • rest参数会将传入函数的多余参数收集到一个数组中。
function sum(...numbers) {let total = 0for (let number of numbers) {total += number}return total
}console.log(sum(1, 2, 3, 4, 5)) // 输出:15
console.log(sum(10, 20)) // 输出:30
console.log(sum(3)) // 输出:3
console.log(sum()) // 输出:0

请添加图片描述

在上述例子中,我们定义了一个函数sum,并使用...numbers声明了rest参数。这意味着sum函数可以接受任意数量的参数,并将它们收集到一个名为numbers的数组中。

在函数体内部,我们使用for...of循环遍历numbers数组,将数组中的每个元素累加到total变量中。

通过调用sum函数并传入不同数量的参数,我们可以看到rest参数的效果。无论传入多少个参数,它们都会被收集到numbers数组中,并进行求和计算。

例如,sum(1, 2, 3, 4, 5)会将参数1、2、3、4、5收集到numbers数组中,然后计算它们的总和,最后返回结果15。

需要注意的是,如果没有传入任何参数,rest参数将会是一个空数组。在上述例子中,sum()会返回0,因为没有传入任何参数。

总结来说,rest参数是一种用于收集函数接收到的额外参数的语法。它允许函数接受任意数量的参数,并将它们收集到一个数组中。通过使用rest参数,我们可以编写更灵活的函数,能够处理不确定数量的参数。

ES6中模板语法与字符串处理

在ES6中,模板语法是一种用于创建字符串的新方式,它可以让我们更方便地处理字符串拼接和变量插入。通俗地说,模板语法允许我们在字符串中插入变量,并且可以跨行书写,使代码更易读和维护。

  • 模板语法使用反引号(`)包裹字符串。
  • 变量插入使用${}语法,其中${}内部可以是任何有效的表达式。
  • 模板字符串可以跨行书写,保留换行符和空格。
const name = 'Alice'
const age = 25const message = `My name is ${name} and I'm ${age} years old.`console.log(message)

在上述例子中,我们定义了两个变量nameage,分别表示姓名和年龄。

使用模板语法,我们创建了一个模板字符串message,其中使用${}插入了变量nameage${name}会被替换为变量name的值,${age}会被替换为变量age的值。

最后,我们通过console.log输出了模板字符串message

运行上述代码,将会输出以下结果:

My name is Alice and I'm 25 years old.

可以看到,模板字符串中的${name}被替换为变量name的值"Alice",${age}被替换为变量age的值25,从而得到了最终的字符串。

除了变量插入,模板字符串还可以跨行书写,保留换行符和空格。这使得我们可以更自由地书写多行字符串,而不需要手动添加换行符或使用字符串拼接符号。

const message = `Hello,This is amulti-linemessage.
`console.log(message)

在上述例子中,我们使用模板字符串创建了一个跨行的字符串message,其中包含了多行文本。

运行上述代码,将会输出以下结果:

  Hello,This is amulti-linemessage.

请添加图片描述
可以看到,模板字符串保留了每行的换行符和缩进,输出结果与定义时的格式完全一致。

总结来说,ES6中的模板语法是一种更方便的字符串处理方式,它允许我们在字符串中插入变量,并且可以跨行书写。通过使用模板语法,我们可以更简洁地拼接字符串并提高代码的可读性。

在ES6中,除了模板语法外,还新增了一系列的字符串方法,这些方法可以提升开发效率并简化字符串处理的操作。这些方法包括字符串搜索、替换、截取等功能。

以下是一些常用的字符串方法:

  • startsWith(searchString):判断字符串是否以指定的字符串开头。
  • endsWith(searchString):判断字符串是否以指定的字符串结尾。
  • includes(searchString):判断字符串是否包含指定的字符串。
  • indexOf(searchValue):返回指定字符串在原字符串中首次出现的索引位置。
  • lastIndexOf(searchValue):返回指定字符串在原字符串中最后一次出现的索引位置。
  • replace(searchValue, replaceValue):替换字符串中的指定值为新的值。
  • slice(startIndex, endIndex):截取字符串中指定范围的子字符串。
  • toUpperCase():将字符串转换为大写。
  • toLowerCase():将字符串转换为小写。
  • trim():去除字符串两端的空格。
const sentence = 'Hello, world!'console.log(sentence.startsWith('Hello')) // 输出:true
console.log(sentence.endsWith('world!')) // 输出:true
console.log(sentence.includes('lo')) // 输出:true
console.log(sentence.indexOf('world')) // 输出:7
console.log(sentence.lastIndexOf('o')) // 输出:8
console.log(sentence.replace('world', 'universe')) // 输出:"Hello, universe!"
console.log(sentence.slice(7, 12)) // 输出:"world"
console.log(sentence.toUpperCase()) // 输出:"HELLO, WORLD!"
console.log(sentence.toLowerCase()) // 输出:"hello, world!"
console.log('  trim me  '.trim()) // 输出:"trim me"

请添加图片描述

在上述例子中,我们定义了一个字符串sentence,并使用不同的字符串方法对其进行操作。

通过调用字符串方法,我们可以实现以下功能:

  • 使用startsWith方法判断sentence是否以"Hello"开头,返回结果为true
  • 使用endsWith方法判断sentence是否以"world!"结尾,返回结果为true
  • 使用includes方法判断sentence是否包含"lo",返回结果为true
  • 使用indexOf方法查找"world"在sentence中的索引位置,返回结果为7。
  • 使用lastIndexOf方法查找"o"在sentence中最后出现的索引位置,返回结果为8。
  • 使用replace方法将sentence中的"world"替换为"universe",返回结果为"Hello, universe!"。
  • 使用slice方法截取sentence中索引7到12的子字符串,返回结果为"world"。
  • 使用toUpperCase方法将sentence转换为大写,返回结果为"HELLO, WORLD!"。
  • 使用toLowerCase方法将sentence转换为小写,返回结果为"hello, world!"。
  • 使用trim方法去除字符串" trim me “两端的空格,返回结果为"trim me”。

通过使用这些字符串方法,我们可以更方便地进行字符串搜索、替换、截取等操作,提高开发效率。

持续学习总结记录中,回顾一下上面的内容:
rest参数是一种用于收集函数接收到的额外参数的语法。它允许函数接受任意数量的参数,并将它们收集到一个数组中。通过使用rest参数,我们可以编写更灵活的函数,能够处理不确定数量的参数。
在ES6中,模板语法是一种用于创建字符串的新方式,它可以让我们更方便地处理字符串拼接和变量插入。通俗地说,模板语法允许我们在字符串中插入变量,并且可以跨行书写,使代码更易读和维护。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/664006.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

帮管客CRM SQL注入漏洞

免责声明:文章来源互联网收集整理,请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该…

2024年美赛B题:寻找潜水器 Searching for Submersibles 思路模型代码解析

2024年美赛B题:寻找潜水器 Searching for Submersibles 思路模型代码解析 【点击最下方群名片,加入群聊,获取更多思路与代码哦~】 问题翻译 海上游轮迷你潜艇(MCMS)是一家位于希腊的公司,专门制造能够将人…

如何在Windows部署GoLand并通过SSH远程连接Linux服务器

文章目录 1. 安装配置GoLand2. 服务器开启SSH服务3. GoLand本地服务器远程连接测试4. 安装cpolar内网穿透远程访问服务器端4.1 服务器端安装cpolar4.2 创建远程连接公网地址 5. 使用固定TCP地址远程开发 本文主要介绍使用GoLand通过SSH远程连接服务器,并结合cpolar内…

Vue 环境准备

1.安装vscode https://code.visualstudio.com/ 2.安装开发vue所需插件: Vetur —— 语法高亮、智能感知、Emmet等 包含格式化功能, AltShiftF (格式化全文),CtrlK CtrlF(格式化选中 代码,两…

在 Elastic Agent 中为 Logstash 输出配置 SSL/TLS

要将数据从 Elastic Agent 安全地发送到 Logstash,你需要配置传输层安全性 (TLS)。 使用 TLS 可确保你的 Elastic Agent 将加密数据发送到受信任的 Logstash 服务器,并且你的 Logstash 服务器从受信任的 Elastic Agent 客户端接收数据。 先决条件 确保你…

防御保护 防火墙的双机热备和带宽管理实验

需求: 办公区设备可以通过电信和移动链路上网(多对多的NAT,并需要保留一个公网IP不能用来转换)分公司设备可以通过总公司的移动和电信链路访问DMZ区的http服务器分公司内部的客户端可以通过公网地址访问到内部的服务器FW1和FW4组…

Unity | YooAssetV2.1.0 + HybridCLR热更新

目录 一、项目更改 二、使用YooAsset热更 1.资源配置 2.资源构建 3.将两个文件夹下的资源上传CDN服务器 4.修改代码 5.运行效果 本文记录利用YooAssetHybridCLR来进行资源和dll的更新。YooAsset使用的是新版V2.1.0。相比于旧版,dll(原生文件)和资源要建两个p…

AI-数学-高中-18-三角函数-同角三角函数关系及计算

原作者视频:三角函数】5同角三角函数关系(易中档)_哔哩哔哩_bilibili 辅助三角形(计算速度快):1.画一个辅助计算的任意直接三角形;2.利用初中方法先计算sin、cos、tan值;3.看象限确定…

Python机器学习:样本划分之验证集法

评估机器学习模型优劣的标准是模型的泛化能力,所以关注的应该是泛化误差而不是经验误差,一味追求经验误差的降低,就会导致模型“过拟合”现象。但是泛化误差是难以直接观察到的,我们应该如何选择泛化能力比较好的模型呢&#xff1…

蓝桥杯---垒骰子

赌圣atm晚年迷恋上了垒骰子,就是把骰子一个垒在另一个上边,不能歪歪扭扭,要垒成方柱体。经过长期观察,atm 发现了稳定骰子的奥秘:有些数字的面贴着会互相排斥!我们先来规范一下骰子:1的对面是4&…

【Docker篇】Linux安装Docker、docker安装mysql、redis、rabbitmq

1.Linux安装docker 官方帮助文档:Install Docker Engine on CentOS | Docker Docs 1.1安装命令 # 1. 卸载之前的dockersudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate…

RK3568平台 安卓hal3适配usb camera

一.RK安卓hal3 camera框架 Camera hal3 在 android 框架中所处的位置如上图, 对上,主要实现 Framework 一整套 API 接口,响应其 控制命令,返回数据与控制参数结果。 对下, 主要是通 V4l2 框架实现与 kernel 的交互。3a…

linux 下mongodb7版本怎么连?

概述:linux下的mongodb7版本默认是没有安装客户端的,需要下载shell客户端才能连,下载之后解压,不需要编译,进入bin目录就能自己运行,。 安装: linux 下mongodb7版本没有安装客户端需要当地下载…

Java:你还在想着考虑使用 tess4j 做文字识别吗?给你看看我的一点实践

需求:删除带有图片水印的图片 语言也设置为中文了,最后给我识别的文字是这样的 | AT V ! w{)" . ) ,/ R Ko 87 ’ 我能理解,毕竟图片很大张,不过不用担心,因为这个水印很有规律,就在右下方裁剪出宽 1…

基于单片机的智能燃气灶控制系统设计

摘要:针对传统燃气灶存在不能防干烧、不能进行温度检测、不能进行火力自动调节等问题,设计了一种基于单片机控制的智能燃气灶,它通过单片机进行控制,由开关模块、测温模块、语音播报模块、火力控制模块和防空烧模块五个模块组成&a…

django+flask+python高校教材管理系统47nia

本.4论文结构 绪论:剖析项目可行性,表明研究方向。 开发技术:系统关键运用了Python技术性、Django框架、B/S架构和myspl数据库查询,并进行了详细介绍[6]。 系统分析:包含系统的总体构造,用例图和结构图。 系…

故障诊断 | 一文解决,CNN-LSTM卷积神经网络-长短期记忆神经网络组合模型的故障诊断(Matlab)

效果一览 文章概述 故障诊断 | 一文解决,CNN-LSTM卷积神经网络-长短期记忆神经网络组合模型的故障诊断(Matlab) 模型描述 CNN-LSTM模型是一种结合了卷积神经网络(Convolutional Neural Network)和长短期记忆神经网络(Long Short-Term Memory)的组合模型,常用于数据故障…

《动手学深度学习(PyTorch版)》笔记6.3

注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过&…

Python实现PDF到HTML的转换

PDF文件是共享和分发文档的常用选择,但提取和再利用PDF文件中的内容可能会非常麻烦。而利用Python将PDF文件转换为HTML是解决此问题的理想方案之一,这样做可以增强文档可访问性,使文档可搜索,同时增强文档在不同场景中的实用性。此…

后端——go系统学习笔记(不断更新中......)

数组 固定大小 初始化 arr1 : [3]int{1, 2, 3} arr2 : [...]int{1, 2, 3} var arr3 []int var arr4 [4]int切片 长度是动态的 初始化 arr[0:3] slice : []int{1,2,3} slice : make([]int, 10)len和cap len是获取切片、数组、字符串的长度——元素的个数cap是获取切片的容量—…