JavaScript 面试真题集锦：助你轻松过关

本文全面梳理了JavaScript面试中的关键知识点，从基础知识到高级特性，再到面向对象编程、DOM操作、异步编程和浏览器内置对象，最后通过精选面试题实战演练，旨在帮助读者深入理解并应对JavaScript面试中的各种问题。掌握从变量与数据类型、函数与作用域、控制流程到高级特性的运用，以及如何在实际开发中高效处理DOM操作与事件处理，同时熟悉异步编程和浏览器内置对象的使用，全面提升你的JavaScript面试准备。

一、基础知识梳理

变量与数据类型

在JavaScript中，数据类型分为基本类型和引用类型。基本类型包括：number、string、boolean、null、undefined、symbol、bigint；引用类型包括：object和function。

示例代码：

let num = 123;
let str = "Hello";
let bool = true;
let nullVal = null;
let undefinedVal = undefined;
let symbolVal = Symbol("unique");
let bigIntVal = 12345n;

let obj = {
    name: "John",
    age: 30
};

let func = function() {
    console.log("Hello, world!");
};

函数与作用域

JavaScript中的函数可以包含参数和返回值，作用域决定了变量的可见性范围。全局作用域下的变量在任何地方都可访问，而函数作用域内的变量仅在函数内部可见。

示例代码：

function add(a, b) {
    return a + b;
}

let result = add(5, 3); // 结果为8

控制流程

JavaScript提供了多种控制流程结构，包括条件语句（if、else、switch）、循环（for、while、do-while）和异常处理（try、catch、finally）。

示例代码：

let num = 10;

if (num > 5) {
    console.log("大于5");
} else {
    console.log("小于等于5");
}

for (let i = 0; i < 5; i++) {
    console.log("循环第 " + (i + 1) + " 次");
}

try {
    console.log("尝试执行");
    division = 10 / 0;
} catch (error) {
    console.log("发生错误，错误信息：" + error.message);
} finally {
    console.log("执行完毕");
}

高级特性

闭包、原型链与继承机制是JavaScript高级特性的重要组成部分。

示例代码：

// 闭包示例
function outer() {
    let count = 0;

    function inner() {
        console.log(count);
        count++;
    }

    return inner;
}

let increment = outer();
increment(); // 输出0
increment(); // 输出1
increment(); // 输出2

// 原型链示例
function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log("动物说话");
};

function Dog(name) {
    Animal.call(this, name);
}

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

let myDog = new Dog("旺财");
myDog.speak(); // 输出"动物说话"

二、面向对象编程

JavaScript通过原型链实现了面向对象编程。类和实例的概念在现代JavaScript中通过ES6引入的类语法得到了增强。

示例代码：

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name}说话`);
    }
}

class Dog extends Animal {
    constructor(name) {
        super(name);
    }

    speak() {
        console.log(`${this.name}汪汪叫`);
    }
}

let myDog = new Dog("旺财");
myDog.speak(); // 输出"旺财汪汪叫"

三、DOM操作与事件处理

DOM操作允许开发者动态地读取和修改网页的内容、结构、样式。事件处理则是与用户交互的重要方式。

示例代码：

document.getElementById("myButton").addEventListener("click", function() {
    console.log("按钮被点击");
});

四、异步编程与Promise

处理异步操作是现代JavaScript中的关键技能。Promise提供了一种更可控的方式来处理异步流程。

示例代码：

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("数据获取成功");
        }, 1000);
    });
}

fetchData()
    .then(data => console.log(data))
    .catch(err => console.error("数据获取失败"));

五、浏览器内置对象与API

浏览器内置对象如Window、Document提供了丰富的API，用于与用户交互、网络请求等。

示例代码：

window.addEventListener("load", function() {
    console.log("页面加载完成");
});

document.getElementById("myElement").addEventListener("click", function() {
    console.log("元素被点击");
});

六、面试题实战演练

精选历年面试题进行深入分析与解答，帮助你找到解题策略与常见错误避免提示。

示例代码：

// 常见面试题：数组去重
function uniqueElements(array) {
    return [...new Set(array)];
}

console.log(uniqueElements([1, 2, 2, 3, 4, 4, 5])); // 输出[1, 2, 3, 4, 5]

通过以上的知识点梳理与实战演练，你将能够更加熟练地应对JavaScript面试中的各种问题。