ゴゴゴゴゴ
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 部署指南

    对象基础

    2025年12月3日 · 11 min
    ChatGPTClaude

    对象是 JavaScript 的核心数据结构,几乎一切皆对象。理解对象是掌握 JavaScript 的关键。

    🎯 创建对象

    对象字面量

    // 最常用的方式
    const person = {
    name: '张三',
    age: 25,
    city: '北京',
    }
    // 空对象
    const empty = {}
    // 动态属性名(ES6)
    const key = 'score'
    const student = {
    name: '李四',
    [key]: 90,
    ['is' + 'Active']: true,
    }
    console.log(student) // { name: "李四", score: 90, isActive: true }
    // 简写语法(ES6)
    const name = '王五'
    const age = 30
    const user = { name, age } // 等价于 { name: name, age: age }

    Object 构造函数

    // 基本使用
    const obj = new Object()
    obj.name = '张三'
    // 传入对象会直接返回
    const original = { a: 1 }
    const same = new Object(original)
    console.log(same === original) // true
    // 传入原始值会包装
    const numObj = new Object(42)
    console.log(typeof numObj) // "object"
    console.log(numObj.valueOf()) // 42

    Object.create()

    // 创建以指定对象为原型的对象
    const proto = {
    greet() {
    return `你好,${this.name}`
    },
    }
    const person = Object.create(proto)
    person.name = '张三'
    console.log(person.greet()) // "你好,张三"
    // 创建没有原型的纯净对象
    const pure = Object.create(null)
    console.log(pure.toString) // undefined(没有继承任何方法)
    // 同时定义属性
    const user = Object.create(proto, {
    name: {
    value: '李四',
    writable: true,
    enumerable: true,
    },
    })

    属性访问

    点表示法和括号表示法

    const person = {
    'name': '张三',
    'full name': '张三丰',
    'age': 25,
    }
    // 点表示法:属性名是有效标识符时使用
    console.log(person.name) // "张三"
    console.log(person.age) // 25
    // 括号表示法:属性名包含特殊字符或动态获取
    console.log(person['name']) // "张三"
    console.log(person['full name']) // "张三丰"
    // 动态属性名
    const key = 'age'
    console.log(person[key]) // 25
    // 计算属性名
    const prefix = 'user'
    console.log(person[prefix + 'name'] ?? '不存在') // "不存在"

    可选链操作符

    const user = {
    name: '张三',
    address: {
    city: '北京',
    },
    }
    // 传统写法
    const zip = user && user.address && user.address.zip
    // 可选链(ES2020)
    const zip2 = user?.address?.zip // undefined
    // 方法调用
    const result = user.getName?.() // undefined(不报错)
    // 数组访问
    const arr = null
    console.log(arr?.[0]) // undefined
    // 配合空值合并
    const city = user?.address?.city ?? '未知' // "北京"

    访问不存在的属性

    const obj = { name: '张三' }
    // 返回 undefined
    console.log(obj.age) // undefined
    console.log(obj.address?.city) // undefined
    // in 操作符检查属性是否存在
    console.log('name' in obj) // true
    console.log('age' in obj) // false
    console.log('toString' in obj) // true(继承的属性)
    // hasOwnProperty 只检查自身属性
    console.log(obj.hasOwnProperty('name')) // true
    console.log(obj.hasOwnProperty('toString')) // false
    // Object.hasOwn(ES2022,推荐)
    console.log(Object.hasOwn(obj, 'name')) // true

    属性操作

    添加和修改属性

    const person = { name: '张三' }
    // 添加属性
    person.age = 25
    person['city'] = '北京'
    // 修改属性
    person.name = '李四'
    // 批量添加
    Object.assign(person, {
    email: 'test@example.com',
    phone: '123456',
    })
    // 展开运算符(创建新对象)
    const updated = {
    ...person,
    name: '王五',
    country: '中国',
    }

    删除属性

    const person = {
    name: '张三',
    age: 25,
    city: '北京',
    }
    // delete 操作符
    delete person.age
    console.log(person) // { name: "张三", city: "北京" }
    // delete 返回 true/false
    console.log(delete person.name) // true
    console.log(delete person.notExist) // true(不存在的也返回 true)
    // 不能删除不可配置的属性
    const obj = {}
    Object.defineProperty(obj, 'fixed', {
    value: 42,
    configurable: false,
    })
    console.log(delete obj.fixed) // false
    // 解构实现删除(创建新对象)
    const { city, ...rest } = person
    console.log(rest) // { name: "张三" }

    属性描述符

    const person = { name: '张三' }
    // 获取属性描述符
    const descriptor = Object.getOwnPropertyDescriptor(person, 'name')
    console.log(descriptor)
    // {
    // value: "张三",
    // writable: true, // 可修改
    // enumerable: true, // 可枚举
    // configurable: true // 可配置/删除
    // }
    // 定义单个属性
    Object.defineProperty(person, 'id', {
    value: 1,
    writable: false, // 不可修改
    enumerable: false, // 不可枚举
    configurable: false, // 不可删除/重新配置
    })
    person.id = 2 // 静默失败(严格模式报错)
    console.log(person.id) // 1
    console.log(Object.keys(person)) // ["name"](id 不出现)
    // 定义多个属性
    Object.defineProperties(person, {
    age: { value: 25, writable: true },
    city: { value: '北京', enumerable: true },
    })

    getter 和 setter

    const person = {
    firstName: '三',
    lastName: '张',
    // getter
    get fullName() {
    return this.lastName + this.firstName
    },
    // setter
    set fullName(value) {
    const parts = value.split('')
    this.lastName = parts[0]
    this.firstName = parts.slice(1).join('')
    },
    }
    console.log(person.fullName) // "张三"
    person.fullName = '李四'
    console.log(person.firstName) // "四"
    console.log(person.lastName) // "李"
    // 使用 defineProperty 定义
    const user = { _age: 0 }
    Object.defineProperty(user, 'age', {
    get() {
    return this._age
    },
    set(value) {
    if (value < 0) throw new Error('年龄不能为负')
    this._age = value
    },
    })
    user.age = 25
    console.log(user.age) // 25
    // user.age = -1 // Error: 年龄不能为负

    方法

    定义方法

    const calculator = {
    // 传统方式
    add: function (a, b) {
    return a + b
    },
    // 简写方式(ES6)
    subtract(a, b) {
    return a - b
    },
    // 箭头函数(注意 this)
    multiply: (a, b) => a * b,
    }
    calculator.add(1, 2) // 3
    calculator.subtract(5, 3) // 2
    calculator.multiply(2, 3) // 6

    this 关键字

    const person = {
    name: '张三',
    greet() {
    console.log(`你好,我是${this.name}`)
    },
    // 箭头函数没有自己的 this
    greetArrow: () => {
    console.log(`你好,我是${this.name}`) // this 不是 person
    },
    }
    person.greet() // "你好,我是张三"
    person.greetArrow() // "你好,我是undefined"
    // this 丢失问题
    const greet = person.greet
    greet() // "你好,我是undefined"
    // 解决方案1:bind
    const boundGreet = person.greet.bind(person)
    boundGreet() // "你好,我是张三"
    // 解决方案2:箭头函数包装
    const wrappedGreet = () => person.greet()
    wrappedGreet() // "你好,我是张三"

    对象遍历

    获取键/值/条目

    const person = {
    name: '张三',
    age: 25,
    city: '北京',
    }
    // Object.keys() - 获取所有可枚举的自身属性键
    console.log(Object.keys(person)) // ["name", "age", "city"]
    // Object.values() - 获取所有可枚举的自身属性值
    console.log(Object.values(person)) // ["张三", 25, "北京"]
    // Object.entries() - 获取键值对数组
    console.log(Object.entries(person))
    // [["name", "张三"], ["age", 25], ["city", "北京"]]

    遍历方式

    const person = { name: '张三', age: 25 }
    // for...in(包含继承的可枚举属性)
    for (const key in person) {
    console.log(key, person[key])
    }
    // Object.keys + forEach
    Object.keys(person).forEach((key) => {
    console.log(key, person[key])
    })
    // Object.entries + for...of
    for (const [key, value] of Object.entries(person)) {
    console.log(key, value)
    }
    // Object.entries + forEach
    Object.entries(person).forEach(([key, value]) => {
    console.log(key, value)
    })

    遍历顺序

    const obj = {
    2: 'two',
    1: 'one',
    b: 'bee',
    a: 'ay',
    }
    // 整数键按数值排序,其他按添加顺序
    console.log(Object.keys(obj)) // ["1", "2", "b", "a"]

    对象复制

    浅拷贝

    const original = {
    name: '张三',
    info: { age: 25 },
    }
    // 方式1:展开运算符
    const copy1 = { ...original }
    // 方式2:Object.assign
    const copy2 = Object.assign({}, original)
    // 方式3:Object.fromEntries
    const copy3 = Object.fromEntries(Object.entries(original))
    // 浅拷贝的问题:嵌套对象共享引用
    copy1.info.age = 30
    console.log(original.info.age) // 30(被影响了!)

    深拷贝

    const original = {
    name: '张三',
    info: { age: 25 },
    hobbies: ['读书', '运动'],
    }
    // 方式1:JSON(有限制)
    const deep1 = JSON.parse(JSON.stringify(original))
    // 🔶 不支持:函数、undefined、Symbol、循环引用、Date、RegExp 等
    // 方式2:structuredClone(现代浏览器)
    const deep2 = structuredClone(original)
    // ✅ 支持更多类型,支持循环引用
    // 方式3:手动递归
    function deepClone(obj, hash = new WeakMap()) {
    if (obj === null || typeof obj !== 'object') return obj
    if (hash.has(obj)) return hash.get(obj) // 处理循环引用
    const clone = Array.isArray(obj) ? [] : {}
    hash.set(obj, clone)
    for (const key of Object.keys(obj)) {
    clone[key] = deepClone(obj[key], hash)
    }
    return clone
    }

    对象合并

    const defaults = {
    host: 'localhost',
    port: 3000,
    debug: false,
    }
    const config = {
    port: 8080,
    debug: true,
    }
    // Object.assign(修改第一个参数)
    const merged1 = Object.assign({}, defaults, config)
    console.log(merged1) // { host: "localhost", port: 8080, debug: true }
    // 展开运算符(推荐)
    const merged2 = { ...defaults, ...config }
    // 深度合并���要自定义
    function deepMerge(target, source) {
    for (const key of Object.keys(source)) {
    if (
    source[key] instanceof Object &&
    key in target &&
    target[key] instanceof Object
    ) {
    deepMerge(target[key], source[key])
    } else {
    target[key] = source[key]
    }
    }
    return target
    }

    对象冻结与密封

    Object.freeze

    const config = {
    apiUrl: 'https://api.example.com',
    timeout: 5000,
    }
    Object.freeze(config)
    config.apiUrl = 'http://other.com' // 静默失败
    config.newProp = 'value' // 静默失败
    delete config.timeout // 静默失败
    console.log(config.apiUrl) // "https://api.example.com"
    // 🔶 freeze 是浅冻结
    const nested = {
    outer: {
    inner: 'value',
    },
    }
    Object.freeze(nested)
    nested.outer.inner = 'changed' // 可以修改!
    // 深冻结
    function deepFreeze(obj) {
    Object.keys(obj).forEach((key) => {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
    deepFreeze(obj[key])
    }
    })
    return Object.freeze(obj)
    }

    Object.seal

    const person = { name: '张三', age: 25 }
    Object.seal(person)
    person.name = '李四' // ✅ 可以修改现有属性
    person.city = '北京' // ❌ 不能添加新属性
    delete person.age // ❌ 不能删除属性
    console.log(person) // { name: "李四", age: 25 }
    // 检查状态
    console.log(Object.isFrozen(config)) // true
    console.log(Object.isSealed(person)) // true
    console.log(Object.isExtensible(person)) // false

    对象比较

    // 引用比较
    const obj1 = { a: 1 }
    const obj2 = { a: 1 }
    const obj3 = obj1
    console.log(obj1 === obj2) // false(不同对象)
    console.log(obj1 === obj3) // true(同一引用)
    // 浅比较
    function shallowEqual(obj1, obj2) {
    const keys1 = Object.keys(obj1)
    const keys2 = Object.keys(obj2)
    if (keys1.length !== keys2.length) return false
    return keys1.every((key) => obj1[key] === obj2[key])
    }
    // 深比较
    function deepEqual(obj1, obj2) {
    if (obj1 === obj2) return true
    if (typeof obj1 !== 'object' || typeof obj2 !== 'object') return false
    if (obj1 === null || obj2 === null) return false
    const keys1 = Object.keys(obj1)
    const keys2 = Object.keys(obj2)
    if (keys1.length !== keys2.length) return false
    return keys1.every((key) => deepEqual(obj1[key], obj2[key]))
    }

    常用工具方法

    // 检查是否为空对象
    function isEmpty(obj) {
    return Object.keys(obj).length === 0
    }
    // 从对象中选取部分属性
    function pick(obj, keys) {
    return keys.reduce((result, key) => {
    if (key in obj) result[key] = obj[key]
    return result
    }, {})
    }
    const user = { name: '张三', age: 25, email: 'test@example.com' }
    pick(user, ['name', 'email']) // { name: "张三", email: "test@example.com" }
    // 从对象中排除部分属性
    function omit(obj, keys) {
    const result = { ...obj }
    keys.forEach((key) => delete result[key])
    return result
    }
    omit(user, ['age']) // { name: "张三", email: "test@example.com" }
    // 对象转查询字符串
    function toQueryString(obj) {
    return Object.entries(obj)
    .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`)
    .join('&')
    }
    toQueryString({ name: '张三', age: 25 }) // "name=%E5%BC%A0%E4%B8%89&age=25"

    总结

    操作方法/语法说明
    创建{}、Object.create()字面量最常用
    访问. [] ?.可选链处理 null/undefined
    遍历Object.keys/values/entries获取键/值/条目
    复制{...obj}、structuredClone注意深浅拷贝区别
    合并Object.assign、{...a, ...b}后者覆盖前者
    冻结Object.freeze/sealfreeze 更严格

    核心要点:

    • 对象是引用类型,比较的是引用而不是值
    • 用 ?. 安全访问嵌套属性
    • 用 Object.hasOwn() 检查自身属性
    • 修改对象时注意是否需要深拷贝
    返回 BlogJavaScript
    上一篇函数基础下一篇数组基础
    Skip toc
    • 🎯 创建对象
      • 对象字面量
      • Object 构造函数
      • Object.create()
    • 属性访问
      • 点表示法和括号表示法
      • 可选链操作符
      • 访问不存在的属性
    • 属性操作
      • 添加和修改属性
      • 删除属性
      • 属性描述符
      • getter 和 setter
    • 方法
      • 定义方法
      • this 关键字
    • 对象遍历
      • 获取键/值/条目
      • 遍历方式
      • 遍历顺序
    • 对象复制
      • 浅拷贝
      • 深拷贝
    • 对象合并
    • 对象冻结与密封
      • Object.freeze
      • Object.seal
    • 对象比较
    • 常用工具方法
    • 总结
    Table of Contents
    • 🎯 创建对象
      • 对象字面量
      • Object 构造函数
      • Object.create()
    • 属性访问
      • 点表示法和括号表示法
      • 可选链操作符
      • 访问不存在的属性
    • 属性操作
      • 添加和修改属性
      • 删除属性
      • 属性描述符
      • getter 和 setter
    • 方法
      • 定义方法
      • this 关键字
    • 对象遍历
      • 获取键/值/条目
      • 遍历方式
      • 遍历顺序
    • 对象复制
      • 浅拷贝
      • 深拷贝
    • 对象合并
    • 对象冻结与密封
      • Object.freeze
      • Object.seal
    • 对象比较
    • 常用工具方法
    • 总结
    > share on twitter