JavaScript 入门全讲解

一、前言：为什么学习 JavaScript？

JavaScript 是现代互联网的灵魂语言，无论是网页、服务器、桌面应用，还是小程序开发，JavaScript 都是核心技能。
掌握 JavaScript 意味着可以：

• 制作炫酷网页
• 开发移动应用
• 搭建 Node.js 后端
• 制作桌面端 Electron 应用

总结：

学好 JavaScript，走遍天下都不怕。

二、JavaScript 简史与发展

• 1995年 Netscape 公司推出 LiveScript，后改名 JavaScript。
• 1997年 成为 ECMA 标准（ECMAScript）。
• 2015年 发布 ES6（ECMAScript 2015），大幅升级。
• 之后 每年持续更新：ES7、ES8、ES9…直到今天。

三、JavaScript 基础语法

3.1 变量声明：var、let、const

var a = 1;     // 函数作用域，有变量提升
let b = 2;     // 块级作用域，无提升
const c = 3;   // 块级作用域，常量不可更改

3.2 数据类型

基本类型（7种）：

• Number
• String
• Boolean
• Undefined
• Null
• Symbol
• BigInt

引用类型：

• Object
• Array
• Function

示例：

let num = 100;
let str = "hello";
let flag = true;
let obj = { name: "Tom" };
let arr = [1, 2, 3];

3.3 类型判断

typeof "abc";       // "string"
typeof 123;         // "number"
typeof undefined;   // "undefined"
typeof null;        // "object" （历史遗留 Bug）

引用类型判断：

let arr = [];
console.log(arr instanceof Array); // true

3.4 类型转换

Number("123");    // 123
String(456);      // "456"
Boolean(0);       // false

隐式转换示例：

console.log(1 + "2");  // "12"
console.log(1 - "2");  // -1

四、运算符与表达式

• 算术运算符：+ - * / %
• 比较运算符：== != === !== > < >= <=
• 逻辑运算符：&& || !
• 赋值运算符：= += -= *= /= %=
• 三元运算符：条件 ? 表达式1 : 表达式2

示例：

let x = 10;
let y = 20;
let max = x > y ? x : y;

五、流程控制

5.1 条件判断

if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

5.2 switch 语句

switch (fruit) {
  case "apple":
    console.log("苹果");
    break;
  case "banana":
    console.log("香蕉");
    break;
  default:
    console.log("未知水果");
}

5.3 循环结构

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

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

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

六、函数

6.1 函数声明与调用

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Tom"));

6.2 箭头函数（ES6）

const greet = (name) => "Hello, " + name;

6.3 函数参数默认值与剩余参数

function sum(a = 0, b = 0) {
  return a + b;
}

function collect(...args) {
  return args;
}

七、对象与数组操作

7.1 对象基础

let person = {
  name: "Alice",
  age: 25,
  greet() {
    console.log("Hi");
  }
};
console.log(person.name);

7.2 数组基础

let nums = [10, 20, 30];
nums.push(40);   // 添加
nums.pop();      // 删除
nums.forEach(n => console.log(n));

八、作用域与闭包

8.1 作用域

• 全局作用域
• 函数作用域
• 块级作用域（let、const）

8.2 闭包示例

function outer() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}

const counter = outer();
counter(); // 1
counter(); // 2

九、异步编程

9.1 回调函数

setTimeout(() => {
  console.log("延时执行");
}, 1000);

9.2 Promise 基础

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功");
  }, 1000);
});

promise.then(res => console.log(res));

9.3 async/await

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

十、DOM 操作基础

10.1 获取元素

let div = document.getElementById("myDiv");
let items = document.querySelectorAll(".item");

10.2 修改元素

div.innerHTML = "新的内容";
div.style.color = "red";

十一、事件机制

11.1 添加事件监听

document.getElementById("btn").addEventListener("click", function() {
  alert("按钮被点击了");
});

十二、模块化基础

12.1 ES6 模块

导出：

export const name = "Tom";
export function greet() {
  console.log("Hello");
}

导入：

import { name, greet } from './module.js';
greet();

十三、小项目实战示例：Todo List

简单实现一个添加、删除 Todo 项目的功能：

let todos = [];

function addTodo(item) {
  todos.push(item);
  render();
}

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

function render() {
  console.log("当前待办：", todos.join(", "));
}

addTodo("学习JS");
addTodo("完成作业");
removeTodo(0);

十四、常见错误与调试技巧

• 打印调试：console.log
• 断点调试：浏览器开发者工具
• 错误处理：try...catch

try {
  let res = JSON.parse("{ bad json }");
} catch (error) {
  console.error("解析失败：", error);
}

十五、学习建议与推荐资源

15.1 学习建议

• 多动手敲代码
• 项目驱动学习
• 阅读源码和文档
• 坚持每日一点点积累

15.2 推荐资源

• MDN Web Docs
• JavaScript.info 中文版
• 廖雪峰 JavaScript 教程

十六、总结

JavaScript 入门并不复杂，关键是要持续练习、不断深化理解。
随着学习深入，你会发现 JavaScript 世界广阔无比，值得你花时间去探索！

---

到这里，这篇文章就和大家说再见啦！我的主页里还藏着很多 篇 前端 实战干货，感兴趣的话可以点击头像看看，说不定能找到你需要的解决方案～
创作这篇内容花了很多的功夫。如果它帮你解决了问题，或者带来了启发，欢迎：
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒：
转载请注明原文链接，商业合作请私信联系
感谢你的阅读！我们下篇文章再见～ 💕