ゴゴゴゴゴ
Skip to content
JOJO
首页文章项目知识库相册音乐
全站搜索
  • Navigate
  • Go to Page
  • escClose
© 2026 JOJOBuilt with Next.js

四种声音一个时代

这里收藏周杰伦、王力宏、陶喆与林俊杰的专辑,也把四位创作者放回完整唱片的语境。陶喆以松弛的律动重塑华语 R&B,周杰伦把说唱、古典与中国式旋律带进流行音乐,王力宏在抒情、摇滚和东方元素之间拓宽制作边界,林俊杰则用细密旋律与宽阔声线记录城市情绪。这里不打乱曲序,也不把专辑压缩成热门单曲;挑一张封面,从第一首听到最后一首,感受开场、中段与尾声如何共同完成一段叙事。

左右滑动浏览,轻触封面,从第一首开始听

正在播放的唱片

选择一首歌曲查看歌词
专辑封面

专辑

    请选择一张唱片等待选曲
    0:00
    0:00

    键盘快捷键

    搜索
    / 或 ⌘K
    回到首页
    G H
    博客列表
    G B
    切换主题
    T
    关闭弹窗
    Esc
    显示帮助
    ?

    按 Esc 关闭此窗口

    Blog550
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南
    • 全部文章(550)
    • 包管理工具(8)
      • Bun 完全指南
      • fnm 完全指南
      • ni 完全指南
      • npm 完全指南
      • nrm 完全指南
      • nvm 完全指南
      • pnpm 完全指南
      • Yarn 完全指南
    • 并发异步(7)
      • 异步任务取消机制
      • Promise静态方法汇总
      • 封装超时工具方法
      • 并发与并行
      • 封装并发任务方法
      • 一道并发相关的面试题
      • 文件写入的原子化与并发操作
    • 打包工具(10)
      • Bun - 全栈 JavaScript 运行时与打包器
      • esbuild - 用 Go 写的极速打包器
      • Parcel - 零配置的极速打包工具
      • Rolldown - Vite 团队打造的 Rust 打包器
      • Rollup - 专注于库开发的打包工具
      • Rspack - Rust 驱动的 Webpack 替代品
      • SWC - Rust 驱动的超快编译器
      • Turbopack - Rust 驱动的下一代打包工具
      • Vite - 下一代前端构建工具
      • Webpack - 功能最强大的模块打包器
    • 算法(74)
      • 课程必看
      • 算法基本概念
      • 评判算法的好坏
      • 复习对数
      • 常见的复杂度
      • 常见算法思维
      • 递归
      • 数据结构
      • 数组结构
      • 顺序查找
      • 二分查找
      • 插值查找
      • 冒泡排序
      • 选择排序
      • 插入排序
      • 折半插入排序
      • 希尔排序
      • 归并排序
      • 快速排序
      • 链表结构
      • 双向链表
      • 单向循环链表
      • 双向循环链表
      • 栈结构
      • 队列结构
      • 循环队列
      • 击鼓传花游戏
      • 双端队列
      • 回文检查器
      • 集合结构
      • 字典结构
      • 树结构
      • 二叉树
      • 二叉树遍历
      • 前序中序还原二叉树
      • 后序中序还原二叉树
      • 二叉树深度优先搜索
      • 二叉树广度优先搜索
      • 二叉树的比较
      • 二叉树diff算法
      • 二叉搜索树
      • 二叉搜索树常见操作
      • 平衡二叉树
      • 二叉树左单旋
      • 二叉树右单旋
      • 二叉树双旋
      • 二叉堆
      • 堆排序
      • 哈夫曼树
      • 图结构
      • 邻接矩阵
      • 邻接表
      • 构建图
      • 图的深度优先搜索
      • 图的广度优先搜索
      • 普里姆算法
      • 克鲁斯卡尔算法
      • LRU算法
      • 动态规划
      • 青蛙跳台阶
      • 不同路径问题
      • 凑零钱问题
      • 打家劫舍
      • 背包问题
      • 回溯算法
      • 数字组合
      • 电话号码字母组合
      • 复原IP地址
      • 数组子集
      • 贪心算法
      • 柠檬水找零
      • 摆动序列
      • 分发糖果
      • 跳跃游戏
    • 文档协同(12)
      • 课程说明
      • 文档协同常见方案
      • OT冲突算法
      • CRDT冲突算法
      • CRDT数据结构
      • 文章翻译
      • Yjs基础介绍
      • Yjs快速上手
      • Yjs细节补充
      • 监听机制
      • 标签页同步
      • WebSocket基础知识
    • 项目实战(1)
      • ShipAny:1小时开发海外游客「中国攻略 + AI旅游助手」SaaS网站
    • AI工具(9)
      • Claude Code 完全指南
      • ComfyUI 完全指南
      • GitHub Copilot 入门指南
      • Coze 完全指南
      • Cursor vs GitHub Copilot 全面对比
      • Cursor-完整指南
      • Dify 完全指南
      • Droid 完全指南
      • n8n 完全指南
    • Astro(5)
      • Astro 入门指南
      • Astro 路由与页面
      • Astro 组件与样式
      • Astro 内容集合
      • Astro 集成与部署
    • CSS(25)
      • CSS 选择器基础
      • CSS 盒模型
      • CSS 定位与层叠
      • 浮动与 BFC
      • Flexbox 布局
      • Grid 布局
      • 响应式设计
      • 伪类与伪元素
      • 现代选择器
      • CSS 变量
      • 层叠层
      • 过渡效果
      • CSS 动画
      • 变换与滤镜
      • 容器查询
      • 文字与排版
      • 背景与渐变
      • 滚动与溢出
      • 裁剪与遮罩
      • 颜色系统
      • 边框与阴影
      • 逻辑属性
      • CSS 函数
      • 多列布局
      • 用户交互
    • ES6+(40)
      • let 和 const 命令
      • 解构赋值基础
      • 解构赋值进阶
      • 字符串的扩展
      • 字符串新增方法
      • 正则表达式扩展
      • 数值的扩展
      • BigInt 大整数
      • 函数默认参数
      • rest 参数与扩展运算符
      • 箭头函数详解
      • 尾调用优化
      • 数组扩展方法
      • 数组新增方法
      • 数组不可变方法
      • 对象的扩展
      • Object 新增方法
      • Symbol 基础
      • Symbol 进阶应用
      • Set 数据结构
      • Map 数据结构
      • TypedArray 类型化数组
      • Proxy 基础
      • Proxy 进阶应用
      • Reflect 元编程
      • 元编程实战案例
      • 装饰器 Decorator
      • Iterator 迭代器
      • Generator 基础
      • Generator 进阶
      • Promise 基础
      • Promise 进阶
      • async 函数
      • await 与错误处理
      • 异步迭代
      • Class 基础
      • Class 继承
      • Module 语法
      • Module 加载
      • ES 新特性汇总
    • HTML(8)
      • HTML 入门:构建 Web 的基石
      • HTML5 语义化:让页面更有意义
      • HTML 表单基础:用户交互的起点
      • HTML 表单进阶:验证与现代特性
      • HTML 多媒体:音视频与响应式图片
      • HTML APIs(上):客户端存储完全指南
      • HTML APIs(下):交互与设备能力
      • Canvas 与 SVG:Web 图形绘制入门
    • JavaScript(30)
      • JavaScript 简介
      • 变量与数据类型
      • 运算符
      • 类型转换
      • 控制流语句
      • 函数基础
      • 对象基础
      • 数组基础
      • 原型与原型链
      • this 关键字
      • 面向对象编程
      • 作用域
      • 闭包
      • 执行上下文
      • DOM 选择器
      • DOM 操作
      • 事件处理
      • 事件委托
      • 错误处理
      • 调试技巧
      • 正则表达式
      • Date 日期对象
      • Math 对象
      • 定时器
      • JSON 处理
      • BOM 基础
      • 本地存储
      • 表单处理
      • AJAX 与 Fetch
      • 严格模式
    • Langchain(37)
      • Langchain基本介绍
      • 模型接口
      • 缓存
      • 提示词模板
      • 结构化提示词
      • Message消息对象
      • 消息占位
      • LCEL
      • 并发流式返回结果
      • Runnable接口
      • 条件路由
      • 字符串解析器
      • 结构化输出解析器
      • 列表输出解析器
      • JSON解析器
      • 正则解析器
      • 本地资源Loader
      • Web资源Loader
      • 文本切割
      • 嵌入处理
      • 内存型向量库
      • 检索优化
      • RAG实践
      • Memory基础
      • 自动维护聊天记录
      • 实现长程记忆
      • 持久化记忆
      • 第三方存储
      • Tools基础
      • Tools配置
      • Zod基础
      • LangChain中使用工具
      • 重新认识Agent
      • LangChain中创建Agent
      • Agent实践
      • 回退机制
      • 回调机制
    • LLM(34)
      • LLM发展历史
      • N-Gram模型
      • 词袋模型
      • 词元
      • 嵌入
      • Transformer内部结构
      • Transformer解码策略
      • Transformer块
      • 本地部署大模型
      • Agent
      • 流式返回信息
      • 支持上下文
      • 获取实时消息
      • 外接DeepSeek
      • Function Calling
      • MCP理论知识
      • Resources
      • Schema
      • 注册资源模板
      • Prompts
      • 监听资源更新
      • 远程通信方式
      • MCP Client
      • 大模型幻觉
      • RCT构词法
      • 提示词常见技巧
      • 基于反馈迭代优化
      • 改善提示效果
      • 提示词评估工具
      • RAG基础知识
      • RAG实践
      • RAG架构演进
      • 大模型微调
      • LoRA微调
    • MCP(8)
      • MCP 入门:连接 AI 与外部世界的桥梁
      • 搭建第一个 MCP Server
      • MCP Tools 深入:让 AI 具备行动能力
      • MCP Resources:向 AI 暴露数据
      • MCP Prompts:预定义 AI 交互模板
      • MCP Transport 与部署
      • 构建 MCP Client:集成到你的应用
      • 实战:构建文档助手 MCP Server
    • Nest(31)
      • 快速上手Nest Cli
      • 三层架构与MVC
      • IoC
      • Nest中的装饰器
      • 模块的基本概念
      • 什么是AOP
      • 中间件与守卫
      • 拦截器
      • 文件上传
      • 自定义装饰器
      • mysql相关回顾
      • 对于ORM的理解
      • 快速上手Redis
      • Nest中使用Redis
      • 状态保存方式
      • Nest中实现Session与JWT
      • JWT登录注册后端处理
      • 使用Passport与循环引用问题
      • 通过环境变量获取配置信息
      • RBAC权限设计1
      • RBAC权限设计2
      • Nest中使用Websocket
      • 日志处理
      • 面向切面的日志处理
      • 快速入门GraphQL
      • Nest中使用GraphQL
      • Swagger API文档
      • 单元测试与E2E测试
      • 安全防护实践
      • 定时任务与任务调度
      • Bull队列与异步任务
    • Next(36)
      • Next.js 简介
      • 项目创建与配置
      • App Router 概述
      • 创建第一个页面
      • 开发工具与调试
      • TypeScript 配置
      • 文件系统路由
      • 动态路由
      • 嵌套路由与布局
      • 路由组
      • 并行路由
      • 拦截路由
      • 导航与链接
      • 中间件
      • Server Components
      • Client Components
      • 混合渲染模式
      • Streaming 与 Suspense
      • 静态与动态渲染
      • 数据获取基础
      • 缓存策略
      • Server Actions
      • Route Handlers
      • 数据库集成
      • 错误处理
      • 图片优化
      • 字体优化
      • 脚本优化
      • 元数据与 SEO
      • 性能分析
      • 认证基础
      • NextAuth 集成
      • 环境变量与配置
      • 测试策略
      • 部署方案
      • 项目实战
    • Nuxt(36)
      • web应用变迁史
      • 课程说明
      • SSR初体验
      • 水合操作
      • 改造CSR项目
      • 基本介绍
      • 配置概览
      • 组件类型
      • Nuxt模块
      • 嵌套路由
      • 动态路由
      • 请求数据
      • server目录
      • 应用部署
      • 中间件
      • 插件
      • layers
      • 过渡
      • 状态管理
      • 全匹配路由
      • 路由补充知识
      • 自定义路由
      • 自定义模块
      • 自定义指令
      • meta相关处理
      • 渲染模式
      • 错误处理
      • 不同阶段错误
      • 客户端渲染组件
      • 其余内置组件
      • 配置相关细节
      • 常用组合式函数
      • 服务器引擎
      • NuxtUI
      • SSR注意事项
      • 课程收官
    • React(55)
      • 序章:React课程介绍
      • React 基本介绍
      • JSX 基础语法
      • 组件与事件绑定
      • 组件状态与数据传递
      • 表单
      • 生命周期
      • Hooks
      • React-router介绍
      • React-router v版本学生管理系统课堂笔记
      • React-redux 介绍
      • Antd介绍
      • coder station前台系统笔记
      • coder station 后台系统笔记
      • Antd Pro介绍
      • Dva介绍
      • Umi.js 介绍
      • 属性默认值和类型验证
      • 高阶组件
      • Ref
      • Context
      • Render Props
      • Portals
      • 错误边界
      • 组件渲染性能优化
      • 前端框架的理解
      • Scheduler调度延时任务
      • 最小堆
      • React中的位运算
      • beginWork工作流程
      • completeWork工作流程
      • 图解diff算法
      • commit 工作流程
      • lane模型
      • React 中的事件
      • Hooks原理
      • React和Vue描述页面的区别
      • useState和useReducer
      • effect相关hook
      • useCallback和useMemo
      • useRef
      • Update
      • 性能优化策略之eagerState
      • 性能优化策略之bailout
      • bailout和ContextAPI
      • 性能优化对日常开发启示
      • 前端框架的分类
      • 虚拟 DOM
      • React 整体架构
      • React 渲染流程
      • Fiber双缓冲
      • MessageChannel
      • Scheduler调度普通任务
      • 课程介绍
      • 课程总结
    • ReactNative(33)
      • RN 基本介绍
      • 快速搭建 RN 开发环境
      • 复习 React 基础知识
      • RN 基础知识
      • 实战案例
      • RN 内置基础组件
      • 容器组件
      • Pressable 组件
      • 列表组件
      • 功能组件
      • 第三方组件库
      • 自定义组件案例:弹框组件
      • 自定义组件案例:单选组件
      • 基础API
      • 屏幕API
      • 设备API
      • 动画API
      • 手势API
      • React Navigation简介
      • 参数传递和标题栏信息配置
      • 嵌套路由与生命周期
      • 其他类型的导航
      • 状态管理介绍
      • Redux
      • 其他第三方库
      • Expo SDK
      • Fabric 架构
      • 渲染、提交和挂载
      • 实现跨平台
      • 扁平化视图
      • 线程模型
      • 如何打包发布应用
      • 通过 React Native CLI 搭建环境
    • TailwindCSS(7)
      • TailwindCSS基础介绍
      • 环境搭建与配置
      • 布局系统
      • 间距与尺寸系统
      • 颜色与主题
      • 响应式设计
      • 交互与动画
    • TypeScript(35)
      • 初识 TypeScript
      • 基础类型
      • 数组与元组
      • 对象类型
      • 函数类型
      • 类型推断与断言
      • 联合类型与交叉类型
      • 字面量类型与类型别名
      • 接口基础
      • 接口进阶
      • 接口继承与实现
      • 类基础
      • 类的访问修饰符
      • 类的继承
      • 类与接口对比
      • 泛型基础
      • 泛型接口与泛型类
      • 泛型约束
      • 内置工具类型(上)
      • 内置工具类型(下)
      • 泛型实战
      • 类型守卫
      • 类型收窄
      • 索引类型与索引签名
      • 映射类型
      • 条件类型
      • infer 关键字
      • 模板字面量类型
      • 模块系统
      • 命名空间
      • 声明文件基础
      • 声明文件进阶
      • tsconfig 配置详解
      • 类型体操入门
      • TypeScript 最佳实践
    • 杂谈(9)
      • Cloudflare 全栈部署指南
      • Creem 支付集成指南
      • Dokploy 自托管部署指南
      • GitHub OAuth 登录集成指南
      • Google OAuth 登录集成指南
      • Stripe 支付集成指南
      • Supabase 完全指南
      • Vercel 自动化部署指南
      • Zeabur 部署指南

    ES 新特性汇总

    2024年2月9日 · 8 min
    ChatGPTClaude

    ES6 之后,ECMAScript 每年发布一个新版本。本文汇总 ES2016 到 ES2024 的主要新特性。

    ES2016 (ES7)

    Array.prototype.includes

    // 之前用 indexOf
    ;[1, 2, 3].indexOf(2) !== -1 // true
    // ES2016
    ;[1, 2, 3].includes(2) // true
    ;[1, 2, 3].includes(4) // false
    // includes 可以检测 NaN
    ;[1, NaN, 3].indexOf(NaN) // -1(找不到)
    ;[1, NaN, 3].includes(NaN) // true
    // 从指定位置开始搜索
    ;[1, 2, 3].includes(1, 1) // false

    指数运算符 **

    // 之前
    Math.pow(2, 10) // 1024
    // ES2016
    2 ** 10 // 1024
    // 右结合
    2 ** (3 ** 2) // 512(等于 2 ** 9)
    // 与赋值结合
    let num = 2
    num **= 10 // 1024

    ES2017 (ES8)

    async/await

    async function fetchData() {
    const response = await fetch('/api/data')
    return response.json()
    }

    Object.values/Object.entries

    const obj = { a: 1, b: 2, c: 3 }
    Object.values(obj) // [1, 2, 3]
    Object.entries(obj) // [['a', 1], ['b', 2], ['c', 3]]
    // 实用场景
    for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`)
    }

    String padding

    '5'.padStart(3, '0') // '005'
    '5'.padEnd(3, '0') // '500'
    // 格式化
    '123'.padStart(8, ' ') // ' 123'

    Object.getOwnPropertyDescriptors

    const obj = {
    get name() {
    return 'foo'
    },
    }
    Object.getOwnPropertyDescriptors(obj)
    // {
    // name: {
    // get: [Function: get name],
    // set: undefined,
    // enumerable: true,
    // configurable: true
    // }
    // }
    // 用于完整复制对象
    const clone = Object.create(
    Object.getPrototypeOf(obj),
    Object.getOwnPropertyDescriptors(obj)
    )

    函数参数尾逗号

    function foo(
    param1,
    param2 // 允许尾逗号
    ) {}
    foo(
    'a',
    'b' // 允许尾逗号
    )

    SharedArrayBuffer 和 Atomics

    // 共享内存
    const sab = new SharedArrayBuffer(1024)
    const view = new Int32Array(sab)
    // 原子操作
    Atomics.add(view, 0, 5)
    Atomics.load(view, 0)

    ES2018 (ES9)

    异步迭代

    async function* asyncGenerator() {
    yield await fetch('/api/1')
    yield await fetch('/api/2')
    }
    for await (const response of asyncGenerator()) {
    console.log(response)
    }

    Promise.finally

    fetchData()
    .then((data) => console.log(data))
    .catch((err) => console.error(err))
    .finally(() => console.log('完成'))

    Rest/Spread 属性

    // Rest 属性
    const { a, ...rest } = { a: 1, b: 2, c: 3 }
    // a = 1, rest = { b: 2, c: 3 }
    // Spread 属性
    const merged = { ...obj1, ...obj2 }

    正则表达式增强

    // 命名捕获组
    const re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
    const match = re.exec('2024-01-15')
    match.groups.year // '2024'
    match.groups.month // '01'
    match.groups.day // '15'
    // 后行断言
    ;/(?<=\$)\d+/.exec('$100') // ['100']
    ;/(?<!\$)\d+/.exec('€100') // ['100']
    // dotAll 模式
    ;/foo.bar/s.test('foo\nbar') // true
    // Unicode 属性转义
    ;/\p{Script=Han}/u.test('中') // true

    ES2019 (ES10)

    Array.prototype.flat/flatMap

    ;[1, [2, [3]]].flat() // [1, 2, [3]]
    ;[1, [2, [3]]].flat(2) // [1, 2, 3]
    ;[1, [2, [3]]].flat(Infinity) // [1, 2, 3]
    ;[1, 2].flatMap((x) => [x, x * 2]) // [1, 2, 2, 4]

    Object.fromEntries

    const entries = [
    ['a', 1],
    ['b', 2],
    ]
    Object.fromEntries(entries) // { a: 1, b: 2 }
    // Map 转对象
    const map = new Map([
    ['a', 1],
    ['b', 2],
    ])
    Object.fromEntries(map) // { a: 1, b: 2 }
    // URLSearchParams 转对象
    const params = new URLSearchParams('a=1&b=2')
    Object.fromEntries(params) // { a: '1', b: '2' }

    String.prototype.trimStart/trimEnd

    ' hello '.trimStart() // 'hello '
    ' hello '.trimEnd() // ' hello'

    可选的 catch 绑定

    // 之前
    try {
    // ...
    } catch (error) {
    // 必须声明 error
    }
    // ES2019
    try {
    JSON.parse(input)
    } catch {
    // 不需要 error 参数
    console.log('解析失败')
    }

    Symbol.prototype.description

    const sym = Symbol('描述')
    sym.description // '描述'

    Function.prototype.toString 修订

    function /* 注释 */ foo() {}
    foo.toString() // 'function /* 注释 */ foo() {}'
    // 现在保留注释和空白

    ES2020 (ES11)

    可选链 ?.

    const user = { profile: { name: '张三' } }
    user?.profile?.name // '张三'
    user?.address?.city // undefined(不报错)
    // 方法调用
    obj.method?.()
    // 数组访问
    arr?.[0]

    空值合并 ??

    const value = null ?? 'default' // 'default'
    const value2 = 0 ?? 'default' // 0
    // 与 || 的区别
    0 || 'default' // 'default'
    0 ?? 'default' // 0
    '' || 'default' // 'default'
    '' ?? 'default' // ''

    BigInt

    const big = 9007199254740993n
    const big2 = BigInt('9007199254740993')
    big + 1n // 9007199254740994n
    // 不能与普通数字混合运算
    // big + 1; // TypeError

    Promise.allSettled

    const results = await Promise.allSettled([
    Promise.resolve(1),
    Promise.reject(new Error('失败')),
    Promise.resolve(3),
    ])
    // [
    // { status: 'fulfilled', value: 1 },
    // { status: 'rejected', reason: Error },
    // { status: 'fulfilled', value: 3 }
    // ]

    globalThis

    // 统一的全局对象访问
    globalThis.setTimeout // 浏览器和 Node.js 都可用

    String.prototype.matchAll

    const str = 'test1test2test3'
    const matches = [...str.matchAll(/test(\d)/g)]
    // [['test1', '1'], ['test2', '2'], ['test3', '3']]

    动态 import()

    const module = await import('./module.js')

    export * as

    export * as utils from './utils.js'

    ES2021 (ES12)

    String.prototype.replaceAll

    'aabbcc'.replaceAll('b', 'x') // 'aaxxcc'
    // 之前需要正则
    'aabbcc'.replace(/b/g, 'x') // 'aaxxcc'

    Promise.any

    const first = await Promise.any([
    fetch('/api/1'),
    fetch('/api/2'),
    fetch('/api/3'),
    ])
    // 返回第一个成功的结果

    逻辑赋值运算符

    // ||=
    a ||= b // a = a || b
    // &&=
    a &&= b // a = a && b
    // ??=
    a ??= b // a = a ?? b
    // 实用场景
    user.name ??= 'Anonymous'

    WeakRef 和 FinalizationRegistry

    // 弱引用
    const ref = new WeakRef(targetObject)
    const obj = ref.deref() // 可能是 undefined
    // 清理回调
    const registry = new FinalizationRegistry((heldValue) => {
    console.log('对象被回收:', heldValue)
    })
    registry.register(obj, 'some value')

    数字分隔符

    const billion = 1_000_000_000
    const bytes = 0xff_ff_ff_ff
    const bits = 0b1010_0001

    ES2022 (ES13)

    类字段和私有成员

    class Person {
    name = 'default' // 公有字段
    #age = 0 // 私有字段
    static count = 0 // 静态字段
    static #secret = 'x' // 私有静态字段
    #privateMethod() {} // 私有方法
    static #staticPrivate() {} // 私有静态方法
    }

    静态初始化块

    class Config {
    static data
    static {
    // 复杂的静态初始化
    this.data = loadConfig()
    }
    }

    顶层 await

    // 模块顶层可以使用 await
    const data = await fetch('/api/config').then((r) => r.json())
    export { data }

    in 操作符检查私有字段

    class Foo {
    #brand
    static isFoo(obj) {
    return #brand in obj
    }
    }

    Array.prototype.at

    const arr = [1, 2, 3, 4, 5]
    arr.at(-1) // 5
    arr.at(-2) // 4
    arr.at(0) // 1
    'hello'.at(-1) // 'o'

    Object.hasOwn

    const obj = { prop: 'value' }
    Object.hasOwn(obj, 'prop') // true
    // 替代 hasOwnProperty
    obj.hasOwnProperty('prop') // true
    // hasOwn 更安全,不受原型链影响

    RegExp match indices

    const re = /a+(?<Z>z)?/d
    const match = re.exec('aaaz')
    match.indices // [[0, 4], [3, 4]]
    match.indices.groups // { Z: [3, 4] }

    Error cause

    try {
    doSomething()
    } catch (error) {
    throw new Error('操作失败', { cause: error })
    }

    ES2023 (ES14)

    数组查找从后往前

    const arr = [1, 2, 3, 2, 1]
    arr.findLast((x) => x > 1) // 2
    arr.findLastIndex((x) => x > 1) // 3

    数组不可变方法

    const arr = [3, 1, 2]
    arr.toSorted() // [1, 2, 3],原数组不变
    arr.toReversed() // [2, 1, 3],原数组不变
    arr.toSpliced(1, 1, 'a') // [3, 'a', 2],原数组不变
    arr.with(1, 'x') // [3, 'x', 2],原数组不变
    // 原数组保持不变
    console.log(arr) // [3, 1, 2]

    Hashbang 语法

    #!/usr/bin/env node
    console.log('Hello')

    Symbol.prototype 作为 WeakMap 键

    const weak = new WeakMap()
    const key = Symbol('key')
    weak.set(key, 'value')

    ES2024 (ES15)

    Promise.withResolvers

    const { promise, resolve, reject } = Promise.withResolvers()
    // 等价于
    let resolve, reject
    const promise = new Promise((res, rej) => {
    resolve = res
    reject = rej
    })

    Object.groupBy / Map.groupBy

    const items = [
    { type: 'fruit', name: 'apple' },
    { type: 'fruit', name: 'banana' },
    { type: 'vegetable', name: 'carrot' },
    ]
    Object.groupBy(items, (item) => item.type)
    // {
    // fruit: [{ type: 'fruit', name: 'apple' }, ...],
    // vegetable: [{ type: 'vegetable', name: 'carrot' }]
    // }
    Map.groupBy(items, (item) => item.type)
    // Map { 'fruit' => [...], 'vegetable' => [...] }

    正则表达式 v 标志

    // 集合操作
    ;/[\p{Script=Greek}&&\p{Letter}]/v // 交集
    ;/[\p{Script=Greek}--[αβγ]]/v // 差集
    // 字符串字面量
    ;/[\q{abc|def}]/v.test('abc') // true

    ArrayBuffer 可调整大小

    const buffer = new ArrayBuffer(8, { maxByteLength: 16 })
    buffer.resize(12)
    buffer.byteLength // 12

    Atomics.waitAsync

    const sab = new SharedArrayBuffer(4)
    const view = new Int32Array(sab)
    // 异步等待
    Atomics.waitAsync(view, 0, 0).value.then(() => {
    console.log('值已改变')
    })

    特性汇总表

    | 版本 | 年份 | 主要特性 | | ------ | ---- | ------------------------------- | --- | --- | | ES2016 | 2016 | includes, ** | | ES2017 | 2017 | async/await, Object.entries | | ES2018 | 2018 | 异步迭代, Rest/Spread, 正则增强 | | ES2019 | 2019 | flat/flatMap, fromEntries | | ES2020 | 2020 | ?., ??, BigInt, allSettled | | ES2021 | 2021 | replaceAll, Promise.any, | | = | | ES2022 | 2022 | 类私有成员, 顶层 await, at() | | ES2023 | 2023 | findLast, 不可变数组方法 | | ES2024 | 2024 | withResolvers, groupBy, v 标志 |

    持续关注 ECMAScript 新特性,能让代码更简洁、更现代。

    返回 BlogES6+
    上一篇Module 加载下一篇HTML 入门:构建 Web 的基石
    Skip toc
    • ES2016 (ES7)
      • Array.prototype.includes
      • 指数运算符 \\
    • ES2017 (ES8)
      • async/await
      • Object.values/Object.entries
      • String padding
      • Object.getOwnPropertyDescriptors
      • 函数参数尾逗号
      • SharedArrayBuffer 和 Atomics
    • ES2018 (ES9)
      • 异步迭代
      • Promise.finally
      • Rest/Spread 属性
      • 正则表达式增强
    • ES2019 (ES10)
      • Array.prototype.flat/flatMap
      • Object.fromEntries
      • String.prototype.trimStart/trimEnd
      • 可选的 catch 绑定
      • Symbol.prototype.description
      • Function.prototype.toString 修订
    • ES2020 (ES11)
      • 可选链 ?.
      • 空值合并 ??
      • BigInt
      • Promise.allSettled
      • globalThis
      • String.prototype.matchAll
      • 动态 import()
      • export \ as
    • ES2021 (ES12)
      • String.prototype.replaceAll
      • Promise.any
      • 逻辑赋值运算符
      • WeakRef 和 FinalizationRegistry
      • 数字分隔符
    • ES2022 (ES13)
      • 类字段和私有成员
      • 静态初始化块
      • 顶层 await
      • in 操作符检查私有字段
      • Array.prototype.at
      • Object.hasOwn
      • RegExp match indices
      • Error cause
    • ES2023 (ES14)
      • 数组查找从后往前
      • 数组不可变方法
      • Hashbang 语法
      • Symbol.prototype 作为 WeakMap 键
    • ES2024 (ES15)
      • Promise.withResolvers
      • Object.groupBy / Map.groupBy
      • 正则表达式 v 标志
      • ArrayBuffer 可调整大小
      • Atomics.waitAsync
    • 特性汇总表
    Table of Contents
    • ES2016 (ES7)
      • Array.prototype.includes
      • 指数运算符 \\
    • ES2017 (ES8)
      • async/await
      • Object.values/Object.entries
      • String padding
      • Object.getOwnPropertyDescriptors
      • 函数参数尾逗号
      • SharedArrayBuffer 和 Atomics
    • ES2018 (ES9)
      • 异步迭代
      • Promise.finally
      • Rest/Spread 属性
      • 正则表达式增强
    • ES2019 (ES10)
      • Array.prototype.flat/flatMap
      • Object.fromEntries
      • String.prototype.trimStart/trimEnd
      • 可选的 catch 绑定
      • Symbol.prototype.description
      • Function.prototype.toString 修订
    • ES2020 (ES11)
      • 可选链 ?.
      • 空值合并 ??
      • BigInt
      • Promise.allSettled
      • globalThis
      • String.prototype.matchAll
      • 动态 import()
      • export \ as
    • ES2021 (ES12)
      • String.prototype.replaceAll
      • Promise.any
      • 逻辑赋值运算符
      • WeakRef 和 FinalizationRegistry
      • 数字分隔符
    • ES2022 (ES13)
      • 类字段和私有成员
      • 静态初始化块
      • 顶层 await
      • in 操作符检查私有字段
      • Array.prototype.at
      • Object.hasOwn
      • RegExp match indices
      • Error cause
    • ES2023 (ES14)
      • 数组查找从后往前
      • 数组不可变方法
      • Hashbang 语法
      • Symbol.prototype 作为 WeakMap 键
    • ES2024 (ES15)
      • Promise.withResolvers
      • Object.groupBy / Map.groupBy
      • 正则表达式 v 标志
      • ArrayBuffer 可调整大小
      • Atomics.waitAsync
    • 特性汇总表
    > share on twitter