前端JavaScript篇之对 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)

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

使用模板语法，我们创建了一个模板字符串message，其中使用${}插入了变量name和age。${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中，模板语法是一种用于创建字符串的新方式，它可以让我们更方便地处理字符串拼接和变量插入。通俗地说，模板语法允许我们在字符串中插入变量，并且可以跨行书写，使代码更易读和维护。