JS 面试题：初级开发者必备的笔试与面试攻略

概述
JavaScript 面试题涵盖基础知识、函数式编程、面向对象编程、异步编程及ES6新特性，深入探讨变量、数据类型、运算符、控制结构、函数、对象、原型链、类、Promise等核心概念。面试题涉及调试、原型链理解、算法设计与数据结构实践，旨在全面评估开发者对JavaScript核心原理的掌握和实际应用能力。

变量与数据类型

在 JavaScript 中，变量是存储数据的容器，可以存储不同类型的值，如数字、字符串、布尔值等。数据类型有两种主要分类：原始类型（如数字、字符串、布尔值）和引用类型（如对象）。

示例代码：

// 声明和赋值
let num = 42; // 原始类型
let text = "Hello, world!"; // 原始类型

// 原始类型赋值
let bool = true; // 原始类型

// 引用类型
let obj = {
    name: "John Doe",
    age: 30
};

运算符与控制结构

示例代码：

let a = 5;
let b = 10;

// 算术运算
let sum = a + b;
let product = a * b;

// 比较运算
let isEqual = a === b; // false

// 逻辑运算
let isTrue = a > 0 && b > 0;

控制结构示例：

let x = 10;
if (x > 5) {
    console.log("x is greater than 5");
} else {
    console.log("x is not greater than 5");
}

函数是组织代码的一种方式，可以封装功能并重复使用。作用域定义了变量可见性。

示例代码：

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

let greeting = greet("Alice");
console.log(greeting); // 输出 "Hello, Alice"

// 局部作用域示例
function calculateAge(birthYear) {
    let age = 2023 - birthYear;
    return age;
}

console.log(calculateAge(1990)); // 输出 33

JavaScript 是一种基于对象的语言，每个值都有一个原型链。原型链用于查找和继承属性和方法。

示例代码：

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

function Person(name) {
    this.name = name;
    this.getGreeting = function() {
        return "Hello, I'm " + this.name;
    };
}

Person.prototype.age = 25;

let john = new Person("John");
console.log(john.getGreeting()); // 输出 "Hello, I'm John"

闭包与高阶函数

闭包允许函数访问和操作外部作用域的变量。高阶函数是接受函数作为参数或返回函数的函数。

示例代码：

function outerFunction(x) {
    return function(y) {
        return x + y;
    };
}

const addFive = outerFunction(5);
console.log(addFive(10)); // 输出 15

function applyFunction(func, arg) {
    return func(arg);
}

const increment = function(num) {
    return num + 1;
}

console.log(applyFunction(increment, 4)); // 输出 5

柯里化与匿名函数

柯里化允许将函数的多个参数分批传递，匿名函数（箭头函数）用于简化函数定义。

示例代码：

function curry(func) {
    return function(a) {
        if (arguments.length === 0) {
            return () => func();
        }
        if (func.length === 1) {
            return func(a);
        }
        return curry(function(...args) {
            return func(a, ...args);
        });
    };
}

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

console.log(add(1)(2)); // 输出 3

const increment = (x) => x + 1;
console.log(increment(4)); // 输出 5

类与对象

类定义了对象的模板，而对象是类的实例。

示例代码：

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

    greet() {
        return `Hello, my name is ${this.name}`;
    }
}

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

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

    introduce() {
        return `${this.greet()} I am an ${this.position}.`;
    }
}

let employee = new Employee("Alice", 25, "Software Engineer");
console.log(employee.introduce()); // 输出 "Hello, my name is Alice I am an Software Engineer."

原型链与构造函数

JavaScript 使用原型链来实现继承。构造函数用于创建对象实例。

示例代码：

function Person(name) {
    this.name = name;
    this.sayName = function() {
        return `Hello, my name is ${this.name}`;
    };
}

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

function Employee(name, department) {
    Person.call(this, name);
    this.department = department;
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

Employee.prototype.sayDepartment = function() {
    return `I work in the ${this.department} department.`;
}

let employee = new Employee("Alice", "Development");
console.log(employee.sayName()); // 输出 "Hello, my name is Alice"
console.log(employee.sayDepartment()); // 输出 "I work in the Development department."

Promise

Promise 是异步编程的一种解决方案，用于表示一个异步操作的结果。

示例代码：

const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Value after delay");
    }, 2000);
});

promise.then(value => {
    console.log(value); // 输出 "Value after delay"
});

setTimeout(() => {
    console.log("Promise is resolved"); // 输出 "Promise is resolved"
}, 1000);

async/await

async/await 提高了异步代码的可读性。

示例代码：

async function fetchUser() {
    let user = await fetch("https://api.example.com/user");
    user = await user.json();
    console.log(user);
}

fetchUser().then(console.log).catch(console.error);

let 和 const

ES6 引入了 let 和 const 关键字，用于声明更灵活的变量。

示例代码：

let message = "Hello";
message = "World";
console.log(message); // 输出 "World"

const pi = 3.14;
// pi = 3.15; // TypeError: Assignment to constant variable.
console.log(pi); // 输出 3.14

异步生成器与迭代器

异步生成器允许在异步上下文中生成和消费数据。

示例代码：

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

let gen = generateNumbers();
console.log(gen.next().value); // 输出 1
console.log(gen.next().value); // 输出 2
console.log(gen.next().value); // 输出 3

async function asyncGen() {
    for await (let num of generateNumbers()) {
        console.log(num);
    }
}

asyncGen();

解构赋值与模板字符串

解构赋值允许从对象或数组中提取值，模板字符串使用反引号(``)包含字符串。

示例代码：

let obj = { a: 1, b: 2 };
let { a, b } = obj;
console.log(a); // 输出 1
console.log(b); // 输出 2

let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, Alice!"

面试常见问题解析

调试 JavaScript 代码

使用浏览器的开发者工具（如 Chrome 或 Firefox 的 DevTools）进行调试。使用控制台（Console）查看变量值，使用断点（Breakpoints）暂停执行，查看调用堆栈（Call Stack）和执行上下文（Execution Context）。

示例代码：

console.log(`Debugging Example: ${debugExample()}`);
function debugExample() {
    let x = 5;
    if (x > 3) {
        console.log(`x is greater than 3`);
    }
    return x;
}

解答原型链问题

理解原型链有助于理解 JavaScript 的继承机制。原型链是对象之间引用的链接，通过 __proto__（或 Object.getPrototypeOf()）访问。

示例代码：

function Car() {}
Car.prototype.speed = 0;

function SportsCar() {}
SportsCar.prototype = new Car();
SportsCar.prototype.constructor = SportsCar;
SportsCar.prototype.accelerate = function() {
    this.speed += 10;
};

let ferrari = new SportsCar();
console.log(ferrari.speed); // 输出 0
console.log(ferrari instanceof Car); // 输出 true
ferrari.accelerate();
console.log(ferrari.speed); // 输出 10

分析和设计简单的 JavaScript 算法与数据结构

算法设计是理解和解决问题的关键。数据结构（如数组、链表、树、图）有助于组织和存储数据。

示例代码：

function quicksort(arr) {
    if (arr.length <= 1) {
        return arr;
    }
    const pivot = arr[arr.length - 1];
    const left = [];
    const right = [];
    for (let i = 0; i < arr.length - 1; i++) {
        if (arr[i] < pivot) {
            left.push(arr[i]);
        } else {
            right.push(arr[i]);
        }
    }
    return [...quicksort(left), pivot, ...quicksort(right)];
}

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

通过掌握这些基础知识和实践，初级开发者可以更好地准备 JavaScript 的笔试与面试。深入理解每个概念，并通过编写代码来实践，将有助于在技术面试中表现得更加出色。