JS 真题实战：从基础到掌握核心技能

JavaScript（JS）是现代前端开发的核心，通过解决真题实战，可以巩固基础知识，提升实际问题解决能力。本文将从变量、数据类型、运算符、控制流程、函数与作用域、面向对象编程、错误处理、项目实战等多个角度，引导你深入理解和掌握JS技能，助你成长为熟练的开发者。

变量、数据类型与运算符

// 变量声明与赋值
let score = 90;
const pi = 3.14;

// 数据类型
console.log(typeof score); // number
console.log(typeof pi); // number
console.log(typeof "hello"); // string

// 运算符
let total = 10 + 5; // 15
console.log(total);
let result = 10 * "2"; // 20 原因：字符串 "2" 被转换为数字 2
console.log(result);

控制流程：条件语句与循环

// 条件语句
let age = 20;
if (age < 18) {
    console.log("未成年");
} else if (age >= 18 && age < 60) {
    console.log("成年人");
} else {
    console.log("老年人");
}

// 循环
for (let i = 0; i < 5; i++) {
    console.log(i);
}

let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

函数与作用域

// 函数定义
function greet(name) {
    return `你好，${name}！`;
}

// 函数作用域
function outerFunction() {
    let outerVar = "外部变量";

    function innerFunction() {
        let innerVar = "内部变量";
        console.log(outerVar); // 访问外部函数的变量
        console.log(innerVar); // 访问内部函数的变量
    }
    innerFunction();
}

outerFunction();

面向对象编程：理解JS的OOP特性

类与构造函数

// 类定义
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log("动物说");
    }
}

// 实例化
let cat = new Animal("小猫");
cat.speak(); // 输出动物说

// 构造函数
function Person(name) {
    this.name = name;
    this.speak = function() {
        console.log(`${name} 说话了`);
    };
}

let person = new Person("张三");
person.speak(); // 输出张三 说话了

封装、继承与多态

封装与继承代码示范

// 封装
class Vehicle {
    constructor(brand) {
        this.brand = brand;
    }
}

// 子类继承
class Car extends Vehicle {
    constructor(brand, model) {
        super(brand);
        this.model = model;
    }
}

let audi = new Car("奥迪", "A6");
console.log(audi.brand); // 输出奥迪
console.log(audi.model); // 输出A6

// 多态
function drive(veh) {
    veh.speak();
}

let bike = new Vehicle("自行");
drive(bike); // 输出自行说话了
drive(audi); // 输出奥迪说话了
drive(car); // 输出张三 说话了

错误处理与调试：学会使用try-catch机制

try {
    let result = 10 / 0;
} catch (error) {
    console.error("捕获到错误：", error.message);
}

try {
    let value = parseInt("abc");
    console.log(value);
} catch (error) {
    console.error("捕获到错误：", error.message);
}

项目实战：通过真题案例学习应用

实战项目选择与分析

实现一个简单的待办事项应用

• 需求：创建一个应用，允许用户添加、删除和标记待办事项为已完成。

实战步骤与代码实现

设计数据结构：

let todos = [];

实现功能：

function addTodo(text) {
    todos.push({ text, completed: false });
}

function removeTodo(index) {
    todos.splice(index, 1);
}

function toggleTodo(index) {
    todos[index].completed = !todos[index].completed;
}

function displayTodos() {
    console.log("当前待办事项:");
    todos.forEach((todo, index) => {
        console.log(`编号：${index + 1} - ${todo.text} - ${todo.completed ? "已完成" : "未完成"}`);
    });
}

使用示例：

addTodo("学习JS");
addTodo("完成代码实战");
displayTodos();
toggleTodo(0);
toggleTodo(1);
displayTodos();

总结与进阶：巩固学习成果与未来规划

通过本指南的实践，你已经巩固了JS的基础知识并尝试了解了面向对象编程等多个方面。未来，你可以通过挑战更复杂的项目案例、学习现代框架（如React、Vue）以及深入研究性能优化等高级主题来进一步提升技能。

推荐进一步学习资源与方向

• 在线课程：慕课网（https://www.imooc.com/）提供了丰富的JavaScript学习资源，包括从基础到进阶的课程，涵盖了面向对象、错误处理、框架应用等。
• 阅读：可以参考《JavaScript高级程序设计》（Jon Duckett），这本书详细介绍了JavaScript的高级特性，有助于深入理解语言的内部机制。
• 实践项目：参与开源项目（如GitHub上的项目）或创建自己的项目，将理论知识应用到实际问题解决中，是提升技能的最佳途径。