引言

JavaScript（简称JS）作为当今最流行的前端开发语言之一，其面试难度也在逐年增加。面对高薪职位的挑战，掌握JS的深度和广度显得尤为重要。本文将为你揭秘50个JS面试难题，并提供实战案例，助你轻松应对面试。

第一章：基础概念与语法

1.1 变量提升与作用域

主题句：变量提升和作用域是JS面试中常见的基础问题。

案例：

console.log(a); // undefined
var a = 1;
console.log(b); // 报错
let b = 2;

解析：变量提升只针对var，let和const不会提升。

1.2 闭包与作用域链

主题句：闭包和作用域链是理解JS执行机制的关键。

案例：

function outer() {
  let a = 1;
  function inner() {
    console.log(a); // 1
  }
  return inner;
}

const func = outer();
func();

解析：闭包允许函数访问其词法作用域中的变量。

第二章：函数与对象

2.1 函数柯里化

主题句：函数柯里化是一种常见的面试题，用于简化函数调用。

案例：

function curryAdd(a) {
  return function(b) {
    return function(c) {
      return a + b + c;
    };
  };
}

const addThree = curryAdd(1);
console.log(addThree(2)(3)); // 6

解析：柯里化将多参数函数转换成接受一个参数的函数。

2.2 对象创建与继承

主题句：对象创建与继承是JS面向对象编程的基础。

案例：

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

Person.prototype.sayName = function() {
  console.log(this.name);
};

const person = new Person('Alice');
person.sayName(); // Alice

解析：使用构造函数和原型链实现对象继承。

第三章：异步编程

3.1 回调函数

主题句：回调函数是异步编程的早期形式。

案例：

function fetchData(callback) {
  setTimeout(() => {
    callback('Data');
  }, 1000);
}

fetchData(data => {
  console.log(data); // Data
});

解析：回调函数允许异步操作完成后执行回调函数。

3.2 Promise

主题句：Promise是处理异步操作的一种更现代的方法。

案例：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data');
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data); // Data
  })
  .catch(error => {
    console.error(error);
  });

解析：Promise提供更简洁的异步编程方式。

第四章：ES6新特性

4.1 解构赋值

主题句：解构赋值是一种简化变量赋值的方法。

案例：

const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // 1 2 3

解析：解构赋值允许从数组或对象中提取多个值。

4.2 模板字符串

主题句：模板字符串提供了一种更简洁的字符串拼接方式。

案例：

const name = 'Alice';
const age = 25;
console.log(`My name is ${name}, and I am ${age} years old.`); // My name is Alice, and I am 25 years old.

解析：模板字符串允许在字符串中嵌入变量和表达式。

第五章：性能优化

5.1 事件委托

主题句：事件委托是一种提高页面性能的技术。

案例：

document.getElementById('container').addEventListener('click', function(event) {
  if (event.target.tagName === 'BUTTON') {
    console.log('Button clicked');
  }
});

解析：事件委托利用冒泡机制，减少事件监听器的数量。

5.2 懒加载

主题句：懒加载是一种优化页面加载速度的技术。

案例：

function lazyLoad(image) {
  image.src = image.dataset.src;
}

const images = document.querySelectorAll('img[data-src]');
window.addEventListener('scroll', () => {
  images.forEach(image => {
    if (image.getBoundingClientRect().top < window.innerHeight) {
      lazyLoad(image);
    }
  });
});

解析：懒加载仅在图像进入视口时加载图像。

结语

通过以上50个实战案例，相信你已经对JS面试难题有了更深入的了解。在实际面试中，除了掌握这些知识点，还需要注重代码风格、逻辑思维和沟通能力。祝你面试顺利，获得心仪的职位！