JavaScript ES6+ 2026 学习 Demo

1. 解构、可选链与空值合并

从 API 对象中安全取值；保留 `0`、空字符串和 `false`。

// 解构时为可能缺失的对象提供默认值。
                const { name, profile: { city = "未设置" } = {} } = user;
                // ?. 遇到 null/undefined 停止访问；?? 只兜底空值。
                const pageSize = response.data?.settings?.pageSize ?? 20;

等待运行...

2. 箭头函数、Rest 与 Spread

转换输入数据时保持原对象不变，适合状态更新与接口数据整理。


                // Rest 收集剩余属性；Spread 复制并创建新对象。
                const normalizeUser = ({ name, roles = [], ...rest }) => ({...rest,
                displayName: `${name} (${roles.length})`,
                });

等待运行...

3. Set、Map 与数组转换

Set 用于去重；Map 用于任意类型键；数组方法用于声明式数据处理。


              // Set 自动去重；展开后回到普通数组。
              const tags = [...new Set(rawTags)];
              // Map 的键不限于字符串，get/has 语义明确。
              const permissions = new Map([["admin", ["read", "write"]]]);

等待运行...

4. Class 私有字段

类语法便于表达封装；私有字段只能在类内部访问。


              class Session {
              #token; // # 字段不会暴露给外部调用方。
              constructor(token) { this.#token = token; }
              get authenticated() { return Boolean(this.#token); }}

等待运行...

5. async/await 与 allSettled

并发任务互不依赖时并行执行；allSettled 保留每项成功或失败结果。

              
              // await 把 Promise 结果写成顺序代码。
              const results = await Promise.allSettled([loadUser(), loadNotice()]);
              // 不要让一个可预期失败的任务阻断全部结果展示。

等待运行...

6. 事件循环顺序

同步代码先执行，Promise 微任务通常先于 setTimeout 定时器回调。


              steps.push("同步任务");
              queueMicrotask(() => steps.push("微任务"));
              setTimeout(() => steps.push("定时器任务"), 0);
              // 当前调用栈清空后，先处理微任务，再处理定时器。

等待运行...

7. 模块与动态导入

真实项目按文件使用 import/export；此处用临时模块演示按需加载。


              // user.js 导出具名函数。
              export const formatRole = (role) => role.toLowerCase();
              // 页面需要时再加载模块，常用于路由或大组件拆分。
              const { formatRole } = await import("./user.js");

等待运行...