// 单线程 + 事件循环：非阻塞是 JS 的性格底色
const fetchUser = async (id) => {
  const res = await fetch('/api/users/' + id);
  return res.json();
};

console.log('1 同步代码先执行');
fetchUser(42).then((u) => console.log('3 数据回来才轮到我', u.name));
console.log('2 不等网络，继续往下跑');

// 类型只在编译期存在：擦除后就是普通 JS
interface User { id: number; name: string }

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const u: User = { id: 1, name: "Ada" };
const n = pluck(u, "name");   // n 被推断为 string
// pluck(u, "email");          // ❌ 编译期就报错，不等运行时

# —— 路线 B：装完 Node 后自检这三行 ——
node -v                # 今天下 LTS 会得到 v24.x。报「不是内部或外部命令」= 没装好或没重开终端
npm -v                 # npm 随 Node 一起装，无需单独安装
node -e "console.log(1 + 1)"   # 不建文件，直接跑一行 → 2

# —— 想要交互式环境（像浏览器控制台那样）——
node                   # 进入 REPL，敲一行算一行
# > 1 + 1
# 2
# 退出：连按两次 Ctrl+C，或输入 .exit

// hello.js —— 你的第一个 JS 程序
const name = "World";

console.log("Hello, " + name + "!");

// 模板字符串：${} 里可以直接放变量
console.log(`Hello, ${name}!`);

// 函数：接收参数，返回结果
function greet(who) {
  return `Hello, ${who}!`;
}
console.log(greet("JS"));

// $ node hello.js
// Hello, World!
// Hello, World!
// Hello, JS!

// 新建 err.js 故意写错，看看 Node 会说什么：
//   const name = "World";
//   console.log(nn);        ← 第 2 行，把 name 敲成了 nn

// ① 用了不存在的名字
// D:\js-demo\err.js:2
// console.log(nn);
//             ^
//
// ReferenceError: nn is not defined
//     at Object.<anonymous> (D:\js-demo\err.js:2:13)   ← 只看这行
//     at Module._compile (node:internal/modules/cjs/loader:1705:14)
//     ... 以下全是 Node 内部帧，跳过
// Node.js v22.22.2

// ② 值不是你以为的东西（const s = null; console.log(s.length);）
// TypeError: Cannot read properties of null (reading 'length')
//     at Object.<anonymous> (D:\js-demo\err.js:2:15)

// ③ 括号没闭合：一行都没跑
// console.log("hi"
//             ^^^^
// SyntaxError: missing ) after argument list

function test() {
  if (true) {
    var a = 1;   // 函数作用域，泄漏到外面
    let b = 2;   // 块级作用域，只在 if 内有效
  }
  console.log(a); // 1（能访问到）
  console.log(b); // ReferenceError: b is not defined
}

console.log(x); // undefined（var 提升）
var x = 5;

console.log(y); // ReferenceError（TDZ，暂时性死区）
let y = 5;

const obj = { name: "Tom" };
obj.name = "Jerry";   // ✅ 合法：改的是属性，不是绑定本身
obj = {};               // ❌ TypeError: Assignment to constant variable

function createCounter() {
  let count = 0;          // 外部变量被"闭包"住
  return {
    increment: function () { return ++count; },
    reset: function () { count = 0; },
    value: function () { return count; }
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
console.log(counter.value()); // 2
// count 变量外部无法直接访问 —— 这就是"私有变量"

'use strict';

x = 10; // ❌ ReferenceError（非严格模式下会静默创建全局变量）

function f(a, a) { } // ❌ 严格模式禁止重复参数名

typeof 42            // "number"
typeof "hi"          // "string"
typeof true          // "boolean"
typeof undefined     // "undefined"
typeof null           // "object"  ⚠️ 历史遗留 bug
typeof Symbol()      // "symbol"
typeof 10n            // "bigint"
typeof {}             // "object"
typeof []             // "object"（用 Array.isArray() 判断）
typeof function(){} // "function"

const a = { x: 1 };
const b = a;        // b 和 a 指向同一个对象
b.x = 99;
console.log(a.x); // 99（引用类型共享内存）

1 == "1"        // true（字符串被转成数字）
1 === "1"       // false（类型不同，直接 false）
null == undefined  // true（特例）
null === undefined // false
0 == false      // true
"" == 0         // true
[] == false      // true
NaN === NaN     // false！NaN 不等于自己
Number.isNaN(NaN) // true（判断 NaN 的正确方式）

if ([])  console.log("空数组是真值");   // 会执行！
if ({})  console.log("空对象是真值");   // 会执行！
if ("0") console.log("字符串0是真值"); // 会执行！

Boolean("")     // false
Boolean("0")    // true（非空字符串）
Boolean(null)   // false
Boolean([])     // true

1 + "1"     // "11"（字符串拼接）
1 - "1"     // 0（转成数字相减）
1 + true    // 2（true 转成 1）
1 + null    // 1（null 转成 0）
1 + undefined // NaN
[] + {}         // "[object Object]"

Number("42px")   // NaN
parseInt("42px") // 42（只解析开头能识别的部分）

const user = "Ada";
// 模板字符串：反引号包裹，${...} 内插表达式、可跨行
const msg = `Hello, ${user}!`;   // "Hello, Ada!"

// 字符串不可变，方法都返回新串
"  hi  ".trim();               // "hi"（去首尾空白）
"a,b,c".split(",");            // ["a", "b", "c"]
"hello".slice(1, 3);          // "el"（起止下标，可负）
"2024-06".replace("-", "/");  // "2024/06"（replaceAll 换全部）
"abc".includes("b");           // true（还有 startsWith/endsWith）
"7".padStart(3, "0");          // "007"（补齐到 3 位）
"abc".toUpperCase();           // "ABC"

// 标签函数：strings 是静态片段数组，values 是各插值结果
function tag(strings, ...values) {
  // strings = ["Hi ", ", you have ", " msgs"]（比 values 多 1 个）
  // values  = [name, count]
  return strings.reduce(
    (acc, s, i) => acc + s + (values[i] ?? ""), ""
  );
}
const name = "Ada", count = 3;
tag`Hi ${name}, you have ${count} msgs`;
// "Hi Ada, you have 3 msgs"

// .raw 保留未转义原文（\n 不会变成换行）
String.raw`C:\dir\new`;  // "C:\dir\new"（String.raw 是内置标签函数）

// 真实世界：这些「DSL」都是标签模板
// const Btn = styled.button`color: ${p => p.color};`;

// 只有一种 number（64 位浮点）；超大整数用 BigInt
7 / 2                 // 3.5（除法不取整）
Math.floor(7 / 2)     // 3（向下取整；round 四舍五入、trunc 截断）
7 % 2                 // 1（取余）
2 ** 10               // 1024（幂）

// ⚠️ 浮点精度：十进制小数无法被精确表示
0.1 + 0.2             // 0.30000000000000004，不等于 0.3！
(0.1 + 0.2).toFixed(2)          // "0.30"（定点字符串，用于展示）
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON  // true（带误差比较，细节见 18 章）

// 字符串 → 数字
Number("42")           // 42；Number("42px") → NaN（严格）
parseInt("42px", 10)    // 42（宽松，从头解析；带基数更稳）
parseFloat("3.14x")     // 3.14
Number.isNaN(Number("x")) // true（判断转换失败）

// BigInt：精确大整数，字面量后缀 n
9007199254740993n       // 超出 number 安全范围仍精确
2n ** 64n               // 18446744073709551616n（不丢精度）
// 1n + 1 → ❌ TypeError：BigInt 不能与 number 混算
Number(10n) + 1          // 11（先显式转换才能混用）

const score = 85;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {  // 上一条不满足才会走到这里
  console.log("及格");
} else {
  console.log("不及格");
}

const day = new Date().getDay();
switch (day) {
  case 6:               // 多 case 合并：合法的贯穿用法
  case 0:
    console.log("周末");
    break;              // 忘写 break 会继续执行下面的 case！
  default:              // default 位置任意，所有 case 未命中时执行
    console.log("工作日");
}

// 三元：二选一"取值"，是表达式，能直接参与赋值
const label = score >= 60 ? "pass" : "fail";

// && / || 短路做条件执行（惯用法）
const isDebug = true;
isDebug && console.log("debug info");  // 左侧为真才执行右侧
const name = "" || "匿名";             // "匿名"——空串是假值也被兜底了

// let 计数器：每轮迭代独立绑定，闭包捕获的是"当轮的 i"
const fns = [];
for (let i = 0; i < 3; i++) {
  fns.push(() => i);
}
console.log(fns.map(f => f())); // [0, 1, 2]；换成 var 则是 [3, 3, 3]

// while：次数未知，由外部状态决定何时停
let retries = 3;
while (retries > 0 && !connect()) {
  retries--;                 // 忘了更新条件变量 = 死循环
}

// do-while：先执行后判断，至少跑一次
let input;
do {
  input = ask("请输入 1-10");
} while (input < 1 || input > 10);

// break 终止整个循环；continue 跳过本轮
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue; // 偶数跳过本轮
  if (i > 7) break;          // 超过 7 整个终止
  console.log(i);              // 1 3 5 7
}

// 标签语句：一次跳出多层嵌套
const matrix = [[1, 2], [3, 4]];
outer: for (const row of matrix) {
  for (const cell of row) {
    if (cell === 3) break outer; // 直接跳出外层循环
  }
}

const arr = ["a", "b", "c"];

for (const v of arr) console.log(v); // "a" "b" "c" —— 值
for (const k in arr) console.log(k); // "0" "1" "2" —— 字符串键！

// for...in 拿字符串下标做运算的坑
for (const i in arr) {
  console.log(i + 1);  // "01" "11" "21"（字符串拼接，不是加法）
}

// for...in 遍历的是"键"：洞被跳过，挂上去的属性混进来
const holed = [1, , 3];
holed.foo = "bar";
for (const k in holed) console.log(k); // "0" "2" "foo"：没有 "1"，多了 "foo"

// —— 要下标的两种写法 ——
for (const [i, v] of arr.entries()) {
  console.log(i, v);   // 0 "a" / 1 "b" / 2 "c"，i 是数字
}
arr.forEach((v, i, 原数组) => {  // forEach 回调第二个参数就是下标
  console.log(i, v);   // 第三个参数是数组本身，用得很少
});

// —— 遍历途中改数组：范围定死 vs 追着新元素跑 ——
const p = [1, 2, 3];
p.forEach(v => { if (v === 1) p.push(99); });  // 回调只跑 1 2 3，99 不会被访问

const q = [1, 2, 3];
for (const v of q) q.push(v);      // ❌ 死循环：每轮都重新问迭代器

const r = [1, 2, 3, 4];
r.forEach(v => { if (v === 1) r.splice(0, 1); }); // 回调只看到 1 3 4 —— 漏了 2

// forEach 的 async 陷阱：await 不会被等待
const ids = [1, 2, 3];
ids.forEach(async (id) => {
  await save(id);       // ❌ 三个请求同时发出，外部无法等它们完成
});
// ✅ 顺序执行：for...of 里 await 会被正常等待
for (const id of ids) {
  await save(id);
}

// 普通对象：Object.entries + for...of + 解构
const user = { name: "Tom", age: 18 };
for (const [key, value] of Object.entries(user)) {
  console.log(key, value); // name Tom / age 18
}

const arr = ["a", "b"];

// —— 返回值不一样，别记混 ——
arr.push("c");      // 3        ← 新长度
arr.pop();          // "c"      ← 被删的那一项
arr.unshift("z");   // 3        ← 新长度
arr.shift();        // "z"      ← 被删的那一项

// —— splice：一个方法干完增 / 删 / 改 ——
const s = ["a", "b", "c", "d"];
s.splice(1, 2, "X");  // 返回 ["b", "c"]（被删掉的）
s;                    // ["a", "X", "d"]  ← 原数组被就地改了
s.splice(1, 0, "Y");  // 删 0 个 = 纯插入，返回 []

// —— 队列别这么写 ——
while (queue.length) handle(queue.shift());   // ❌ 每次都要重排全部下标

let head = 0;                                  // ✅ 只移游标，不动数组
while (head < queue.length) handle(queue[head++]);

// —— length 可写 ——
const t = [1, 2, 3, 4];
t.length = 2;              // [1, 2]        ← 当场截断
const g = [1];
g.length = 3;              // 长度 3，但 Object.keys(g) 仍是 ["0"]

// —— 空洞 ≠ undefined ——
const a = [1, , 3];        // 中间是「洞」
a.length;                  // 3
1 in a;                    // false      ← 这个键不存在
Object.keys(a);            // ["0", "2"]

a.forEach(x => ...);       // 只走 2 次：1 和 3，洞被跳过
a.map(x => x * 2);        // [2, <1 empty item>, 6]  ← 洞保留，回调没跑
[...a];                    // [1, undefined, 3]       ← 展开把洞变成 undefined
a.flat();                 // [1, 3]                  ← 洞被删掉
JSON.stringify(a);         // "[1,null,3]"            ← 洞变成 null
a.includes(undefined);    // true    ← 但 a.indexOf(undefined) 是 -1

// —— delete 只挖洞，不缩短 ——
const d = [1, 2, 3];
delete d[1];
d.length;                  // 3        ← 还是 3！
Object.keys(d);            // ["0", "2"]

// —— 造一个「长度为 n 且真的有值」的数组 ——
new Array(3);              // 3 个洞：.map() 一次都不会执行
Array(3).fill(0);          // [0, 0, 0]      ← fill 会把洞填实
Array.from({ length: 3 }, (_, i) => i);  // [0, 1, 2]  ← 最常用的写法

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

nums.includes(2);        // true    ← 问「在不在」用这个
nums.indexOf(2);         // 1       ← 问「在第几位」用这个
nums.indexOf(99);        // -1      ← 找不到是 -1，不是 undefined

nums.find(n => n > 2);          // 3   （元素本身）
nums.findIndex(n => n > 2);     // 2   （下标）
nums.findLast(n => n < 4);      // 3   （从后往前，ES2023）
nums.findLastIndex(n => n < 4); // 2

nums.at(-1);              // 4       ← 末项，不改数组
nums.at(-2);              // 3

// —— NaN：两套相等语义的分水岭 ——
[NaN].indexOf(NaN);      // -1      ← 用 ===，而 NaN === NaN 为假
[NaN].includes(NaN);     // true    ← 用 SameValueZero

// —— 反复查成员：换 Set，O(n) 变 O(1) ——
const banned = new Set(bannedIds);
rows.filter(r => !banned.has(r.id));   // ✅ 每行一次哈希查找
rows.filter(r => !bannedIds.includes(r.id)); // ❌ 每行全表扫一遍

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

nums.map(n => n * 2);          // [2, 4, 6, 8]（一对一）
nums.filter(n => n % 2 === 0);  // [2, 4]（筛选）
nums.reduce((sum, n) => sum + n, 0); // 10（折叠成一个值）

// flatMap：一项展开成多项，再拍平一层
[1, 2].flatMap(n => [n, n * 10]); // [1, 10, 2, 20]

// 链式组合：过滤 → 变换 → 求和，读起来像一句话
const total = [{ price: 5, on: true }, { price: 8, on: false }]
  .filter(p => p.on)
  .map(p => p.price)
  .reduce((a, b) => a + b, 0);  // 5

// reduce 把数组折叠成对象（建索引 / 分组）
const byId = [{ id: "a" }, { id: "b" }]
  .reduce((acc, x) => (acc[x.id] = x, acc), {});
// { a: {id:"a"}, b: {id:"b"} }

// 查找 / 存在性（命中即短路）
nums.find(n => n > 2);   // 3（第一个满足的元素）
nums.some(n => n > 3);   // true
nums.every(n => n > 0);  // true

// —— 默认排序是字符串序 ——
[10, 9, 1].sort();              // [1, 10, 9]   ← "10" < "9"
[10, 9, 1].sort((a, b) => a - b); // [1, 9, 10]   ← 数字必须传比较器

// —— 就地：返回的就是原数组 ——
const arr = [3, 1, 2];
const sorted = arr.sort((a, b) => a - b);
sorted === arr;                     // true！原数组已经被改了

// —— 返新：ES2023 四件套，原数组一动不动 ——
const src = [3, 1, 2];
src.toSorted((a, b) => a - b);  // [1, 2, 3]，src 仍是 [3, 1, 2]
src.toReversed();               // [2, 1, 3]
src.toSpliced(1, 1);            // [3, 2]     ← 删掉下标 1 之后的新数组
src.with(0, 9);                 // [9, 1, 2]  ← 换掉一项

// —— 状态更新里的差别 ——
setList(list.sort(f));      // ❌ 引用没变，React 认为「没更新」，界面不动
setList(list.toSorted(f));  // ✅ 新数组新引用
setList([...list].sort(f)); // ✅ 旧写法：先复制再就地排

// —— 拍平 ——
[1, [2, [3]]].flat();            // [1, 2, [3]]   ← 默认深度 1
[1, [2, [3, [4]]]].flat(Infinity); // [1, 2, 3, 4]
["a b", "c"].flatMap(s => s.split(" ")); // ["a", "b", "c"]

// —— 分组（ES2024）——
Object.groupBy([1, 2, 3, 4], n => n % 2 ? "odd" : "even");
// { odd: [1, 3], even: [2, 4] }  ← 但原型是 null：
//   Object.getPrototypeOf(结果) === null
//   结果.hasOwnProperty("odd")   → TypeError: 不是函数
//   Object.hasOwn(结果, "odd")   → true   ← 用这个

Map.groupBy(users, u => u.team);  // 返回真正的 Map，键可以是任意值

// —— 去重 ——
[...new Set([1, 2, 2, 3])];      // [1, 2, 3]   ← 保持首次出现的顺序

// 对象数组按 id 去重（同 id 保留最后一个）
[...new Map(list.map(x => [x.id, x])).values()];

// 交集 / 差集：Set 查找 + filter
const b = new Set(listB);
listA.filter(x => b.has(x));    // 交集
listA.filter(x => !b.has(x));   // 差集

// —— 展开只吃可迭代对象 ——
const like = { 0: "a", 1: "b", length: 2 };  // 类数组，没有 Symbol.iterator
[...like];              // ❌ TypeError: like is not iterable
Array.from(like);      // ✅ ["a", "b"]

// —— Array.from 的第二个参数：边转边映射 ——
Array.from(new Set([1, 2]), x => x * 2);  // [2, 4]，不造中间数组
Array.from({ length: 3 }, (_, i) => i);      // [0, 1, 2]
Array.from("abc");                            // ["a", "b", "c"]

// —— Array(3) 与 Array.of(3) ——
Array(3);         // 长度 3、全是洞
Array.of(3);      // [3]

// —— 判断是不是数组 ——
typeof [];        // "object"     ← typeof 分辨不出数组
Array.isArray([]); // true         ← 只用这个

// —— DOM 里最常见的一处 ——
const nodes = document.querySelectorAll("li");  // NodeList，不是数组
nodes.map(...);            // ❌ nodes.map is not a function
[...nodes].map(...);       // ✅ NodeList 是可迭代的
Array.from(nodes, n => n.textContent); // ✅ 一步到位

// 函数声明（hoisted，定义前可调用）
greet();
function greet() { console.log("hi"); }

// 函数表达式（不提升）
const add = function(a, b) { return a + b; };

// 箭头函数
const square = x => x * x;
const sum = (a, b) => a + b;
const makeObj = () => ({ a: 1 }); // 返回对象字面量需用括号包裹

const obj = {
  name: "Alice",
  normalFn: function() {
    console.log(this.name); // "Alice"
  },
  arrowFn: () => {
    console.log(this.name); // 拿不到 "Alice"：this 是外层的 this
  },
  delayedLog: function() {
    setTimeout(function() {
      console.log(this.name); // this 丢失：非严格下指向全局
    }, 100);

    setTimeout(() => {
      console.log(this.name); // ✅ "Alice"，箭头函数继承外层 this
    }, 100);
  }
};

function introduce(city) {
  console.log(`${this.name} 来自 ${city}`);
}
const person = { name: "小明" };

introduce.call(person, "北京");
introduce.apply(person, ["上海"]);

const bound = introduce.bind(person);
bound("深圳");

function greet(name = "游客", greeting = "你好") {
  console.log(`${greeting}, ${name}`);
}
greet();           // "你好， 游客"
greet("小红");    // "你好， 小红"

function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3, 4); // 10

const [a, b, c] = [1, 2, 3];

const [first, , third] = ["x", "y", "z"]; // 跳过第二个

let [m, n] = [1, 2];
[m, n] = [n, m];   // 优雅交换变量

const [head, ...rest] = [1, 2, 3, 4];
console.log(head, rest); // 1 [2, 3, 4]

const user = { name: "Tom", age: 20, address: { city: "北京" } };

const { name, age } = user;
const { name: userName } = user;        // 重命名
const { job = "未知" } = user;          // 默认值
const { address: { city } } = user;     // 嵌套解构

function createUser({ name, age = 18, role = "user" }) {
  console.log(name, age, role);
}
createUser({ name: "Jerry" }); // "Jerry" 18 "user"

const arr2 = [...[1,2], 3, 4]; // [1, 2, 3, 4]

const base = { a: 1, b: 2 };
const merged = { ...base, b: 99, c: 3 }; // { a:1, b:99, c:3 }

Math.max(...[5, 2, 8]); // 8

const { id, ...otherProps } = { id: 1, name: "A", age: 20 };
console.log(otherProps); // { name: "A", age: 20 }

function logAll(first, ...others) {
  console.log(first, others);
}
logAll(1, 2, 3); // 1  [2, 3]

const name = "Tom", age = 18;

// ── 属性简写 ──────────────────────────────────
const user = { name, age }; // 等价于 { name: name, age: age }

// ── 方法简写 ──────────────────────────────────
const obj = {
  greet() { return "hello"; },       // 等价于 greet: function() {...}
  async load() { return await fetch("/"); }, // 异步方法
};

// ── 计算属性名 ────────────────────────────────
const field = "score";
const record = { [field]: 100, [`max_${field}`]: 150 };
// { score: 100, max_score: 150 }

// ── 展开合并（替代 Object.assign）────────────
const defaults = { theme: "dark", lang: "zh", retries: 3 };
const userCfg  = { lang: "en", timeout: 5000 };
const config   = { ...defaults, ...userCfg };
// { theme: "dark", lang: "en", retries: 3, timeout: 5000 }
// 后面的同名键覆盖前面的（解构提取详见「解构、扩展与剩余」模块）

const o = { name: "A", age: 20 };

// —— 标准三件套：只看自有的可枚举字符串键 ——
Object.keys(o);     // ["name", "age"]
Object.values(o);   // ["A", 20]
Object.entries(o);  // [["name", "A"], ["age", 20]]

// —— 「改造每个值」的标准三步：entries → map → fromEntries ——
Object.fromEntries(
  Object.entries(o).map(([k, v]) => [k, String(v)])
);                    // { name: "A", age: "20" }

// 按值筛选（对象没有 filter）
Object.fromEntries(Object.entries(o).filter(([, v]) => v !== undefined));

// —— for...in 会爬原型链 ——
const child = Object.create({ inherited: 1 });
child.own = 1;
Object.keys(child);              // ["own"]
for (const k in child) ...        // "own", "inherited"  ← 多了一个！

// —— 判断键是否存在 ——
"inherited" in child;             // true   ← 继承的也算
Object.hasOwn(child, "inherited"); // false  ← 只认自有（ES2022，首选）

const bare = Object.create(null);
bare.x = 1;
bare.hasOwnProperty("x");        // ❌ TypeError：null 原型没有这个方法
Object.hasOwn(bare, "x");       // ✅ true

// —— 这些是看不见的 ——
JSON.stringify({ a: undefined, [Symbol("k")]: 1, b: 1 });
// {"b":1}   ← undefined 值和 Symbol 键都被丢掉了

const original = { name: "A", info: { age: 20 }, tags: ["js"] };

// ── 浅拷贝 ────────────────────────────────────
const shallow = { ...original };        // 或 Object.assign({}, original)
shallow.name = "B";                     // ✅ 原始值：互不影响
shallow.info.age = 99;                  // ❌ 引用类型：原对象也被改了！
console.log(original.info.age);         // 99

// ── 深拷贝：structuredClone（推荐）──────────
const deep = structuredClone(original); // 支持 Date/Map/Set/ArrayBuffer
deep.info.age = 1;
deep.tags.push("ts");
console.log(original.info.age);         // 20，完全独立
console.log(original.tags);             // ["js"]，完全独立

// ── JSON 深拷贝（老写法，有局限）─────────────
const jsonClone = JSON.parse(JSON.stringify(original));
// ⚠️ 不支持 undefined / Function / Symbol / Date / Map / Set 等类型

const map = new Map();
map.set("name", "Tom");
map.set(1, "数字键");
map.set({}, "对象键");

map.get("name"); // "Tom"
map.has("name"); // true
map.size;         // 3

for (const [key, value] of map) {
  console.log(key, value);
}

const arr = [1, 1, 2, 3, 3];
const unique = [...new Set(arr)]; // [1, 2, 3]

const set = new Set([1,2,3]);
set.add(4);
set.has(2);    // true
set.delete(1);
set.size;      // 3

const meta = new WeakMap();

let panel = document.querySelector("#panel");
meta.set(panel, { clicks: 0 });
meta.get(panel).clicks++;      // 像 Map 一样读写

panel.remove();
panel = null;                  // 节点不可达 → 条目随之可被回收
// 若用 new Map()：Map 仍强引用节点，DOM 删了内存也收不回

// WeakSet：给对象打"处理过"的标记，而不阻止回收
const seen = new WeakSet();
function handle(obj) {
  if (seen.has(obj)) return;
  seen.add(obj);
}

const user = { profile: { address: null } };

// ❌ 旧写法
const city = user.profile && user.profile.address && user.profile.address.city;

// ✅ 新写法
const city = user.profile?.address?.city; // undefined，不报错
user.sayHi?.();   // 方法不存在时不报错

const count = 0;

count || 10;  // 10 ❌ 把合法的 0 覆盖掉了
count ?? 10;  // 0  ✅ 只有 null/undefined 才用默认值

const cfg = { retries: 0, timeout: null };
cfg.retries ?? 3;   // 0（保留有效的 0）
cfg.timeout ?? 5000; // 5000

const cache = {};

(cache.list ??= []).push(1);
(cache.list ??= []).push(2);
console.log(cache.list); // [1, 2]

class Animal {
  constructor(name, sound) {
    this.name = name;
    this.sound = sound;
  }

  speak() {
    console.log(`${this.name}: ${this.sound}`);
  }

  static create(name) {
    return new Animal(name, "...");
  }
}

const dog = new Animal("狗", "汪汪");
dog.speak(); // "狗： 汪汪"

class Dog extends Animal {
  constructor(name, breed) {
    super(name, "汪汪");
    this.breed = breed;
  }

  speak() {
    super.speak();
    console.log(`品种： ${this.breed}`);
  }
}

const h = new Dog("哈士奇", "雪橇犬");
h instanceof Dog;    // true
h instanceof Animal; // true

class BankAccount {
  #balance = 0;

  constructor(initial) { this.#balance = initial; }

  deposit(amount) { this.#balance += amount; }

  get balance() { return `¥${this.#balance}`; }
}

const acc = new BankAccount(100);
acc.deposit(50);
console.log(acc.balance); // "¥150"

// 构造函数 + prototype（class 的底层实现）
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} 说话了`);
};

const dog = new Animal("狗");
dog.speak();                         // "狗 说话了"
Object.getPrototypeOf(dog) === Animal.prototype; // true

// 原型链查找顺序：dog → Animal.prototype → Object.prototype → null
dog.hasOwnProperty("name");  // true（自身属性）
dog.hasOwnProperty("speak"); // false（在原型上）

// Object.create：直接指定原型创建对象
const proto = {
  greet() { console.log("Hello, I am", this.name); }
};
const obj = Object.create(proto);
obj.name = "Tom";
obj.greet(); // "Hello, I am Tom"

// Object.create(null) → 无原型的纯净对象（常用于字典/Map 替代）
const dict = Object.create(null);
// dict 没有 toString/hasOwnProperty 等继承方法，适合做干净的 key-value 存储

// class 与原型链的等价关系
class Dog extends Animal {}
// 等价于：
// Dog.prototype.__proto__ === Animal.prototype  →  true
// Object.getPrototypeOf(Dog) === Animal         →  true（静态继承）

Object.getPrototypeOf(Dog.prototype) === Animal.prototype; // true

// instanceof 的原理：检查原型链上是否有目标的 prototype
dog instanceof Animal;  // true  → dog.__proto__ === Animal.prototype
dog instanceof Object;  // true  → 原型链最终都指向 Object.prototype

// 检查属性来源
for (const key in dog) {
  // for...in 会枚举原型链上的可枚举属性
  if (dog.hasOwnProperty(key)) console.log("自身：", key);
  else console.log("原型：", key);
}

// 独一无二：即使描述相同也不相等
Symbol("id") === Symbol("id");  // false
typeof Symbol();                // "symbol"

// 作对象键：不撞名、不被常规枚举
const ID = Symbol("id");
const user = { name: "Ada", [ID]: 1001 };
Object.keys(user);              // ["name"]（Symbol 键被跳过）
user[ID];                       // 1001（需持有该 Symbol 才能取）

// Symbol.for：全局注册表，同名共享同一个 Symbol
Symbol.for("app.id") === Symbol.for("app.id"); // true

// 知名符号：定制内置行为（这里接管类型转换）
const money = {
  amount: 42,
  [Symbol.toPrimitive](hint) {
    return hint === "string" ? `$${this.amount}` : this.amount;
  }
};
String(money);  // "$42"（hint "string"）
+money;         // 42（hint "number"）

// ── 属性描述符 ────────────────────────────────
const obj = { a: 1 };
Object.getOwnPropertyDescriptor(obj, "a");
// { value: 1, writable: true, enumerable: true, configurable: true }

// defineProperty：精细控制属性行为
Object.defineProperty(obj, "VERSION", {
  value: "1.0.0",
  writable: false,      // 不可修改
  enumerable: false,   // 不出现在 for...in / Object.keys
  configurable: false, // 不可删除，也不能再次 defineProperty
});
// obj.VERSION = "2.0" → 严格模式报错，否则静默失败

// getOwnPropertyNames：含不可枚举属性（比 Object.keys 更全）
Object.getOwnPropertyNames(obj); // ["a", "VERSION"]

// getOwnPropertySymbols：获取 Symbol 键
const sym = Symbol("id");
const o = { [sym]: 99, name: "test" };
Object.getOwnPropertySymbols(o); // [Symbol(id)]

// ── 冻结 vs 密封 ─────────────────────────────
// freeze：完全冻结，不可增删改（浅冻结）
const cfg = Object.freeze({ host: "localhost", port: 3000 });
cfg.port = 8080;       // ❌ 严格模式抛错，非严格静默失败
Object.isFrozen(cfg);  // true

// seal：密封，可改现有值，但不可增删
const s = Object.seal({ x: 1 });
s.x = 2;     // ✅ 允许修改现有属性
s.y = 3;     // ❌ 无法新增
delete s.x;  // ❌ 无法删除

const state = { count: 0 };

const reactive = new Proxy(state, {
  get(target, key, receiver) {
    console.log("依赖收集：", key);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    const ok = Reflect.set(target, key, value, receiver);
    console.log("触发更新：", key, "=", value);
    return ok;                      // set trap 必须返回布尔值
  },
});

reactive.count;                     // 依赖收集： count
reactive.count = 1;                 // 触发更新： count = 1

// 另一经典用途：访问不存在的属性直接报错，拼写错误无所遁形
const strict = new Proxy({ a: 1 }, {
  get(t, k) {
    if (!(k in t)) throw new Error("没有属性 " + String(k));
    return t[k];
  },
});

// ── 属性存在性判断 ────────────────────────────
const obj = { a: 1 };

obj.hasOwnProperty("a");  // true，但有隐患：
// 若 obj = Object.create(null) 则没有 hasOwnProperty 方法
// 或若属性名叫 "hasOwnProperty"，也会被遮蔽

Object.hasOwn(obj, "a");   // true ✅ ES2022，推荐替代写法
"a" in obj;                // true，但含原型链（不同语义）

// ── Object.is：修复 === 的两个特殊 case ─────
NaN === NaN;           // false（令人困惑）
Object.is(NaN, NaN);  // true ✅
+0 === -0;            // true（令人困惑）
Object.is(+0, -0);   // false ✅

// ── Object.groupBy（ES2024）─────────────────
const items = [
  { name: "Apple",  type: "fruit"  },
  { name: "Banana", type: "fruit"  },
  { name: "Carrot", type: "veggie" },
];
Object.groupBy(items, item => item.type);
// { fruit: [{Apple}, {Banana}], veggie: [{Carrot}] }

// ── keys / entries / fromEntries 组合 ────────
const prices = { apple: 5, banana: 3, cherry: 12 };

// 过滤出价格 > 4 的条目
const expensive = Object.fromEntries(
  Object.entries(prices).filter(([, v]) => v > 4)
); // { apple: 5, cherry: 12 }

// 所有价格打八折
const discounted = Object.fromEntries(
  Object.entries(prices).map(([k, v]) => [k, v * 0.8])
);

// ── 迭代器协议 ───────────────────────────────────
// next() 返回 { value, done } 对象
function makeRange(start, end) {
  let current = start;
  return {
    [Symbol.iterator]() { return this; }, // 自身就是迭代器
    next() {
      if (current <= end) return { value: current++, done: false };
      return { value: undefined, done: true };
    }
  };
}

const r = makeRange(1, 3);
for (const n of r) console.log(n); // 1  2  3
[...makeRange(1, 5)];              // [1, 2, 3, 4, 5]

// ── 生成器函数（Generator）────────────────────
// function* 函数遇到 yield 暂停，下次 next() 继续
function* range(start, end, step = 1) {
  for (let i = start; i <= end; i += step) {
    yield i;
  }
}

for (const n of range(0, 10, 2)) console.log(n); // 0 2 4 6 8 10

// 生成器可以 yield* 委托另一个可迭代
function* concat(...iters) {
  for (const iter of iters) yield* iter;
}
[...concat([1, 2], [3, 4], [5])]; // [1, 2, 3, 4, 5]

// ── 内置可迭代对象 ────────────────────────────
// Array, String, Map, Set, arguments, NodeList 都实现了 Symbol.iterator
for (const ch of "hello") console.log(ch);     // h e l l o
for (const [k, v] of new Map([["a", 1]])) { } // 解构 Map 条目

// ── 给类添加 Symbol.iterator ──────────────────
class NumberRange {
  constructor(from, to) { this.from = from; this.to = to; }

  *[Symbol.iterator]() {         // 生成器作为迭代器（最简写法）
    for (let i = this.from; i <= this.to; i++) yield i;
  }
}

const nr = new NumberRange(1, 5);
[...nr];           // [1, 2, 3, 4, 5]
const [a, b] = nr; // a=1, b=2（解构）
Array.from(nr);    // [1, 2, 3, 4, 5]

// ── 无限序列（惰性计算）──────────────────────
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {       // 无限序列！但用 yield 惰性求值
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacci();
fib.next().value; // 0
fib.next().value; // 1
fib.next().value; // 1
fib.next().value; // 2

// 取前 N 个：手动遍历，够 n 个就 break
// 注：不能直接 spread 无限生成器！
function take(iter, n) {
  const res = [];
  for (const v of iter) { res.push(v); if (res.length >= n) break; }
  return res;
}
take(fibonacci(), 8); // [0, 1, 1, 2, 3, 5, 8, 13]

// ── yield 双向通信：next(v) 把值送回生成器内部 ──
function* dialog() {
  const answer = yield "第一问";  // answer 接住 next 传入的值
  yield "你回答了 " + answer;
}
const g = dialog();
g.next();      // { value: "第一问", done: false }
g.next(42);    // { value: "你回答了 42", done: false }
g.return();    // 提前终止；g.throw(err) 注入异常

// ── 异步生成器：优雅地消费分页 API ──
async function* fetchPages(first) {
  let url = first;
  while (url) {
    const res = await fetch(url);
    const page = await res.json();
    yield* page.items;             // 逐个吐出本页条目
    url = page.next;               // 没有下一页则退出
  }
}

for await (const item of fetchPages("/api/list?page=1")) {
  console.log(item);               // 调用方完全感知不到分页
}

function* fib() {
  let [a, b] = [0, 1];
  for (;;) { yield a; [a, b] = [b, a + b]; }
}

// —— 无限序列上照样链式（只计算用得到的那几项）——
fib().map(x => x * 2).take(5).toArray();  // [0, 2, 2, 4, 6]
fib().drop(3).take(3).toArray();          // [2, 3, 5]

// 对比：数组方法在这里会挂死
[...fib()].map(x => x * 2).slice(0, 5);  // ❌ 展开无限序列，卡死

// —— 内置迭代器自动带上了助手 ——
typeof [].values().take;              // "function"
new Set([1, 2]).values().toArray();     // [1, 2]
map.entries().filter(([k]) => k.startsWith("a")).toArray();

// —— 普通可迭代对象先升级 ——
Iterator.from([1, 2, 3]).some(x => x > 2);  // true

// —— 典型用法：大文件逐行读，只要前 100 条匹配的 ——
const hits = lines(file)          // 生成器，逐行产出，不全读进内存
  .filter(l => l.includes("ERROR"))
  .map(l => parse(l))
  .take(100)
  .toArray();                    // 读到第 100 条就停，后面的行根本没读

function parseJSON(str) {
  try {
    return JSON.parse(str);
  } catch (err) {
    console.error("解析失败：", err.message);
    return null;
  } finally {
    console.log("解析流程结束");
  }
}

class ValidationError extends Error {
  constructor(message, field) {
    super(message);
    this.name = "ValidationError";
    this.field = field;
  }
}

try {
  if (age < 0) throw new ValidationError("年龄不能为负", "age");
} catch (err) {
  if (err instanceof ValidationError) {
    console.log(`字段 ${err.field}: ${err.message}`);
  } else {
    throw err; // 未知错误继续往上抛
  }
}

// ✅ await + try/catch：异步错误回到同步语感
try {
  const res = await fetch("/api/user");
  if (!res.ok) throw new Error("HTTP " + res.status);
} catch (e) {
  showToast("加载失败");
}

// ❌ 抓不住：回调执行时，外层 try 早已退出
try {
  setTimeout(() => { throw new Error("boom"); });
} catch (e) { /* 永远到不了这里 */ }

// 全局兜底（浏览器）：只上报，不吞业务错误
window.addEventListener("unhandledrejection", (e) => {
  report(e.reason);
  e.preventDefault();          // 拦下控制台的默认报错
});
window.addEventListener("error", (e) => report(e.error));

// Node 对应：process.on("unhandledRejection" / "uncaughtException")

// 自己的资源类：补一个 Symbol.dispose 就行
class FileHandle {
  constructor(path) { this.fd = open(path); }
  [Symbol.dispose]() { close(this.fd); }
}

// 旧写法
const f = new FileHandle("a.txt");
try { use(f); } finally { f[Symbol.dispose](); }

// 新写法：块一退出就关，抛错也关
{
  using f = new FileHandle("a.txt");
  use(f);
}   // ← 这里自动 dispose

// 异步资源：await using + Symbol.asyncDispose
class Conn { async [Symbol.asyncDispose]() { await this.end(); } }
async function q() {
  await using c = await connect();
  return c.query("select 1");
}   // ← 这里 await 住 asyncDispose

console.log("1 同步");
setTimeout(() => console.log("4 宏任务"), 0);
Promise.resolve().then(() => console.log("3 微任务"));
console.log("2 同步");
// 输出：1 → 2 → 3 → 4

console.log("A");                          // ① 同步

setTimeout(() => console.log("E"));       // 宏任务，排到下一轮

(async () => {
  console.log("B");                        // ② await 之前是同步的
  await null;                              // 剩余部分入队 → 微任务队列：[D]
  console.log("D");
})();

Promise.resolve().then(() => console.log("C")); // 入队晚于 D → [D, C]

// 输出：A B D C E
// 推演：同步 A、B → 清空微任务 D、C → 下一个宏任务 E

new Promise((resolve, reject) => {
  setTimeout(() => resolve("成功"), 1000);
})
  .then(data => console.log(data))
  .catch(err => console.error(err))
  .finally(() => console.log("结束"));

async function getUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error("网络错误");
    return await res.json();
  } catch (err) {
    console.error(err.message);
    throw err;
  }
}

// ❌ 串行，总耗时叠加
const a = await fetchA();
const b = await fetchB();

// ✅ 并发，总耗时取最慢的
const [a, b] = await Promise.all([fetchA(), fetchB()]);

// race：超时控制
await Promise.race([
  fetchData(),
  new Promise((_, reject) =>
    setTimeout(() => reject("超时"), 5000))
]);

// 防抖：停止触发 delay 毫秒后才执行一次
function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

// 节流：每 interval 毫秒最多执行一次
function throttle(fn, interval) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= interval) {
      last = now;
      fn.apply(this, args);
    }
  };
}

// 用法
input.addEventListener('input', debounce(search, 300));
window.addEventListener('scroll', throttle(onScroll, 200));

// 超时：AbortSignal.timeout（Node 18+ / 现代浏览器）
const res = await fetch(url, { signal: AbortSignal.timeout(5000) });

// 手动取消：用户点「取消」或离开页面
const ctrl = new AbortController();
fetch(url, { signal: ctrl.signal });
cancelBtn.onclick = () => ctrl.abort();

// 重试 + 指数退避
async function fetchRetry(url, retries = 3, delay = 500) {
  for (let i = 0; i <= retries; i++) {
    try {
      const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
      if (!res.ok) throw new Error('HTTP ' + res.status);
      return res;
    } catch (err) {
      if (i === retries) throw err;              // 最后一次仍失败：抛出
      await new Promise(r => setTimeout(r, delay * 2 ** i)); // 退避
    }
  }
}

// ── Promise.withResolvers（ES2024）─────────────
// 老写法：构造器反模式
let resolve, reject;
const p = new Promise((res, rej) => { resolve = res; reject = rej; });

// 新写法：一行
const { promise, resolve, reject } = Promise.withResolvers();

// 典型场景：把「等一次事件」变成可 await 的值
function once(target, type) {
  const { promise, resolve } = Promise.withResolvers();
  target.addEventListener(type, resolve, { once: true });
  return promise;
}

// ── Array.fromAsync（ES2024）───────────────────
async function* pages() {
  for (let i = 1; i <= 3; i++) yield await fetchPage(i);
}

// 老写法
const all = [];
for await (const p of pages()) all.push(p);

// 新写法（顺序等，不是并发）
const all2 = await Array.fromAsync(pages());

// math.js
export const PI = 3.14159;
export function add(a, b) { return a + b; }
export default class User { }

// main.js
import User, { PI, add } from './math.js';
import * as MathUtils from './math.js';

// math.js
function add(a, b) { return a + b; }
module.exports = { add, PI: 3.14159 };

// main.js
const { add, PI } = require('./math.js');

// —— ESM 里替代 __dirname / require（Node）——
import { fileURLToPath } from 'node:url';
import { dirname } from 'node:path';
const __dirname = dirname(fileURLToPath(import.meta.url));
// Node 20.11+ 可直接用 import.meta.dirname

// —— 顶层 await：只有 ESM 能这么写 ——
const data = await fetch(url).then(r => r.json());

// —— live binding：ESM 导出随源实时变化 ——
// counter.js
export let count = 0;
export function inc() { count++; }
// main.js
import { count, inc } from './counter.js';
inc();
console.log(count); // 1（换成 CJS 的值拷贝则一直是 0）

// —— 在 ESM 里加载纯 CJS 依赖 ——
import { createRequire } from 'node:module';
const require = createRequire(import.meta.url);
const legacy = require('some-cjs-package');

// ✓ 静态导入：with 在路径后面
import cfg from "./config.json" with { type: "json" };
cfg.port;              // 只有默认导出，按属性取

// ✓ 动态导入：with 挪进第二个参数，多一层嵌套
const m = await import("./config.json", { with: { type: "json" } });
m.default.port;

// ✗ 漏掉 with：直接报错，不是警告
import cfg2 from "./config.json";

// ✗ JSON 模块没有具名导出
import { port } from "./config.json" with { type: "json" };

// ✗ 已废弃的旧关键字（2023 年前的教程里常见）
import cfg3 from "./config.json" assert { type: "json" };

// 1. 无参数 → 当前时刻
const now = new Date();

// 2. 时间戳（毫秒，Unix epoch = 1970-01-01 UTC）
const d1 = new Date(0);           // 1970-01-01T00:00:00.000Z
const d2 = new Date(1700000000000);

// 3. ISO 8601 字符串（推荐）
const d3 = new Date("2024-06-15");        // 日期（UTC 0时）
const d4 = new Date("2024-06-15T08:30:00"); // 本地时间
const d5 = new Date("2024-06-15T08:30:00Z"); // UTC 时间

// 4. 分项传入（注意：月份从 0 开始！）
const d6 = new Date(2024, 5, 15, 8, 30, 0);
//                   年   月  日  时  分  秒  ← 月份 5 = 6月

// 获取当前时间戳（毫秒）
const ts = Date.now();              // 推荐
const ts2 = new Date().getTime(); // 等价
const ts3 = +new Date();           // 利用隐式转换，不推荐

// 时间戳 ↔ Date 互转
const d = new Date(1718438400000);
console.log(d.getTime()); // 1718438400000

// 性能计时（精确到毫秒）
const start = Date.now();
// ... 执行一些操作 ...
console.log(Date.now() - start, "ms");

// 更高精度计时用 performance.now()（微秒级）
const t0 = performance.now();

const d = new Date("2024-06-15T14:30:45.500");

d.getFullYear()     // 2024
d.getMonth()       // 5（注意！6月 = 5）
d.getDate()        // 15（日）
d.getDay()         // 6（星期六，0=周日 1=周一 … 6=周六）
d.getHours()       // 14
d.getMinutes()     // 30
d.getSeconds()     // 45
d.getMilliseconds()// 500

// UTC 版本（时区无关）
d.getUTCHours()    // UTC 小时数（比中国时间少8小时）
d.getTimezoneOffset() // -480（中国 UTC+8，返回分钟数，负数=东区）

const d = new Date("2024-01-15");

d.setFullYear(2025);    // 改年份
d.setMonth(11);         // 改月份（11 = 12月）
d.setDate(31);          // 改日
d.setHours(23, 59, 59); // 改时分秒（支持多参数）

// 自动进位：给一月份设 date=0 → 变成上个月最后一天
const lastDay = new Date(2024, 2, 0); // 2024-02-29（闰年）

// 加 N 天（常用技巧）
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);

// 加 N 个月
const nextMonth = new Date();
nextMonth.setMonth(nextMonth.getMonth() + 1);

const d = new Date("2024-06-15T14:30:00");

// 基础方法
d.toISOString()      // "2024-06-15T06:30:00.000Z"（UTC，标准格式）
d.toLocaleDateString("zh-CN") // "2024/6/15"
d.toLocaleTimeString("zh-CN") // "14:30:00"
d.toLocaleString("zh-CN")     // "2024/6/15 14:30:00"

// Intl.DateTimeFormat（推荐：可复用 formatter）
const fmt = new Intl.DateTimeFormat("zh-CN", {
  year:   "numeric",
  month:  "long",    // "6月"
  day:    "numeric",
  weekday:"short",   // "周六"
  hour:   "2-digit",
  minute: "2-digit",
});
fmt.format(d); // "2024年6月15日周六 14:30"

// 手动补零（自定义格式时常用）
const pad = n => String(n).padStart(2, "0");
const yyyymmdd = `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())}`;
// "2024-06-15"

const start = new Date("2024-01-01");
const end   = new Date("2024-06-15");

// 时间差（毫秒 → 天）
const diffMs   = end - start;               // 自动转时间戳相减
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
console.log(diffDays); // 166

// 比较大小（隐式转时间戳）
start < end   // true  ✅
start > end   // false ✅

// 判断相等必须用 getTime()
const a = new Date("2024-01-01");
const b = new Date("2024-01-01");
a == b               // false（不同对象引用）
a.getTime() === b.getTime() // true ✅

// 判断日期是否有效
const invalid = new Date("not a date");
isNaN(invalid.getTime()) // true → 无效日期

// 同一个 Date，本地时间 vs UTC 时间
const d = new Date("2024-06-15T00:00:00Z"); // UTC 0点
d.getHours()    // 8（在 UTC+8 环境下）
d.getUTCHours() // 0

// 用 Intl 指定任意时区输出
const toTZ = (date, tz) =>
  new Intl.DateTimeFormat("zh-CN", {
    timeZone: tz,
    dateStyle: "short",
    timeStyle: "medium",
  }).format(date);

toTZ(d, "Asia/Shanghai");     // "2024/6/15 08:00:00"
toTZ(d, "America/New_York");  // "2024/6/14 20:00:00"
toTZ(d, "Europe/London");     // "2024/6/15 01:00:00"

// 获取当前环境时区名
Intl.DateTimeFormat().resolvedOptions().timeZone
// "Asia/Shanghai"

// ✅ 安全：ISO 8601 格式
Date.parse("2024-06-15")            // 1718409600000
Date.parse("2024-06-15T08:00:00Z")   // 1718438400000

// ⚠️ 不安全：格式依赖引擎
Date.parse("2024/06/15")  // Chrome: ok，Safari 旧版： NaN
Date.parse("15/06/2024")  // 多数引擎： NaN

// 推荐：手动解析非标准格式
function parseDate(str) {
  // 将 "2024/06/15" 转为 ISO
  const iso = str.replace(/\//g, "-");
  const ts  = Date.parse(iso);
  if (isNaN(ts)) throw new Error(`无效日期： ${str}`);
  return new Date(ts);
}

const rtf = new Intl.RelativeTimeFormat("zh-CN", { numeric: "auto" });

rtf.format(-1,  "day")    // "昨天"
rtf.format(-3,  "day")    // "3天前"
rtf.format(1,   "day")    // "明天"
rtf.format(2,   "week")   // "2周后"
rtf.format(-30, "minute") // "30分钟前"

// 实用函数：自动选择合适的单位
function timeAgo(date) {
  const diff = date - Date.now(); // 可以为负
  const abs  = Math.abs(diff);
  const rtf  = new Intl.RelativeTimeFormat("zh-CN", { numeric: "auto" });
  if (abs < 60_000)      return rtf.format(Math.round(diff/1000),    "second");
  if (abs < 3_600_000)   return rtf.format(Math.round(diff/60_000),  "minute");
  if (abs < 86_400_000)  return rtf.format(Math.round(diff/3_600_000),"hour");
  return rtf.format(Math.round(diff/86_400_000), "day");
}
timeAgo(new Date(Date.now() - 5 * 60000)); // "5分钟前"

// 安装：npm install dayjs
import dayjs from "dayjs";

// ── 创建 ────────────────────────────────────────
dayjs()                          // 当前时刻
dayjs("2024-06-15")             // 解析 ISO 字符串
dayjs("2024/06/15", "YYYY/MM/DD")// 指定格式（需 CustomParseFormat 插件）
dayjs(1718438400000)            // 从时间戳创建
dayjs(new Date())               // 从 Date 对象创建

// ── 格式化（format token 与 Moment.js 相同）────
dayjs().format("YYYY-MM-DD")         // "2024-06-15"
dayjs().format("YYYY年MM月DD日 HH:mm") // "2024年06月15日 14:30"
dayjs().format("ddd, MMM D")         // "Sat, Jun 15"

// ── 读取分量 ────────────────────────────────────
const d = dayjs("2024-06-15T14:30:45");
d.year()      // 2024
d.month()     // 5  ⚠️ 同原生 Date，从 0 开始
d.date()      // 15（日）
d.day()       // 6（星期六，0=周日）
d.hour()      // 14
d.minute()    // 30
d.second()    // 45
d.valueOf()   // 时间戳（毫秒）
d.toDate()    // 转回原生 Date 对象

// ── 加减（不可变，返回新对象）──────────────────
dayjs().add(7, "day")        // 加 7 天
dayjs().subtract(1, "month") // 减 1 个月
dayjs().add(2, "year")       // 加 2 年
dayjs().add(3, "hour")       // 加 3 小时

// 时间单位（add/subtract/startOf/endOf 通用）：
// "year" "month" "week" "day" "hour" "minute" "second" "millisecond"

// ── 边界：月初 / 月末 ────────────────────────
dayjs().startOf("month")  // 当月第一天 00:00:00
dayjs().endOf("month")    // 当月最后一天 23:59:59.999
dayjs().startOf("week")   // 本周日 00:00（默认周日为第一天）

// ── 比较 ─────────────────────────────────────
const a = dayjs("2024-01-01");
const b = dayjs("2024-06-15");
a.isBefore(b)            // true
a.isAfter(b)             // false
a.isSame(b, "year")      // true（同一年）
b.isBetween(a, dayjs())  // 需要 isBetween 插件

// ── 时间差：diff() ────────────────────────────
b.diff(a, "day")   // 166（整数，默认截断）
b.diff(a, "month") // 5
b.diff(a, "day", true) // 166.xxx（第三参数=true 返回浮点数）

// ── 扩展能力：按需 extend 官方插件 ─────────────
// 相对时间(relativeTime)、时区(utc+timezone)、自定义解析(customParseFormat)、
// 区间判断(isBetween)等均以插件形式引入，用到哪个才 dayjs.extend(...)

// 浏览器（Chrome 150 / Firefox 139+）里 Temporal 是全局对象，直接用
// Node 尚未内置，服务端需要：npm i @js-temporal/polyfill
// import { Temporal } from "@js-temporal/polyfill";

// 纯日期（无时间，无时区）
const today = Temporal.PlainDate.from("2024-06-15");
today.add({ months: 1 });  // Temporal.PlainDate "2024-07-15"（不可变！）

// 带时区的精确时刻
const now = Temporal.Now.zonedDateTimeISO("Asia/Shanghai");
now.year; now.month; now.hour; // 直接访问属性

// 持续时间（Duration）
const dur = Temporal.Duration.from({ days: 3, hours: 2 });
today.add(dur); // "2024-06-18"

// 两个日期相差多少天
const d1 = Temporal.PlainDate.from("2024-01-01");
const d2 = Temporal.PlainDate.from("2024-06-15");
d1.until(d2).days; // 166

// ── 基本用法 ─────────────────────────────────
const obj = { name: "Alice", age: 25, tags: ["dev", "js"] };

const json = JSON.stringify(obj);
// '{"name":"Alice","age":25,"tags":["dev","js"]}'

JSON.parse(json);  // 还原为 JS 对象

// 格式化输出（第三参数=缩进空格数）
JSON.stringify(obj, null, 2);
// {
//   "name": "Alice",
//   "age": 25,
//   "tags": ["dev", "js"]
// }

// ── 哪些值会被丢弃或转换 ─────────────────────
JSON.stringify({
  a: undefined,          // 属性被丢弃（undefined 不是合法 JSON）
  b: function(){},       // 属性被丢弃
  c: Symbol("x"),       // 属性被丢弃
  d: NaN,                 // → null
  e: Infinity,            // → null
  f: new Date(),         // → ISO 字符串 "2024-06-15T..."
  g: 42n,                // ❌ TypeError: BigInt 不支持
});

[undefined, Symbol(), function(){}]  // 数组中变成 null
JSON.stringify([undefined, 1]); // "[null,1]"

// ── replacer：过滤 / 转换属性 ─────────────────
// 数组形式：只保留指定的 key
JSON.stringify(obj, ["name", "age"]); // '{"name":"Alice","age":25}'

// 函数形式：对每个键值对做转换
JSON.stringify(obj, (key, val) => {
  if (key === "age") return undefined; // undefined → 丢弃该属性
  return val;
}); // '{"name":"Alice","tags":["dev","js"]}'

// ── reviver：反序列化时恢复类型 ──────────────
const data = JSON.parse('{"name":"Alice","createdAt":"2024-06-15T00:00:00.000Z"}',
  (key, val) => key === "createdAt" ? new Date(val) : val
);
data.createdAt instanceof Date; // true（字符串恢复为 Date 对象）

// ── toJSON：自定义序列化行为 ──────────────────
class Money {
  constructor(amount, currency) {
    this.amount = amount;
    this.currency = currency;
  }
  toJSON() {  // JSON.stringify 会自动调用
    return `${this.currency}${this.amount.toFixed(2)}`;
  }
}
JSON.stringify({ price: new Money(9.9, "¥") }); // '{"price":"¥9.90"}'

// ── 深克隆（简单场景）────────────────────────
const clone = JSON.parse(JSON.stringify(obj));
// ⚠️ 会丢失 Date/Map/Set/undefined/函数/循环引用，限简单纯数据对象
// 推荐改用 structuredClone()（见下）

// ── 基础深克隆 ───────────────────────────────
const original = {
  name: "Alice",
  date: new Date("2024-06-15"),
  scores: [90, 85, 95],
  meta: { active: true },
};

const clone = structuredClone(original);

clone.meta.active = false;
original.meta.active; // true（完全独立）
clone.date instanceof Date; // true（Date 正确克隆）

// ── 支持的特殊类型（JSON 不支持）─────────────
structuredClone(new Map([["a", 1]]));  // ✅ Map
structuredClone(new Set([1, 2, 3]));  // ✅ Set
structuredClone(/\d+/g);  // ✅ RegExp
structuredClone(new Error("oops"));   // ✅ Error
structuredClone(new Int32Array([1, 2]))// ✅ TypedArray

// ✅ 循环引用也能处理
const a = { name: "a" };
a.self = a;
const b = structuredClone(a); // 不会死循环！
b.self === b; // true（循环结构被正确复制）

// ── 不支持的类型（会抛错）────────────────────
structuredClone(function(){});  // ❌ DataCloneError：函数不可克隆
structuredClone(Symbol());     // ❌ DataCloneError：Symbol 不可克隆
structuredClone(document.createElement("div")); // ❌ DOM 节点不可克隆

// ── transfer：转移所有权（零拷贝）────────────
// 适用于 ArrayBuffer 等可转移对象，避免拷贝开销
const buf = new ArrayBuffer(1024);
const transferred = structuredClone(buf, { transfer: [buf] });
buf.byteLength; // 0（原对象已被转移，不可再用）

// 这也是 postMessage 传递大数据的底层机制：
worker.postMessage({ data: buf }, [buf]); // [buf] 即 transfer list

// ── Base64 编解码 ─────────────────────────────
// btoa / atob：浏览器内置（仅支持 Latin-1，中文需先编码）
btoa("Hello World")   // "SGVsbG8gV29ybGQ="
atob("SGVsbG8gV29ybGQ=") // "Hello World"

// 中文/Unicode → Base64（先用 TextEncoder 转字节再编码）
function toBase64(str) {
  const bytes = new TextEncoder().encode(str);  // UTF-8 字节
  const binary = Array.from(bytes, b => String.fromCharCode(b)).join("");
  return btoa(binary);
}
function fromBase64(b64) {
  const binary = atob(b64);
  const bytes = Uint8Array.from(binary, c => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}
toBase64("你好")  // "5L2g5aW9"
fromBase64("5L2g5aW9") // "你好"

// Node.js 内置 Buffer.from / toString
Buffer.from("你好", "utf-8").toString("base64"); // "5L2g5aW9"
Buffer.from("5L2g5aW9", "base64").toString("utf-8"); // "你好"

// ── ArrayBuffer & TypedArray ──────────────────
// ArrayBuffer：不能直接读写，必须通过视图
const buf = new ArrayBuffer(8); // 8 字节的二进制缓冲区

// TypedArray 视图（共享同一段内存）
const u8  = new Uint8Array(buf);  // 8 个 uint8（0~255）
const u32 = new Uint32Array(buf); // 2 个 uint32
const f64 = new Float64Array(buf);// 1 个 float64

u8[0] = 255;
console.log(u8);  // Uint8Array [255, 0, 0, 0, 0, 0, 0, 0]

// 常用 TypedArray 类型对照：
// Int8Array     Uint8Array     Uint8ClampedArray（图像像素用）
// Int16Array    Uint16Array
// Int32Array    Uint32Array
// Float32Array  Float64Array
// BigInt64Array BigUint64Array

// DataView：精细控制字节序（大端/小端）
const view = new DataView(buf);
view.setUint32(0, 0xDEADBEEF, true);  // true = 小端（little-endian）
view.getUint32(0, true);              // 3735928559

// ── TextEncoder / TextDecoder ─────────────────
// 字符串 ↔ UTF-8 字节数组互转
const enc = new TextEncoder();
const dec = new TextDecoder("utf-8");

const encoded = enc.encode("Hello 你好");   // Uint8Array
dec.decode(encoded);                        // "Hello 你好"

// ── Blob：二进制大对象 ────────────────────────
// Blob 是不可变的原始数据，常用于文件操作和下载
const blob = new Blob(['{"name":"Alice"}'], { type: "application/json" });
blob.size;  // 16（字节数）
blob.type;  // "application/json"

// Blob → ArrayBuffer
const arrayBuf = await blob.arrayBuffer();

// Blob → 文本
const text = await blob.text();

// 触发浏览器下载文件
function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url); // 用完立即释放
}

// data URL（Base64 嵌入图片/文件）
const reader = new FileReader();
reader.onload = e => console.log(e.target.result); // "data:image/png;base64,..."
reader.readAsDataURL(imageBlob);

// ── encodeURIComponent vs encodeURI ───────────
encodeURIComponent("name=Alice&age=25")
// "name%3DAlice%26age%3D25"（连 = & 都编码，用于参数值）

encodeURI("https://example.com/搜索？q=你好")
// "https://example.com/%E6%90%9C%E7%B4%A2?q=%E4%BD%A0%E5%A5%BD"
// （保留 :// ? = 等结构字符，只编码非 ASCII 部分）

decodeURIComponent("%E4%BD%A0%E5%A5%BD") // "你好"

// ── URLSearchParams：现代 query string 工具 ───
// 构建 query string
const params = new URLSearchParams({
  q: "JavaScript 教程",
  page: 1,
  tags: "web",
});
params.toString(); // "q=JavaScript+%E6%95%99%E7%A8%8B&page=1&tags=web"

// 追加 / 修改 / 删除
params.append("tags", "js");      // 同名追加（不覆盖）
params.getAll("tags");             // ["web", "js"]（同名多值，删除前）
params.set("page", 2);             // 覆盖
params.delete("tags");             // 删除所有 tags
params.has("q");                   // true
params.get("q");                   // "JavaScript 教程"

// 解析现有 URL 的 query string
const url = new URL("https://example.com/search?q=hello&page=3");
url.searchParams.get("q");    // "hello"
url.searchParams.get("page"); // "3"（注意：始终是字符串）

// 与 fetch 配合
const qs = new URLSearchParams({ keyword: "ts", size: 10 });
await fetch(`/api/search?${qs}`);

// ── 从 HTML 表单创建 ──────────────────────────
const form = document.querySelector("form");
const fd = new FormData(form);  // 自动读取表单字段

// ── 手动构建 ─────────────────────────────────
const fd2 = new FormData();
fd2.append("username", "Alice");
fd2.append("age", "25");     // 值必须是字符串或 Blob/File
fd2.append("avatar", fileInput.files[0]);  // 附加文件
fd2.append("avatar", anotherFile, "renamed.jpg"); // 可指定文件名

// ── 读取数据 ─────────────────────────────────
fd2.get("username");      // "Alice"
fd2.getAll("avatar");    // [File, File]（同名多文件）
fd2.has("age");          // true
fd2.delete("age");

// 遍历
for (const [key, value] of fd2) {
  console.log(key, value); // key: string, value: string | File
}

// ── 与 fetch 配合上传 ─────────────────────────
// ⚠️ 不要设置 Content-Type，让浏览器自动生成 boundary
await fetch("/api/upload", {
  method: "POST",
  body: fd2,  // 直接传 FormData，不需要 JSON.stringify
});

// ── 上传进度监控（需用 XMLHttpRequest）────────
const xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", e => {
  const pct = Math.round((e.loaded / e.total) * 100);
  console.log(`上传进度： ${pct}%`);
});
xhr.open("POST", "/api/upload");
xhr.send(fd2);

// ── FormData → 普通对象（用于调试）──────────
Object.fromEntries(fd2);
// ⚠️ 同名多值只保留最后一个，仅用于单值字段的调试

// —— 分歧点一：NaN ——
NaN === NaN;                  // false
NaN == NaN;                   // false（宽松相等也救不了）
Object.is(NaN, NaN);           // true
[NaN].includes(NaN);          // true  ← SameValueZero
[NaN].indexOf(NaN);           // -1    ← 严格相等，找不到！
[NaN].findIndex(Number.isNaN); // 0     ← 要位置只能这么找

// —— 分歧点二：-0 ——
0 === -0;                     // true
Object.is(0, -0);             // false ← 唯一能区分的
[-0].includes(0);            // true

// —— 集合按 SameValueZero 去重 / 建键 ——
new Set([NaN, NaN]).size;      // 1（NaN 被认作重复）
new Set([0, -0]).size;        // 1（0 和 -0 同一个值）
new Map([[NaN, 1]]).has(NaN); // true（NaN 可以当键）

// —— switch 用的是严格相等 ——
switch (NaN) { case NaN: /* 永远进不来 */ }

// —— 默认按字符串码点，不是你想的那样 ——
[10, 9, 1].sort();            // [1, 10, 9]
["b", "a", "B"].sort();      // ["B", "a", "b"]  大写在前
["赵", "钱", "孙", "李"].sort(); // ["孙","李","赵","钱"] ← 按 Unicode 编号，没有意义

// —— 要人类习惯的顺序 ——
["赵", "钱", "孙", "李"].toSorted((a, b) => a.localeCompare(b, "zh"));
// ["李","钱","孙","赵"] ← 按拼音 li/qian/sun/zhao

const coll = new Intl.Collator(undefined, { numeric: true });
["item10", "item2", "item1"].toSorted(coll.compare);
// ["item1", "item2", "item10"] ← 数字段按数值比

// —— 稳定性可以依赖：两趟排出多级顺序 ——
const result = rows
  .toSorted((a, b) => a.name.localeCompare(b.name))  // 次要条件先排
  .toSorted((a, b) => a.age - b.age);                // 主要条件后排
// 同龄的人之间，仍保持按姓名排好的顺序

// —— 这个洗牌写法是错的 ——
// arr.sort(() => Math.random() - 0.5);  比较器不自洽，分布不均匀
function shuffle(a) {                          // Fisher–Yates 才对
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

// —— 同一个 emoji，三种数法三个答案 ——
"👍".length;                  // 2  ← 码元（一个代理对）
[..."👍"].length;               // 1  ← 码点

const family = "👨‍👩‍👧";             // 带零宽连接符的家庭 emoji
family.length;                 // 8
[...family].length;            // 5
[...new Intl.Segmenter("zh", { granularity: "grapheme" })
  .segment(family)].length;     // 1  ← 人眼看到的就是 1 个

// —— 按下标切会撕碎代理对 ——
const s = "a👍b";
s.length;                      // 4（不是 3）
s[1];                          // "\ud83d" ← 半个字符，显示成乱码
s.slice(0, 2);                 // "a\ud83d" ← 同样撕碎了
[...s].slice(0, 2).join("");   // "a👍" ← 先按码点拆再切才对

// —— 转大写会变长 ——
"ß".toUpperCase();             // "SS"（长度 1 → 2）

// —— 看着一样，其实不等 ——
const a = "café";                 // é 是单个码点
const b = "cafe\u0301";           // e + 组合重音符
a === b;                       // false！但屏幕上一模一样
a.length === b.length;         // false（4 vs 5）
a.normalize("NFC") === b.normalize("NFC");  // true

// —— 对象的键会被转成字符串 ——
const o = {};
o[1] = "数字";
o["1"] = "字符串";
Object.keys(o).length;          // 1 ← 是同一个键，后者覆盖了前者

o[{ id: 1 }] = "A";
o[{ id: 2 }] = "B";            // 两个键都变成 "[object Object]"
Object.keys(o);                 // ["1", "[object Object]"] ← B 覆盖了 A

// Map 没有这个问题
const m = new Map();
m.set({ id: 1 }, "A").set({ id: 2 }, "B");
m.size;                        // 2 ← 不同对象是不同的键

// —— 整数样式的键被提前并升序 ——
Object.keys({ b: 1, 2: 1, a: 1, 10: 1, 1: 1 });
// ["1", "2", "10", "b", "a"]  ← 不是插入顺序！

new Map([["b",1], [2,1], ["a",1], [10,1], [1,1]]).keys();
// "b", 2, "a", 10, 1  ← 严格插入序，键也保留了原类型

// —— 反复查成员：数组存数据，Set 存索引 ——
const banned = new Set(bannedList);
const clean = rows.filter((r) => !banned.has(r.id));
// 若写成 bannedList.includes(r.id)，就是每行都全表扫一遍

// —— Map / Set 不能直接 JSON 化 ——
JSON.stringify({ m: new Map([[1, 2]]) });  // {"m":{}} ← 数据没了
JSON.stringify({ m: [...new Map([[1, 2]])] }); // {"m":[[1,2]]} ← 先转数组

// —— toFixed 舍的是二进制实际值 ——
(1.005).toFixed(2);      // "1.00"  不是 "1.01"
(2.675).toFixed(2);      // "2.67"  不是 "2.68"
(1.5).toFixed(0);        // "2"     这个又是对的
// 因为 1.005 存进 double 后略小于 1.005，而 1.5 能被精确表示

// —— 超过安全整数，字面量当场就变 ——
Number.MAX_SAFE_INTEGER;   // 9007199254740991
9007199254740993;          // 求值后是 9007199254740992 ← 少了 1
9007199254740992 === 9007199254740993;  // true（都是同一个数）

// 后端的雪花 ID 直接 parse 会坏掉：
JSON.parse('{"id": 7213487566925103105}').id;
// 7213487566925103000 ← 末尾几位没了，且不报错

// 用 BigInt 才精确（但不能和 number 混算）
9007199254740993n;         // 精确
// 1n + 1  →  TypeError: Cannot mix BigInt and other types

// —— 浮点比较用 EPSILON ——
0.1 + 0.2 === 0.3;         // false
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON;  // true

// —— all 抛出后，慢任务仍在继续 ——
const task = (name, ms, fail) =>
  new Promise((res, rej) =>
    setTimeout(() => {
      console.log(name + " 真正完成");      // ← 副作用在这里
      fail ? rej(new Error(name)) : res(name);
    }, ms));

try {
  await Promise.all([task("A", 20, true), task("B", 120)]);
} catch (e) {
  console.log("all 抛出：" + e.message);
}
// 输出顺序：
//   A 真正完成      ← 20ms
//   all 抛出：A     ← 20ms，这里你以为「整批失败了」
//   B 真正完成      ← 120ms，但 B 其实成功执行了！

// —— 要真取消：传 signal，失败时 abort ——
const ctrl = new AbortController();
try {
  await Promise.all([
    fetch("/a", { signal: ctrl.signal }),
    fetch("/b", { signal: ctrl.signal }),
  ]);
} catch (e) {
  ctrl.abort();            // ← 这一句才真正掐断其余请求
  throw e;
}

// —— 想知道每个的成败，用 allSettled ——
const results = await Promise.allSettled(tasks);
const failed = results.filter((r) => r.status === "rejected");
// 每项是 { status: "fulfilled", value } 或 { status: "rejected", reason }