掌握前端面试必备知识，每日五题，助你轻松通关

2023-11-14 22:28:55

1. 箭头函数的 this 指向

箭头函数，又称匿名函数，是 ES6 中引入的简洁函数语法。与普通函数不同，箭头函数中的 this 指向定义它的对象。这意味着，箭头函数不能绑定自己的 this 值，而是继承其定义环境中的 this 值。

例如：

const obj = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  },
  greetArrow: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

obj.greet(); // Hello, my name is John Doe
obj.greetArrow(); // Uncaught ReferenceError: Cannot access 'name' before initialization

在 greet 方法中，this 指向 obj 对象，因此可以访问 name 属性。但在 greetArrow 箭头函数中，this 指向 undefined，因为箭头函数没有自己的 this。因此，访问 name 属性会导致 ReferenceError 错误。

2. 对比普通函数和箭头函数

普通函数和箭头函数在语法和行为上存在一些差异。普通函数使用 function 定义，而箭头函数使用箭头符号（=>）定义。普通函数中的 this 指向函数调用时的上下文对象，而箭头函数中的 this 指向定义箭头函数的对象。普通函数可以作为构造函数，而箭头函数不能。普通函数可以被命名，而箭头函数只能是匿名的。

下表总结了普通函数和箭头函数的主要区别：

特征	普通函数	箭头函数
语法	function funcName() { ... }	(params) => { ... }
this 指向	函数调用时的上下文对象	定义箭头函数的对象
构造函数	可以	不可以
命名	可以	不可以

3. 谈一谈对 rest 参数的理解

rest 参数是一种函数参数，它可以接收任意数量的参数，并将其收集到一个数组中。rest 参数必须是函数的最后一个参数。

例如：

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

console.log(sum(1, 2, 3, 4, 5)); // 15

在 sum 函数中，...numbers 是 rest 参数。它将所有传递给函数的参数收集到一个名为 numbers 的数组中。然后，该函数遍历 numbers 数组并计算总和。

rest 参数可以用于处理可变数量的参数。这使得函数更加灵活和通用。

4. 对比 map 和 object

map 和 object 都是 JavaScript 中常用的数据结构。map 是一种键值对集合，它允许你使用键来查找值。object 也是一种键值对集合，但它允许你使用点号（.）或方括号（[]）来访问值。

map 和 object 之间的主要区别在于，map 中的键必须是字符串，而 object 中的键可以是任何类型的值。此外，map 中的值可以是任何类型，而 object 中的值必须是对象。

下表总结了 map 和 object 的主要区别：

特征	map	object
键	必须是字符串	可以是任何类型
值	可以是任何类型	必须是对象
访问方式	使用方括号（[]）或点号（.）	只能使用点号（.）