本篇文章全面回顾了JavaScript基础概念，深入探讨了大厂面试中常见的面试题类型，并针对性地提供了实战练习代码。从变量与数据类型、运算符与流程控制、函数基础与流程控制，到面向对象编程、DOM操作与事件处理，再到异步编程与Promise，以及数组与对象的高级使用。最后，文章通过实现深拷贝、扁平化数组、回文检测与闰年算法、Promise、防抖节流函数等，为开发者提供了面试题的实战演练，旨在巩固与提高JavaScript核心技能。

JS基础概念回顾

变量与数据类型

在JavaScript中，变量用于存储数据，而数据类型决定变量可以存储的信息类型。JavaScript的数据类型包括基础类型（如number, string, boolean)和引用类型（如object, function, null和undefined)。

// 变量与数据类型示例
let num = 42; // 数字类型
let str = "Hello, World!"; // 字符串类型
let bool = true; // 布尔类型

let obj = {
    key: "value"
}; // 对象类型

let func = function() {
    return "This is a function!";
}; // 函数类型

console.log(typeof num); // 输出 "number"
console.log(typeof str); // 输出 "string"
console.log(typeof bool); // 输出 "boolean"
console.log(typeof obj); // 输出 "object"
console.log(typeof func); // 输出 "function"

运算符与流程控制

运算符用于执行操作和比较，流程控制用于决定代码执行的路径。

运算符

基本运算符如+（加法）, -（减法）, *（乘法）, /（除法）和%（取模）。比较运算符如==, ===, !=, !==, <, >, <=, >=。

流程控制

条件语句如if, else if, else用于根据条件执行不同的代码块。循环语句如for, while, do-while用于重复执行代码块。

// 运算符示例
let result = 5 + 3; // 结果为 8
console.log(result);

// 流程控制示例
let age = 18;
if (age >= 18) {
    console.log("You are an adult!");
} else {
    console.log("You are a minor.");
}

函数基础与箭头函数

函数是可执行代码的封装单元，箭头函数提供了一种更简洁的语法来定义函数。

// 函数示例
function greet(name) {
    return `Hello, ${name}`;
}

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

// 箭头函数示例
const greetArrow = (name) => {
    return `Hello, ${name}`;
};

console.log(greetArrow("Jane")); // 输出 "Hello, Jane"

面向对象编程简介

JavaScript 支持面向对象编程(OOP)，通过class关键字定义类，通过function或class定义方法。

// 面向对象示例
class Student {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    greet() {
        console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
    }
}

const student = new Student("Alice", 20);
student.greet(); // 输出 "Hello, my name is Alice and I am 20 years old."

DOM操作与事件处理

DOM树与节点操作

DOM（Document Object Model）是浏览器如何表示HTML文档的抽象结构。document.getElementById(), document.querySelector(), document.querySelectorAll()等方法用于操作DOM节点。

// DOM操作示例
const element = document.getElementById("myElement");
element.textContent = "Hello, DOM!";

事件委托与冒泡

事件委托允许在父元素上监听事件，而无需为每个子元素单独添加事件处理器。事件处理过程中会按照事件流的顺序执行。

const parent = document.getElementById("parent");
parent.addEventListener("click", function(event) {
    const target = event.target;
    if (target.tagName === "SPAN") {
        console.log("Clicked on a span element!");
    }
}, false);

常见事件类型与应用实例

事件类型如click, mouseover, mouseout, keydown等，用于响应用户行为。

// 事件处理示例
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Button clicked!");
});

异步编程与Promise

异步概念与回调地狱

异步编程用于处理非阻塞性操作，如网络请求。回调地狱会导致代码难以阅读和维护。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "Data fetched!";
            resolve(data);
        }, 1000);
    });
}

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

Promise基础与链式调用

Promise用于封装异步操作，允许通过.then()方法链接多个异步操作。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "Data fetched!";
            resolve(data);
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const processed = `Processed: ${data}`;
            resolve(processed);
        }, 1000);
    });
}

fetchData()
    .then(data => processData(data))
    .then(processedData => {
        console.log(processedData);
    });

async/await简化异步代码

async/await提供了一种更简洁的方式来编写异步代码。

async function fetchDataAndProcess() {
    const data = await fetchData();
    const processedData = await processData(data);
    console.log(processedData);
}

fetchDataAndProcess();

数组与对象深入

高级数组方法

数组方法如map(), filter(), reduce()用于操作数组。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // 输出 [2, 4, 6, 8, 10]

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 输出 [2, 4]

const sum = numbers.reduce((total, number) => total + number);
console.log(sum); // 输出 15

解构赋值与扩展运算符

解构赋值用于从对象或数组中提取值，扩展运算符用于复制数组或对象。

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

const [first, second] = ["first", "second"];
console.log(first); // 输出 "first"

const [x, ...rest] = [1, 2, 3, 4];
console.log(x); // 输出 1
console.log(rest); // 输出 [2, 3, 4]

JSON与对象序列化

JSON（JavaScript Object Notation）用于序列化JavaScript对象。

const person = { name: "Alice", age: 30 };
const jsonString = JSON.stringify(person);
console.log(jsonString); // 输出 {"name":"Alice","age":30}

const personFromJson = JSON.parse(jsonString);
console.log(personFromJson.name); // 输出 "Alice"

ES6+新特性精选

let与const的区别

let用于声明可变作用域的变量，而const用于声明不可变作用域的变量。

let count = 1;
count = 2; // 更改变量值
console.log(count); // 输出 2

const PI = 3.14;
// PI = 2.71; // 报错，const变量不可更改
console.log(PI); // 输出 3.14

模板字符串与解构赋值

模板字符串使用反引号backticks，允许嵌入变量和表达式。

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

const [first, second] = ["front", "back"];
console.log(first, second); // 输出 ["front", "back"]

类与模块系统简介

类用于定义对象的模板，模块系统允许在不同文件中组织和导入代码。

// myClass.js
class MyClass {
    constructor(value) {
        this.value = value;
    }

    getValue() {
        return this.value;
    }
}

// main.js
const myInstance = new MyClass("Hello");
console.log(myInstance.getValue()); // 输出 "Hello"

实战演练：手写常见面试题

实现深拷贝与浅拷贝

深拷贝用于复制对象的完整结构，浅拷贝仅复制顶层值。

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

function shallowClone(obj) {
    return Object.assign({}, obj);
}

const original = { a: 1, b: { c: 2 } };
const deepCopied = deepClone(original);
const shallowCopied = shallowClone(original);

original.b.c = 3; // 更改原始对象的值

console.log(deepCopied.b.c); // 输出 2
console.log(shallowCopied.b.c); // 输出 3

扁平化数组的多种方法

扁平化数组可以使用递归或迭代方法。

function flattenArray(arr) {
    return arr.reduce((flat, current) => {
        return flat.concat(Array.isArray(current) ? flattenArray(current) : current);
    }, []);
}

const nestedArray = [1, [2, [3, 4], 5], 6];
console.log(flattenArray(nestedArray)); // 输出 [1, 2, 3, 4, 5, 6]

检测回文字符串与闰年算法

function isPalindrome(str) {
    const reversedStr = str.split('').reverse().join('');
    return str === reversedStr;
}

function isLeapYear(year) {
    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
}

console.log(isPalindrome("racecar")); // 输出 true
console.log(isLeapYear(2024)); // 输出 true

手写Promise与实现防抖节流函数

function resolvePromise(result) {
    return new Promise((resolve) => {
        setTimeout(() => resolve(result), 100);
    });
}

function debounce(func, wait) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.apply(context, args);
        }, wait);
    };
}

function throttle(func, limit) {
    let lastExecution = 0;
    return function() {
        const now = new Date().getTime();
        if (now - lastExecution > limit) {
            func.apply(this, arguments);
            lastExecution = now;
        }
    };
}

resolvePromise("Promise resolved").then(() => {
    console.log("Promise resolved!");
});

const debouncedFunction = debounce(console.log, 1000);
debouncedFunction("Function executed every second");

const throttledFunction = throttle(console.log, 1000);
throttledFunction("Function executed only once every second");

通过以上内容，初级开发者可以逐步掌握JavaScript的核心概念和实践应用，为应对面试和实际项目开发打下坚实的基础。