JS面试题目大全｜全面覆盖前端高频考点，助你高效备战大厂面试

⚡ Map vs Object对比

⚡ 典型闭包案例：计数器

function createCounter() {
  let count = 0; // 被闭包引用的变量
  return function() {
    count++;
    return count;
  };
}
const counter1 = createCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
const counter2 = createCounter();
console.log(counter2()); // 1 —— 独立的词法环境

⚡ 作用域链深度示例

function a() {
  let x = 1;
  function b() {
    let y = 2;
    function c() {
      let z = 3;
      console.log(x, y, z); // 1 2 3 —— 作用域链：c → b → a → 全局
    }
    c();
  }
  b();
}
a();

⚡ 核心关系图

obj.__proto__ === Object.prototype
Object.prototype.__proto__ === null
Function.prototype.__proto__ === Object.prototype
Array.prototype.__proto__ === Object.prototype

⚡ 执行栈 + 任务队列

• Call Stack：执行同步代码
• Task Queue（Macro-task）：setTimeout、setInterval、I/O、UI渲染
• Microtask Queue：Promise.then、MutationObserver、queueMicrotask

执行顺序：同步代码 → 所有微任务 → 渲染 → 下一个宏任务

⚡ 典型输出题

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
queueMicrotask(() => console.log('4'));
new Promise(resolve => {
  console.log('5');
  resolve();
}).then(() => console.log('6'));
console.log('7');
// 输出顺序：1 → 5 → 7 → 3 → 4 → 6 → 2

⚡ async函数编译过程

// 原始代码
async function fetchData() {
  const res1 = await fetch('/api1');
  const res2 = await fetch('/api2');
  return [res1, res2];
}
// 等价实现（简化版）
function fetchData() {
  return __awaiter(this, void 0, void 0, function* () {
    const res1 = yield fetch('/api1');
    const res2 = yield fetch('/api2');
    return [res1, res2];
  });
}

⚡ 并发限制器实现

function limitConcurrent(tasks, limit) {
  const results = [];
  let index = 0;
  function run() {
    if (index >= tasks.length) return;
    const i = index++;
    tasks[i]().then(result => {
      results[i] = result;
      if (index < tasks.length) run();
    });
  }
  for (let i = 0; i < Math.min(limit, tasks.length); i++) {
    run();
  }
  return new Promise(resolve => {
    const checkComplete = () => {
      if (results.length === tasks.length) {
        resolve(results);
      } else {
        setTimeout(checkComplete, 10);
      }
    };
    checkComplete();
  });
}
// 使用示例
const tasks = [
  () => new Promise(r => setTimeout(() => r('A'), 100)),
  () => new Promise(r => setTimeout(() => r('B'), 50)),
  () => new Promise(r => setTimeout(() => r('C'), 150))
];
limitConcurrent(tasks, 2).then(console.log); // ['A', 'B', 'C']（按原顺序）

⚡ 事件监听参数

element.addEventListener('click', handler, {
  capture: true,      // 是否在捕获阶段触发（默认false）
  once: true,         // 仅触发一次（自动移除）
  passive: true       // 不调用preventDefault()，提升滚动性能
});

⚡ 典型实现

// HTML: 
Item 1
Item 2
document.getElementById('list').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    console.log('Clicked:', e.target.textContent);
  }
});

优势：

• 减少事件监听器数量（性能优化）
• 新添加的子元素自动拥有事件处理能力

⚡ 批量DOM操作示例

// 低效：每次append触发一次重排
const ul = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  ul.appendChild(li); // 1000次重排！
}
// 高效：使用DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li);
}
ul.appendChild(fragment); // 1次重排！

⚡ 弱引用示例

const domMap = new WeakMap();
function storeElementData(element, data) {
  domMap.set(element, data);
}
function retrieveElementData(element) {
  return domMap.get(element);
}
// 当element被移除DOM时，WeakMap自动释放引用
const el = document.getElementById('btn');
storeElementData(el, { count: 0 });
el.addEventListener('click', () => {
  const data = retrieveElementData(el);
  data.count++;
});

⚡ 搜索框输入防抖

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
// 使用
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(e) {
  console.log('Searching:', e.target.value);
}, 300));

⚡ 滚动事件节流

function throttle(fn, limit) {
  let inThrottle = false;
  return function(...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}
// 使用
window.addEventListener('scroll', throttle(function() {
  console.log('Scroll position:', window.scrollY);
}, 100));

⚡ 支持循环引用的深拷贝

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj);
  const clone = Array.isArray(obj) ? [] : {};
  hash.set(obj, clone);
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], hash);
    }
  }
  return clone;
}
// 测试循环引用
const obj = { a: 1 };
obj.self = obj;
const cloned = deepClone(obj);
console.log(cloned.self === cloned); // true

⚡ 限制最大并发数

function limitPromise(promises, limit) {
  const results = [];
  let index = 0;
  function run() {
    if (index >= promises.length) return;
    const i = index++;
    promises[i]().then(result => {
      results[i] = result;
      run();
    });
  }
  for (let i = 0; i < Math.min(limit, promises.length); i++) {
    run();
  }
  return new Promise(resolve => {
    const check = () => {
      if (results.length === promises.length) resolve(results);
      else setTimeout(check, 10);
    };
    check();
  });
}