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

    运算符是用于对值进行操���的符号。理解运算符及其优先级,是写出正确表达式的基础。

    🎯 算术运算符

    基本运算

    // 加减乘除
    console.log(10 + 3) // 13
    console.log(10 - 3) // 7
    console.log(10 * 3) // 30
    console.log(10 / 3) // 3.3333...
    // 取余(模运算)
    console.log(10 % 3) // 1
    console.log(-10 % 3) // -1(符号跟被除数)
    // 指数运算(ES2016)
    console.log(2 ** 3) // 8
    console.log(4 ** 0.5) // 2(开平方)

    自增自减

    let a = 5
    // 后置:先返回原值,再自增
    console.log(a++) // 5
    console.log(a) // 6
    // 前置:先自增,再返回新值
    console.log(++a) // 7
    console.log(a) // 7
    // 自减同理
    let b = 5
    console.log(b--) // 5
    console.log(--b) // 3

    🔶 避免在复杂表达式中使用自增自减,容易造成困惑:

    // 不推荐
    let x = 1
    const result = x++ + ++x + x++ // 难以理解
    // 推荐:拆分成多个语句
    let y = 1
    y += 1
    const step1 = y
    y += 1
    const step2 = y
    // ...

    加号的特殊性

    加号既是算术运算符,也是字符串连接符:

    // 数字相加
    console.log(5 + 3) // 8
    // 字符串连接
    console.log('Hello' + ' ' + 'World') // "Hello World"
    // 🔶 混合运算��陷阱!)
    console.log('5' + 3) // "53"(字符串)
    console.log(5 + '3') // "53"(字符串)
    console.log(5 + 3 + '2') // "82"(先算 5+3=8,再连接)
    console.log('2' + 5 + 3) // "253"(从左到右都是连接)
    // 强制数值运算
    console.log(+'5' + 3) // 8
    console.log(Number('5') + 3) // 8

    比较运算符

    相等比较

    // == 宽松相等(会类型转换)
    console.log(5 == '5') // true
    console.log(0 == false) // true
    console.log(null == undefined) // true
    console.log('' == false) // true
    // === 严格相等(不转换类型)
    console.log(5 === '5') // false
    console.log(0 === false) // false
    console.log(null === undefined) // false

    ✅ 最佳实践:始终使用 === 和 !==,避免隐式类型转换带来的意外。

    大小比较

    // 数值比较
    console.log(5 > 3) // true
    console.log(5 >= 5) // true
    console.log(3 < 5) // true
    console.log(3 <= 3) // true
    // 字符串比较(按 Unicode 码点)
    console.log('a' < 'b') // true
    console.log('abc' < 'abd') // true
    console.log('10' < '9') // true!('1' < '9')
    // 混合比较(字符串转��值)
    console.log('10' > 9) // true(10 > 9)
    console.log('10' > '9') // false(字符串比较)

    特殊值比较

    // NaN 与任何值比较都是 false
    console.log(NaN == NaN) // false
    console.log(NaN === NaN) // false
    console.log(NaN > 0) // false
    console.log(NaN < 0) // false
    // null 和 undefined
    console.log(null == undefined) // true
    console.log(null === undefined) // false
    console.log(null > 0) // false
    console.log(null < 0) // false
    console.log(null >= 0) // true!(null 转为 0)

    逻辑运算符

    与或非

    // && 逻辑与
    console.log(true && true) // true
    console.log(true && false) // false
    console.log(false && true) // false
    // || 逻辑或
    console.log(true || false) // true
    console.log(false || true) // true
    console.log(false || false) // false
    // ! 逻辑非
    console.log(!true) // false
    console.log(!false) // true
    console.log(!0) // true
    console.log(!'') // true
    console.log(!null) // true

    短路求值

    逻辑运算符不一定返回布尔值,而是返回决定结果的那个值:

    // && 返回第一个假值,或最后一个值
    console.log('hello' && 'world') // "world"
    console.log('' && 'world') // ""
    console.log(null && 'world') // null
    console.log(1 && 2 && 3) // 3
    // || 返回第一个真值,或最后一个值
    console.log('' || 'default') // "default"
    console.log('hello' || 'default') // "hello"
    console.log(0 || null || 'last') // "last"
    console.log(0 || '' || false) // false

    实际应用

    // 默认值
    function greet(name) {
    name = name || '游客'
    return `你好,${name}`
    }
    // 条件执行
    const user = { name: '张三' }
    user && console.log(user.name) // "张三"
    // 短路保护
    const config = null
    const port = config && config.port // undefined(不会报错)
    // 链式取值(旧写法)
    const street = user && user.address && user.address.street

    空值合并运算符 ??

    ES2020 引入的 ?? 只在值为 null 或 undefined 时才取默认值:

    // || 的问题:0 和空字符串会被误判
    console.log(0 || 100) // 100(可能不是预期)
    console.log('' || 'default') // "default"
    // ?? 只对 null/undefined 生效
    console.log(0 ?? 100) // 0
    console.log('' ?? 'default') // ""
    console.log(null ?? 'default') // "default"
    console.log(undefined ?? 'default') // "default"
    // 实际场景
    function setVolume(level) {
    level = level ?? 50 // 允许设置为 0
    console.log(`音量:${level}`)
    }
    setVolume(0) // "音量:0"
    setVolume() // "音量:50"

    位运算符

    位运算符将操作数转为 32 位整数进行运算。

    基本位运算

    // & 按位与
    console.log(5 & 3) // 1
    // 0101 & 0011 = 0001
    // | 按位或
    console.log(5 | 3) // 7
    // 0101 | 0011 = 0111
    // ^ 按位异或
    console.log(5 ^ 3) // 6
    // 0101 ^ 0011 = 0110
    // ~ 按位取反
    console.log(~5) // -6
    // ~0101 = 1010...(32位补码)
    // << 左移
    console.log(5 << 1) // 10
    // 0101 << 1 = 1010
    // >> 有符号右移
    console.log(5 >> 1) // 2
    // 0101 >> 1 = 0010
    // >>> 无符号右移
    console.log(-1 >>> 0) // 4294967295

    实际应用

    // 快速取整(截断小数)
    console.log(~~3.7) // 3
    console.log(3.7 | 0) // 3
    console.log(3.7 >> 0) // 3
    // 快速乘除 2 的幂
    console.log(5 << 2) // 20(5 * 4)
    console.log(20 >> 2) // 5(20 / 4)
    // 判断奇偶
    console.log(5 & 1) // 1(奇数)
    console.log(6 & 1) // 0(偶数)
    // 交换两个数(不用临时变量)
    let a = 5,
    b = 3
    a = a ^ b // a = 6
    b = a ^ b // b = 5
    a = a ^ b // a = 3
    console.log(a, b) // 3, 5
    // 权限管理
    const READ = 1 // 0001
    const WRITE = 2 // 0010
    const EXECUTE = 4 // 0100
    let permission = READ | WRITE // 0011 = 3
    console.log(permission & READ) // 1(有读权限)
    console.log(permission & EXECUTE) // 0(无执行权限)

    赋值运算符

    复合赋值

    let x = 10
    x += 5 // x = x + 5 = 15
    x -= 3 // x = x - 3 = 12
    x *= 2 // x = x * 2 = 24
    x /= 4 // x = x / 4 = 6
    x %= 4 // x = x % 4 = 2
    x **= 3 // x = x ** 3 = 8
    // 位运算赋值
    x &= 3 // x = x & 3
    x |= 4 // x = x | 4
    x ^= 1 // x = x ^ 1
    x <<= 1 // x = x << 1
    x >>= 1 // x = x >> 1

    逻辑赋值(ES2021)

    let a = null
    let b = 'hello'
    let c = ''
    // ||= 如果左侧为假值则赋值
    a ||= 'default' // a = 'default'
    b ||= 'default' // b = 'hello'(不变)
    // &&= 如果左侧为真值则赋值
    b &&= 'world' // b = 'world'
    c &&= 'world' // c = ''(不变)
    // ??= 如果左侧为 null/undefined 则赋值
    let d = 0
    d ??= 100 // d = 0(不变,因为 0 不是 null/undefined)
    let e = null
    e ??= 100 // e = 100

    其他运算符

    条件(三元)运算符

    const age = 18
    const status = age >= 18 ? '成年' : '未成年'
    console.log(status) // "成年"
    // 可以嵌套(但不推荐太深)
    const score = 85
    const grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 60 ? 'C' : 'D'
    console.log(grade) // "B"
    // 推荐使用 if 或对象映射替代复杂的三元运算

    逗号运算符

    // 从左到右求值,返回最后一个值
    const result = (1, 2, 3)
    console.log(result) // 3
    // 常见于 for 循环
    for (let i = 0, j = 10; i < j; i++, j--) {
    console.log(i, j)
    }
    // 在一行中执行多个表达式
    let x = ((a = 1), (b = 2), a + b)
    console.log(x) // 3

    可选链运算符 ?.

    安全地访问嵌套属性:

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

    typeof 和 instanceof

    // typeof 检查类型
    console.log(typeof 42) // "number"
    console.log(typeof 'hello') // "string"
    console.log(typeof true) // "boolean"
    console.log(typeof undefined) // "undefined"
    console.log(typeof null) // "object"(历史bug)
    console.log(typeof {}) // "object"
    console.log(typeof []) // "object"
    console.log(typeof function () {}) // "function"
    // instanceof 检查原型链
    console.log([] instanceof Array) // true
    console.log([] instanceof Object) // true
    console.log({} instanceof Array) // false
    console.log(function () {} instanceof Function) // true

    delete 运算符

    const obj = { name: '张三', age: 25 }
    delete obj.age
    console.log(obj) // { name: "张三" }
    // 数组元素删除(留下空位)
    const arr = [1, 2, 3]
    delete arr[1]
    console.log(arr) // [1, empty, 3]
    console.log(arr.length) // 3(长度不变)
    // 推荐用 splice 删除数组元素
    arr.splice(1, 1) // 从索引1删除1个元素

    in 运算符

    const obj = { name: '张三' }
    console.log('name' in obj) // true
    console.log('age' in obj) // false
    console.log('toString' in obj) // true(继承的属性)
    // 数组中检查索引
    const arr = [1, 2, 3]
    console.log(0 in arr) // true
    console.log(5 in arr) // false
    console.log('length' in arr) // true

    运算符优先级

    优先级从高到低排列(部分常用):

    优先级运算符描述
    19()分组
    18. [] () ?.成员访问、调用
    17new(带参数)创建实例
    16++ --(后置)后置自增/减
    15! ~ + - ++ --一元运算符
    14**指数
    13* / %乘除取余
    12+ -加减
    11<< >> >>>位移
    10< <= > >= in比较
    9== != === !==相等
    8&按位与
    7^按位异或
    6|按位或
    5&&逻辑与
    4|| ??逻辑或
    3? :条件
    2= += -= 等赋值
    1,逗号

    实际例子

    // && 优先于 ||
    console.log(true || (false && false)) // true
    console.log((true || false) && false) // false
    // 比较优先于逻辑
    console.log(1 + 2 > 2 && 3 < 4) // true
    // 等价于 ((1 + 2) > 2) && (3 < 4)
    // 一元运算符优先于二元
    console.log(!true && false) // false
    console.log(!(true && false)) // true
    // 🔶 不确定时就加括号!
    const result = a > b ? a : c > d ? c : d
    // 推荐明确写出
    const result2 = a > b ? a : c > d ? c : d

    常见陷阱

    🙋 连续比较不是数学意义

    // 数学上:1 < 2 < 3 是对的
    console.log(1 < 2 < 3) // true,但原因是...
    // 1 < 2 = true
    // true < 3 = 1 < 3 = true
    console.log(3 > 2 > 1) // false!
    // 3 > 2 = true
    // true > 1 = 1 > 1 = false
    // 正确写法
    console.log(1 < 2 && 2 < 3) // true

    🙋 + 和 - 的一元用法

    // + 转数值
    console.log(+'42') // 42
    console.log(+'hello') // NaN
    console.log(+true) // 1
    console.log(+new Date()) // 时间戳
    // - 转负数值
    console.log(-'42') // -42
    // 常见写法
    const timestamp = +new Date()
    const num = +inputValue || 0

    🙋 ?? 不能和 && || 直接混用

    // 语法错误,需要加括号明确优先级
    // console.log(a || b ?? c) // SyntaxError
    console.log((a || b) ?? c) // OK
    console.log(a || (b ?? c)) // OK

    总结

    类别运算符要点
    算术+ - * / % **注意 + 的字符串连接
    比较== === != !== > <始终用 ===
    逻辑&& || !理解短路求值
    空值?? ?.安全处理 null/undefined
    位运算& | ^ ~ << >>用于性能优化和权限管理
    赋值= += -= &&= ??=逻辑赋值是 ES2021 新增
    其他typeof instanceof类型和原型链检查

    核心建议:

    • 使用 === 严格比较
    • 用 ?? 代替 || 处理默认值
    • 用 ?. 安全访问嵌套属性
    • 不确定优先级时加括号
    返回 BlogJavaScript
    上一篇变量与数据类型下一篇类型转换
    Skip toc
    • 🎯 算术运算符
      • 基本运算
      • 自增自减
      • 加号的特殊性
    • 比较运算符
      • 相等比较
      • 大小比较
      • 特殊值比较
    • 逻辑运算符
      • 与或非
      • 短路求值
      • 实际应用
      • 空值合并运算符 ??
    • 位运算符
      • 基本位运算
      • 实际应用
    • 赋值运算符
      • 复合赋值
      • 逻辑赋值(ES2021)
    • 其他运算符
      • 条件(三元)运算符
      • 逗号运算符
      • 可选链运算符 ?.
      • typeof 和 instanceof
      • delete 运算符
      • in 运算符
    • 运算符优先级
      • 实际例子
    • 常见陷阱
      • 🙋 连续比较不是数学意义
      • 🙋 + 和 - 的一元用法
      • 🙋 ?? 不能和 && || 直接混用
    • 总结
    Table of Contents
    • 🎯 算术运算符
      • 基本运算
      • 自增自减
      • 加号的特殊性
    • 比较运算符
      • 相等比较
      • 大小比较
      • 特殊值比较
    • 逻辑运算符
      • 与或非
      • 短路求值
      • 实际应用
      • 空值合并运算符 ??
    • 位运算符
      • 基本位运算
      • 实际应用
    • 赋值运算符
      • 复合赋值
      • 逻辑赋值(ES2021)
    • 其他运算符
      • 条件(三元)运算符
      • 逗号运算符
      • 可选链运算符 ?.
      • typeof 和 instanceof
      • delete 运算符
      • in 运算符
    • 运算符优先级
      • 实际例子
    • 常见陷阱
      • 🙋 连续比较不是数学意义
      • 🙋 + 和 - 的一元用法
      • 🙋 ?? 不能和 && || 直接混用
    • 总结
    > share on twitter