JavaScript 入门 + 进阶训练

// 方式一：Node.js 或浏览器控制台直接敲
console.log("你好，JavaScript！");
console.log("2 + 3 =", 2 + 3);

// 方式二：浏览器里操作页面
// document.getElementById("app").textContent = "Hello";

// 方式三：写进 html 的 <script> 标签由浏览器执行
// <script>alert("hi")</script>

let count = 1;
count = 2;                 // OK，let 可改

const PI = 3.14;
// PI = 3;                 // 报错：const 不能重新赋值（但对象内部属性可改）

if (true) {
  let x = 10;
  var y = 20;              // var 不受块限制
}
// console.log(x);        // 报错：x 不在作用域
console.log(y);           // 20（var 泄漏到外层，坑）

// 暂时性死区：声明前访问会报错
// console.log(z);        // ReferenceError
let z = 5;

console.log(typeof 42);          // "number"
console.log(typeof "hi");        // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"（历史 bug！null 不是对象）
console.log(typeof []);          // "object"（数组也是对象）
console.log(typeof function(){});// "function"
console.log(typeof Symbol());    // "symbol"

// 数组/对象判断用 Array.isArray
console.log(Array.isArray([]));  // true

console.log(0 == false);     // true（都转成 0）← 反直觉
console.log(0 === false);    // false（类型不同）← 用这个
console.log("" == 0);        // true  ← 坑
console.log("" === 0);       // false
console.log(null == undefined); // true（特例）
console.log(null === undefined); // false

// 正确的比较姿势
console.log(Number("5") === 5);   // true
console.log("5" === String(5));   // true

let n = 7;
if (n % 2 === 0) console.log("偶数");
else console.log("奇数");

// for 循环
let sum = 0;
for (let i = 1; i <= 100; i++) sum += i;
console.log("1..100 和 =", sum);

// for...of 遍历数组（推荐）
const arr = [3, 1, 4];
for (const x of arr) console.log(x);

// for...in 遍历对象键
const obj = { a: 1, b: 2 };
for (const k in obj) console.log(k, obj[k]);

// switch
const grade = "B";
switch (grade) {
  case "A": console.log("优秀"); break;
  case "B": console.log("良好"); break;
  default:  console.log("其他");
}

// 函数声明（会提升）
function add(a, b) { return a + b; }

// 函数表达式
const mul = function (a, b) { return a * b; };

// 箭头函数
const square = x => x * x;                 // 单参数可省括号，单表达式省 return
const sum = (a, b) => a + b;

// 默认参数 + 剩余参数
function greet(name = "匿名", ...tags) {
  console.log(name, tags);
}
greet("小明", "vip", "new");   // 小明 [ 'vip', 'new' ]

const nums = [1, 2, 3, 4, 5];

// map：每个元素变换，返回新数组（不改原数组）
const doubled = nums.map(x => x * 2);     // [2,4,6,8,10]

// filter：按条件筛选
const evens = nums.filter(x => x % 2 === 0); // [2,4]

// reduce：累积成单个值
const total = nums.reduce((acc, x) => acc + x, 0); // 15
const max = nums.reduce((a, b) => a > b ? a : b);

// forEach：仅遍历副作用，无返回值
nums.forEach(x => console.log(x));

console.log(doubled, evens, total, max);

// 属性简写 + 方法简写
const name = "小明", age = 18;
const user = { name, age, sayHi() { console.log(this.name); } };

// 解构对象
const { name: n, age: a } = user;
console.log(n, a);            // 小明 18

// 解构数组
const [first, , third] = [10, 20, 30];
console.log(first, third);    // 10 30（跳过第二个）

// 默认值 + 剩余
const { x = 0, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest);         // 1 { y: 2, z: 3 }

user.sayHi();

class Animal {
  constructor(name) { this.name = name; }
  eat() { console.log(this.name + " 吃"); }
}
class Dog extends Animal {
  bark() { console.log(this.name + " 汪汪"); }
}
const d = new Dog("旺财");
d.eat();      // 旺财 吃（沿原型链找到 Animal 的方法）
d.bark();     // 旺财 汪汪

// 原型链真相：Dog.prototype 的 __proto__ 指向 Animal.prototype
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true

// ===== ESM（推荐，浏览器/现代 Node 都支持）=====
// math.js
export const add = (a, b) => a + b;
export default function sub(a, b) { return a - b; }

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

// ===== CommonJS（老 Node）=====
// math.cjs
module.exports = { add: (a, b) => a + b };
// main.cjs
const { add } = require("./math.cjs");

function makeCounter() {
  let count = 0;                 // 被闭包"记住"的私有变量
  return function () {
    count++;
    return count;
  };
}
const c = makeCounter();
console.log(c());  // 1
console.log(c());  // 2（count 被保留）
console.log(c());  // 3

function show() { console.log(this.label); }

const obj = { label: "obj", show };
obj.show();                 // "obj"（隐式：谁调用 this 指向谁）

show();                    // undefined（默认：非严格下指向全局；这里 label 不存在）

const bound = show.bind({ label: "bound" });
bound();                   // "bound"（显式绑定）

// 箭头函数：没有自己的 this，继承外层
const obj2 = {
  label: "obj2",
  show: () => console.log(this.label)  // 此 this 指向外层（模块/全局），不是 obj2
};

// 创建一个 Promise
function delay(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve("完成"), ms);
  });
}
delay(500).then(result => console.log(result)); // 500ms 后打印"完成"

// 链式：then 返回新 Promise
delay(100)
  .then(r => r + "！")
  .then(r => console.log(r))
  .catch(err => console.error(err));  // 任一环节失败都进 catch

// Promise.all：等全部完成
Promise.all([delay(100), delay(200)])
  .then(results => console.log(results));

function delay(ms) {
  return new Promise(r => setTimeout(r, ms));
}
async function main() {
  console.log("开始");
  await delay(300);
  console.log("300ms 后");
  const r = await Promise.resolve(42);
  console.log("拿到", r);
}
main();

// 错误处理：用 try/catch 包住 await
async function safe() {
  try {
    const v = await Promise.reject(new Error("炸了"));
  } catch (e) {
    console.error("捕获：", e.message);
  }
}
safe();

// 并行：多个 await 会串行，要并行用 Promise.all
async function parallel() {
  const [a, b] = await Promise.all([delay(100), delay(200)]);
}

console.log("1 同步");

setTimeout(() => console.log("2 宏任务(setTimeout)"), 0);

Promise.resolve().then(() => console.log("3 微任务(Promise)"));

console.log("4 同步");

// 输出顺序：1 → 4 → 3 → 2
// 因为微任务（Promise）在当前宏任务结束后、下一个宏任务前清空

// 模板字符串
const name = "小明";
console.log(`你好，${name}，明年 ${18 + 1} 岁`);

// 展开运算符
const a = [1, 2], b = [3, 4];
console.log([...a, ...b]);        // [1,2,3,4]（数组展开）
const o = { ...{ x: 1 }, y: 2 };  // 对象展开（浅拷贝）

// 可选链 ?. 与空值合并 ??
const user = { profile: null };
console.log(user?.profile?.age);  // undefined（不会报错）
console.log(user.profile?.age ?? "未知"); // "未知"
const n = 0;
console.log(n ?? 10);   // 0（?? 只在 null/undefined 时取默认）
console.log(n || 10);   // 10（|| 把 0 当 falsy）

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");
// 输出：A D C B（微任务 C 先于宏任务 B）

// 危险：定时器一直持有 big 不释放
let big = new Array(1e6).fill(1);
const t = setInterval(() => console.log(big.length), 1000);
// 不用了要清：clearInterval(t); big = null;

function f() { console.log(this.x); }
const o = { x: 1, f };
f();            // undefined（默认）
o.f();          // 1（隐式）
f.call({ x: 2 }); // 2（显式）

function Person(name){ this.name = name; }
Person.prototype.hi = function(){ console.log(this.name); };
const p = new Person("小明");
p.hi();  // 小明（方法在原型上，所有实例共享）
console.log(p.__proto__ === Person.prototype); // true

// 串行（慢）
for (const url of urls) await fetch(url);
// 并行（快）
await Promise.all(urls.map(u => fetch(u)));

const cache = new WeakMap();
let obj = { id: 1 };
cache.set(obj, "元数据");
obj = null;   // obj 可被回收，cache 中对应条目随之清除

const target = { count: 0 };
const p = new Proxy(target, {
  set(obj, key, val) {
    console.log(`设置 ${key} = ${val}`);
    return Reflect.set(obj, key, val);
  }
});
p.count = 5;  // 打印：设置 count = 5

// 好：属性顺序一致，共享隐藏类
function Point(x, y) { this.x = x; this.y = y; }
new Point(1, 2); new Point(3, 4);
// 差：delete 破坏隐藏类
const p = new Point(1, 2);
delete p.y;   // 避免！改用 p.y = undefined;

function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); }
  };
}

"use strict";
function f() { console.log(this); }
f();                 // undefined（严格），而非 window
// x = 1;            // 严格下：ReferenceError（未声明）
// function g(a, a){} // 严格下：SyntaxError（重复参数）

function createTodo() {
  let items = [];
  let nextId = 1;
  return {
    add(text) {
      items.push({ id: nextId++, text, done: false });
      return this;
    },
    remove(id) {
      items = items.filter(it => it.id !== id);  // 用 filter 返回新数组
      return this;
    },
    toggle(id) {
      items = items.map(it =>
        it.id === id ? { ...it, done: !it.done } : it);
      return this;
    },
    list(filterDone) {
      return filterDone === undefined
        ? items
        : items.filter(it => it.done === filterDone);
    }
  };
}

const todo = createTodo();
todo.add("学 JS").add("写项目").toggle(1);
console.log("全部:", todo.list());
console.log("已完成:", todo.list(true));

// 微任务里再塞微任务，会一直清空（不会被宏任务插队）
Promise.resolve().then(() => {
  console.log("微1");
  Promise.resolve().then(() => console.log("微2"));
});
setTimeout(() => console.log("宏"), 0);
// 输出：微1 微2 宏

function reactive(obj, onChange) {
  return new Proxy(obj, {
    get(t, k, r) {
      // 这里可"收集依赖"：记录谁在读这个属性
      return Reflect.get(t, k, r);
    },
    set(t, k, v, r) {
      const old = t[k];
      const ok = Reflect.set(t, k, v, r);
      if (old !== v) onChange(k, v, old);  // 值变了就通知
      return ok;
    }
  });
}
const state = reactive({ count: 0 }, (k, v) => {
  console.log(`变化 ${k}: ${v}`);
});
state.count = 1;  // 打印：变化 count: 1

const users = [
  { name: "小明", age: 18 },
  { name: "小红", age: 25 },
  { name: "小刚", age: 16 }
];

// 分组
const byAdult = users.reduce((m, u) => {
  const key = u.age >= 18 ? "成人" : "未成年";
  (m[key] ||= []).push(u.name);
  return m;
}, {});
console.log(byAdult);   // { 成人: [ '小明', '小红' ], 未成年: [ '小刚' ] }

// 去重（对象按 id）
const list = [{id:1},{id:2},{id:1}];
const uniq = [...new Map(list.map(x => [x.id, x])).values()];
console.log(uniq);      // [{id:1},{id:2}]

// 扁平化
console.log([[1,2],[3,4]].flat());        // [1,2,3,4]
console.log([1,[2,[3]]].flat(Infinity));  // [1,2,3]

const uniq = arr => [...new Set(arr)];
console.log(uniq([1, 2, 2, 3]));  // [1,2,3]

const sum = arr => arr.reduce((a, b) => a + b, 0);
const max = arr => arr.reduce((a, b) => a > b ? a : b);

function debounce(fn, ms) {
  let t;
  const d = (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
  d.cancel = () => clearTimeout(t);
  return d;
}

const deep = structuredClone(obj);  // 现代浏览器/Node 内置
// 旧环境：JSON.parse(JSON.stringify(obj))（丢函数/undefined/循环引用）

function throttle(fn, ms) {
  let last = 0, timer;
  return (...args) => {
    const now = Date.now();
    const remain = ms - (now - last);
    if (remain <= 0) { last = now; fn(...args); }
    else { clearTimeout(timer); timer = setTimeout(() => { last = Date.now(); fn(...args); }, remain); }
  };
}

const Counter = (() => {
  let n = 0;                       // 私有
  return { inc: () => ++n, get: () => n };
})();
console.log(Counter.inc(), Counter.get());

function createEmitter() {
  const map = {};
  return {
    on(ev, fn) { (map[ev] ||= []).push(fn); },
    emit(ev, data) { (map[ev] || []).forEach(fn => fn(data)); }
  };
}
const bus = createEmitter();
bus.on("msg", m => console.log("收到", m));
bus.emit("msg", "hi");

function createUser(type) {
  if (type === "vip") return { type, discount: 0.8 };
  return { type, discount: 1 };
}
console.log(createUser("vip"));

// math.test.js
import { describe, it, expect } from "vitest";
import { add } from "./math";

describe("add", () => {
  it("正数相加", () => {
    expect(add(1, 2)).toBe(3);
  });
  it("支持负数", () => {
    expect(add(-1, 1)).toBe(0);
  });
});

// 查找元素
const btn = document.getElementById("myBtn");
const items = document.querySelectorAll(".item");

// 读写内容
btn.textContent = "点我";
console.log(btn.textContent);

// 改样式/类
btn.classList.add("active");
btn.style.color = "red";

// 事件监听（推荐，不覆盖已有）
btn.addEventListener("click", (e) => {
  console.log("点击了", e.target);
});

// 创建并插入元素
const li = document.createElement("li");
li.textContent = "新项";
document.querySelector("ul").appendChild(li);

// GET
async function getTodos() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  if (!res.ok) throw new Error("HTTP " + res.status);  // 注意先判 ok
  return res.json();
}

// POST
async function createTodo() {
  const res = await fetch("https://jsonplaceholder.typicode.com/todos", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: "学 JS", completed: false })
  });
  return res.json();
}

// 超时控制（AbortController）
async function withTimeout(url, ms) {
  const ctrl = new AbortController();
  const t = setTimeout(() => ctrl.abort(), ms);
  try {
    const res = await fetch(url, { signal: ctrl.signal });
    return res.json();
  } finally {
    clearTimeout(t);
  }
}

// 校验邮箱（简化）
const emailRe = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
console.log(emailRe.test("a@b.com"));   // true

// 提取所有数字
const str = "订单 12 元，优惠 3 元";
const nums = str.match(/\d+/g);          // ["12", "3"]
console.log(nums);

// 捕获组
const m = "2026-08-12".match(/(\d{4})-(\d{2})-(\d{2})/);
console.log(m[1], m[2], m[3]);           // 2026 08 12

// 替换（用函数）
const r = "hello world".replace(/(\w+)/g, (w) => w.toUpperCase());
console.log(r);                          // HELLO WORLD

console.log("普通");
console.warn("警告");
console.error("错误");
console.table([{a:1},{a:2}]);     // 表格展示
console.time("t"); /* ... */ console.timeEnd("t");  // 计时
console.dir(obj);                 // 展开对象结构

// 命名导出：可多个
export const a = 1;
export function f() {}

// 默认导出：至多一个
export default class Main {}

// 导入
import Main, { a, f } from "./mod.js";
import * as mod from "./mod.js";   // 命名空间导入
import { a as alias } from "./mod.js"; // 别名

// 按需加载（返回 Promise，可 await）
button.onclick = async () => {
  const mod = await import("./heavy.js");
  mod.run();
};

const d = new Date(2026, 7, 12);  // 注意：月份 7 表示八月！
console.log(d.getMonth());        // 7（即八月）
console.log(d.getFullYear());     // 2026

// 时间戳（毫秒）
console.log(Date.now());          // 当前时间毫秒数
const t = new Date(0);            // 1970-01-01（Unix 纪元）

// 格式化
console.log(d.toISOString());     // 2026-08-11T...Z（UTC）
console.log(new Intl.DateTimeFormat("zh-CN").format(d)); // 2026/8/12

// 解析字符串要小心：YYYY-MM-DD 被当 UTC，其它当本地
console.log(new Date("2026-08-12"));     // UTC 零点
console.log(new Date("2026/08/12"));     // 本地零点

const obj = { name: "小明", age: 18, tags: ["a", "b"] };
const s = JSON.stringify(obj);          // '{"name":"小明","age":18,...}'
console.log(s);

const back = JSON.parse(s);
console.log(back.name);                 // 小明

// 美化输出
console.log(JSON.stringify(obj, null, 2));

// replacer 过滤 / reviver 转换
const safe = JSON.stringify(obj, (k, v) => k === "age" ? undefined : v);
console.log(safe);  // 不含 age 字段

// 自定义错误
class ValidationError extends Error {
  constructor(msg) {
    super(msg);
    this.name = "ValidationError";
  }
}

function checkAge(age) {
  if (age < 0) throw new ValidationError("年龄不能为负");
  return age;
}

try {
  checkAge(-1);
} catch (e) {
  if (e instanceof ValidationError) {
    console.log("校验错:", e.message);
  } else {
    throw e;   // 不认识的错继续往上抛
  }
} finally {
  console.log("清理资源");
}

// 浮点精度
console.log(0.1 + 0.2);          // 0.30000000000000004（不是 0.3）
console.log(0.1 + 0.2 === 0.3);  // false
// 比较用误差：Math.abs(a - b) < 1e-9
// 金额用整数分： (0.1*100 + 0.2*100)/100 === 0.3

// 格式化
console.log((0.1 + 0.2).toFixed(2));   // "0.30"（字符串）
console.log(Number((0.1+0.2).toFixed(2))); // 0.3

// NaN 判断：用 Number.isNaN（不会把 "abc" 当 NaN）
console.log(Number.isNaN("abc"));        // false
console.log(Number.isNaN(NaN));          // true

// BigInt：大整数，后缀 n
console.log(9007199254740991n + 2n);     // 9007199254740993n
// 注意：BigInt 不能和 Number 混运算：1n + 1 会报错

// 生成器：每次 yield 暂停，下次 next 继续
function* countUp() {
  let i = 0;
  while (true) {
    yield i++;
  }
}
const gen = countUp();
console.log(gen.next().value);  // 0
console.log(gen.next().value);  // 1

// 惰性斐波那契
function* fib() {
  let a = 0, b = 1;
  while (true) { yield a; [a, b] = [b, a + b]; }
}
const f = fib();
console.log([f.next().value, f.next().value, f.next().value, f.next().value]); // 0 1 1 2

// 自定义可迭代对象
const range = {
  from: 1, to: 3,
  [Symbol.iterator]() {
    let cur = this.from;
    return { next: () =>
      cur <= this.to ? { value: cur++, done: false } : { done: true } };
  }
};
for (const x of range) console.log(x);  // 1 2 3

// 用 rAF 做平滑动画，而不是 setTimeout
function animate(timestamp) {
  // 更新位置...
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

function memoize(fn) {
  const cache = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

// 斐波那契：朴素递归指数级，记忆化后线性
const fib = memoize(function (n) {
  return n < 2 ? n : fib(n - 1) + fib(n - 2);
});
console.log(fib(40));  // 瞬间（否则极慢）

// 纯：只看输入
const add = (a, b) => a + b;
// 不纯：依赖/修改外部
let total = 0;
const addTo = (x) => (total += x);  // 副作用，别这么写核心逻辑

const curry = (fn) => {
  return function curried(...args) {
    return args.length >= fn.length
      ? fn.apply(this, args)
      : (...more) => curried.apply(this, args.concat(more));
  };
};
const sum3 = curry((a, b, c) => a + b + c);
console.log(sum3(1)(2)(3));     // 6
console.log(sum3(1, 2)(3));     // 6

const compose = (...fns) => (x) => fns.reduceRight((v, f) => f(v), x);
const trim = s => s.trim();
const upper = s => s.toUpperCase();
const process = compose(upper, trim);
console.log(process("  hi  "));   // "HI"

class Stack {
  constructor() { this.items = []; }
  push(x) { this.items.push(x); }
  pop() { return this.items.pop(); }
  peek() { return this.items[this.items.length - 1]; }
  get size() { return this.items.length; }
}
const s = new Stack();
s.push(1); s.push(2);
console.log(s.pop(), s.peek());  // 2 1

class Queue {
  constructor() { this.items = []; }
  enqueue(x) { this.items.push(x); }
  dequeue() { return this.items.shift(); }   // 头部出队
  get size() { return this.items.length; }
}
const q = new Queue();
q.enqueue("a"); q.enqueue("b");
console.log(q.dequeue());  // a

class Node {
  constructor(val) { this.val = val; this.next = null; }
}
const head = new Node(1);
head.next = new Node(2);
head.next.next = new Node(3);
// 遍历
let cur = head;
while (cur) { console.log(cur.val); cur = cur.next; }  // 1 2 3

// localStorage：持久，同源共享，约 5MB，同步 API
localStorage.setItem("token", "abc");
console.log(localStorage.getItem("token"));  // "abc"
localStorage.removeItem("token");

// 存对象要先 JSON 序列化
localStorage.setItem("user", JSON.stringify({ name: "小明" }));
const u = JSON.parse(localStorage.getItem("user"));

// sessionStorage：关闭标签页即清，用法同 localStorage
sessionStorage.setItem("temp", "1");

// cookie：小（~4KB）、随每个请求自动发给服务器
document.cookie = "theme=dark; max-age=3600; path=/";

function shuffle(arr) {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}
console.log(shuffle([1, 2, 3, 4]));

// 快速但有损
const a = JSON.parse(JSON.stringify(obj));
// 现代内置（支持更多类型，仍不支持函数/DOM）
const b = structuredClone(obj);
// 复杂场景用 lodash.cloneDeep

function escapeHtml(s) {
  return s.replace(/[&<>"']/g, c => ({
    "&": "&amp;", "<": "&lt;", ">": "&gt;",
    '"': "&quot;", "'": "&#39;"
  }[c]));
}
// 把用户输入插 DOM 前先转义，避免 <script> 注入

// 数组去重
const uniq = a => [...new Set(a)];

// 求最大值
const max = a => a.reduce((x, y) => x > y ? x : y);

// 展平一层
const flat1 = a => a.flat();

// 分组（按 key 函数）
const groupBy = (a, f) => a.reduce((m, x) => ((m[f(x)] ||= []).push(x), m), {});

// 对象按值排序成数组
const sortByVal = obj => Object.entries(obj).sort((a, b) => b[1] - a[1]);

// 生成区间数组
const range = (n) => [...Array(n).keys()];

// 截断字符串
const truncate = (s, n) => s.length > n ? s.slice(0, n) + "…" : s;

// 随机整数 [min, max]
const randInt = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;