JavaScript 核心知识系列：从 ES6 到现代开发

// ❌ 不要再使用 var
var x = 1;    // 函数作用域，存在变量提升，可重复声明

// ✅ let：可变的块级作用域变量
let count = 0;
count = 1;    // ✅ 可以重新赋值

// ✅ const：不可变的块级作用域常量
const API_URL = 'https://api.example.com';
// API_URL = 'other';  // ❌ TypeError: Assignment to constant variable

// 但 const 对象/数组的内部是可变的！
const user = { name: 'Alice' };
user.name = 'Bob';   // ✅ 修改属性是允许的
// user = {};         // ❌ 重新赋值不允许

console.log(a); // undefined（var 提升）
var a = 1;

console.log(b); // ❌ ReferenceError（TDZ）
let b = 2;

// 1. 全局作用域
const globalVar = '全局';

// 2. 函数作用域
function foo() {
  const funcVar = '函数内';
  console.log(globalVar); // ✅ 可以访问
}
// console.log(funcVar); // ❌ ReferenceError

// 3. 块级作用域（ES6 新增）
if (true) {
  const blockVar = '块内';
  let blockLet = '也是块内';
}
// console.log(blockVar); // ❌ ReferenceError

// 传统函数
function add(a, b) { return a + b; }

// 箭头函数
const add = (a, b) => a + b;        // 单行隐式返回
const greet = name => `Hello, ${name}`;  // 单参数省略括号
const noArgs = () => console.log('Hi');  // 无参数需要空括号

// 多行需要 {} 和显式 return
const complex = (a, b) => {
  const result = a * b;
  return result > 100 ? result : 0;
};

// ⚠️ 箭头函数没有自己的 this
const obj = {
  name: 'Alice',
  greet: function() {
    console.log(this.name); // 'Alice'
  },
  greetArrow: () => {
    console.log(this.name); // undefined（this 指向外层）
  }
};

const name = 'Alice';
const age = 25;

// 旧方式
const old = 'My name is ' + name + ', I\'m ' + age + ' years old.';

// 模板字符串
const modern = `My name is ${name}, I'm ${age} years old.`;

// 多行字符串
const html = `
  <div class="card">
    <h2>${name}</h2>
    <p>Age: ${age}</p>
  </div>
`;

// 标签模板
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) =>
    result + str + (values[i] ? `<mark>${values[i]}</mark>` : ''), '');
}
highlight`Hello, ${name}! You are ${age}.`;
// "Hello, <mark>Alice</mark>! You are <mark>25</mark>."

// 对象解构
const user = { name: 'Alice', age: 25, city: 'Beijing' };
const { name, age, city: location = 'Unknown' } = user;
// name='Alice', age=25, location='Beijing'（重命名+默认值）

// 嵌套解构
const response = {
  data: { user: { profile: { avatar: 'url', bio: 'hello' } } }
};
const { data: { user: { profile: { avatar, bio } } } } = response;

// 数组解构
const colors = ['red', 'green', 'blue'];
const [first, , third] = colors;  // first='red', third='blue'
const [head, ...rest] = colors;   // head='red', rest=['green','blue']

// 函数参数直接解构
function display({ name, age, city = 'Unknown' }) {
  console.log(`${name}, ${age}, ${city}`);
}
display(user); // "Alice, 25, Beijing"

// 交换变量（无需临时变量）
let a = 1, b = 2;
[a, b] = [b, a]; // a=2, b=1

// 数组展开
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];  // [1,2,3,4,5,6]
const copy = [...arr1];              // 浅拷贝

// 对象展开
const defaults = { theme: 'light', lang: 'zh' };
const config = { ...defaults, lang: 'en' };  // lang 被覆盖
// { theme: 'light', lang: 'en' }

// 函数参数展开
const numbers = [5, 12, 8, 130, 44];
Math.max(...numbers);  // 130（替代 apply）

// 异步函数：返回 Promise
async function loadUserData(id) {
  try {
    const user = await fetchUser(id);
    const posts = await fetchPosts(user.id);    // 串行
    return { user, posts };
  } catch (error) {
    console.error('Load failed:', error.message);
    throw error;  // 重新抛出
  }
}

// 并行请求
async function loadDashboard() {
  const [user, stats, notifications] = await Promise.all([
    fetchUser(1),
    fetchStats(),
    fetchNotifications()
  ]);
  return { user, stats, notifications };
}

// 顶层 await（ES2022，ESM 模块中）
// const config = await fetch('/api/config').then(r => r.json());

// 错误处理模式
const [error, data] = await fetchUser(1)
  .then(data => [null, data])
  .catch(err => [err, null]);
if (error) { /* 处理错误 */ }

// ===== 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 function greet(name) {
  return `Hello, ${name}!`;
}

// ===== app.js =====
// 命名导入
import { add, multiply, PI } from './math.js';
// 重命名
import { add as sum } from './math.js';
// 全部导入
import * as MathUtils from './math.js';
// 默认导入
import greet from './math.js';
// 混合导入
import greet, { add, PI } from './math.js';
// 动态导入（返回 Promise）
const module = await import('./math.js');

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// 输出顺序：1 → 4 → 3 → 2

// 更复杂的例子
console.log('start');

setTimeout(() => {
  console.log('timeout1');
  Promise.resolve().then(() => console.log('promise in timeout'));
}, 0);

Promise.resolve()
  .then(() => console.log('promise1'))
  .then(() => console.log('promise2'));

console.log('end');

// 输出：
// start → end → promise1 → promise2 → timeout1 → promise in timeout

// JavaScript 的继承基于原型链
const arr = [1, 2, 3];
// arr → Array.prototype → Object.prototype → null

arr.push(4);     // 继承自 Array.prototype
arr.toString();  // 继承自 Object.prototype

// 原型链查找
const obj = { a: 1 };
console.log(obj.hasOwnProperty('a')); // true（自己的属性）
console.log(obj.hasOwnProperty('toString')); // false（继承的）
console.log('toString' in obj); // true