JavaScript 学习总结

一、基础语法

1. 变量声明

• var ：ES5 中用于声明变量，有函数作用域和变量提升现象。变量提升意味着变量可以在声明之前使用，但其值为 undefined。

console.log(a); // 输出: undefined
var a = 10;

• let ：ES6 引入，具有块级作用域。在块级作用域内声明的 let 变量，只在该块级作用域内有效。

{
    let b = 20;
    console.log(b); // 输出: 20
}
console.log(b); // 报错: b is not defined

• const：同样是 ES6 引入，用于声明常量。一旦声明，其值不能被重新赋值，且也具有块级作用域。

const PI = 3.14159;
PI = 3.14; // 报错: Assignment to constant variable.

2. 注释

• 单行注释 ：使用 // 开头，注释本行后面的内容。

// 这是一个单行注释
let num = 10;

• 多行注释 ：使用 /* */ 包裹注释内容，可以跨越多行。

/* 
这是一个
多行注释
*/
function add(a, b) {
    return a + b;
}

3. 语句与运算符

• 条件语句：

  • if、else、else if。

  • switch：多分支选择。

• 循环语句：

  • for：for (let i = 0; i < 5; i++) {}。

  • while：while (condition) {}。

  • do...while：do {} while (condition)。

  • for...of：遍历可迭代对象（如数组）。

  • for...in：遍历对象的可枚举属性。

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

const obj = { a: 1, b: 2 };
for (let key in obj) {
  console.log(key, obj[key]);
}

• 算术运算符 ：+、-、*、/、%、**（幂运算）。

• 比较运算符 ：==（值相等）、===（值和类型相等）、!=、!==、>、<、>=、<=。

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

• 赋值运算符 ：=、+=、-=、*=、/=。

• 三元运算符 ：condition ? expr1 : expr2。

let a = 10;
let b = 5;
console.log(a > b && a !== 10); // false

二、数据类型

1. 基本数据类型

• undefined：表示变量已声明但未赋值。

let var1;
console.log(var1); // 输出: undefined

• null：表示一个空值，通常用于表示有意的空值。

let var2 = null;
console.log(var2); // 输出: null

• boolean ：有两个值 true 和 false，用于逻辑判断。

let isDone = true;
if (isDone) {
    console.log('任务完成');
}

• number：表示整数和浮点数。

let num1 = 10;
let num2 = 3.14;

• string：用于表示文本数据，可使用单引号、双引号或反引号（模板字面量）。

let str1 = 'Hello';
let str2 = "World";
let str3 = `Hello, ${str2}`; // 模板字面量，可以嵌入表达式
console.log(str3); // 输出: Hello, World

• symbol：ES6 新增，是一种唯一的、不可变的数据类型，常用于对象属性键，以避免属性名冲突。

let sym1 = Symbol('unique');
let sym2 = Symbol('unique');
console.log(sym1 === sym2); // 输出: false

• bigint ：ES2020 新增，用于表示任意精度的整数，解决了 number 类型的安全整数范围限制问题。

let big1 = BigInt(9007199254740991);
let big2 = BigInt('9007199254740991');

2. 引用数据类型

• Object ：是一种无序的键值对集合，可以存储各种类型的数据。对象，如 {}、[]、function。

let person = {
    name: 'John',
    age: 30,
    address: {
        city: 'New York',
        country: 'USA'
    },
    hobbies: ['reading', 'traveling']
};
console.log(person.name); // 输出: John

• Array：是一种有序的、可变的列表，可以存储不同类型的数据。

let numbers = [1, 2, 3, 4, 5];
numbers.push(6); // 在数组末尾添加元素
console.log(numbers[2]); // 输出: 3

• Function：是一种特殊的对象，用于封装可重用的代码块。函数可以作为值传递、存储在变量中、作为参数传递给其他函数等。

function add(a, b) {
    return a + b;
}
let sum = add(3, 5);
console.log(sum); // 输出: 8

三、函数

1. 函数定义

• 函数声明 ：使用 function 关键字定义函数，具有函数提升特性。

function multiply(a, b) {
    return a * b;
}
let result1 = multiply(4, 5);
console.log(result1); // 输出: 20

• 函数表达式：将函数赋值给一个变量，没有函数提升特性。

let divide = function (a, b) {
    return a / b;
};
let result2 = divide(10, 2);
console.log(result2); // 输出: 5

• 箭头函数 ：ES6 引入的简洁函数定义方式，没有自己的 this、arguments、super 和 new.target。

let square = (x) => x * x;
let result3 = square(3);
console.log(result3); // 输出: 9

// 多个参数
let addNumbers = (a, b) => a + b;

// 无参数
let greet = () => console.log('Hello');

2. 函数参数

• 默认参数：在函数定义时可以为参数指定默认值。

function greet(name = 'Guest') {
    console.log(`Hello, ${name}`);
}
greet(); // 输出: Hello, Guest
greet('John'); // 输出: Hello, John

• 剩余参数 ：使用 ... 语法将多个参数收集到一个数组中。

function sumAll(...numbers) {
    let total = 0;
    for (let num of numbers) {
        total += num;
    }
    return total;
}
let sumResult = sumAll(1, 2, 3, 4, 5);
console.log(sumResult); // 输出: 15

3. 函数作用域和闭包

• 函数作用域：函数内部可以访问外部作用域的变量，而外部作用域不能访问函数内部的变量。

let outerVar = 10;
function outerFunction() {
    let innerVar = 20;
    console.log(outerVar); // 可以访问外部变量
    console.log(innerVar); // 可以访问内部变量
}
outerFunction();
console.log(innerVar); // 报错: innerVar is not defined

• 闭包：函数可以记住并访问其所在的词法作用域，即使在函数执行完毕后。闭包常用于创建私有变量和模拟面向对象的封装。

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

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

四、对象和数组

1. 对象创建

• 对象字面量 ：最常用的创建对象的方式，使用花括号 {} 定义对象的属性和方法。

let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2020,
    start: function () {
        console.log('The car has started.');
    }
};

• new Object() ：使用 Object 构造函数创建对象，然后逐个添加属性。

let person = new Object();
person.name = 'Alice';
person.age = 30;

2. 属性访问

• 点表示法 ：使用点号 . 访问对象的属性。

console.log(car.brand); // 输出: Toyota

• 方括号表示法 ：使用方括号 [] 访问对象的属性，适用于属性名是变量或包含特殊字符的情况。

let propName ='model';
console.log(car[propName]); // 输出: Corolla

3. 继承

• 传统原型链继承：通过构造函数和原型链实现继承。

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function () {
    console.log(this.name +'makes a sound.');
};
function Dog(name, breed) {
    Animal.call(this, name);
    this.breed = breed;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
let myDog = new Dog('Buddy', 'Golden Retriever');
myDog.speak(); // 输出: Buddy makes a sound.

• ES6 class 继承 ：使用 class 和 extends 关键字实现继承，语法更简洁。

class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name +'makes a sound.');
    }
}
class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
}
let myDog2 = new Dog('Charlie', 'Labrador');
myDog2.speak(); // 输出: Charlie makes a sound.

4. 数组

• 定义 ：const arr = [1, 2, 3]。

• 常用方法：

  • push()、pop()、shift()、unshift()。

  • map()、filter()、reduce()。

  • slice()、splice()。

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2); // [2, 4, 6]

五、异步编程

1 回调函数

• 异步操作完成后执行的函数。

setTimeout(function () {
    console.log('First timeout');
    setTimeout(function () {
        console.log('Second timeout');
    }, 1000);
}, 1000);

• 回调地狱：当多个异步操作嵌套时，代码会变得难以阅读和维护，形成回调地狱。

2. Promise

• 基本概念 ：Promise 是一个表示异步操作最终完成（或失败）及其结果值的对象。它有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
• 方法：then()、catch()、finally()。

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('Success!');
    }, 1000);
});
promise.then(value => {
    console.log(value);
}).catch(error => {
    console.error(error);
});

• 链式调用 ：通过 .then() 方法可以将多个 Promise 操作链接起来，解决回调地狱问题。

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

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

3. async/await

• 基本概念 ：async 函数是一种异步函数，它返回一个 Promise 对象。await 只能在 async 函数内部使用，用于暂停异步函数的执行，直到 Promise 被解决（fulfilled）或被拒绝（rejected）。
• 基于 Promise 的语法糖，使异步代码看起来像同步代码。

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

六、DOM 操作

1 选择元素

• document.getElementById()

• document.querySelector()

• document.querySelectorAll()

const element = document.querySelector("#myElement");

2 修改元素

• 修改内容：element.textContent、element.innerHTML。

• 修改样式：element.style.property = value。

• 修改属性：element.setAttribute()。

element.textContent = "Hello, World!";
element.style.color = "red";

3 事件处理

• 添加事件监听器：element.addEventListener()。

let button = document.getElementById('myButton');
button.addEventListener('click', function () {
    console.log('Button clicked!');
});

4.常见事件类型

• 鼠标事件 ：如 click（点击）、dblclick（双击）、mouseover（鼠标悬停）、mouseout（鼠标离开）、mousedown（鼠标按下）、mouseup（鼠标释放）等。
• 键盘事件 ：如 keydown（键盘按下）、keyup（键盘释放）、keypress（键盘按下并产生字符）等。
• 表单事件 ：如 submit（表单提交）、input（输入框内容改变）、change（表单元素值改变）等。

let form = document.getElementById('myForm');
form.addEventListener('submit', function (event) {
    event.preventDefault(); // 阻止表单默认提交行为
    console.log('Form submitted');
});

七、ES6+ 新特性

1 解构赋值

• 从数组或对象中提取值。

const [a, b] = [1, 2];
const { name, age } = { name: "Alice", age: 25 };

2 模板字符串

• 使用反引号（``）定义字符串，支持多行和嵌入表达式。

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

3 模块化

• 使用 import 和 export 导入和导出模块。

// math.js
export const add = (a, b) => a + b;

// main.js
import { add } from "./math.js";
console.log(add(2, 3)); // 5

八、 常用 API__内置函数 或方法，

1 数组方法

数组是 JavaScript 中最常用的数据结构之一，以下是一些常用的数组方法：

map()：对数组中的每个元素执行函数，并返回新数组。

const numbers = [1, 2, 3];
const doubled = numbers.map((n) => n * 2); // [2, 4, 6]

filter()：过滤数组，返回满足条件的元素组成的新数组。

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

reduce()：将数组元素累积为一个值。

const sum = numbers.reduce((acc, n) => acc + n, 0); // 6

find()：返回数组中第一个满足条件的元素。

const firstEven = numbers.find((n) => n % 2 === 0); // 2

some()：检查数组中是否有元素满足条件。

const hasEven = numbers.some((n) => n % 2 === 0); // true

every()：检查数组中的所有元素是否都满足条件。

const allEven = numbers.every((n) => n % 2 === 0); // false

2.字符串 API

字符串是 JavaScript 中的基本数据类型之一，以下是一些常用的字符串方法：

split()：将字符串按指定分隔符拆分为数组。

const str = "hello,world";
const arr = str.split(","); // ["hello", "world"]

join()：将数组元素按指定分隔符拼接为字符串。

const newStr = arr.join("-"); // "hello-world"

substring()：提取字符串的子串。

const sub = str.substring(0, 5); // "hello"

replace()：替换字符串中的内容。

const newStr = str.replace("world", "JavaScript"); // "hello,JavaScript"

toUpperCase()：将字符串转换为大写。

const upper = str.toUpperCase(); // "HELLO,WORLD"

toLowerCase()：将字符串转换为小写。

const lower = str.toLowerCase(); // "hello,world"

3. 对象 API

对象是 JavaScript 中的核心数据结构，以下是一些常用的对象方法：

Object.keys()：返回对象的所有键组成的数组。

const obj = { a: 1, b: 2 };
const keys = Object.keys(obj); // ["a", "b"]

Object.values()：返回对象的所有值组成的数组。

const values = Object.values(obj); // [1, 2]

Object.entries()：返回对象的键值对组成的数组。

const entries = Object.entries(obj); // [["a", 1], ["b", 2]]

Object.assign()：将一个或多个对象的属性复制到目标对象。

const target = { a: 1 };
const source = { b: 2 };
const result = Object.assign(target, source); // { a: 1, b: 2 }

4. 日期 API

JavaScript 提供了 Date 对象来处理日期和时间。

new Date()：创建日期对象。

const now = new Date(); // 当前时间

getFullYear()：获取年份。

const year = now.getFullYear(); // 2025

getMonth()：获取月份（0-11）。

const month = now.getMonth(); // 1 (表示 2 月)

getDate()：获取日期（1-31）。

const date = now.getDate(); // 12

getHours()：获取小时（0-23）。

const hours = now.getHours(); // 14

5.网络请求 API

JavaScript 提供了 fetch API 用于发送网络请求。

fetch()：发送 HTTP 请求并获取响应。

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

6. 浏览器环境 API

JavaScript 可以通过浏览器提供的 API 操作 DOM 和浏览器环境。

document.querySelector()：选择 DOM 元素。

const element = document.querySelector("#myElement");

element.addEventListener()：为 DOM 元素添加事件监听器。

element.addEventListener("click", () => {
  console.log("Element clicked");
});

localStorage：在浏览器中存储数据。

localStorage.setItem("name", "Alice");
const name = localStorage.getItem("name"); // "Alice"

sessionStorage：在浏览器会话中存储数据。

sessionStorage.setItem("token", "12345");
const token = sessionStorage.getItem("token"); // "12345"

7. 数学 API

JavaScript 提供了 Math 对象来处理数学运算。

Math.random()：生成 0 到 1 之间的随机数。

const random = Math.random(); // 0.123456789

Math.floor()：向下取整。

const num = Math.floor(3.7); // 3

Math.ceil()：向上取整。

const num = Math.ceil(3.2); // 4

Math.round()：四舍五入。

const num = Math.round(3.5); // 4

九、最佳实践

1 代码风格

• 使用 const 和 let 代替 var。

• 使用箭头函数简化代码。

• 使用模板字符串代替字符串拼接。

2 错误处理

• 使用 try...catch 捕获异常。

try {
  // 可能出错的代码
} catch (error) {
  console.error(error);
}

3 性能优化

• 避免全局变量。

• 使用事件委托减少事件监听器数量。

• 使用 requestAnimationFrame 优化动画。