JavaScript全解：从基础到高级，掌握每一个知识点

引言：

JavaScript是一种广泛使用的脚本语言，主要用于Web浏览器，但近年来也扩展到了服务器端（Node.js）和其他领域。它允许开发者创建交互式的网页，处理数据，控制用户界面，甚至构建完整的应用程序。本文将全面解析JavaScript的基础概念、语法、核心功能及其运用，并通过小案例加深理解。

一、JavaScript基础

1. 变量与数据类型

变量声明: var, let, const
数据类型: 字符串(String), 数字(Number), 布尔(Boolean), 对象(Object), 数组(Array), 函数(Function), null, undefined

案例:

Javascript

1let name = "Alice";
2const age = 30;
3var isStudent = false;

2. 运算符

算术运算符(+, -, *, /, %)
比较运算符(==, ===, !=, !==, <, >)
逻辑运算符(&&, ||, !)

案例:

Javascript

1let x = 10;
2let y = 5;
3console.log(x + y); // 15
4console.log(x > y); // true

3. 流程控制

条件语句(if, else if, else)
循环(for, while, do...while)

案例:

Javascript

1let num = 10;
2if (num > 0) {
3  console.log("Positive");
4} else if (num < 0) {
5  console.log("Negative");
6} else {
7  console.log("Zero");
8}
9
10for (let i = 0; i < 5; i++) {
11  console.log(i);
12}

4. 函数

函数定义与调用
参数传递
返回值

案例:

Javascript

1function add(a, b) {
2  return a + b;
3}
4console.log(add(5, 3)); // 8

5. 数组与对象

数组操作(push, pop, shift, unshift, slice, splice)
对象属性与方法

案例:

Javascript

1let arr = [1, 2, 3];
2arr.push(4);
3console.log(arr); // [1, 2, 3, 4]
4
5let obj = {name: "John", age: 25};
6console.log(obj.name); // John

二、JavaScript进阶

1. DOM操作

查询元素(getElementById, getElementsByClassName, querySelector)
修改元素(innerHTML, textContent, setAttribute)
事件监听(addEventListener)

案例:

Javascript

1document.getElementById("myDiv").innerHTML = "Hello!";
2document.querySelector(".myClass").addEventListener("click", function() {
3  console.log("Clicked!");
4});

2. 异步编程

回调函数
Promise
Async/Await

案例:

Javascript

1function loadSomething(callback) {
2  setTimeout(() => {
3    callback("Loaded!");
4  }, 2000);
5}
6
7loadSomething(function(data) {
8  console.log(data);
9});
10
11async function fetchData() {
12  let response = await fetch("https://api.example.com/data");
13  let data = await response.json();
14  console.log(data);
15}

3. 模块化

ES6模块(import, export)
Node.js模块(require, module.exports)

案例:

Javascript

1// math.js
2export function add(a, b) {
3  return a + b;
4}
5
6// main.js
7import { add } from './math.js';
8console.log(add(1, 2)); // 3

4. 面向对象

类(class)
继承(extends)
封装、继承、多态

案例:

Javascript

1class Animal {
2  constructor(name) {
3    this.name = name;
4  }
5  speak() {
6    console.log(this.name + " makes a sound.");
7  }
8}
9
10class Dog extends Animal {
11  speak() {
12    console.log(this.name + " barks.");
13  }
14}
15
16let d = new Dog("Rufus");
17d.speak(); // Rufus barks.

三、实战案例

假设我们需要实现一个简单的计数器组件，可以增加、减少计数，并显示当前的计数值。

HTML:

Html

1<div id="counter">
2  <button id="increment">+</button>
3  <span id="value">0</span>
4  <button id="decrement">-</button>
5</div>

JavaScript:

Javascript

1let value = 0;
2let valueElement = document.getElementById("value");
3
4function updateValue() {
5  valueElement.textContent = value;
6}
7
8document.getElementById("increment").addEventListener("click", function() {
9  value++;
10  updateValue();
11});
12
13document.getElementById("decrement").addEventListener("click", function() {
14  value--;
15  updateValue();
16});
17
18updateValue();