前端面试必备 | JavaScript函数篇（P1-12）

文章目录

1. 什么是 JavaScript 函数？请用代码示例说明如何定义一个基本的 JavaScript 函数。
2. 请解释 JavaScript 函数的参数传递方式是按值还是按引用，并给出相应的例子进行说明。
3. 请谈谈 JavaScript 中的函数声明和函数表达式的区别，并说明它们的使用场景。
4. 什么是函数作用域和块级作用域？请列举具体的示例，说明它们之间的区别。
5. JavaScript 中的箭头函数与普通函数有什么不同？在什么情况下应该使用箭头函数？
6. 请说明 JavaScript 中的递归函数是如何工作的，并给出一个使用递归函数的示例。
7. 解释一下 JavaScript 中的高阶函数是什么，并给出一个高阶函数的实际应用场景。
8. 什么是闭包？请用代码示例说明闭包的概念及其实际用途。
9. 如何在 JavaScript 中使用默认参数值？请给出一个使用默认参数值的示例。
10. 解释一下 JavaScript 中的回调函数是什么，并给出一个使用回调函数的场景示例。
11. 请说明 JavaScript 中的 try-catch-finally 语句是用来做什么的，并给出一个使用该语句的示例。
12. 请介绍 JavaScript 中的函数绑定、函数柯里化和函数节流的概念，并分别给出一个相关的实际应用场景。

1. 什么是 JavaScript 函数？请用代码示例说明如何定义一个基本的 JavaScript 函数。

JavaScript 函数是一段可重复使用的代码块，用于执行特定的任务或计算并返回值。

函数可以接收参数，并在执行过程中执行指定的操作。

下面是一个基本的 JavaScript 函数的定义示例：

// 定义一个简单的函数，用于计算两个数字的和
function add(a, b) {
  return a + b;
}

// 调用函数并输出结果
console.log(add(3, 5)); // 输出 8

在上面的示例中，我们定义了一个名为 add 的函数，它接收两个参数 a 和 b。函数体内部执行了加法操作 a + b，并通过 return 关键字返回计算结果。在调用函数时，我们提供了实际的参数值 3 和 5，并将计算结果打印到控制台上。

2. 请解释 JavaScript 函数的参数传递方式是按值还是按引用，并给出相应的例子进行说明。

在 JavaScript 中，函数的参数传递方式是按值（pass by value）。 这意味着在函数调用时，实际参数的值被复制给对应的形式参数，函数内部对形式参数的修改不会影响实际参数的值。

以下是一个示例来说明 JavaScript 函数参数的按值传递：

// 定义一个函数，将参数的值增加 1
function increment(num) {
  num = num + 1;
  console.log("函数内部的值:", num);
}

// 调用函数，并传递实际参数
let value = 5;
console.log("函数调用前的值:", value);

increment(value);

console.log("函数调用后的值:", value);

输出结果如下：

函数调用前的值: 5
函数内部的值: 6
函数调用后的值: 5

在这个例子中，我们定义了一个名为 increment 的函数，它接受一个参数 num。在函数内部，我们对 num 的值进行增加操作，并输出结果。然后我们调用了 increment 函数，并传递了变量 value 作为实际参数。

在函数调用前，变量 value 的值为 5。在函数内部，参数 num 被复制为 5，然后我们对 num 进行加1操作，得到结果 6。然而，这个操作只影响了函数内部的 num 值，并不会改变实际参数 value 的值。因此，在函数调用后，value 的值仍然是 5。

这表明 JavaScript 函数的参数传递方式是按值进行的，对形式参数的修改不会影响实际参数的值。

3. 请谈谈 JavaScript 中的函数声明和函数表达式的区别，并说明它们的使用场景。

JavaScript 中有两种常见的函数定义方式：函数声明和函数表达式。

1. 函数声明（Function Declaration）：

函数声明使用 function 关键字，在全局作用域或函数体内部进行定义。它的语法如下：

function functionName(parameters) {
  // 函数体
}

函数声明具有以下特点：

• 函数声明会被提升（hoisted），即在执行代码之前就可以使用。
• 函数声明创建的函数可以在声明之前进行调用。
• 具有函数名称，可以在内部和外部引用。

示例：

// 函数声明
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Alice"); // 输出：Hello, Alice!

2. 函数表达式（Function Expression）：

函数表达式将函数赋值给变量，可以在表达式中进行定义。它的语法如下：

var functionName = function(parameters) {
  // 函数体
};

函数表达式的特点如下：

• 不会被提升，只有在代码运行到表达式时才能使用。
• 函数表达式创建的函数只能在赋值表达式之后进行调用。
• 可以根据需要使用匿名函数或具名函数。

示例：

// 匿名函数表达式
var greet = function(name) {
  console.log(`Hello, ${name}!`);
};

greet("Bob"); // 输出：Hello, Bob!

函数声明适用于需要在脚本的任何位置都能访问函数的情况，而函数表达式适用于需要在特定的表达式中定义函数或需要控制函数的作用域的情况。函数表达式经常用于回调函数、立即执行函数表达式（IIFE）和创建闭包。

例如，若要将一个函数作为参数传递给其他函数，则通常使用函数表达式定义回调函数。如果在一个作用域内部需要创建一个函数并将其保护起来，可以使用函数表达式来创建闭包。函数表达式还可以用于创建私有函数和模块模式等高级用法。

总结而言，函数声明和函数表达式是根据不同的使用场景选择合适的方式。函数声明具有提升和可以在声明之前调用的特点，而函数表达式更灵活，适用于需要更精细控制函数作用域和用途的情况。

4. 什么是函数作用域和块级作用域？请列举具体的示例，说明它们之间的区别。

在 JavaScript 中，函数作用域和块级作用域是两种不同的作用域概念。

1. 函数作用域：

函数作用域指的是在函数内部声明的变量只在函数内部可见，并且在函数外部是不可访问的。这意味着函数作用域中的变量对于函数内部是局部变量，其他函数或全局作用域无法访问。

以下是一个函数作用域的示例：

function sayHello() {
  var message = "Hello!";
  console.log(message);
}

sayHello(); // 输出：Hello!
console.log(message); // 报错：message is not defined

在这个例子中，message 变量在 sayHello 函数内部声明，并且只能在函数内部访问。当函数被调用时，打印了 message 的值。但在函数外部的 console.log(message) 中，message 变量是不可见的，会导致报错。

2. 块级作用域：

块级作用域指的是在代码块（一对花括号 {}）内声明的变量只在该块内部可见，并且在块外部是不可访问的。

在 JavaScript 早期版本中，只有函数作用域，没有块级作用域。 但是，从 ES6（ECMAScript 2015）开始，引入了 let 和 const 关键字，使得块级作用域成为可能。

以下是一个块级作用域的示例：

function sayGreeting() {
  if (true) {
    let greeting = "Hello!";
    console.log(greeting);
  }
  console.log(greeting); // 报错：greeting is not defined
}

sayGreeting(); // 输出：Hello!

在这个例子中，greeting 变量在 if 代码块内部使用 let 关键字声明。因为 let 声明的变量具有块级作用域，所以 greeting 变量只在 if 代码块内部可见。在块外部无法访问 greeting 变量，会导致报错。

区别总结：

• 函数作用域是在函数内部声明的变量只在函数内部可见，而块级作用域是在代码块内部声明的变量只在该块内部可见。
• 函数作用域是使用 function 关键字创建函数时自动生成的，块级作用域是通过 {} 创建的代码块实现的。
• 块级作用域引入了 let 和 const 关键字，而函数作用域不存在这些特殊关键字。

需要注意的是，在 JavaScript 中，var 关键字声明的变量具有函数作用域，而不是块级作用域。因此，使用 var 声明的变量在包含它的函数内部都是可见的。

5. JavaScript 中的箭头函数与普通函数有什么不同？在什么情况下应该使用箭头函数？

箭头函数是在 ECMAScript 2015（ES6）中引入的一种新的函数语法。与普通函数相比，箭头函数具有以下几个不同之处：

1. 语法简洁：箭头函数的语法非常简洁，可以通过一个箭头 => 表示函数定义。

   • 当只有一个参数时，可以省略参数的括号：(param) => 可简写为 param =>。
   • 当函数体只有一条表达式时，可以省略函数体的大括号和 return 关键字。

2. 没有自己的 this 绑定：箭头函数没有自己的 this 绑定，它会捕获并继承外部函数的 this 值，无法通过 call(), apply() 或 bind() 改变其上下文。

   • 在箭头函数中使用 this 是指向上一层作用域的 this 值。

以下是箭头函数与普通函数的对比示例：

// 普通函数
function sum(a, b) {
  return a + b;
}

// 箭头函数
const sum = (a, b) => a + b;

// 普通函数
const person = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

// 箭头函数
const person = {
  name: "Alice",
  sayHello: () => {
    console.log("Hello, " + this.name); // 此处的 this 指向全局对象，而不是 person 对象
  }
};

在选择使用箭头函数时，有以下几种情况：

• 简单的函数表达式：当你只需要一个简单的函数表达式时，箭头函数可以提供更简洁的语法，减少了冗余的代码。

• 避免 this 问题：由于箭头函数没有自己的 this 绑定，它可以避免在嵌套函数或回调函数中出现 this 指向混乱的问题，特别适用于在函数内部使用 this 的情况。

• 不需要 arguments 对象：箭头函数没有 arguments 对象，因此不能通过 arguments 获取传递给函数的参数。如果你不需要使用 arguments 对象，可以使用箭头函数。

但是，需要注意的是，并非所有情况下都适合使用箭头函数。以下是一些不适合使用箭头函数的场景：

• 需要动态的 this 值：如果你需要在函数内部动态地根据调用上下文确定 this 的值，那么使用普通函数的 this 绑定会更合适。

• 需要在原型对象上定义方法：由于箭头函数没有自己的 this 绑定，它在原型对象上定义的方法无法正确地访问实例对象的属性或方法。

总结而言，箭头函数在许多场景下提供了更简洁和方便的语法，特别是在简单函数表达式、避免 this 问题和不需要 arguments 对象的情况下。然而，当你需要动态的 this 值或在原型对象上定义方法时，应该选择使用普通函数。

6. 请说明 JavaScript 中的递归函数是如何工作的，并给出一个使用递归函数的示例。

递归函数是一种函数调用自身的技术。

当函数在执行过程中调用自身，这个过程被称为递归。递归函数通常包含两个部分：

• 基本情况（ba