JavaScript 面试题（101-200题）帮助你成为 JavaScript 高手！ 🎓

如何征服 JavaScript 面试：第二部分（101-200 题）

子标题 1：JavaScript 进阶概念

作为一名经验丰富的 JavaScript 开发者，掌握语言的进阶概念至关重要。本节将深入探讨闭包、代理、原型继承、事件循环和异步编程等主题。

子标题 2：复杂的编码挑战

除了理论知识，实际编码能力也是面试官评估的关键。本节将提供一系列复杂的编码挑战，涉及树、图、排序算法和数据流处理。

101. JavaScript 中的 bind() 方法

bind() 方法为函数创建一个新的实例，该实例绑定到特定的 this 值。这在创建对象方法或向函数传递特定 this 值时非常有用。

代码示例：

const obj = {
  name: "John",
  greet: function () {
    console.log(`Hello, ${this.name}!`);
  },
};

const boundGreet = obj.greet.bind(obj);
boundGreet(); // 输出：Hello, John!

102. JavaScript 中的闭包

闭包是在函数执行后仍能访问其作用域中的变量的函数。闭包用于创建私有变量，保存状态或创建模块化代码。

代码示例：

function createCounter() {
  let count = 0;
  return function () {
    count++;
    return count;
  };
}

const counter1 = createCounter();
const counter2 = createCounter();

console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter2()); // 1

103. JavaScript 中的代理（Proxy）对象

代理对象提供对目标对象的拦截和自定义行为。这用于实现数据验证、访问控制和对象增强。

代码示例：

const target = {
  name: "John",
  age: 30,
};

const proxy = new Proxy(target, {
  get: function (obj, prop) {
    console.log(`Accessing property: ${prop}`);
    return obj[prop];
  },
});

console.log(proxy.name); // 输出：Accessing property: name

104. JavaScript 中的异步编程模型

JavaScript 使用基于事件循环的异步编程模型。当代码执行时，主线程监听事件，如鼠标点击或网络请求。事件触发回调函数，该函数在主线程处理其他事件后执行。

代码示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello");
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出：Hello
});

105. JavaScript 中的模块化开发

模块化开发将代码组织成可重用的模块，使大型项目更容易管理。CommonJS、AMD 和 ESM 是 JavaScript 中流行的模块化方案。

代码示例（CommonJS）：

// module1.js
exports.add = function (a, b) {
  return a + b;
};

// module2.js
const add = require("./module1").add;
console.log(add(1, 2)); // 输出：3

106. JavaScript 中的原型继承和原型链

JavaScript 使用原型继承，其中对象从其原型对象继承属性和方法。原型链是向上查找继承链条以查找属性的过程。

代码示例：

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function () {
  console.log(`Hello, ${this.name}!`);
};

const john = new Person("John");
john.greet(); // 输出：Hello, John!

107. JavaScript 中的事件循环

事件循环是一个无限循环，监听事件并执行回调函数。它由以下阶段组成：

• 任务队列： 存储要执行的函数。
• 微任务队列： 存储优先级更高的任务，如 Promise 回调。
• 渲染阶段： 更新 DOM。
• 事件触发阶段： 触发事件监听器。

108. JavaScript 中的深拷贝和浅拷贝

• 深拷贝： 创建一个新对象，递归复制源对象的所有属性和值。
• 浅拷贝： 创建一个新对象，仅复制源对象的顶级属性和值。

代码示例：

// 浅拷贝
const obj1 = { name: "John", age: 30 };
const obj2 = Object.assign({}, obj1);
obj2.name = "Jane";

console.log(obj1.name); // 输出：John
console.log(obj2.name); // 输出：Jane

// 深拷贝
const obj1 = { name: "John", age: 30 };
const obj2 = JSON.parse(JSON.stringify(obj1));
obj2.name = "Jane";

console.log(obj1.name); // 输出：John
console.log(obj2.name); // 输出：Jane

109. JavaScript 中的箭头函数

箭头函数是一种简写形式的函数，无需使用 function 。它将 this 绑定到周围作用域，并且语法更简洁。

代码示例：

const greet = () => console.log("Hello!");
greet(); // 输出：Hello!

110. JavaScript 中的 rest 参数和 spread 操作符

• rest 参数（...）： 将剩余参数收集到一个数组中。
• spread 操作符（...）： 展开数组或对象，将其元素插入到另一个结构中。

代码示例：

// rest 参数
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 输出：6

// spread 操作符
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // 输出：[1, 2, 3, 4, 5, 6]

111. JavaScript 中的 Symbol 数据类型

Symbol 是一个唯一、不可变的原始值，用于创建私有属性或标识唯一对象。

代码示例：

const mySymbol = Symbol("mySymbol");
const obj = {
  [mySymbol]: "Private data",
};

console.log(obj[mySymbol]); // 输出：Private data

112. JavaScript 中的防抖和节流函数

• 防抖： 在指定的延迟时间内，只会执行最后一次函数调用。
• 节流： 在指定的间隔时间内，只会执行一次函数调用。

代码示例：

// 防抖
const debounced = debounce(fn, 500);

// 节流
const throttled = throttle(fn, 1000);

113. JavaScript 中的 Promise 对象

Promise 对象表示异步操作的最终完成或失败状态。它提供了处理异步代码的统一方式。

代码示例：

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello");
  }, 1000);
});

promise.then((result) => {
  console.log(result); // 输出：Hello
});

114. JavaScript 中的 Generator 函数

Generator 函数是一种特殊的函数类型，允许暂停执行并返回多个值。这对于创建可迭代对象和管理异步控制流非常有用。

代码示例：

function* myGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

for (const value of myGenerator()) {
  console.log(value); // 输出：1、2、3
}

115. JavaScript 中的 Map 和 Set 数据结构

• Map： 键值对集合，键可以是任何数据类型，值可以是任何对象。
• Set： 唯一值的集合，允许快速插入和查找操作。

代码示例：

const myMap = new Map();
myMap.set("John", { name: "John", age: 30 });

const mySet = new Set();
mySet.add("John");
mySet.add("Jane");

116. JavaScript 中的 fetch() API

fetch() API 提供了一种简洁的方式来向服务器发出网络请求。它返回一个 Promise 对象，该对象在请求完成时解决或拒绝。

代码示例：

fetch("https://example.com