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

目录

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


对 rest 参数的理解

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

  • 在函数定义中,可以使用...语法来声明rest参数。
  • rest参数必须是函数参数列表中的最后一个参数。
  • rest参数会将传入函数的多余参数收集到一个数组中。
function sum(...numbers) {
  let total = 0
  for (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 = 25

const 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 a
  multi-line
  message.
`

console.log(message)

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

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

  Hello,
  This is a
  multi-line
  message.

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

总结来说,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.mfbz.cn/a/367464.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

cnpm : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\cnpm.ps1

cnpm命令被禁止使用 我已经安装cnpm ,但是使用不了,重新安装也没用。 报错如下图: cnpm无法使用报错 解决问题 1、打开系统Windows PowerShell,使用管理员身份运行。 打开Windows PowerShell 2、输入set-ExecutionPolicy RemoteSigned&a…

深度学习:数据驱动的人工智能革命

文章目录 每日一句正能量前言什么是深度学习推动AI发展不同阶段的“三大驱动 ”1、技术驱动:算法和计算力是主要驱动力2、计算力的三驾马车:芯片、超级计算机、云计算3、数据驱动:描绘个性化画像; 后记 每日一句正能量 一般青年的…

Java数组的遍历

目录 数组的遍历使用for循环遍历数组使用for-each循环遍历数组使用while循环和迭代器遍历数组使用Java 8的流API遍历数组 数组遍历的应用求数组中的最大值查询数组中指定位置的元素将查指定元素对应的索引的功能提取为方法添加数组元素删除数组元素 数组的遍历 Java数组的遍历…

Day17、18、19学习记录

#c语言知识 内存管理 1.作用域 (1)代码块作用域(代码块是{}之间的一段代码) (2)函数作用域 (3)文件作用域 2.局部变量(自动变量auto): 在函…

Matlab plot绘图的 title 语法

x 0:1:10; >> y x.^2 -10*x15; >> plot(x,y) >> title(x_y, interpreter, none) title 里面的 x_y , y不会被当作下标。

软件工程(最简式总结)

目录 第一章:概述 1.软件危机的表现原因 2.常见的软件开发方法包括: 3.软件工程基本原则 4.软件工程三要素 5.设计模式的分类 6.针对变换型数据流设计步骤 7.针对事务型数据流设计步骤 第二章:软件过程 1.软件生命周期 2.软件过程模型 &…

数据结构篇-05:哈希表解决字母异位词分组

本文对应力扣高频100 ——49、字母异位词分组 哈希表最大的特点就是它可以把搜索元素的时间复杂度降到O(1)。这一题就是要我们找到 “字母异位词” 并把它们放在一起。 “字母异位词”就是同一个单词中字母的不同组合形式。判断“字母异位词”有两个视角:1、所含字…

《计算机网络简易速速上手小册》第1章:计算机网络技术基础(2024 最新版)

文章目录 1.1 OSI 模型简介 - 深入探究1.1.1 基础知识1.1.2 重点案例:构建简易 HTTP 服务器1.1.3 拓展案例1:网络层数据包捕获1.1.4 拓展案例2:传输层 TCP 连接 1.2 TCP/IP 协议栈 - 深入探究1.2.1 基础知识1.2.2 重点案例:使用 P…

2.3作业 编写一个shell 脚本,判断输入的是否是数字

#!/bin/bashvar$1 len${#var} j0 for(($j;$j<$len;((j)))) doif [ ${var:$j:1} -eq 0 ]then echo "第$j位数字是0"elif [ ${var:$j:1 } -eq 1 ]then echo "第$j位数字是1"elif [ ${var:$j:1} -eq 2 ]then echo "第$j位数字是2"elif [ ${var:$…

【Linux】理解系统中一个被打开的文件

文件系统 前言一、C语言文件接口二、系统文件接口三、文件描述符四、struct file 对象五、stdin、stdout、stderr六、文件描述符的分配规则七、重定向1. 重定向的原理2. dup23. 重谈 stderr 八、缓冲区1. 缓冲区基础2. 深入理解缓冲区3. 用户缓冲区和内核缓冲区4. FILE 前言 首…

题目: 有1234个数字, 组成多个互不相同且无重复数字的三位数? 都是多少?

lua脚本如下 最原始的解题方法 local str{} local i, j, k0, 0, 0 for i1, 4 do for j1, 4 do for k1, 4 do if i~j and i~k and j~k then str[#str1]i..j..k end end end end print("组成的数有"..#str) print(table.unpack(str)) 运行的结果如下 组成的数有24 1…

【DDD】学习笔记-代码模型的架构决策

代码模型属于软件架构的一部分&#xff0c;它是设计模型的进化与实现&#xff0c;体现出了代码模块&#xff08;包&#xff09;的结构层次。在架构视图中&#xff0c;代码模型甚至会作为其中的一个视图&#xff0c;通过它来展现模块的划分&#xff0c;并定义运行时实体与执行视…

跨平台开发:浅析uni-app及其他主流APP开发方式

随着智能手机的普及&#xff0c;移动应用程序&#xff08;APP&#xff09;的需求不断增长。开发一款优秀的APP&#xff0c;不仅需要考虑功能和用户体验&#xff0c;还需要选择一种适合的开发方式。随着技术的发展&#xff0c;目前有多种主流的APP开发方式可供选择&#xff0c;其…

【HTML 基础】框架 iframe 标签

文章目录 1. 基本用法2. 设置框架样式3. frameborder 和 scrolling 属性4. 在框架中显示其他内容5. 响应式框架6. 注意事项结语 在 Web 开发中&#xff0c;有时候我们需要在页面中嵌套其他网页或内容&#xff0c;这时候就可以使用 HTML 的框架标签之一<iframe>。<ifra…

20240202在WIN10下使用fast whisper缺少cudnn_ops_infer64_8.dll

20240202在WIN10下使用fast whisper缺少cudnn_ops_infer64_8.dll 2024/2/2 10:48 https://blog.csdn.net/feinifi/article/details/132548556 Could not locate cudnn_ops_infer64_8.dll. Please make sure it is in your library path!解决办法 安装cuDNN c:\faster-whisper-…

【MybatisPlus篇】查询条件设置(范围匹配 | 模糊匹配 | 空判定 | 包含性判定 | 分组 | 排序)

文章目录 &#x1f384;环境准备⭐导入依赖⭐写入User类⭐配置启动类⭐创建UserDao 的 MyBatis Mapper 接口&#xff0c;用于定义数据库访问操作⭐创建配置文件&#x1f6f8;创建测试类MpATest.java &#x1f354;范围查询⭐eq⭐between⭐gt &#x1f354;模糊匹配⭐like &…

MySQL的ACID、死锁、MVCC问题

1 ACID ACID代表原子性&#xff08;atomicity&#xff09;、一致性&#xff08;consistency&#xff09;、隔离性&#xff08;isolation&#xff09;和持久性&#xff08;durability&#xff09;。一个确保数据安全的事务处理系统&#xff0c;必须满足这些密切相关的标准。 原…

三、数据背后的二进制

文章目录 数据背后的二进制1.1 整数的二进制表示与位运算1.1.1 正整数的二进制表示1.1.2 负整数的二进制表示 1.2 原码、反码、补码1.2.1 机器数和机器数的真值1.2.2 原码, 反码, 补码的基础概念和计算方法1.2.3 为何要使用原码、反码和补码1.2.4 补码计算原理 1.3 小数的二进制…

android 网络拦截器统一处理请求参数和返回值加解密实现

前言 项目中遇到参数加密和返回结果加密的业务 这里写一下实现 一来加深记忆 二来为以后参考铺垫 需求 项目在开发中涉及到 登陆 发验证码 认证 等前期准备接口 这些接口需要单独处理 比如不加密 或者有其他的业务需求 剩下的是登陆成功以后的业务需求接口 针对入参和返回值…

jsp游戏网上商城系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 游戏网上商城系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…
最新文章