前端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,一经查实,立即删除!

相关文章

2024/2/2

第一章 命名空间 一.选择题 1、编写C程序一般需经过的几个步骤依次是( B ) A. 编辑、调试、编译、连接 B. 编辑、编译、连接、运行 C. 编译、调试、编辑、连接 D. 编译、编辑、连接、运行 2、所谓数据封装就是将一组数据和与这组数据有关操…

【Oracle 集群】RAC知识图文详细教程(三)--RAC工作原理和相关组件

RAC 工作原理和相关组件 OracleRAC 是多个单实例在配置意义上的扩展,实现由两个或者多个节点(实例)使用一个共同的共享数据库(例如,一个数据库同时安装多个实例并打开)。在这种情况下,每一个单独…

什么是ISO21434网络安全中的信息安全?-亚远景

在ISO 21434标准中,信息安全指的是保护汽车网络、汽车电子系统和与汽车相关的信息免受未经授权的访问、修改、破坏、泄露和干扰的能力。信息安全的目标是确保车辆的电子和通信系统在数字化和互联环境中具备足够的防护,以防范潜在的威胁和攻击。 以下是IS…

帮管客CRM SQL注入漏洞

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

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

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

基于单片机的直流伺服电机调速系统设计

摘要:直流伺服电机通常在机器手、自动化生产线等数字控制系统中作为执行驱动机构。本文介绍一种基于单片机的直流伺服电机调速系统。其中C8051F020 单片机作为控制核心,通过数码管显示驱动和键盘扫描控制芯片CH452 接收按键输入和显示输出。C8051F020 单片机内部自带的PCA 计…

如何在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(格式化选中 代码,两…

【PDF.js】发票PDF不显示文本的问题

控制台提示警告: Warning: loadFont - translateFont failed: "UnknownErrorException: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided.".…

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

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

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

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

wpf 引入本项目的图片以及引入其他项目的图像资源区别及使用方法

在WPF项目中引入本项目的图片和引入其他项目的图像资源,两者的主要区别在于资源的位置以及如何通过URI引用它们。以下是详细说明及使用方法: ​ 一、引入本项目的图片资源: 将图片文件(如PNG, JPG等)放入你的WPF项目…

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…

gitlab 关闭Lets Encrypt证书续签

编辑 /etc/gitlab/gitlab.rb # letsencrypt[enable] nil 并更改 letsencrypt[enable] false重新加载配置 重启gitlab生效 gitlab-ctl reconfigure配置成自己的证书 external_url http://gitlab.example.com开启以下3向即可 nginx[redirect_http_to_https] true nginx[ssl_…

linux 下mongodb7版本怎么连?

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