JavaScript参考手册

const person = {
    name: '张三',
    age: 25,
    city: '北京'
};

// Object.keys()
console.log(Object.keys(person)); // ['name', 'age', 'city']

// Object.values()
console.log(Object.values(person)); // ['张三', 25, '北京']

// Object.entries()
console.log(Object.entries(person)); 
// [['name', '张三'], ['age', 25], ['city', '北京']]

// Object.assign()
const newPerson = Object.assign({}, person, { age: 26, gender: '男' });
console.log(newPerson); 
// { name: '张三', age: 26, city: '北京', gender: '男' }

// Object.freeze()
Object.freeze(person);
person.age = 30; // 严格模式下会报错
console.log(person.age); // 25 (值未改变)

// Object.create()
const student = Object.create(person);
student.grade = 'A';
console.log(student.name); // '张三' (继承自person)
console.log(student.grade); // 'A'

// Object.defineProperty()
Object.defineProperty(person, 'country', {
    value: '中国',
    writable: false,
    enumerable: true,
    configurable: false
});
console.log(person.country); // '中国'

// Object.hasOwn()
console.log(Object.hasOwn(person, 'name')); // true
console.log(Object.hasOwn(person, 'toString')); // false (继承的方法)

// 数学常数
console.log(Math.PI); // 3.141592653589793
console.log(Math.E);  // 2.718281828459045

// 随机数
console.log(Math.random()); // 0.123456789 (随机值)
console.log(Math.floor(Math.random() * 100) + 1); // 1-100的随机整数

// 取整
console.log(Math.floor(3.7)); // 3
console.log(Math.ceil(3.2));  // 4
console.log(Math.round(3.5)); // 4

// 最大值和最小值
console.log(Math.max(1, 2, 3, 4, 5)); // 5
console.log(Math.min(1, 2, 3, 4, 5)); // 1

// 幂运算和平方根
console.log(Math.pow(2, 3)); // 8
console.log(Math.sqrt(16));   // 4

// 三角函数 (参数为弧度)
console.log(Math.sin(Math.PI / 2)); // 1
console.log(Math.cos(Math.PI));     // -1
console.log(Math.tan(Math.PI / 4)); // 1

// 对数和指数
console.log(Math.log(Math.E)); // 1
console.log(Math.exp(1));      // 2.718281828459045

// 实际应用：生成随机颜色
function getRandomColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256);
    const b = Math.floor(Math.random() * 256);
    return `rgb(${r}, ${g}, ${b})`;
}

console.log(getRandomColor()); // rgb(123, 45, 67)

const person = {
    name: '张三',
    age: 25,
    hobbies: ['读书', '编程', '运动'],
    address: {
        city: '北京',
        country: '中国'
    },
    isStudent: false,
    birthDate: new Date('1998-05-15'),
    // 函数不会被序列化
    sayHello: function() {
        return `你好，我是${this.name}`;
    }
};

// JSON.stringify() - 序列化为JSON字符串
const jsonString = JSON.stringify(person);
console.log(jsonString);
// {"name":"张三","age":25,"hobbies":["读书","编程","运动"],"address":{"city":"北京","country":"中国"},"isStudent":false,"birthDate":"1998-05-15T00:00:00.000Z"}

// 使用replacer函数
const filteredJson = JSON.stringify(person, (key, value) => {
    if (key === 'age') return undefined; // 过滤age属性
    return value;
});
console.log(filteredJson);
// {"name":"张三","hobbies":["读书","编程","运动"],"address":{"city":"北京","country":"中国"},"isStudent":false,"birthDate":"1998-05-15T00:00:00.000Z"}

// 格式化输出
const prettyJson = JSON.stringify(person, null, 2);
console.log(prettyJson);
/*
{
  "name": "张三",
  "age": 25,
  "hobbies": [
    "读书",
    "编程",
    "运动"
  ],
  ...
}
*/

// JSON.parse() - 解析JSON字符串
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject.name); // '张三'
console.log(parsedObject.hobbies); // ['读书', '编程', '运动']

// 使用reviver函数
const revivedObject = JSON.parse(jsonString, (key, value) => {
    if (key === 'birthDate') return new Date(value);
    return value;
});
console.log(revivedObject.birthDate instanceof Date); // true

// 错误处理
try {
    const invalidJson = '{"name": "张三", "age": }';
    const result = JSON.parse(invalidJson);
} catch (error) {
    console.error('JSON解析错误:', error.message);
}

const numbers = [1, 2, 3, 4, 5, 6];
const fruits = ['苹果', '香蕉', '橙子', '葡萄'];
const mixed = [1, 'hello', true, { name: '张三' }, [7, 8, 9]];

// 基本操作
console.log(fruits.join(', ')); // '苹果, 香蕉, 橙子, 葡萄'
console.log(fruits.includes('香蕉')); // true
console.log(fruits.indexOf('橙子')); // 2

// 添加/删除元素
fruits.push('芒果');
console.log(fruits); // ['苹果', '香蕉', '橙子', '葡萄', '芒果']

const lastFruit = fruits.pop();
console.log(lastFruit); // '芒果'
console.log(fruits); // ['苹果', '香蕉', '橙子', '葡萄']

fruits.unshift('草莓');
console.log(fruits); // ['草莓', '苹果', '香蕉', '橙子', '葡萄']

const firstFruit = fruits.shift();
console.log(firstFruit); // '草莓'
console.log(fruits); // ['苹果', '香蕉', '橙子', '葡萄']

// 切片和拼接
const sliced = fruits.slice(1, 3);
console.log(sliced); // ['香蕉', '橙子']

fruits.splice(1, 2, '桃子', '梨子');
console.log(fruits); // ['苹果', '桃子', '梨子', '葡萄']

// 使用map转换数组
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10, 12]

// 使用filter过滤数组
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4, 6]

// 使用reduce计算总和
const sum = numbers.reduce((total, n) => total + n, 0);
console.log(sum); // 21

// 使用find查找元素
const firstEven = numbers.find(n => n % 2 === 0);
console.log(firstEven); // 2

// 使用some检查条件
const hasEven = numbers.some(n => n % 2 === 0);
console.log(hasEven); // true

// 使用every检查所有元素
const allPositive = numbers.every(n => n > 0);
console.log(allPositive); // true

// 扁平化数组
const nested = [1, [2, [3, [4]]]];
console.log(nested.flat()); // [1, 2, [3, [4]]]
console.log(nested.flat(2)); // [1, 2, 3, [4]]
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]

// flatMap示例
const sentences = ['Hello world', 'JavaScript is awesome'];
const words = sentences.flatMap(sentence => sentence.split(' '));
console.log(words); // ['Hello', 'world', 'JavaScript', 'is', 'awesome']

// 链式调用
const result = numbers
    .filter(n => n % 2 === 0)
    .map(n => n * 3)
    .reduce((sum, n) => sum + n, 0);
    
console.log(result); // 36 (2*3 + 4*3 + 6*3)

// 排序
const randomNumbers = [3, 1, 4, 1, 5, 9, 2, 6];
console.log(randomNumbers.sort()); // [1, 1, 2, 3, 4, 5, 6, 9]
console.log(randomNumbers.sort((a, b) => b - a)); // [9, 6, 5, 4, 3, 2, 1, 1]

// 反转
console.log(fruits.reverse()); // ['葡萄', '梨子', '桃子', '苹果']

const text = '  Hello, JavaScript World!  ';
const email = 'user@example.com';
const phone = '13800138000';
const multiline = `第一行
第二行
第三行`;

// 基本操作
console.log(text.length); // 28
console.log(text.trim()); // 'Hello, JavaScript World!'
console.log(text.trimStart()); // 'Hello, JavaScript World!  '
console.log(text.trimEnd()); // '  Hello, JavaScript World!'
console.log(text.toUpperCase()); // '  HELLO, JAVASCRIPT WORLD!  '
console.log(text.toLowerCase()); // '  hello, javascript world!  '

// 搜索和提取
console.log(text.indexOf('JavaScript')); // 9
console.log(text.lastIndexOf(' ')); // 24
console.log(text.charAt(5)); // 'H'
console.log(text.charCodeAt(5)); // 72 (H的Unicode)
console.log(text.slice(2, 7)); // 'Hello'
console.log(text.substring(2, 7)); // 'Hello'
console.log(text.substr(2, 5)); // 'Hello'

// 替换和分割
console.log(text.replace('JavaScript', 'JS')); // '  Hello, JS World!  '
console.log(text.replaceAll(' ', '-')); // '--Hello,-JavaScript-World!--'
console.log(text.split(' ')); // ['', '', 'Hello,', 'JavaScript', 'World!', '', '']

// 现代方法
console.log(text.includes('JavaScript')); // true
console.log(text.startsWith('  Hello')); // true
console.log(text.endsWith('World!  ')); // true

// 填充和重复
console.log('5'.padStart(3, '0')); // '005'
console.log('5'.padEnd(3, '0')); // '500'
console.log('Hi'.repeat(3)); // 'HiHiHi'

// 模板字符串 (ES6)
const name = '张三';
const age = 25;
const message = `我叫${name}，今年${age}岁。`;
console.log(message); // '我叫张三，今年25岁。'

// 多行字符串
console.log(multiline);
/*
第一行
第二行
第三行
*/

// 实际应用：验证邮箱
function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email.trim().toLowerCase());
}

console.log(isValidEmail('USER@EXAMPLE.COM')); // true
console.log(isValidEmail('invalid-email')); // false

// 实际应用：格式化手机号
function formatPhoneNumber(phone) {
    const cleaned = phone.replace(/\D/g, '');
    const match = cleaned.match(/^(\d{3})(\d{4})(\d{4})$/);
    if (match) {
        return `${match[1]} ${match[2]} ${match[3]}`;
    }
    return phone;
}

console.log(formatPhoneNumber('13800138000')); // '138 0013 8000'

// 实际应用：提取URL参数
function getUrlParams(url) {
    const params = {};
    const urlObj = new URL(url);
    urlObj.searchParams.forEach((value, key) => {
        params[key] = value;
    });
    return params;
}

const testUrl = 'https://example.com?name=张三&age=25&city=北京';
console.log(getUrlParams(testUrl)); // { name: '张三', age: '25', city: '北京' }

// 解构赋值
const person = { name: '张三', age: 25, city: '北京' };
const { name, age, country = '中国' } = person;
console.log(name, age, country); // 张三 25 中国

// 数组解构
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first, second, rest); // 1 2 [3,4,5]

// 函数参数解构
function printPerson({ name, age = 18 }) {
    console.log(`${name} 今年 ${age} 岁`);
}
printPerson({ name: '李四' }); // 李四 今年 18 岁

// 展开运算符
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1,2,3,4,5,6]

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const merged = { ...obj1, ...obj2, e: 5 };
console.log(merged); // {a:1,b:2,c:3,d:4,e:5}

// 箭头函数
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
const evens = numbers.filter(n => n % 2 === 0);
console.log(doubled, evens); // [2,4,6,8,10] [2,4]

// this绑定示例
const counter = {
    count: 0,
    increment: function() {
        setInterval(() => {
            // 箭头函数继承外层this
            this.count++;
            console.log(this.count);
        }, 1000);
    }
};
// counter.increment();

// 类
class Person {
    // 类字段 (ES2022)
    #privateField = '私有字段';
    
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    // 实例方法
    greet() {
        return `你好，我是${this.name}，今年${this.age}岁`;
    }
    
    // 静态方法
    static isAdult(age) {
        return age >= 18;
    }
    
    // 私有方法 (ES2022)
    #privateMethod() {
        return '这是私有方法';
    }
    
    // Getter
    get description() {
        return `${this.name} (${this.age}岁)`;
    }
    
    // Setter
    set updateAge(newAge) {
        if (newAge > 0) {
            this.age = newAge;
        }
    }
}

const john = new Person('约翰', 30);
console.log(john.greet()); // 你好，我是约翰，今年30岁
console.log(Person.isAdult(20)); // true
console.log(john.description); // 约翰 (30岁)
john.updateAge = 31;
console.log(john.age); // 31

// 继承
class Student extends Person {
    constructor(name, age, grade) {
        super(name, age);
        this.grade = grade;
    }
    
    study() {
        return `${this.name}正在学习`;
    }
}

const student = new Student('小明', 20, 'A');
console.log(student.greet()); // 你好，我是小明，今年20岁
console.log(student.study()); // 小明正在学习

// Promise
const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            Math.random() > 0.3 ? 
                resolve('数据获取成功') : 
                reject('数据获取失败');
        }, 1000);
    });
};

// async/await
async function getData() {
    try {
        const data = await fetchData();
        console.log(data);
        return data;
    } catch (error) {
        console.error('错误:', error);
        throw error;
    }
}

getData();

// 可选链和空值合并
const user = {
    profile: {
        name: '张三',
        address: {
            city: '北京'
        }
    }
};

console.log(user.profile?.name); // '张三'
console.log(user.profile?.age ?? '未知'); // '未知'
console.log(user.settings?.theme ?? 'default'); // 'default'

// BigInt
const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber + 1n); // 1234567890123456789012345678901234567891n

// 全局This
console.log(globalThis === window); // 在浏览器中为true
console.log(globalThis === global); // 在Node.js中为true

// 动态导入
async function loadModule() {
    const module = await import('./utils.js');
    return module.default;
}

// 顶层await (ES2022)
// const data = await fetch('/api/data').then(r => r.json());

// 创建Promise
const fetchUserData = (userId) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId > 0) {
                resolve({ id: userId, name: '张三', age: 25 });
            } else {
                reject(new Error('用户ID无效'));
            }
        }, 1000);
    });
};

// 使用Promise
fetchUserData(1)
    .then(user => {
        console.log('用户数据:', user);
        return user.age;
    })
    .then(age => {
        console.log('用户年龄:', age);
    })
    .catch(error => {
        console.error('错误:', error.message);
    })
    .finally(() => {
        console.log('请求完成');
    });

// async/await
async function getUserInfo(userId) {
    try {
        console.log('开始获取用户信息...');
        const user = await fetchUserData(userId);
        console.log('用户信息:', user);
        return user;
    } catch (error) {
        console.error('获取用户信息失败:', error.message);
        throw error;
    } finally {
        console.log('用户信息获取过程结束');
    }
}

getUserInfo(1);

// Promise.all - 并行执行多个异步操作
async function fetchMultipleUsers() {
    try {
        const [user1, user2, user3] = await Promise.all([
            fetchUserData(1),
            fetchUserData(2),
            fetchUserData(3)
        ]);
        console.log('所有用户数据:', user1, user2, user3);
        return [user1, user2, user3];
    } catch (error) {
        console.error('获取用户数据失败:', error);
    }
}

// Promise.allSettled - 等待所有Promise完成
async function fetchUsersSettled() {
    const results = await Promise.allSettled([
        fetchUserData(1),
        fetchUserData(-1), // 这个会失败
        fetchUserData(3)
    ]);
    
    const successfulUsers = results
        .filter(result => result.status === 'fulfilled')
        .map(result => result.value);
    
    const errors = results
        .filter(result => result.status === 'rejected')
        .map(result => result.reason);
    
    console.log('成功获取的用户:', successfulUsers);
    console.log('错误:', errors);
}

// Promise.race - 第一个完成的结果
async function fetchWithTimeout() {
    const timeout = new Promise((_, reject) => {
        setTimeout(() => reject(new Error('请求超时')), 500);
    });
    
    try {
        const user = await Promise.race([
            fetchUserData(1),
            timeout
        ]);
        console.log('获取的用户:', user);
    } catch (error) {
        console.error('错误:', error.message);
    }
}

// Promise.any - 第一个成功的结果
async function fetchFirstSuccessful() {
    const promises = [
        fetchUserData(-1), // 失败
        fetchUserData(2),  // 成功
        fetchUserData(3)   // 成功
    ];
    
    try {
        const user = await Promise.any(promises);
        console.log('第一个成功的用户:', user);
    } catch (error) {
        console.error('所有请求都失败了:', error);
    }
}

// 实际应用：顺序执行异步操作
async function processUserData(userId) {
    try {
        // 1. 获取用户数据
        const user = await fetchUserData(userId);
        
        // 2. 获取用户订单
        const orders = await fetchUserOrders(user.id);
        
        // 3. 获取用户地址
        const addresses = await fetchUserAddresses(user.id);
        
        return {
            ...user,
            orders,
            addresses
        };
    } catch (error) {
        console.error('处理用户数据失败:', error);
        throw error;
    }
}

// 模拟其他API函数
function fetchUserOrders(userId) {
    return Promise.resolve([
        { id: 1, product: '手机', price: 2999 },
        { id: 2, product: '耳机', price: 299 }
    ]);
}

function fetchUserAddresses(userId) {
    return Promise.resolve([
        { type: '家', address: '北京市朝阳区' },
        { type: '公司', address: '北京市海淀区' }
    ]);
}

// 使用示例
processUserData(1).then(userData => {
    console.log('完整的用户数据:', userData);
});

// 错误处理最佳实践
async function robustAsyncFunction() {
    try {
        const result = await someAsyncOperation();
        return result;
    } catch (error) {
        // 记录错误
        console.error('异步操作失败:', error);
        
        // 根据错误类型处理
        if (error.name === 'NetworkError') {
            // 重试逻辑
            return retryOperation();
        } else if (error.name === 'ValidationError') {
            // 返回默认值
            return getDefaultValue();
        } else {
            // 重新抛出未知错误
            throw error;
        }
    }
}