// 同一段逻辑：TS 版本（上）擦除后就是 JS 版本（下），一字不多
function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

function pluck(obj, key) {
  return obj[key];
}

// 结构化类型：没写 implements，形状对上就兼容
interface Point { x: number; y: number }
const p: Point = { x: 1, y: 2, z: 3 };  // ❌ 字面量多字段会被「多余属性检查」拦下
const raw = { x: 1, y: 2, z: 3 };
const q: Point = raw;                // ✅ 经变量中转就合法，形状够用即可

// 一个文件跑通四件事：读参数、读环境变量、异步、退出码
const [name = "world"] = process.argv.slice(2);
console.log("hello, " + name);

const res = await fetch("https://example.com");   // 顶层 await：ESM 里可直接用
if (!res.ok) {
  console.error("请求失败：", res.status);
  process.exit(1);                            // 非 0 退出码，CI 才知道这步挂了
}

// 打印对象别用字符串拼接：拼完就只剩 [object Object]
console.log("user: " + user);          // ❌ user: [object Object]
console.log("user:", user);           // ✅ 逗号分隔，控制台可展开
console.table(users);                 // ✅ 一组对象直接看成表

// 计时与计数：查性能和重复执行
console.time("parse");
parseAll(input);
console.timeEnd("parse");            // parse: 12.4ms

// 在链式调用中间插一脚看中间值，不破坏表达式
const out = items
  .filter((x) => x.ok)
  .map((x) => (console.log("mid", x), x.value));

// 闭包：函数记住的是「变量本身」，不是当时的值
function counter() {
  let n = 0;
  return { inc: () => ++n, get: () => n };   // n 外部拿不到，只能经这两个口
}

// let 每轮新绑定，var 三轮共享一个
for (let i = 0; i < 3; i++) setTimeout(() => console.log(i));  // 0 1 2
for (var j = 0; j < 3; j++) setTimeout(() => console.log(j));  // 3 3 3

// TDZ：声明存在但不可用，与「未声明」的报错文本不同
console.log(a);   // ReferenceError: Cannot access 'a' before initialization
let a = 1;

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（先显式转换才能混用）

// 同时要值和下标：entries()，别退回 C 风格 for
for (const [i, item] of list.entries()) console.log(i, item);

// for…in 用在数组上会踩三个坑：键是字符串、顺序无保证、连继承属性一起来
for (const k in ["a", "b"]) console.log(typeof k);   // "string" "string"

// forEach 里 break 不存在；要中断就换 for…of，或用 some/every 表达「找到就停」
const found = list.some((x) => x.id === target);

// switch 的穿透：连写是特性，漏 break 是 bug
switch (kind) {
  case "jpg":
  case "png":
    renderImage();
    break;
  default:
    renderText();
}

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); // ✅ 一步到位

// this 丢失的经典现场：方法被单独取出来，点号没了
const obj = { n: 1, get() { return this.n; } };
const g = obj.get;
g();          // ❌ TypeError：this 是 undefined
obj.get();    // ✅ 1
g.call(obj);  // ✅ 1，或 const g = obj.get.bind(obj)

// 回调里用箭头函数，this 自动沿用外层——这是它最主要的用途
class Timer {
  n = 0;
  start() { setInterval(() => this.n++, 1000); }   // 写成 function 就丢 this
}

// 默认参数只认 undefined
const greet = (name = "匿名") => name;
greet(undefined);   // "匿名"
greet(null);        // null —— 默认值不生效

// 函数声明（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

// 默认值只认 undefined —— null 会原样通过
const { retry = 3 } = { retry: null };   // retry 是 null，不是 3

// 嵌套解构在中间层缺失时会炸；给中间层也配默认值
const { user: { name } = {} } = payload;

// 展开对象是浅拷贝：嵌套对象仍然共享
const copy = { ...state, list: [...state.list] };  // 每层都要显式展开

// 剩余属性做「排除某几个字段」
const { password, token, ...safe } = user;      // safe 里没有这两个字段

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]

// 遍历对象：entries + 解构，比 for…in 干净
for (const [k, v] of Object.entries(config)) console.log(k, v);

// 变换对象的值：entries → map → fromEntries
const upper = Object.fromEntries(
  Object.entries(o).map(([k, v]) => [k, String(v).toUpperCase()])
);

// 浅拷贝的陷阱：改副本的嵌套字段，原对象跟着变
const copy = { ...state };
copy.user.name = "新名字";      // state.user.name 也变了

// 纯字典用 null 原型，杜绝 __proto__ / toString 这类键的干扰
const dict = Object.create(null);
dict.toString = 1;                // 安全：这里没有继承来的 toString

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 等类型

// 对象的键会被转成字符串，Map 不会
const o = {};
o[{ id: 1 }] = "a";
o[{ id: 2 }] = "b";
Object.keys(o);          // ["[object Object]"] —— 两个键撞成了一个

const m = new Map();
m.set(userA, "a").set(userB, "b");   // 两个对象是两个键，且可链式

// Map ↔ 对象 ↔ JSON：Map 不能直接 JSON.stringify
const obj = Object.fromEntries(m);        // 键会变成字符串
const back = new Map(Object.entries(obj));

// Set 判重比数组快得多；先转一次，再在循环里查
const banned = new Set(bannedList);
const ok = users.filter((u) => !banned.has(u.id));

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);
}

// ?? 与 || 的区别在「0 和空串算不算有值」
const pageSize = input ?? 20;     // input 为 0 时保留 0
const pageSize2 = input || 20;    // input 为 0 时变成 20 —— 多半是 bug

// 可选调用：有回调才调，省一层 if
options.onDone?.(result);

// ??= 做惰性初始化，右边只在需要时求值
cache[key] ??= expensiveCompute(key);

// 可选链不掩盖真正的错误：属性名拼错依然得到 undefined，但方法不存在会照常抛
user?.getNmae?.();          // 加了 ?. 就静默了 —— 别对确定存在的方法加

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 Account {
  #balance = 0;
  static #count = 0;
  constructor(init) { this.#balance = init; Account.#count++; }
  get balance() { return this.#balance; }        // 只读对外暴露
  static isAccount(x) { return #balance in x; }      // 私有字段探测
}
// new Account(1).#balance —— 直接语法错误，连运行都到不了

// Proxy + Reflect：加一层日志，默认行为交回 Reflect
const logged = new Proxy(target, {
  get(t, k, recv) {
    console.log("read", k);
    return Reflect.get(t, k, recv);          // 带上 recv，getter 里的 this 才正确
  },
});

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])
);

// 让自己的类支持 for…of：实现一个 [Symbol.iterator]
class Range {
  constructor(a, b) { this.a = a; this.b = b; }
  *[Symbol.iterator]() { for (let i = this.a; i < this.b; i++) yield i; }
}
[...new Range(1, 4)];        // [1, 2, 3]

// 无限序列 + 惰性取用：生成器天然做得到，数组做不到
function* naturals() { let n = 1; while (true) yield n++; }

// 异步分页：把「一页页拉」的细节藏进生成器，调用方只管 for await
async function* pages(url) {
  let next = url;
  while (next) {
    const r = await (await fetch(next)).json();
    yield* r.items;
    next = r.nextUrl;
  }
}
for await (const item of pages("/api/list")) handle(item);

// ── 迭代器协议 ───────────────────────────────────
// 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 条就停，后面的行根本没读

// 自定义错误：带上业务字段，调用方才能分类处理
class HttpError extends Error {
  constructor(status, url, options) {
    super("HTTP " + status, options);   // options 里可带 cause
    this.name = "HttpError";
    this.status = status;
    this.url = url;
  }
}

// cause：包一层但不丢现场，排查时能一路追到根因
try {
  await save(data);
} catch (e) {
  throw new Error("保存草稿失败", { cause: e });
}

// catch 里先判类型再处理，别把所有错误一视同仁
catch (e) {
  if (e instanceof HttpError && e.status === 404) return null;
  throw e;                        // 处理不了的原样抛出去
}