掌握JavaScript的练习之道：十个手写函数让你信手拈来！

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

当涉及到练习JavaScript函数时，有许多不同的函数可以学习和实现。以下是十个常见的手写JavaScript函数，可以作为练习的绝佳选择：

1. 数组求和

function sumArray(arr) {
  return arr.reduce((total, num) => total + num, 0);
}
1
2
3

2. 数组平均值

function averageArray(arr) {
  if (arr.length === 0) {
    return 0;
  }
  return sumArray(arr) / arr.length;
}
1
2
3
4
5
6

3. 找出最大值

function findMax(arr) {
  return Math.max(...arr);
}
1
2
3

4. 颠倒字符串

function reverseString(str) {
  return str.split('').reverse().join('');
}
1
2
3

代码 str.split('').reverse().join('') 的作用是将字符串 str 反转。

下面是对每个方法的解释：

1. split(''): 这个方法将字符串 str 拆分成一个字符数组。通过传递空字符串 '' 作为分隔符，字符串中的每个字符都会成为数组中的一个元素。

   例如，对于字符串 'Hello'，split('') 的结果将是 ['H', 'e', 'l', 'l', 'o']。

2. reverse(): 这个方法用于反转数组中的元素顺序。它会改变原始数组，将数组中的第一个元素变为最后一个元素，第二个元素变为倒数第二个元素，以此类推。

   例如，对于数组 ['H', 'e', 'l', 'l', 'o']，reverse() 的结果将是 ['o', 'l', 'l', 'e', 'H']。

3. join(''): 这个方法将数组中的所有元素按照指定的分隔符连接成一个字符串。通过传递空字符串 '' 作为分隔符，元素之间不会有任何字符间隔。

   例如，对于数组 ['o', 'l', 'l', 'e', 'H']，join('') 的结果将是 'olleH'。

综合起来看，str.split('').reverse().join('') 的实际效果是将字符串 str 反转，并返回反转后的字符串。

例如，对于字符串 'Hello'，这行代码将返回 'olleH'。

5. 判断回文字符串

function isPalindrome(str) {
  const cleanedStr = str.toLowerCase().replace(/[\W_]/g, '');
  const reversedStr = reverseString(cleanedStr);
  return cleanedStr === reversedStr;
}
1
2
3
4
5

6. 数组去重

function removeDuplicates(arr) {
  return [...new Set(arr)];
}
1
2
3

代码 [...new Set(arr)] 的作用是从数组 arr 中去除重复的元素，并返回一个由非重复元素组成的新数组。

下面是对代码中的每个部分的解释：

1. Set: Set 是 JavaScript 中的一种数据结构，它允许你存储唯一的值，这意味着集合中不会有重复的元素。当你使用 new Set() 创建一个新的 Set 对象时，它将包含从 arr 中的元素创建的一组唯一值。

2. new: new 关键字用于创建 Set 对象的实例。

3. [...]: 这是扩展运算符（Spread Operator），它用于将一个可迭代对象（如数组）展开为独立的元素。在这个代码片段中，它将 Set 对象转换为一个数组。

综合起来看，[...new Set(arr)] 的效果是将数组 arr 转换为一个 Set 对象以去除重复元素，然后将其转换回一个数组。最后，返回的数组中将包含 arr 中的非重复元素。

例如，对于数组 [1, 2, 2, 3, 3, 4, 5, 5]，这行代码将返回 [1, 2, 3, 4, 5]，去除了重复的元素。

7. 统计字符串中某个字符出现的次数

function countOccurrences(str, char) {
  const regex = new RegExp(char, 'g');
  const matches = str.match(regex);
  return matches ? matches.length : 0;
}
1
2
3
4
5

8. 斐波那契数列

function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}
1
2
3
4
5
6

这段代码实现了一个递归函数来计算斐波那契数列中第 n 个数的值。

下面是对代码的解释：

1. if (n <= 1) { return n; }: 这是递归函数的终止条件。当 n 小于或等于 1 时，直接返回 n 的值。在斐波那契数列中，第一个数和第二个数都是 1，所以当 n 为 0 或 1 时，递归终止并返回相应的值。

2. return fibonacci(n - 1) + fibonacci(n - 2);: 这是递归调用部分。当 n 大于 1 时，递归调用 fibonacci 函数来计算前两个数的和。fibonacci(n - 1) 表示计算第 n-1 个数的值，fibonacci(n - 2) 表示计算第 n-2 个数的值。然后将它们相加并返回结果。这样，递归会一直进行直到达到终止条件。

综合起来看，这段代码实现了一个递归函数来计算斐波那契数列的第 n 个数的值。通过不断递归调用自身并根据终止条件返回结果，可以计算出斐波那契数列中任意位置的数。

请注意，对于较大的 n 值，这种递归实现可能效率较低，因为它可能会进行重复的计算。在实际应用中，可以考虑使用循环或其他更高效的方法来计算斐波那契数列。

9. 判断质数

function isPrime(num) {
  if (num < 2) {
    return false;
  }
  for (let i = 2; i <= Math.sqrt(num); i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return true;
}
1
2
3
4
5
6
7
8
9
10
11

10. 找出字符串中最长的单词

function longestWord(str) {
  const words = str.split(' ');
  let maxLength = 0;
  let longestWord = '';
  for (let i = 0; i < words.length; i++) {
    if (words[i].length > maxLength) {
      maxLength = words[i].length;
      longestWord = words[i];
    }
  }
  return longestWord;
}
1
2
3
4
5
6
7
8
9
10
11
12

这是一些练习手写JavaScript函数的例子，它们涵盖了不同的问题和技巧。当你逐步实现这些函数时，你会对JavaScript的函数和常用数据结构有更好的理解。