ゴゴゴゴゴ
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日 · 12 min
    ChatGPTClaude

    JavaScript 是动态类型语言,变量本身没有类型,值才有类型。理解数据类型是编程的第一步。

    🎯 数据类型概览

    JavaScript 有 8 种数据类型,分为两大类:

    原始类型(Primitive):

    • number - 数字
    • string - 字符串
    • boolean - 布尔值
    • undefined - 未定义
    • null - 空值
    • symbol - 符号(ES6)
    • bigint - 大整数(ES2020)

    引用类型(Reference):

    • object - 对象(包括数组、函数等)
    // 原始类型
    const num = 42
    const str = 'hello'
    const bool = true
    const undef = undefined
    const empty = null
    const sym = Symbol('id')
    const big = 9007199254740991n
    // 引用类型
    const obj = { name: '张三' }
    const arr = [1, 2, 3]
    const fn = function () {}

    Number 类型

    JavaScript 的数字类型遵循 IEEE 754 双精度浮点数标准。

    基本用法

    // 整数
    const int = 42
    const negative = -10
    const hex = 0xff // 十六进制,值为 255
    const binary = 0b1010 // 二进制,值为 10
    const octal = 0o77 // 八进制,��为 63
    // 浮点数
    const float = 3.14
    const scientific = 2.5e6 // 2.5 × 10^6 = 2500000
    // 特殊值
    const inf = Infinity // 无穷大
    const negInf = -Infinity // 负无穷大
    const notNum = NaN // 非数字

    精度问题

    🔶 浮点数运算存在精度问题:

    console.log(0.1 + 0.2) // 0.30000000000000004
    console.log(0.1 + 0.2 === 0.3) // false
    // 解决方案1:转为整数运算
    const result = (0.1 * 10 + 0.2 * 10) / 10 // 0.3
    // 解决方案2:使用 toFixed 后转回数字
    const fixed = Number((0.1 + 0.2).toFixed(10)) // 0.3
    // 解决方案3:判断差值是否足够小
    function equal(a, b) {
    return Math.abs(a - b) < Number.EPSILON
    }
    console.log(equal(0.1 + 0.2, 0.3)) // true

    安全整数范围

    // 最大安全整数
    console.log(Number.MAX_SAFE_INTEGER) // 9007199254740991
    // 超出范围会丢失精度
    console.log(9007199254740992 === 9007199254740993) // true!
    // 使用 BigInt 处理大整数
    const bigNum = 9007199254740993n
    console.log(bigNum) // 9007199254740993n

    NaN 的特殊性

    // NaN 是唯一��等于自身的值
    console.log(NaN === NaN) // false
    // 正确判断 NaN
    console.log(Number.isNaN(NaN)) // true
    console.log(Number.isNaN('hello')) // false(不会强制转换)
    console.log(isNaN('hello')) // true(会强制转换,不推荐)

    String 类型

    字符串是不可变的字符序列。

    创建字符串

    // 三种引号
    const single = '单引号'
    const double = '双引号'
    const template = `模板字符串`
    // 模板字符串支持多行和插值
    const name = '张三'
    const greeting = `你好,${name}!
    今天是星期一。`
    // 转义字符
    const escaped = '第一行\n第二行\t缩进'
    const path = 'C:\\Users\\name' // 反斜杠需转义

    字符串操作

    const str = 'Hello, World!'
    // 长度
    console.log(str.length) // 13
    // 访问字符
    console.log(str[0]) // 'H'
    console.log(str.charAt(0)) // 'H'
    // 字符串不可变
    str[0] = 'h' // 静默失败
    console.log(str) // 'Hello, World!'(没变)
    // ��须创建新字符串
    const newStr = 'h' + str.slice(1)
    console.log(newStr) // 'hello, World!'

    常用方法

    const str = ' Hello, World! '
    // 查找
    str.indexOf('World') // 9
    str.includes('Hello') // true
    str.startsWith(' Hello') // true
    str.endsWith('! ') // true
    // 提取
    str.slice(2, 7) // 'Hello'
    str.substring(2, 7) // 'Hello'
    // 转换
    str.toUpperCase() // ' HELLO, WORLD! '
    str.toLowerCase() // ' hello, world! '
    str.trim() // 'Hello, World!'
    // 分割与连接
    'a,b,c'.split(',') // ['a', 'b', 'c']
    ;['a', 'b', 'c'].join('-') // 'a-b-c'
    // 替换
    str.replace('World', 'JavaScript') // ' Hello, JavaScript! '
    'aaa'.replaceAll('a', 'b') // 'bbb'

    Boolean 类型

    布尔值只有两个:true 和 false。

    假值(Falsy)

    // 这 6 个值转布尔都是 false
    Boolean(false) // false
    Boolean(0) // false
    Boolean('') // false
    Boolean(null) // false
    Boolean(undefined) // false
    Boolean(NaN) // false
    // 其他所有值都是 true
    Boolean('0') // true(非空字符串)
    Boolean([]) // true(空数组)
    Boolean({}) // true(空对象)
    Boolean(function () {}) // true

    实际应用

    // 条件判断
    const value = ''
    if (value) {
    console.log('有值')
    } else {
    console.log('空值') // 执行这里
    }
    // 默认值(旧写法)
    function greet(name) {
    name = name || '游客'
    return `你好,${name}`
    }
    // 🔶 注意:0 和空字符串会被误判
    greet('') // "你好,游客"(可能不是预期)
    greet(0) // "你好,游客"
    // 使用 ?? 更安全(ES2020)
    function greetSafe(name) {
    name = name ?? '游客'
    return `你好,${name}`
    }
    greetSafe('') // "你好,"(保留空字符串)

    Undefined 与 Null

    这两个类型都表示”没有值”,但��义不同。

    undefined

    表示变量已声明但未赋值,或者不存在的属性:

    // 未赋值的变量
    let a
    console.log(a) // undefined
    // 不存在的属性
    const obj = { name: '张三' }
    console.log(obj.age) // undefined
    // 无返回值的函数
    function fn() {}
    console.log(fn()) // undefined
    // 未传递的参数
    function greet(name) {
    console.log(name) // undefined
    }
    greet()

    null

    表示”故意为空”,需要显式赋值:

    // 表示空值
    let user = null // 明确表示"没有用户"
    // 清空引用
    let data = { name: '张三' }
    data = null // 释放对象引用,帮助垃圾回收
    // DOM 查询返回 null
    const element = document.querySelector('.not-exist')
    console.log(element) // null

    比较

    console.log(undefined == null) // true(宽松相等)
    console.log(undefined === null) // false(严格相等)
    console.log(typeof undefined) // "undefined"
    console.log(typeof null) // "object"(历史遗留 bug)
    // 判断 null 的正确方式
    const value = null
    console.log(value === null) // true

    🤔 typeof null 返回 "object" 是 JavaScript 的历史设计缺陷,已经无法修复。

    Symbol 类型

    Symbol 是 ES6 引入的原始类型,每个 Symbol 都是唯一的。

    // 创建 Symbol
    const sym1 = Symbol()
    const sym2 = Symbol()
    console.log(sym1 === sym2) // false
    // 带描述的 Symbol
    const id = Symbol('user_id')
    console.log(id.description) // "user_id"
    // 作为对象属性键
    const user = {
    name: '张三',
    [id]: 12345,
    }
    console.log(user[id]) // 12345
    // Symbol 属性不会被常规方法枚举
    console.log(Object.keys(user)) // ['name']
    console.log(Object.getOwnPropertySymbols(user)) // [Symbol(user_id)]

    BigInt 类型

    BigInt 可以表示任意大的整数,解决了 Number 的精度限制:

    // 创建 BigInt(数字后加 n)
    const big = 9007199254740993n
    console.log(big) // 9007199254740993n
    // 或使用 BigInt() 函数
    const big2 = BigInt('9007199254740993')
    // BigInt 不能和 Number 混合运算
    // console.log(big + 1) // TypeError
    // 必须显式转换
    console.log(big + 1n) // 9007199254740994n
    console.log(Number(big) + 1) // 可能丢失精度

    Object 类型

    对象是键值对的集合,是 JavaScript 中最重要的数据结构。

    // 创建对象
    const person = {
    name: '张三',
    age: 25,
    greet() {
    return `你好,我是${this.name}`
    },
    }
    // 访问属性
    console.log(person.name) // "张三"
    console.log(person['age']) // 25
    // 修改属性
    person.age = 26
    person.city = '北京' // 添加新属性
    // 删除属性
    delete person.city
    // 检查属性
    console.log('name' in person) // true
    console.log(person.hasOwnProperty('name')) // true

    数组

    数组是特殊的对象,索引作为键:

    const arr = [1, 2, 3]
    console.log(typeof arr) // "object"
    console.log(Array.isArray(arr)) // true
    console.log(arr[0]) // 1
    console.log(arr.length) // 3
    arr.push(4) // [1, 2, 3, 4]
    arr.pop() // [1, 2, 3]

    函数

    函数也是对象,但有可调用的特性:

    function add(a, b) {
    return a + b
    }
    console.log(typeof add) // "function"
    // 函数也可以有属性
    add.description = '加法函数'
    console.log(add.description) // "加法函数"

    typeof 运算符

    typeof 用于判断值的类型,返回字符串:

    // 原始类型
    typeof 42 // "number"
    typeof 'hello' // "string"
    typeof true // "boolean"
    typeof undefined // "undefined"
    typeof Symbol() // "symbol"
    typeof 42n // "bigint"
    // 特殊情况
    typeof null // "object"(历史 bug)
    typeof function () {} // "function"
    typeof [] // "object"
    typeof {} // "object"

    🔶 typeof 无法区分 null、数组和普通对象。

    完整的类型判断

    function getType(value) {
    // 处理 null
    if (value === null) return 'null'
    // 处理原始类型
    const type = typeof value
    if (type !== 'object') return type
    // 使用 Object.prototype.toString 区分对象类型
    const objectType = Object.prototype.toString.call(value)
    // "[object Array]" -> "array"
    return objectType.slice(8, -1).toLowerCase()
    }
    // 测试
    console.log(getType(42)) // "number"
    console.log(getType('hello')) // "string"
    console.log(getType(null)) // "null"
    console.log(getType(undefined)) // "undefined"
    console.log(getType([])) // "array"
    console.log(getType({})) // "object"
    console.log(getType(function () {})) // "function"
    console.log(getType(new Date())) // "date"
    console.log(getType(/regex/)) // "regexp"
    console.log(getType(new Map())) // "map"
    console.log(getType(new Set())) // "set"

    原始类型 vs 引用类型

    存储方式

    // 原始类型:值存储在栈中
    let a = 10
    let b = a // 复制值
    b = 20
    console.log(a) // 10(不受影响)
    // 引用类型:引用存储在栈中,对象存储在堆中
    let obj1 = { name: '张三' }
    let obj2 = obj1 // 复制引用
    obj2.name = '李四'
    console.log(obj1.name) // "李四"(被影响了!)

    比较方式

    // 原始类型比较值
    console.log(10 === 10) // true
    console.log('hello' === 'hello') // true
    // 引用类型比较引用
    console.log({} === {}) // false(不同的对象)
    console.log([] === []) // false
    const arr1 = [1, 2, 3]
    const arr2 = arr1
    console.log(arr1 === arr2) // true(同一个引用)

    深拷贝浅拷贝

    const original = {
    name: '张三',
    info: { age: 25 },
    }
    // 浅拷贝:只复制第一层
    const shallow = { ...original }
    shallow.info.age = 30
    console.log(original.info.age) // 30(被影响了)
    // 深拷贝:递归复制所有层
    const deep = JSON.parse(JSON.stringify(original))
    deep.info.age = 35
    console.log(original.info.age) // 30(不受影响)
    // 🔶 JSON 方法的限制:不支持函数、undefined、Symbol、循环引用

    常见陷阱

    🙋 为什么 typeof null 是 “object”?

    这是 JavaScript 最初的实现 bug。在 JS 第一版中,值以 32 位存储,类型标签占低 3 位。对象的标签是 000,而 null 被表示为空指针(全是 0),所以被误判为对象。

    🙋 空数组和空对象为什么是真值?

    // [] 和 {} 虽然"空",但它们是对象引用,不是 falsy 值
    if ([]) console.log('空数组是真值')
    if ({}) console.log('空对象是真值')
    // 判断数组是否为空
    const arr = []
    if (arr.length === 0) console.log('数组为空')
    // 判断对象是否为空
    const obj = {}
    if (Object.keys(obj).length === 0) console.log('对象为空')

    🙋 字符串比较的坑

    // 字符串按 Unicode 码点比较
    console.log('10' > '9') // false!因为 '1' < '9'
    console.log('10' > 9) // true(类型转换后数值比较)
    // 比较数字字符串要先转换
    console.log(Number('10') > Number('9')) // true

    总结

    类型typeof 结果特点
    number”number”双精度浮点,有精度问题
    string”string”不可变字符序列
    boolean”boolean”true 或 false
    undefined”undefined”未赋值
    null”object”故意为空,typeof 有 bug
    symbol”symbol”唯一标识符
    bigint”bigint”任意精度整数
    object”object”键值对集合,包括数组函数
    function”function”可调用的对象

    核心要点:

    • 原始类型存值,引用类型存引用
    • 使用 === 严格比较,避免隐式转换
    • typeof 有局限,复杂类型判断用 Object.prototype.toString
    返回 BlogJavaScript
    上一篇JavaScript 简介下一篇运算符
    Skip toc
    • 🎯 数据类型概览
    • Number 类型
      • 基本用法
      • 精度问题
      • 安全整数范围
      • NaN 的特殊性
    • String 类型
      • 创建字符串
      • 字符串操作
      • 常用方法
    • Boolean 类型
      • 假值(Falsy)
      • 实际应用
    • Undefined 与 Null
      • undefined
      • null
      • 比较
    • Symbol 类型
    • BigInt 类型
    • Object 类型
      • 数组
      • 函数
    • typeof 运算符
    • 完整的类型判断
    • 原始类型 vs 引用类型
      • 存储方式
      • 比较方式
      • 深拷贝浅拷贝
    • 常见陷阱
      • 🙋 为什么 typeof null 是 "object"?
      • 🙋 空数组和空对象为什么是真值?
      • 🙋 字符串比较的坑
    • 总结
    Table of Contents
    • 🎯 数据类型概览
    • Number 类型
      • 基本用法
      • 精度问题
      • 安全整数范围
      • NaN 的特殊性
    • String 类型
      • 创建字符串
      • 字符串操作
      • 常用方法
    • Boolean 类型
      • 假值(Falsy)
      • 实际应用
    • Undefined 与 Null
      • undefined
      • null
      • 比较
    • Symbol 类型
    • BigInt 类型
    • Object 类型
      • 数组
      • 函数
    • typeof 运算符
    • 完整的类型判断
    • 原始类型 vs 引用类型
      • 存储方式
      • 比较方式
      • 深拷贝浅拷贝
    • 常见陷阱
      • 🙋 为什么 typeof null 是 "object"?
      • 🙋 空数组和空对象为什么是真值?
      • 🙋 字符串比较的坑
    • 总结
    > share on twitter