JS大厂面试真题全面解析与实战指南

本文详细回顾了JS的基础知识，包括变量、数据类型、运算符、函数以及面向对象编程等核心概念，并深入探讨了ES6的新特性。此外，文章还提供了关于异步编程、闭包和Promise的实际应用示例，帮助读者理解这些复杂但实用的技术。最后，文章总结了大厂面试中常见的JS面试题和解题技巧，旨在帮助求职者准备并解答JS大厂面试真题。

变量与数据类型

在JavaScript中，变量用于存储数据，这些数据可以是不同的类型。JavaScript是一种动态类型语言，这意味着你无需在声明变量时指定类型。变量可以通过var、let或const关键字来声明。

1.1 变量声明

var a = 10; // 使用 var 声明
let b = "Hello"; // 使用 let 声明
const c = true; // 使用 const 声明

1.2 数据类型

JavaScript中有几种基本的数据类型：

• Number: 用于表示数值
• String: 用于表示文本
• Boolean: 用于表示真/假值
• Undefined: 未定义值
• Null: 没有值
• Symbol: ES6新增的数据类型，表示唯一的值。
• BigInt: ES11新增的数据类型，用于表示大整数。

var num = 10;       // Number 类型
var str = "Hello";  // String 类型
var bool = false;   // Boolean 类型
var un = undefined; // Undefined 类型
var nul = null;     // Null 类型
var sym = Symbol(); // Symbol 类型
var bigInt = 9007199254740991n; // BigInt 类型

运算符与表达式

运算符用于对变量和值进行计算。JavaScript支持多种运算符，包括算术运算符、比较运算符、逻辑运算符、赋值运算符等。

2.1 算术运算符

var a = 10;
var b = 5;

var add = a + b;   // 加法
var sub = a - b;   // 减法
var mul = a * b;   // 乘法
var div = a / b;   // 除法
var mod = a % b;   // 取模

2.2 比较运算符

var a = 10;
var b = 5;

var equal = a === b;     // 严格等于
var notEqual = a !== b;  // 严格不等于
var greater = a > b;     // 大于
var less = a < b;        // 小于
var greaterEqual = a >= b; // 大于等于
var lessEqual = a <= b;   // 小于等于

2.3 逻辑运算符

var a = true;
var b = false;

var and = a && b;  // 逻辑与
var or = a || b;   // 逻辑或
var not = !a;      // 逻辑非

函数与作用域

函数是JavaScript中可重用的代码块，用于执行特定任务。函数可以有参数，也可以返回值。JavaScript中的作用域决定了变量的可见范围。

3.1 函数声明与调用

function greet(name) {
    return "Hello, " + name;
}

var result = greet("World");
console.log(result); // 输出 "Hello, World"

3.2 作用域

JavaScript中有两种主要的作用域：全局作用域和函数作用域。

var globalVar = "I am global";

function testScope() {
    var localVar = "I am local";
    console.log(globalVar); // 输出 "I am global"
    console.log(localVar);  // 输出 "I am local"
}

testScope();
console.log(globalVar);     // 输出 "I am global"
console.log(localVar);      // 报错，localVar未在全局作用域中定义

对象与数组

对象和数组是JavaScript的核心数据结构。对象用于存储键值对，而数组用于存储有序的一组值。

4.1 对象

var person = {
    name: "John",
    age: 30,
    address: {
        street: "123 Main St",
        city: "New York"
    }
};

console.log(person.name); // 输出 "John"
console.log(person.address.city); // 输出 "New York"

4.2 数组

var numbers = [1, 2, 3, 4, 5];

console.log(numbers[0]); // 输出 1
console.log(numbers.length); // 输出 5
numbers.push(6); // 向数组末尾添加元素
console.log(numbers); // 输出 [1, 2, 3, 4, 5, 6]

JavaScript支持面向对象编程（OOP），允许你创建类和对象。

类与对象

在ES6中引入了类的概念，可以更直观地定义对象。

5.1 类的定义

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        return "Hello, my name is " + this.name;
    }
}

var john = new Person("John", 30);
console.log(john.greet()); // 输出 "Hello, my name is John"

class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
    }

    study() {
        return "I am studying hard";
    }
}

var jane = new Student("Jane", 20, "Sophomore");
console.log(jane.greet());   // 输出 "Hello, my name is Jane"
console.log(jane.study());  // 输出 "I am studying hard"

封装与模块化

封装指的是将代码内部的方法和变量隐藏起来，只提供必要的接口。模块化则是将代码分解成多个独立的模块，每个模块负责一部分功能。

7.1 封装

function Person(name, age) {
    this.name = name;
    this.age = age;

    this.greet = function() {
        return "Hello, my name is " + this.name;
    };
}

var john = new Person("John", 30);
console.log(john.greet()); // 输出 "Hello, my name is John"

// 模块化示例
// personModule.js
export function greet(name) {
    return "Hello, " + name;
}

// main.js
import { greet } from './personModule';

console.log(greet("World")); // 输出 "Hello, World"

ES6新特性

ES6（ECMAScript 2015）引入了许多新的语法和功能，比如类、箭头函数、模板字符串等。

8.1 箭头函数

var add = (a, b) => a + b;
console.log(add(10, 20)); // 输出 30

8.2 模板字符串

var name = "John";
console.log(`Hello, ${name}`); // 输出 "Hello, John"

8.3 解构赋值

var person = { name: "John", age: 30 };
var { name, age } = person;
console.log(name, age); // 输出 "John 30"

异步编程与Promise

异步编程是JavaScript中处理长时间运行任务的关键。Promise是一种处理异步操作的机制。

9.1 Promise

function timeout(ms) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Done after " + ms + "ms");
        }, ms);
    });
}

timeout(3000).then((result) => {
    console.log(result); // 输出 "Done after 3000ms"
});

闭包与作用域链

闭包允许函数访问其定义时所在的作用域，即使该函数被定义在另一个作用域中。

10.1 闭包

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

var counter = createCounter();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2

实际面试题模拟

11.1 面试题模拟

// 面试题：实现一个简单的Promise.all
function myPromiseAll(promises) {
    return new Promise((resolve, reject) => {
        let results = [];
        let count = 0;
        promises.forEach((promise, index) => {
            promise.then((result) => {
                results[index] = result;
                count++;
                if (count === promises.length) {
                    resolve(results);
                }
            }).catch((error) => {
                reject(error);
            });
        });
    });
}

const p1 = new Promise((resolve) => setTimeout(() => resolve("one"), 1000));
const p2 = new Promise((resolve) => setTimeout(() => resolve("two"), 2000));
const p3 = new Promise((resolve) => setTimeout(() => resolve("three"), 3000));

myPromiseAll([p1, p2, p3]).then((results) => {
    console.log(results); // 输出 ["one", "two", "three"]
});

解题思路与技巧

1. 理解题目要求和背景。
2. 分析问题，确定使用的技术和方法。
3. 编写代码，测试和调试。
4. 优化代码，提高效率和可读性。

常见错误与避免方法

1. 忽视边界条件和异常情况。

   function divide(a, b) {
      if (b === 0) {
          throw new Error("Division by zero");
      }
      return a / b;
   }
   console.log(divide(10, 0)); // 抛出异常 "Division by zero"

2. 编写复杂冗余的代码。

   function sumArray(arr) {
      return arr.reduce((acc, val) => acc + val, 0);
   }
   console.log(sumArray([1, 2, 3, 4])); // 输出 10

3. 对JavaScript的特性和语法理解不深。

面试准备与策略

如何准备面试

1. 复习基础知识，包括数据类型、运算符、函数、对象等。
2. 学习面向对象编程，理解类、继承、多态等概念。
3. 熟悉ES6新特性，掌握异步编程和Promise。
4. 练习解决实际问题，如编写算法和数据结构。

   function findMax(arr) {
      let max = arr[0];
      for (let i = 1; i < arr.length; i++) {
          if (arr[i] > max) {
              max = arr[i];
          }
      }
      return max;
   }
   console.log(findMax([1, 5, 3, 9])); // 输出 9

面试官常见的问题

1. 请简述一下JavaScript中变量的作用域。
2. 你能否解释一下闭包和作用域链的概念？
3. 解释一下Promise的工作原理。
4. 你如何解决代码重复的问题？
5. 请描述一下你在项目中使用面向对象编程的经验。

面试中的注意事项

1. 准时参加面试，提前做好准备。
2. 保持自信，清晰表达自己的观点。
3. 准备好技术问题和非技术问题的回答。
4. 注意礼貌和专业，避免使用过多的专业术语。

推荐书籍与在线课程

以下是推荐的学习资源：

• 慕课网：提供各种JavaScript课程，包括基础和进阶课程。
• MDN Web Docs：官方文档，包含详细的JavaScript教程和API。
• JavaScript高级程序设计：慕课网上的在线课程，深入讲解JavaScript高级特性。

开源项目与实战演练

参与开源项目是提升技能的好方法。一些流行的JavaScript项目包括：

• Vue.js：一个渐进式JavaScript框架，用于构建用户界面。
• React：来自Facebook的JavaScript库，用于构建用户界面。
• Node.js：用于服务器端开发的JavaScript运行时环境。

持续学习的方法与建议

1. 每天花时间阅读和学习新技术。
2. 参与开源项目，提高实际编程能力。
3. 加入技术社区，如Stack Overflow和Twitter，与其他开发者交流。
4. 参加技术研讨会和会议，了解最新的技术趋势和发展。