JavaScript 完全教程

// 变量声明 let name = '张三'; const age = 25; var isStudent = true; // 数据类型 let number = 42; // 数字 let string = 'Hello'; // 字符串 let boolean = true; // 布尔值 let array = [1, 2, 3]; // 数组 let object = { // 对象 name: '李四', age: 30 }; let nullValue = null; // null let undefinedValue; // undefined // 类型检查 console.log(typeof number); // "number" console.log(typeof string); // "string" console.log(typeof boolean); // "boolean" console.log(typeof array); // "object" console.log(typeof object); // "object" console.log(typeof nullValue); // "object" console.log(typeof undefinedValue); // "undefined"

// 算术运算符 let a = 10; let b = 5; console.log(a + b); // 15 console.log(a - b); // 5 console.log(a * b); // 50 console.log(a / b); // 2 console.log(a % b); // 0 // 比较运算符 console.log(a > b); // true console.log(a < b); // false console.log(a >= b); // true console.log(a <= b); // false console.log(a === b); // false console.log(a !== b); // true // 逻辑运算符 let x = true; let y = false; console.log(x && y); // false console.log(x || y); // true console.log(!x); // false // 赋值运算符 let c = 10; c += 5; // c = c + 5 c -= 3; // c = c - 3 c *= 2; // c = c * 2 c /= 4; // c = c / 4

// 函数声明 function greet(name) { return `Hello, ${name}!`; } // 函数表达式 const add = function(a, b) { return a + b; }; // 箭头函数 const multiply = (a, b) => a * b; // 默认参数 function createUser(name, age = 18) { return { name, age }; } // 剩余参数 function sum(...numbers) { return numbers.reduce((total, num) => total + num, 0); } // 函数调用 console.log(greet('张三')); // "Hello, 张三!" console.log(add(5, 3)); // 8 console.log(multiply(4, 6)); // 24 console.log(createUser('李四')); // { name: '李四', age: 18 } console.log(sum(1, 2, 3, 4, 5)); // 15

// 全局作用域 let globalVar = '全局变量'; function outer() { // 函数作用域 let outerVar = '外部变量'; function inner() { // 内部函数作用域 let innerVar = '内部变量'; console.log(globalVar); // 可以访问 console.log(outerVar); // 可以访问 console.log(innerVar); // 可以访问 } inner(); // console.log(innerVar); // 错误：无法访问 } // 闭包示例 function createCounter() { let count = 0; return { increment() { count++; return count; }, decrement() { count--; return count; }, getCount() { return count; } }; } const counter = createCounter(); console.log(counter.increment()); // 1 console.log(counter.increment()); // 2 console.log(counter.decrement()); // 1 console.log(counter.getCount()); // 1

// 对象创建 const person = { name: '张三', age: 25, sayHello() { console.log(`你好，我是${this.name}`); } }; // 对象属性访问 console.log(person.name); // "张三" console.log(person['age']); // 25 person.sayHello(); // "你好，我是张三" // 对象属性修改 person.age = 26; person['name'] = '李四'; // 对象属性删除 delete person.age; // 对象遍历 for (let key in person) { console.log(`${key}: ${person[key]}`); } // 对象方法 const keys = Object.keys(person); const values = Object.values(person); const entries = Object.entries(person); // 对象合并 const newPerson = { ...person, gender: '男', job: '工程师' }; // 对象解构 const { name, age } = person;

// 数组创建 const numbers = [1, 2, 3, 4, 5]; const fruits = ['苹果', '香蕉', '橙子']; // 数组访问 console.log(numbers[0]); // 1 console.log(fruits[1]); // "香蕉" // 数组修改 numbers[0] = 10; fruits.push('葡萄'); // 末尾添加 fruits.unshift('梨'); // 开头添加 fruits.pop(); // 删除末尾 fruits.shift(); // 删除开头 // 数组遍历 numbers.forEach(num => console.log(num)); for (let fruit of fruits) { console.log(fruit); } // 数组方法 const doubled = numbers.map(num => num * 2); const even = numbers.filter(num => num % 2 === 0); const sum = numbers.reduce((total, num) => total + num, 0); const hasApple = fruits.includes('苹果'); // 数组解构 const [first, second, ...rest] = numbers; // 数组排序 const sorted = numbers.sort((a, b) => a - b); const reversed = [...numbers].reverse();

// Promise 创建 const promise = new Promise((resolve, reject) => { setTimeout(() => { const success = true; if (success) { resolve('操作成功'); } else { reject('操作失败'); } }, 1000); }); // Promise 使用 promise .then(result => { console.log(result); return '继续处理'; }) .then(result => { console.log(result); }) .catch(error => { console.error(error); }) .finally(() => { console.log('完成'); }); // Promise 静态方法 Promise.all([ Promise.resolve(1), Promise.resolve(2), Promise.resolve(3) ]).then(values => { console.log(values); // [1, 2, 3] }); Promise.race([ new Promise(resolve => setTimeout(() => resolve(1), 1000)), new Promise(resolve => setTimeout(() => resolve(2), 500)) ]).then(value => { console.log(value); // 2 });

// 异步函数 async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); return data; } catch (error) { console.error('获取数据失败:', error); throw error; } } // 使用异步函数 async function processData() { try { const data = await fetchData(); console.log('数据:', data); return '处理完成'; } catch (error) { console.error('处理失败:', error); } } // 并行执行 async function parallelTasks() { const [result1, result2] = await Promise.all([ fetchData(), fetchData() ]); console.log(result1, result2); } // 错误处理 async function handleErrors() { try { await fetchData(); } catch (error) { if (error instanceof TypeError) { console.error('类型错误:', error); } else { console.error('其他错误:', error); } } }

// 数组解构 const [a, b, c] = [1, 2, 3]; console.log(a, b, c); // 1 2 3 // 对象解构 const { name, age } = { name: '张三', age: 25 }; console.log(name, age); // "张三" 25 // 默认值 const [x = 0, y = 0] = [1]; console.log(x, y); // 1 0 // 嵌套解构 const { user: { name: userName, address: { city } } } = { user: { name: '李四', address: { city: '北京' } } }; console.log(userName, city); // "李四" "北京" // 剩余参数 const [first, ...rest] = [1, 2, 3, 4, 5]; console.log(first, rest); // 1 [2, 3, 4, 5]

// 类定义 class Person { constructor(name, age) { this.name = name; this.age = age; } sayHello() { console.log(`你好，我是${this.name}`); } static create(name, age) { return new Person(name, age); } } // 继承 class Student extends Person { constructor(name, age, grade) { super(name, age); this.grade = grade; } study() { console.log(`${this.name}正在学习`); } } // 模块导出 // person.js export class Person { // ... } export function createPerson(name, age) { return new Person(name, age); } // 模块导入 // main.js import { Person, createPerson } from './person.js'; // 默认导出 // config.js export default { apiUrl: 'https://api.example.com', timeout: 5000 }; // 导入默认导出 import config from './config.js';