前端开发基础（四）- javascript

前端开发导航 🌏

JavaScript 简介

JavaScript（JS）是一种具有函数优先特性的轻量级、解释型或者说即时编译型的编程语言。在 Web 网页中，JavaScript 代码可以修改 HTML 内容、样式和结构，响应用户操作，以及与服务器进行交互。除此之外，JavaScript 还被应用到了很多非浏览器环境中，例如 Node.js。进一步说，JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript 基础

变量和数据类型

JavaScript 中有三种声明变量的方式：var、let 和 const。

变量声明

// var - 函数作用域，可重复声明，可修改
var name = "JavaScript";
var name = "JS"; // 可以重复声明

// let - 块级作用域，不可重复声明，可修改
let age = 25;
age = 26; // 可以修改值
// let age = 30; // 错误：不能重复声明

// const - 块级作用域，不可重复声明，不可修改(但对象的属性可以修改)
const PI = 3.14159;
// PI = 3; // 错误：不能修改常量值

// const对象的属性可以修改
const person = { name: "Alice", age: 30 };
person.age = 31; // 可以修改对象的属性
// person = {}; // 错误：不能重新赋值整个对象

数据类型

JavaScript 有8种数据类型：

基本数据类型（原始类型）：
- String（字符串）
- Number（数字）
- Boolean（布尔）
- Undefined（未定义）
- Null（空）
- Symbol（符号，ES6新增）
- BigInt（大整数，ES2020新增）
引用数据类型：
- Object（对象）：包括普通对象、数组、函数等

// String - 字符串
let str1 = "Hello";
let str2 = 'World';
let str3 = `Template: ${str1} ${str2}`; // 模板字符串

// Number - 数字
let num1 = 100;        // 整数
let num2 = 3.14;       // 浮点数
let num3 = 0xff;       // 十六进制
let num4 = 3e8;        // 科学计数法
let num5 = NaN;        // 非数字
let num6 = Infinity;   // 无穷大

// Boolean - 布尔值
let isActive = true;
let isLoading = false;

// Undefined - 未定义
let unknown;
console.log(unknown); // undefined

// Null - 空值
let empty = null;

// Symbol - 唯一标识符
let sym1 = Symbol('id');
let sym2 = Symbol('id');
console.log(sym1 === sym2); // false，即使描述相同也是唯一的

// BigInt - 大整数
let bigNumber = 9007199254740991n; // 用n结尾表示BigInt

// Object - 对象
let person = {
  name: "张三",
  age: 30,
  isStudent: false,
  greet: function() {
    return `你好，我是${this.name}`;
  }
};

// Array - 数组(也是Object的一种)
let colors = ["红", "绿", "蓝"];
let mixed = [1, "text", true, null, {key: "value"}, [1, 2]];

// Function - 函数(也是Object的一种)
function add(a, b) {
  return a + b;
}

// 箭头函数
const multiply = (a, b) => a * b;

类型检查与转换

// 使用typeof检查类型
console.log(typeof "Hello");     // "string"
console.log(typeof 123);         // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" (这是JS的一个历史遗留bug)
console.log(typeof {});          // "object"
console.log(typeof []);          // "object" (数组也是对象)
console.log(typeof function(){}); // "function"

// 类型转换
// 显式转换
let num = Number("123");     // 字符串转数字: 123
let str = String(456);       // 数字转字符串: "456"
let bool = Boolean(1);       // 转布尔值: true (0, "", null, undefined, NaN转为false，其他为true)

// 隐式转换
let result1 = "3" + 2;       // "32" (数字被转为字符串)
let result2 = "3" - 2;       // 1 (字符串被转为数字)
let result3 = "3" * "2";     // 6 (字符串被转为数字)

变量作用域

// 全局作用域
let globalVar = "我是全局变量";

function testScope() {
  // 函数作用域
  let functionVar = "我是函数变量";
  
  if(true) {
    // 块级作用域
    let blockVar = "我是块级变量(let)";
    var varInBlock = "我是用var声明的变量";
    console.log(globalVar);    // 可访问
    console.log(functionVar);  // 可访问
    console.log(blockVar);     // 可访问
  }
  
  console.log(globalVar);      // 可访问
  console.log(functionVar);    // 可访问
  // console.log(blockVar);    // 错误！不可访问
  console.log(varInBlock);     // 可访问，因为var没有块级作用域
}

testScope();
console.log(globalVar);        // 可访问
// console.log(functionVar);   // 错误！不可访问
// console.log(varInBlock);    // 错误！不可访问

解构赋值

// 数组解构
let [a, b, c] = [1, 2, 3];
console.log(a, b, c);  // 1 2 3

// 对象解构
let {name, age} = {name: "李四", age: 25};
console.log(name, age);  // "李四" 25

// 设置默认值
let [x = 0, y = 0] = [5];
console.log(x, y);  // 5 0

// 交换变量
let m = 10, n = 20;
[m, n] = [n, m];
console.log(m, n);  // 20 10

// 忽略某些值
let [first, , third] = [1, 2, 3];
console.log(first, third);  // 1 3

// 剩余参数
let [head, ...tail] = [1, 2, 3, 4];
console.log(head, tail);  // 1 [2, 3, 4]

运算符

JavaScript 提供了多种操作符用于执行不同类型的操作。

算术运算符

// 基本算术运算符
let sum = 10 + 5;      // 加法: 15
let diff = 10 - 5;     // 减法: 5
let product = 10 * 5;  // 乘法: 50
let quotient = 10 / 5; // 除法: 2
let remainder = 10 % 3;// 取余: 1
let exp = 2 ** 3;      // 幂运算: 8

// 自增和自减
let count = 5;
count++;               // 后置自增: count = 6
++count;               // 前置自增: count = 7
count--;               // 后置自减: count = 6
--count;               // 前置自减: count = 5

// 前置和后置的区别
let a = 5;
let b = a++;           // b = 5, a = 6，后置先赋值再自增
let c = 5;
let d = ++c;           // d = 6, c = 6，前置先自增再赋值

赋值运算符

// 基本赋值
let x = 10;

// 复合赋值
x += 5;                // 等同于 x = x + 5; 结果：15
x -= 3;                // 等同于 x = x - 3; 结果：12
x *= 2;                // 等同于 x = x * 2; 结果：24
x /= 4;                // 等同于 x = x / 4; 结果：6
x %= 4;                // 等同于 x = x % 4; 结果：2
x **= 2;               // 等同于 x = x ** 2; 结果：4

比较运算符

// 相等比较
console.log(5 == 5);        // true
console.log(5 == "5");      // true (类型自动转换)
console.log(5 === "5");     // false (严格相等，不进行类型转换)

// 不等比较
console.log(5 != 8);        // true
console.log(5 != "5");      // false (类型自动转换)
console.log(5 !== "5");     // true (严格不等，不进行类型转换)

// 大小比较
console.log(5 > 3);         // true
console.log(5 >= 5);        // true
console.log(5 < 10);        // true
console.log(5 <= 4);        // false

// 特殊比较
console.log(null == undefined);  // true
console.log(null === undefined); // false
console.log(NaN == NaN);         // false (NaN不等于任何值，包括自身)
console.log(NaN === NaN);        // false

逻辑运算符

// 逻辑与 (AND)
console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false

// 逻辑或 (OR)
console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

// 逻辑非 (NOT)
console.log(!true);          // false
console.log(!false);         // true

// 短路运算
console.log(false && someFunction()); // false，someFunction不会执行
console.log(true || someFunction());  // true，someFunction不会执行

// 逻辑运算符的返回值
console.log("Hello" && "World");     // "World" (返回最后一个真值)
console.log("" && "World");          // "" (返回第一个假值)
console.log("Hello" || "World");     // "Hello" (返回第一个真值)
console.log("" || "World");          // "World" (若第一个为假，返回第二个值)

条件（三元）运算符

// 条件表达式 ? 值1 : 值2
let age = 20;
let status = age >= 18 ? "成年" : "未成年";
console.log(status);  // "成年"

// 嵌套三元运算符
let score = 85;
let grade = score >= 90 ? "A" : (score >= 80 ? "B" : (score >= 70 ? "C" : "D"));
console.log(grade);   // "B"

其他运算符

// typeof运算符
console.log(typeof 42);           // "number"
console.log(typeof "hello");      // "string"

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

// in运算符 (检查属性是否存在)
let car = {make: "Toyota", model: "Corolla"};
console.log("make" in car);        // true
console.log("color" in car);       // false

// 空值合并运算符 (??) - ES2020
let user = null;
let displayName = user ?? "Guest"; // "Guest"

// 可选链运算符 (?.) - ES2020
let obj = {outer: {inner: {value: 42}}};
console.log(obj?.outer?.inner?.value); // 42
console.log(obj?.outer?.missing?.value); // undefined (不报错)

控制流

条件语句

// if语句
let temperature = 25;

if (temperature > 30) {
  console.log("天气炎热");
} else if (temperature > 20) {
  console.log("天气适宜");
} else {
  console.log("天气凉爽");
}

// switch语句
let day = "星期三";

switch (day) {
  case "星期一":
    console.log("开始工作");
    break;
  case "星期三":
    console.log("周中了");
    break;
  case "星期五":
    console.log("周末来临");
    break;
  default:
    console.log("普通的一天");
    break;
}

循环语句

// for循环
for (let i = 0; i < 5; i++) {
  console.log(`计数: ${i}`);
}

// while循环
let count = 0;
while (count < 5) {
  console.log(`while计数: ${count}`);
  count++;
}

// do...while循环
let num = 0;
do {
  console.log(`do-while计数: ${num}`);
  num++;
} while (num < 5);

// for...in循环 (用于对象)
let person = {name: "李华", age: 25, job: "工程师"};
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

// for...of循环 (用于可迭代对象)
let colors = ["红", "绿", "蓝"];
for (let color of colors) {
  console.log(color);
}

// 跳出循环
for (let i = 0; i < 10; i++) {
  if (i === 3) continue; // 跳过当前迭代
  if (i === 7) break;    // 结束整个循环
  console.log(i);
}

函数

函数声明与表达式

// 函数声明
function greet(name) {
  return `你好，${name}！`;
}
console.log(greet("小明")); // "你好，小明！"

// 函数表达式
const sayHello = function(name) {
  return `你好，${name}！`;
};
console.log(sayHello("小红")); // "你好，小红！"

// 箭头函数
const welcome = (name) => `欢迎，${name}！`;
console.log(welcome("小张")); // "欢迎，小张！"

// 函数参数
function add(a, b = 0) { // 设置默认参数
  return a + b;
}
console.log(add(5, 3)); // 8
console.log(add(5));    // 5 (b默认为0)

// 剩余参数
function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

作用域和闭包

// 闭包示例
function createCounter() {
  let count = 0;
  
  // 内部函数形成闭包，可以访问外部函数的变量
  return function() {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
// count变量在外部无法访问，但内部函数可以"记住"它

this关键字

// 在对象方法中
const user = {
  name: "张三",
  sayHi() {
    console.log(`你好，我是${this.name}`);
  }
};
user.sayHi(); // "你好，我是张三"

// 在全局函数中
function showThis() {
  console.log(this); // 在浏览器中是window对象
}
showThis();

// 在事件处理函数中
/* 
button.addEventListener('click', function() {
  console.log(this); // 指向触发事件的元素（button）
});
*/

// 箭头函数中
const obj = {
  name: "李四",
  regularFunction: function() {
    console.log(this.name); // "李四"
    
    // 箭头函数不绑定自己的this，而是继承外围作用域的this
    const arrowFunction = () => {
      console.log(this.name); // 仍然是"李四"
    };
    arrowFunction();
  }
};
obj.regularFunction();

对象和数组

对象基础

对象是JavaScript中的复合数据类型，用于存储多个相关数据和功能的集合。

// 对象字面量创建
const person = {
  firstName: "张",
  lastName: "三",
  age: 25,
  isStudent: false,
  
  // 对象方法
  fullName() {
    return this.firstName + this.lastName;
  }
};

// 访问对象属性
console.log(person.firstName);        // 点表示法：张
console.log(person["lastName"]);      // 方括号表示法：三
console.log(person.fullName());       // 调用方法：张三

// 添加新属性
person.email = "zhangsan@example.com";

// 修改属性
person.age = 26;

// 删除属性
delete person.isStudent;

// 检查属性是否存在
console.log("email" in person);           // true
console.log(person.hasOwnProperty("age")); // true

// 遍历对象
for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

// 获取所有键和值
const keys = Object.keys(person);     // ["firstName", "lastName", "age", "email", ...]
const values = Object.values(person); // ["张", "三", 26, "zhangsan@example.com", ...]
const entries = Object.entries(person); // [["firstName", "张"], ["lastName", "三"], ...]

对象方法和构造函数

// 构造函数
function Person(firstName, lastName, age) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  
  this.fullName = function() {
    return this.firstName + this.lastName;
  };
}

// 使用构造函数创建实例
const person1 = new Person("李", "四", 30);
const person2 = new Person("王", "五", 25);

console.log(person1.fullName()); // 李四
console.log(person2.age);        // 25

// Object.create()方法
const personProto = {
  greeting() {
    return `你好，我是${this.name}`;
  }
};

const student = Object.create(personProto);
student.name = "小明";
console.log(student.greeting()); // 你好，我是小明

数组详解

// 创建数组
let fruits = ["苹果", "香蕉", "橙子"];
let numbers = new Array(1, 2, 3, 4, 5);
let mixed = [1, "文本", true, {name: "对象"}, [1, 2]];

// 访问数组元素
console.log(fruits[0]);          // 苹果
console.log(fruits[fruits.length - 1]); // 橙子

// 修改数组元素
fruits[1] = "梨";
console.log(fruits);             // ["苹果", "梨", "橙子"]

// 基本数组方法
fruits.push("葡萄");             // 添加到末尾: ["苹果", "梨", "橙子", "葡萄"]
let lastFruit = fruits.pop();    // 移除末尾: lastFruit = "葡萄", fruits = ["苹果", "梨", "橙子"]
let firstFruit = fruits.shift(); // 移除开头: firstFruit = "苹果", fruits = ["梨", "橙子"]
fruits.unshift("草莓");          // 添加到开头: ["草莓", "梨", "橙子"]

// 查找元素
let index = fruits.indexOf("梨"); // 1
let includesOrange = fruits.includes("橙子"); // true

// 数组变换
let nums = [1, 2, 3, 4, 5];

// map - 返回新数组，每个元素都经过处理
let doubled = nums.map(num => num * 2); // [2, 4, 6, 8, 10]

// filter - 返回满足条件的元素组成的新数组
let evens = nums.filter(num => num % 2 === 0); // [2, 4]

// reduce - 将数组压缩为单个值
let sum = nums.reduce((total, num) => total + num, 0); // 15

// forEach - 遍历数组元素
nums.forEach(num => console.log(num)); // 依次打印: 1, 2, 3, 4, 5

// 数组排序
let letters = ["c", "a", "d", "b"];
letters.sort();                  // ["a", "b", "c", "d"]
nums.sort((a, b) => b - a);      // 降序: [5, 4, 3, 2, 1]

// 数组切片
let sliced = nums.slice(1, 3);   // [4, 3] (索引1到索引3之前的元素)
let removed = nums.splice(1, 2); // 从索引1开始移除2个元素，返回移除的元素

// 数组连接
let combined = [1, 2].concat([3, 4], [5]); // [1, 2, 3, 4, 5]
// 或者使用扩展运算符
let combined2 = [...[1, 2], ...[3, 4], ...[5]]; // [1, 2, 3, 4, 5]

// 展开多维数组
let flattened = [1, [2, [3, 4]]].flat(2); // [1, 2, 3, 4]

ES6+ 新特性

ES6（ECMAScript 2015）及后续版本引入了许多重要的JavaScript语言特性。

箭头函数详解

// 基本箭头函数
const add = (a, b) => a + b;

// 单个参数时可省略括号
const square = x => x * x;

// 多行函数体使用花括号
const greet = name => {
  const message = `你好，${name}！`;
  return message;
};

// 箭头函数与this
const person = {
  name: "张三",
  // 普通函数
  sayHiLater: function() {
    setTimeout(function() {
      console.log(`你好，我是${this.name}`); // this指向window，输出"你好，我是undefined"
    }, 1000);
  },
  // 箭头函数
  sayHiLaterArrow: function() {
    setTimeout(() => {
      console.log(`你好，我是${this.name}`); // this指向person，输出"你好，我是张三"
    }, 1000);
  }
};

模板字符串

// 基本用法
const name = "JavaScript";
const greeting = `Hello, ${name}!`;

// 多行字符串
const multiLine = `
  这是第一行
  这是第二行
  这是第三行
`;

// 表达式插值
const a = 10, b = 5;
const result = `${a} + ${b} = ${a + b}`;

// 标签模板
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    const value = values[i] || '';
    return `${result}${str}<span class="highlight">${value}</span>`;
  }, '');
}

const user = "张三";
const role = "管理员";
const html = highlight`用户 ${user} 是 ${role}`;
// 结果: "用户 <span class="highlight">张三</span> 是 <span class="highlight">管理员</span>"

解构赋值详解

// 数组解构的高级用法
const [first, ...rest] = [1, 2, 3, 4]; // first = 1, rest = [2, 3, 4]
const [a, , c] = [1, 2, 3];            // a = 1, c = 3, 跳过中间元素
const [x = 0, y = 0] = [];             // x = 0, y = 0, 提供默认值

// 对象解构的高级用法
const { name, age = 20 } = { name: "李四" }; // name = "李四", age = 20 (默认值)
const { name: fullName } = { name: "王五" }; // fullName = "王五" (属性重命名)
const { a: { b } } = { a: { b: 'nested' } }; // b = "nested" (嵌套解构)

// 函数参数解构
function printPersonInfo({ name, age = 18, city = "北京" }) {
  console.log(`${name}, ${age}岁, 来自${city}`);
}
printPersonInfo({ name: "赵六", age: 25 }); // "赵六, 25岁, 来自北京"

扩展运算符

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

// 函数参数展开
function sum(a, b, c) {
  return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, b: 3 }; // { a: 1, b: 3, c: 3 } (b被覆盖)

// 数组复制
const originalArray = [1, 2, 3];
const copyArray = [...originalArray]; // 创建新数组，而不是引用

// 对象复制
const originalObject = { a: 1, b: { c: 2 } };
const copyObject = { ...originalObject }; // 浅拷贝
// 注意：这只是浅拷贝，嵌套对象仍然是引用

类（Class）

// 基本类语法
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  // 实例方法
  sayHello() {
    return `你好，我是${this.name}，${this.age}岁`;
  }
  
  // 静态方法
  static createAnonymous() {
    return new Person("无名氏", 0);
  }
}

const person = new Person("张三", 30);
console.log(person.sayHello()); // "你好，我是张三，30岁"
const anonymous = Person.createAnonymous();

// 类继承
class Student extends Person {
  constructor(name, age, grade) {
    // 调用父类构造函数
    super(name, age);
    this.grade = grade;
  }
  
  // 覆盖父类方法
  sayHello() {
    return `${super.sayHello()}，我在${this.grade}年级`;
  }
  
  // 新增方法
  study() {
    return `${this.name}正在学习`;
  }
}

const student = new Student("小明", 15, "初三");
console.log(student.sayHello()); // "你好，我是小明，15岁，我在初三年级"

模块系统

// 导出 (math.js)
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

export default class Calculator {
  add(a, b) {
    return a + b;
  }
}

// 导入 (app.js)
import Calculator, { PI, add, multiply as mult } from './math.js';

console.log(PI);                // 3.14159
console.log(add(2, 3));         // 5
console.log(mult(2, 3));        // 6 (重命名为mult)

const calc = new Calculator();
console.log(calc.add(5, 3));    // 8

// 导入所有
import * as MathUtils from './math.js';
console.log(MathUtils.PI);      // 3.14159
console.log(MathUtils.add(2, 3)); // 5

异步编程

回调函数

// 传统回调函数处理异步
function fetchData(callback) {
  setTimeout(() => {
    const data = { name: "示例数据", timestamp: Date.now() };
    callback(null, data); // 第一个参数通常是错误，第二个是数据
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error("发生错误:", error);
    return;
  }
  console.log("数据:", data);
  
  // 回调地狱示例
  fetchData((error, moreData) => {
    if (error) {
      console.error("发生错误:", error);
      return;
    }
    console.log("更多数据:", moreData);
    
    fetchData((error, evenMoreData) => {
      // 嵌套更深...
    });
  });
});

Promise

// 创建Promise
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.3; // 70%成功率
      if (success) {
        resolve({ name: "示例数据", timestamp: Date.now() });
      } else {
        reject(new Error("无法获取数据"));
      }
    }, 1000);
  });
}

// 使用Promise
fetchData()
  .then(data => {
    console.log("数据:", data);
    return fetchData(); // 链式调用
  })
  .then(moreData => {
    console.log("更多数据:", moreData);
    return fetchData();
  })
  .then(evenMoreData => {
    console.log("更多更多数据:", evenMoreData);
  })
  .catch(error => {
    // 捕获链中任何一个环节的错误
    console.error("发生错误:", error);
  })
  .finally(() => {
    // 无论成功失败都会执行
    console.log("请求完成");
  });

// Promise组合
Promise.all([fetchData(), fetchData(), fetchData()])
  .then(resultsArray => {
    console.log("所有请求完成:", resultsArray);
  })
  .catch(error => {
    console.error("至少一个请求失败:", error);
  });

Promise.race([fetchData(), fetchData(), fetchData()])
  .then(firstResult => {
    console.log("最快的请求结果:", firstResult);
  })
  .catch(error => {
    console.error("最快的请求失败:", error);
  });

Async/Await

// 使用async/await简化Promise处理
async function fetchAllData() {
  try {
    // 等待Promise完成
    const data = await fetchData();
    console.log("第一组数据:", data);
    
    // 顺序执行，但代码像同步一样清晰
    const moreData = await fetchData();
    console.log("第二组数据:", moreData);
    
    // 并行执行
    const [result1, result2] = await Promise.all([
      fetchData(),
      fetchData()
    ]);
    console.log("并行结果:", result1, result2);
    
    return "所有数据获取成功";
  } catch (error) {
    // 捕获任何一步出现的错误
    console.error("处理数据时出错:", error);
    throw error; // 可以重新抛出
  }
}

// 调用async函数
fetchAllData()
  .then(message => console.log(message))
  .catch(error => console.error("最外层捕获:", error));

// 立即执行的异步函数
(async () => {
  try {
    const result = await fetchAllData();
    console.log(result);
  } catch (error) {
    console.error(error);
  }
})();

DOM操作与浏览器API

DOM选择与操作

// 选择元素
const heading = document.getElementById('main-heading');
const paragraphs = document.getElementsByTagName('p');
const specialElements = document.getElementsByClassName('special');
const firstButton = document.querySelector('button');
const allLinks = document.querySelectorAll('a.external');

// 修改内容
heading.textContent = '新标题';
heading.innerHTML = '新标题 <span>带HTML</span>';

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

// 自定义属性
img.setAttribute('data-category', 'nature');
const category = img.getAttribute('data-category');
// 或使用dataset API
img.dataset.category = 'nature';
const category2 = img.dataset.category;

// 修改样式
const element = document.querySelector('.highlight');
element.style.color = 'red';
element.style.fontSize = '20px';
element.style.display = 'none';
// 添加/移除/切换类
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('active'); // true

// 创建新元素
const newParagraph = document.createElement('p');
newParagraph.textContent = '这是新段落';
// 添加到DOM
document.body.appendChild(newParagraph);
// 插入到特定位置
const container = document.querySelector('.container');
container.insertBefore(newParagraph, container.firstChild);

// 移除元素
container.removeChild(newParagraph);
// 或者自我删除
newParagraph.remove();

事件处理

// 添加事件监听器
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
  console.log('按钮被点击了!');
  console.log('事件对象:', event);
  // 阻止默认行为
  event.preventDefault();
  // 阻止事件冒泡
  event.stopPropagation();
});

// 使用箭头函数和事件对象
const input = document.querySelector('input');
input.addEventListener('input', (e) => {
  console.log('输入值:', e.target.value);
});

// 移除事件监听器
function handleClick() {
  console.log('处理点击');
}
button.addEventListener('click', handleClick);
// 稍后移除
button.removeEventListener('click', handleClick);

// 事件委托（代理）
const list = document.querySelector('ul');
list.addEventListener('click', (event) => {
  // 检查实际点击的是哪个子元素
  if (event.target.tagName === 'LI') {
    console.log('点击了列表项:', event.target.textContent);
  }
});

// 常见事件类型
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM完全加载');
});
window.addEventListener('load', () => {
  console.log('页面完全加载，包括所有资源');
});
window.addEventListener('resize', () => {
  console.log('窗口大小改变');
});
document.addEventListener('scroll', () => {
  console.log('页面滚动');
});

Fetch API

// 基本GET请求
fetch('https://api.example.com/data')
  .then(response => {
    // 检查响应状态
    if (!response.ok) {
      throw new Error(`HTTP错误 ${response.status}`);
    }
    return response.json(); // 解析JSON响应
  })
  .then(data => {
    console.log('数据:', data);
  })
  .catch(error => {
    console.error('获取数据出错:', error);
  });

// POST请求发送JSON数据
fetch('https://api.example.com/create', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify({
    name: '新项目',
    description: '项目描述'
  })
})
.then(response => response.json())
.then(data => console.log('创建结果:', data))
.catch(error => console.error('错误:', error));

// 使用async/await和Fetch
async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    if (!response.ok) {
      throw new Error(`HTTP错误 ${response.status}`);
    }
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error('获取用户数据失败:', error);
    throw error;
  }
}

// 文件上传
async function uploadFile(file) {
  const formData = new FormData();
  formData.append('file', file);
  
  try {
    const response = await fetch('https://api.example.com/upload', {
      method: 'POST',
      body: formData
    });
    return await response.json();
  } catch (error) {
    console.error('文件上传失败:', error);
    throw error;
  }
}

// 请求中止
const controller = new AbortController();
const { signal } = controller;

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log('数据:', data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求被取消');
    } else {
      console.error('错误:', error);
    }
  });

// 5秒后中止请求
setTimeout(() => controller.abort(), 5000);

错误处理与调试

try…catch使用

// 基本try...catch
try {
  // 可能会抛出错误的代码
  const result = riskyOperation();
  console.log('操作成功:', result);
} catch (error) {
  // 处理错误
  console.error('捕获到错误:', error.message);
  // 可以根据错误类型进行不同处理
  if (error instanceof TypeError) {
    console.log('类型错误');
  } else if (error instanceof ReferenceError) {
    console.log('引用错误');
  }
} finally {
  // 无论try成功还是catch捕获到错误，都会执行
  console.log('清理资源');
}

// 异步函数中的错误处理
async function processData() {
  try {
    const data = await fetchData();
    const processed = await processResult(data);
    return processed;
  } catch (error) {
    console.error('处理数据时出错:', error);
    // 可以返回默认值或重新抛出错误
    return { error: true, message: error.message };
  }
}

// 自定义错误
class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

function validateUser(user) {
  if (!user.name) {
    throw new ValidationError('名称不能为空', 'name');
  }
  if (!user.email) {
    throw new ValidationError('邮箱不能为空', 'email');
  }
}

try {
  validateUser({ name: 'Alice' });
} catch (error) {
  if (error instanceof ValidationError) {
    console.log(`字段 ${error.field} 验证失败: ${error.message}`);
  } else {
    console.error('未知错误:', error);
  }
}

// 全局错误处理
window.addEventListener('error', (event) => {
  console.error('全局错误:', event.error);
  // 防止浏览器显示错误
  event.preventDefault();
});

// 未捕获的Promise拒绝
window.addEventListener('unhandledrejection', (event) => {
  console.warn('未处理的Promise拒绝:', event.reason);
  event.preventDefault();
});

调试技巧

// 断点
function complexFunction(a, b) {
  let result = a * 2;
  // 可以在开发工具中在此行设置断点
  result += b;
  return result * b;
}

// debugger语句 (临时断点)
function findBug(data) {
  let processed = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].value < 0) {
      debugger; // 代码执行将在此暂停（开发工具打开时）
      processed.push(data[i].value * -1);
    } else {
      processed.push(data[i].value);
    }
  }
  return processed;
}

// 控制台API
console.log('普通信息');
console.info('信息'); // 通常和log渲染相同
console.warn('警告'); // 通常显示黄色警告图标
console.error('错误'); // 通常显示红色错误图标
console.table([      // 以表格形式显示数组或对象
  { name: '张三', age: 25 },
  { name: '李四', age: 30 }
]);
console.group('分组标题');
console.log('分组内的消息1');
console.log('分组内的消息2');
console.groupEnd();

// 计时功能
console.time('操作耗时');
// 耗时操作...
for (let i = 0; i < 1000000; i++) {
  // 模拟耗时操作
}
console.timeEnd('操作耗时'); // 显示："操作耗时: 10ms"

// 跟踪函数调用
function a() { b(); }
function b() { c(); }
function c() { console.trace('函数调用堆栈'); }
a(); // 显示从a到b到c的调用堆栈

// 条件断点
// 在开发者工具中，可以设置条件断点，只有在满足特定条件时才暂停
// 例如，在循环中仅当i等于特定值时暂停