前端面试 ES5 和 ES6 函数不为人知的重要区别

ES5 函数

1. 函数声明

   ES5 中的函数声明使用 function ，后跟函数名称和参数列表，最后是函数体。例如：

   function greet(name) {
     console.log("Hello, " + name + "!");
   }
   

2. 函数表达式

   ES5 中的函数表达式使用 function 关键字，后跟一个匿名函数，最后是函数体。例如：

   var greet = function(name) {
     console.log("Hello, " + name + "!");
   };
   

3. 参数

   ES5 中的函数可以接受任意数量的参数，并且可以有默认值。例如：

   function greet(name, message) {
     message = message || "Hello";
     console.log(message + ", " + name + "!");
   }
   

4. 返回值

   ES5 中的函数可以使用 return 语句返回一个值。例如：

   function sum(a, b) {
     return a + b;
   }
   

ES6 函数

1. 箭头函数

   ES6 中引入了箭头函数，它是一种更简洁的函数语法。箭头函数使用 => 符号，后跟函数体。例如：

   const greet = (name) => {
     console.log("Hello, " + name + "!");
   };
   

2. 默认参数值

   ES6 中的函数可以有默认参数值，这使得函数更加灵活。例如：

   function greet(name = "World") {
     console.log("Hello, " + name + "!");
   }
   

3. 展开运算符

   ES6 中的展开运算符（...）可以将数组或对象展开为函数的参数。例如：

   function sum(...numbers) {
     let total = 0;
     for (const number of numbers) {
       total += number;
     }
     return total;
   }
   

4. 尾递归优化

   ES6 中的函数支持尾递归优化，这可以提高函数的性能。例如：

   function factorial(n) {
     if (n === 0) {
       return 1;
     }
     return n * factorial(n - 1);
   }
   

面试官常问的考察题

1. ES5 和 ES6 函数之间的主要区别是什么？
2. 箭头函数的优点和缺点是什么？
3. 什么是默认参数值，以及如何在 ES6 函数中使用它们？
4. 什么是展开运算符，以及如何在 ES6 函数中使用它们？
5. 什么是尾递归优化，以及如何在 ES6 函数中使用它？

经验分享

我在一次面试中被问到 ES5 和 ES6 函数的区别，我回答得非常详细，面试官对我的回答非常满意。后来，我在那家公司成功拿到了 Offer。

趣闻

有一次，我在面试中被问到一个非常刁钻的问题：

"如果我有一个函数，它接受一个数组作为参数，并返回数组中最大值，你如何使用 ES6 的展开运算符来重写这个函数？"

我一开始有点懵，但很快我就反应过来了。我使用展开运算符将数组展开为函数的参数，然后使用 Math.max() 函数返回数组中的最大值。面试官对我的回答非常满意，并给了我一个大大的赞。

结语

我希望这篇文章能够帮助您更好地理解 ES5 和 ES6 函数之间的区别，并祝您在面试中取得成功。