从入门到精通：JavaScript 全面学习指南

声明方式	作用域	能否变量声明	变量提升	备注
var	函数/全局	能	能	ES5 语法，存在作用域问题
let	块级{}	不能	无	ES6新增，解决作用域问题
const	块级{}	不能	无	声明常量，赋值后不可修改

// 示例
var a = 1; // 函数/全局作用域
let b = 2; // 块级作用域，同一作用域不能重复声明
const c = 3; // 常量，不能重新赋值（但对象属性可修改）

2.数据类型：语言的“基本建材”

JavaScript分为原始类型和引用类型:

原始类型（七种）

Number：整数、浮点数（123、3.14），特殊值 NaN（非数字）、Infinity（无穷大）
String：文本数据（'hello'、"world"、`模板字符串`）
Boolean：true（真）或 false（假）
Undefined：变量声明未赋值（let x; console.log(x); // undefined）
Null：表示 “空值”（需手动赋值：let y = null）
Symbol（ES6+）：唯一标识符（const id = Symbol('id')）
BigInt（ES2020+）：超大整数（9007199254740993n）

引用类型

Object：键值对集合（{ name: 'JS', age: 28 }）
Array：有序列表（[1, 2, 3]）
Function：可执行代码块（function fn() {}）
其他：Date、RegExp、Map、Set 等

类型检测：

typeof 123; // "number"
typeof 'hello'; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"（历史bug，需用 === null 判断）
[1,2,3] instanceof Array; // true

3.运算符：数据“处理器”

算术运算符：+、-、*、/、%（取余）、**（幂运算）

比较运算符：==（宽松相等，自动转换类型）、===（严格相等，推荐使用）

逻辑运算符：&&（与）、||（或）、!（非）

赋值运算符：=、+=、-=、*= 等

// 注意 == 和 === 的区别
1 == '1'; // true（类型转换后相等）
1 === '1'; // false（类型不同）

// 逻辑运算符短路特性
const name = user?.name || '默认名称'; // 若user.name不存在则用默认值

4.控制流：代码执行“路线图”

条件语句:

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

// 三元运算符（简化条件）
const result = age >= 18 ? '成年' : '未成年';

循环语句:

// for循环
for (let i = 0; i < 5; i++) {
  console.log(i); // 0,1,2,3,4
}

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

// for...of遍历数组
const fruits = ['苹果', '香蕉'];
for (const fruit of fruits) {
  console.log(fruit);
}

5.函数：代码“封装器”

函数是封装可复用代码的重要方式：

// 函数声明
function add(a, b) {
  return a + b;
}

// 函数表达式
const multiply = function(a, b) {
  return a * b;
};

// 箭头函数（ES6+）
const divide = (a, b) => a / b;

// 调用函数
console.log(add(2, 3)); // 5

三，常用对象：JavaScript的“工具库”

JavaScript 内置了大量对象，提供丰富的功能：

1.Object：对象基础

const person = {
  name: '张三',
  age: 20,
  sayHi: function() {
    console.log(`你好，我是${this.name}`);
  }
};

// 访问属性
console.log(person.name); // 张三
person.sayHi(); // 你好，我是张三

// 常用方法
Object.keys(person); // ['name', 'age', 'sayHi']（获取键名）
Object.values(person); // ['张三', 20, 函数]（获取值）

2.Array：数组操作

数组是有序集合，提供大量实用方法：

const numbers = [3, 1, 4, 1, 5];

// 转换/映射：map
const doubled = numbers.map(n => n * 2); // [6,2,8,2,10]

// 筛选：filter
const evens = numbers.filter(n => n % 2 === 0); // [4]

// 汇总：reduce
const sum = numbers.reduce((total, n) => total + n, 0); // 14

// 查找：find
const firstEven = numbers.find(n => n % 2 === 0); // 4

3.String：字符串处理

const str = 'Hello JavaScript';

str.length; // 16（长度）
str.slice(0, 5); // "Hello"（截取）
str.split(' '); // ["Hello", "JavaScript"]（分割）
str.toLowerCase(); // "hello javascript"（转小写）
str.includes('Java'); // true（是否包含子串）

4.其他常用对象

Date：处理日期时间

const now = new Date();
now.getFullYear(); // 2025（年份）
now.toLocaleString(); // "2025/8/21 15:30:00"（本地时间）

Math：数学运算

Math.random(); // 0-1随机数
Math.round(3.7); // 4（四舍五入）
Math.max(1, 3, 5); // 5（最大值）

四，DOM：操作网页的“魔法之手”

DOM（文档对象模型）将 HTML 文档解析为树形结构，让 JS 能操作网页元素。

1.选择元素:找到"目标"

// 通过ID选择
const header = document.getElementById('header');

// 通过类名选择（返回集合）
const items = document.getElementsByClassName('item');

// 通过标签名选择
const paragraphs = document.getElementsByTagName('p');

// 通过CSS选择器（推荐）
const logo = document.querySelector('.logo'); // 第一个匹配元素
const links = document.querySelectorAll('nav a'); // 所有匹配元素

2.修改元素:改变"外观"

const title = document.querySelector('h1');

// 修改内容
title.textContent = '新标题'; // 纯文本
title.innerHTML = '<span>带标签的标题</span>'; // HTML内容

// 修改样式
title.style.color = 'red'; // 文字变红
title.style.fontSize = '24px'; // 字体大小

// 修改属性
const img = document.querySelector('img');
img.src = 'new-image.jpg'; // 图片路径
img.alt = '新图片描述';

3.事件处理:响应"交互"

为元素绑定事件，实现用户交互：

const button = document.querySelector('button');

// 绑定点击事件
button.addEventListener('click', function() {
  console.log('按钮被点击了');
  this.textContent = '已点击'; // this指向按钮元素
});

// 常见事件类型：click（点击）、mouseover（鼠标悬停）、input（输入）、load（加载完成）

4.事件委托:优化"性能"

利用事件冒泡，将事件绑定到父元素，减少事件监听数量：

// 为列表绑定事件，处理所有子项点击
const list = document.getElementById('list');
list.addEventListener('click', function(e) {
  // e.target是实际点击的元素
  if (e.target.tagName === 'LI') {
    console.log('点击了列表项：', e.target.textContent);
  }
});

五，BOM：控制浏览器的“遥控器”

BOM（浏览器对象模型）提供与浏览器交互的接口：

1.window：全局对象

window是BOM的核心，所有BOM对象都是它的属性：

window.alert('提示信息'); // 弹窗提示
window.confirm('确定要删除吗？'); // 确认弹窗
window.setTimeout(() => {
  console.log('1秒后执行');
}, 1000); // 定时器

2.location：URL控制器

location.href; // 获取当前URL
location.href = 'https://example.com'; // 跳转到新页面
location.reload(); // 刷新页面
location.search; // 获取URL参数（如 ?id=1&name=js）

3.history：浏览历史

history.back(); // 后退一页
history.forward(); // 前进一页
history.go(-2); // 后退两页

4.navigator：浏览器信息

navigator.userAgent; // 浏览器标识（判断浏览器类型）
navigator.language; // 浏览器语言（如 "zh-CN"）
navigator.geolocation; // 获取地理位置（需用户授权）

六，高级语法：深入JavaScript核心

1.闭包：函数的"私有空间"

闭包是嵌套函数访问外部函数变量的特性，可用于创建私有变量：

function createCounter() {
  let count = 0; // 私有变量，外部无法直接访问
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2（count被闭包保存）

2.原型与继承：对象的"血缘关系"

JavaScript 通过原型链实现继承：

// 父构造函数
function Animal(name) {
  this.name = name;
}
// 原型上添加方法（所有实例共享）
Animal.prototype.eat = function() {
  console.log(`${this.name}在吃东西`);
};

// 子构造函数继承Animal
function Dog(name, breed) {
  Animal.call(this, name); // 继承属性
  this.breed = breed;
}
// 继承方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.bark = function() {
  console.log('汪汪叫');
};

const dog = new Dog('旺财', '金毛');
dog.eat(); // 旺财在吃东西（继承自Animal）
dog.bark(); // 汪汪叫（自身方法）

3.异步编程：非阻塞的“执行模式”

JavaScript 是单线程，通过异步避免阻塞：

// 回调函数（早期异步方案）
setTimeout(() => {
  console.log('1秒后执行');
}, 1000);

// Promise（ES6+，解决回调地狱）
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
delay(1000)
  .then(() => console.log('1秒后执行'))
  .then(() => delay(1000))
  .then(() => console.log('又1秒后执行'));

// async/await（ES2017+，Promise语法糖）
async function asyncTask() {
  await delay(1000);
  console.log('1秒后执行');
  await delay(1000);
  console.log('又1秒后执行');
}
asyncTask();

4.this关键字：上下文“指向”

this 指向取决于函数调用方式：

const obj = {
  name: '对象',
  fn: function() {
    console.log(this.name); // "对象"（this指向obj）
  },
  arrowFn: () => {
    console.log(this.name); // undefined（箭头函数无this绑定，继承外层）
  }
};

obj.fn(); // 正常调用，this指向obj
const fn = obj.fn;
fn(); // 全局调用，this指向window（严格模式下为undefined）

七，新特性：ES6+带来的“语法糖”

ES6（2015）及后续版本新增了大量实用特性：

1. 解构赋值：快速 “提取” 数据

// 对象解构
const user = { name: '李四', age: 25 };
const { name, age } = user; // 提取name和age
console.log(name, age); // 李四 25

// 数组解构
const [first, second] = [10, 20]; // first=10, second=20

2. 扩展运算符：“展开” 与 “合并”

// 数组扩展
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1,2,3,4]

// 对象扩展
const obj1 = { a: 1 };
const obj2 = { ...obj1, b: 2 }; // {a:1, b:2}

3. 模块化：代码 “拆分” 与 “复用”

// math.js（导出模块）
export const PI = 3.14;
export function add(a, b) { return a + b; }
export default function multiply(a, b) { return a * b; }

// app.js（导入模块）
import multiply, { PI, add } from './math.js';
console.log(PI); // 3.14
console.log(add(2, 3)); // 5

4. class 语法：面向对象 “语法糖”

class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHi() {
    console.log(`你好，我是${this.name}`);
  }
}

// 继承
class Student extends Person {
  constructor(name, grade) {
    super(name); // 调用父类构造函数
    this.grade = grade;
  }
}

5. 其他实用特性

模板字符串：`Hello ${name}`（支持变量和换行）。
Set/Map：Set 存储唯一值，Map 存储键值对（键可为任意类型）。
可选链：user?.address?.city（避免属性不存在报错）。
空值合并：data ?? '默认值'（仅当 data 为 null/undefined 时用默认值）。

八，实战项目：TodoList代办事项应用

通过一个完整项目巩固所学知识，实现功能：添加、删除、标记完成待办事项。

1.需求分析

输入框添加待办事项
显示所有待办事项列表
点击事项标记为已完成/未完成
点击删除按钮移除事项
本地存储（localStorage）保存数据

2.HTML结构

<div class="todo-app">
  <h1>待办事项</h1>
  <div class="input-area">
    <input type="text" id="todo-input" placeholder="添加新任务...">
    <button id="add-btn">添加</button>
  </div>
  <ul id="todo-list"></ul>
</div>

3.CSS样式（简化版）

.todo-app { max-width: 500px; margin: 20px auto; padding: 20px; }
#todo-input { width: 70%; padding: 8px; }
#add-btn { padding: 8px 16px; background: #4CAF50; color: white; border: none; }
.todo-item { padding: 10px; margin: 5px 0; display: flex; justify-content: space-between; }
.completed { text-decoration: line-through; color: #888; }
.delete-btn { background: #ff4444; color: white; border: none; padding: 4px 8px; }

4.JavaScript逻辑

// 获取DOM元素
const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');

// 从本地存储获取数据
let todos = JSON.parse(localStorage.getItem('todos')) || [];

// 渲染待办列表
function renderTodos() {
  todoList.innerHTML = ''; // 清空列表
  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
    li.innerHTML = `
      <span onclick="toggleComplete(${index})">${todo.text}</span>
      <button class="delete-btn" onclick="deleteTodo(${index})">删除</button>
    `;
    todoList.appendChild(li);
  });
}

// 添加待办事项
function addTodo() {
  const text = input.value.trim();
  if (text) {
    todos.push({ text, completed: false });
    input.value = ''; // 清空输入框
    saveTodos(); // 保存到本地存储
    renderTodos(); // 重新渲染
  }
}

// 标记完成/未完成
function toggleComplete(index) {
  todos[index].completed = !todos[index].completed;
  saveTodos();
  renderTodos();
}

// 删除待办事项
function deleteTodo(index) {
  todos.splice(index, 1);
  saveTodos();
  renderTodos();
}

// 保存到本地存储
function saveTodos() {
  localStorage.setItem('todos', JSON.stringify(todos));
}

// 绑定事件
addBtn.addEventListener('click', addTodo);
input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') addTodo(); // 回车添加
});

// 初始渲染
renderTodos();

5.项目总结

该项目综合应用了:DOM选择与修改,事件处理与委托,数组方法(forEach,push,splice),本地存储(localStorage),函数封装与逻辑拆分