ゴゴゴゴゴ
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 中最常用的数据结构之一。

    🎯 创建数组

    数组字面量

    // 最常用的方式
    const fruits = ['苹果', '香蕉', '橘子']
    // 空数组
    const empty = []
    // 混合类���(不推荐)
    const mixed = [1, 'hello', true, { name: '张三' }, [1, 2]]
    // 稀疏数组(有空位)
    const sparse = [1, , , 4]
    console.log(sparse.length) // 4
    console.log(sparse[1]) // undefined

    Array 构造函数

    // 单个数字参数:创建指定长度的空数组
    const arr1 = new Array(3)
    console.log(arr1.length) // 3
    console.log(arr1[0]) // undefined
    // 多个参数:创建包含这些元素的数组
    const arr2 = new Array(1, 2, 3)
    console.log(arr2) // [1, 2, 3]
    // 🔶 单参数时容易混淆,建议用 Array.of
    const arr3 = Array.of(3)
    console.log(arr3) // [3]

    Array.from

    // 从类数组创建
    const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 }
    const arr1 = Array.from(arrayLike)
    console.log(arr1) // ["a", "b", "c"]
    // 从字符串创建
    const arr2 = Array.from('hello')
    console.log(arr2) // ["h", "e", "l", "l", "o"]
    // 从 Set 创建
    const set = new Set([1, 2, 2, 3])
    const arr3 = Array.from(set)
    console.log(arr3) // [1, 2, 3]
    // 带映射函数
    const arr4 = Array.from([1, 2, 3], (x) => x * 2)
    console.log(arr4) // [2, 4, 6]
    // 生成序列
    const sequence = Array.from({ length: 5 }, (_, i) => i + 1)
    console.log(sequence) // [1, 2, 3, 4, 5]

    Array.fill 填充

    // 创建并填充
    const zeros = new Array(5).fill(0)
    console.log(zeros) // [0, 0, 0, 0, 0]
    // 填充指定范围
    const arr = [1, 2, 3, 4, 5]
    arr.fill(0, 1, 3) // 从索引1到3(不含)
    console.log(arr) // [1, 0, 0, 4, 5]
    // 🔶 fill 对引用类型是共享的
    const refs = new Array(3).fill([])
    refs[0].push(1)
    console.log(refs) // [[1], [1], [1]](三个是同一个数组!)
    // 正确创建独立数组
    const independent = Array.from({ length: 3 }, () => [])
    independent[0].push(1)
    console.log(independent) // [[1], [], []]

    索引访问

    读取和修改

    const arr = ['a', 'b', 'c', 'd', 'e']
    // 读取
    console.log(arr[0]) // "a"
    console.log(arr[2]) // "c"
    console.log(arr[-1]) // undefined(不支持负索引)
    // 使用 at() 支持负索引(ES2022)
    console.log(arr.at(0)) // "a"
    console.log(arr.at(-1)) // "e"(最后一个)
    console.log(arr.at(-2)) // "d"
    // 修改
    arr[1] = 'B'
    console.log(arr) // ["a", "B", "c", "d", "e"]
    // 超出范围添加(会产生空位)
    arr[10] = 'x'
    console.log(arr.length) // 11
    console.log(arr[7]) // undefined

    length 属性

    const arr = [1, 2, 3, 4, 5]
    // 获取长度
    console.log(arr.length) // 5
    // 设置 length 可以截断或扩展数组
    arr.length = 3
    console.log(arr) // [1, 2, 3]
    arr.length = 5
    console.log(arr) // [1, 2, 3, empty × 2]
    // 清空数组
    arr.length = 0
    console.log(arr) // []

    添加和删除元素

    push 和 pop(尾部操作)

    const arr = [1, 2, 3]
    // push:添加到末尾,返回新长度
    const len = arr.push(4, 5)
    console.log(arr) // [1, 2, 3, 4, 5]
    console.log(len) // 5
    // pop:移除最后一个,返回移除的元素
    const last = arr.pop()
    console.log(arr) // [1, 2, 3, 4]
    console.log(last) // 5
    // 空数组 pop 返回 undefined
    console.log([].pop()) // undefined

    unshift 和 shift(头部操作)

    const arr = [1, 2, 3]
    // unshift:添加到开头,返回新长度
    arr.unshift(0)
    console.log(arr) // [0, 1, 2, 3]
    // shift:移除第一个,返回移除的元素
    const first = arr.shift()
    console.log(arr) // [1, 2, 3]
    console.log(first) // 0
    // 🔶 头部操作比尾部操作慢(需要移动其他元素)

    splice(任意位置操作)

    const arr = [1, 2, 3, 4, 5]
    // splice(start, deleteCount, ...items)
    // 删除元素
    const removed = arr.splice(2, 2) // 从索引2删除2个
    console.log(arr) // [1, 2, 5]
    console.log(removed) // [3, 4]
    // 插入元素
    arr.splice(2, 0, 'a', 'b') // 在索引2插入,不删除
    console.log(arr) // [1, 2, "a", "b", 5]
    // 替换元素
    arr.splice(2, 2, 3, 4) // 删除2个,插入2个
    console.log(arr) // [1, 2, 3, 4, 5]
    // 负索引
    arr.splice(-1, 1) // 删除最后一个
    console.log(arr) // [1, 2, 3, 4]

    concat(合并数组)

    const arr1 = [1, 2]
    const arr2 = [3, 4]
    const arr3 = [5, 6]
    // 不修改原数组,返回新数组
    const combined = arr1.concat(arr2, arr3)
    console.log(combined) // [1, 2, 3, 4, 5, 6]
    console.log(arr1) // [1, 2](原数组不变)
    // 也可以传入单个值
    const extended = arr1.concat(3, 4, [5, 6])
    console.log(extended) // [1, 2, 3, 4, 5, 6]
    // 使用展开运算符(更常用)
    const merged = [...arr1, ...arr2, ...arr3]

    查找元素

    indexOf 和 lastIndexOf

    const arr = [1, 2, 3, 2, 1]
    // indexOf:从前往后找
    console.log(arr.indexOf(2)) // 1
    console.log(arr.indexOf(5)) // -1(未找到)
    // 指定起始位置
    console.log(arr.indexOf(2, 2)) // 3
    // lastIndexOf:从后往前找
    console.log(arr.lastIndexOf(2)) // 3
    // 🔶 使用严格相等比较
    console.log([1, 2, 3].indexOf('2')) // -1
    console.log([NaN].indexOf(NaN)) // -1(NaN 不等于自身)

    includes

    const arr = [1, 2, 3, NaN]
    console.log(arr.includes(2)) // true
    console.log(arr.includes(5)) // false
    // 可以找到 NaN
    console.log(arr.includes(NaN)) // true(indexOf 做不到)
    // 指定起始位置
    console.log(arr.includes(1, 1)) // false

    find 和 findIndex

    const users = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
    ]
    // find:返回第一个满足条件的元素
    const user = users.find((u) => u.id === 2)
    console.log(user) // { id: 2, name: "李四" }
    // 未找到返回 undefined
    const notFound = users.find((u) => u.id === 5)
    console.log(notFound) // undefined
    // findIndex:返回第一个满足条件的索引
    const index = users.findIndex((u) => u.name === '王五')
    console.log(index) // 2
    // findLast 和 findLastIndex(ES2023)
    const lastEven = [1, 2, 3, 4, 5].findLast((n) => n % 2 === 0)
    console.log(lastEven) // 4

    遍历方法

    forEach

    const arr = ['a', 'b', 'c']
    arr.forEach((item, index, array) => {
    console.log(index, item)
    })
    // 0 "a"
    // 1 "b"
    // 2 "c"
    // 🔶 forEach 不能中断
    arr.forEach((item) => {
    if (item === 'b') return // 只是跳过当前迭代
    console.log(item)
    })
    // 输出 a 和 c
    // 需要中断时使用 for...of 或 some/every

    map(映射)

    const numbers = [1, 2, 3, 4, 5]
    // 返回新数组
    const doubled = numbers.map((n) => n * 2)
    console.log(doubled) // [2, 4, 6, 8, 10]
    console.log(numbers) // [1, 2, 3, 4, 5](原数组不变)
    // 提取对象属性
    const users = [
    { name: '张三', age: 25 },
    { name: '李四', age: 30 },
    ]
    const names = users.map((u) => u.name)
    console.log(names) // ["张三", "李四"]
    // 链式调用
    const result = numbers.map((n) => n * 2).map((n) => n + 1)
    console.log(result) // [3, 5, 7, 9, 11]

    filter(过滤)

    const numbers = [1, 2, 3, 4, 5, 6]
    // 返回满足条件的元素
    const evens = numbers.filter((n) => n % 2 === 0)
    console.log(evens) // [2, 4, 6]
    // 过滤对象数组
    const users = [
    { name: '张三', age: 25, active: true },
    { name: '李四', age: 30, active: false },
    { name: '王五', age: 28, active: true },
    ]
    const activeUsers = users.filter((u) => u.active)
    console.log(activeUsers.length) // 2
    // 移除假值
    const mixed = [0, 1, '', 'hello', null, undefined, false, true]
    const truthy = mixed.filter(Boolean)
    console.log(truthy) // [1, "hello", true]

    reduce(归约)

    const numbers = [1, 2, 3, 4, 5]
    // 求和
    const sum = numbers.reduce((acc, cur) => acc + cur, 0)
    console.log(sum) // 15
    // 求最大值
    const max = numbers.reduce((a, b) => (a > b ? a : b))
    console.log(max) // 5
    // 数组转对象
    const users = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    ]
    const userMap = users.reduce((map, user) => {
    map[user.id] = user
    return map
    }, {})
    console.log(userMap) // { 1: {...}, 2: {...} }
    // 扁平化数组
    const nested = [[1, 2], [3, 4], [5]]
    const flat = nested.reduce((acc, cur) => acc.concat(cur), [])
    console.log(flat) // [1, 2, 3, 4, 5]
    // 分组
    const items = [
    { type: 'fruit', name: '苹果' },
    { type: 'vegetable', name: '白菜' },
    { type: 'fruit', name: '香蕉' },
    ]
    const grouped = items.reduce((groups, item) => {
    const key = item.type
    groups[key] = groups[key] || []
    groups[key].push(item)
    return groups
    }, {})
    // { fruit: [...], vegetable: [...] }
    // Object.groupBy(ES2024)
    const grouped2 = Object.groupBy(items, (item) => item.type)

    some 和 every

    const numbers = [1, 2, 3, 4, 5]
    // some:至少有一个满足条件
    console.log(numbers.some((n) => n > 3)) // true
    console.log(numbers.some((n) => n > 10)) // false
    // every:所有都满足条件
    console.log(numbers.every((n) => n > 0)) // true
    console.log(numbers.every((n) => n > 3)) // false
    // 可以提前终止
    const arr = [1, 2, 3, 4, 5]
    arr.some((n) => {
    console.log(n)
    return n === 3 // 找到 3 后停止
    })
    // 输出 1, 2, 3

    排序

    sort

    // 默认按字符串排序
    const arr = [10, 2, 1, 21]
    arr.sort()
    console.log(arr) // [1, 10, 2, 21](字符串顺序)
    // 数字排序需要比较函数
    arr.sort((a, b) => a - b) // 升序
    console.log(arr) // [1, 2, 10, 21]
    arr.sort((a, b) => b - a) // 降序
    console.log(arr) // [21, 10, 2, 1]
    // 对象排序
    const users = [
    { name: '张三', age: 30 },
    { name: '李四', age: 25 },
    { name: '王五', age: 28 },
    ]
    users.sort((a, b) => a.age - b.age)
    // 按年龄升序
    // 字符串排序
    const names = ['张三', '李四', '王五']
    names.sort((a, b) => a.localeCompare(b, 'zh-CN'))
    // 🔶 sort 会修改原数组

    toSorted(ES2023,不可变)

    const arr = [3, 1, 2]
    const sorted = arr.toSorted((a, b) => a - b)
    console.log(sorted) // [1, 2, 3]
    console.log(arr) // [3, 1, 2](原数组不变)

    reverse

    const arr = [1, 2, 3, 4, 5]
    arr.reverse()
    console.log(arr) // [5, 4, 3, 2, 1]
    // toReversed(ES2023,不可变)
    const arr2 = [1, 2, 3]
    const reversed = arr2.toReversed()
    console.log(reversed) // [3, 2, 1]
    console.log(arr2) // [1, 2, 3](原数组不变)

    数组转换

    slice(切片)

    const arr = [1, 2, 3, 4, 5]
    // 提取子数组(不修改原数组)
    console.log(arr.slice(1, 4)) // [2, 3, 4]
    console.log(arr.slice(2)) // [3, 4, 5]
    console.log(arr.slice(-2)) // [4, 5]
    console.log(arr.slice(1, -1)) // [2, 3, 4]
    // 浅拷贝数组
    const copy = arr.slice()

    flat(扁平化)

    const nested = [1, [2, [3, [4]]]]
    console.log(nested.flat()) // [1, 2, [3, [4]]](默认深度1)
    console.log(nested.flat(2)) // [1, 2, 3, [4]]
    console.log(nested.flat(Infinity)) // [1, 2, 3, 4](完全扁平)
    // flatMap = map + flat(1)
    const arr = [1, 2, 3]
    const result = arr.flatMap((x) => [x, x * 2])
    console.log(result) // [1, 2, 2, 4, 3, 6]

    join(转字符串)

    const arr = ['苹果', '香蕉', '橘子']
    console.log(arr.join()) // "苹果,香蕉,橘子"
    console.log(arr.join('-')) // "苹果-香蕉-橘子"
    console.log(arr.join('')) // "苹果香蕉橘子"
    // 与 split 配合
    const str = 'a-b-c'
    const parts = str.split('-')
    const rejoined = parts.join('_')
    console.log(rejoined) // "a_b_c"

    判断数组

    // Array.isArray(推荐)
    console.log(Array.isArray([])) // true
    console.log(Array.isArray({})) // false
    console.log(Array.isArray('hello')) // false
    // instanceof(跨 iframe 可能失效)
    console.log([] instanceof Array) // true
    // Object.prototype.toString
    console.log(Object.prototype.toString.call([])) // "[object Array]"

    不可变数组方法(ES2023)

    const arr = [3, 1, 2]
    // toSorted - 排序
    arr.toSorted((a, b) => a - b) // [1, 2, 3]
    // toReversed - 反转
    arr.toReversed() // [2, 1, 3]
    // toSpliced - 替换
    arr.toSpliced(1, 1, 'a', 'b') // [3, "a", "b", 2]
    // with - 替换单个元素
    arr.with(1, 100) // [3, 100, 2]
    // 原数组始终不变
    console.log(arr) // [3, 1, 2]

    实用技巧

    // 去重
    const unique = [...new Set([1, 2, 2, 3, 3, 3])]
    console.log(unique) // [1, 2, 3]
    // 交集
    const intersection = [1, 2, 3].filter((x) => [2, 3, 4].includes(x))
    console.log(intersection) // [2, 3]
    // 差集
    const difference = [1, 2, 3].filter((x) => ![2, 3, 4].includes(x))
    console.log(difference) // [1]
    // 打乱数组
    function shuffle(arr) {
    return arr.sort(() => Math.random() - 0.5)
    }
    // 随机取一个
    function randomItem(arr) {
    return arr[Math.floor(Math.random() * arr.length)]
    }
    // 分块
    function chunk(arr, size) {
    return Array.from({ length: Math.ceil(arr.length / size) }, (_, i) =>
    arr.slice(i * size, (i + 1) * size)
    )
    }
    chunk([1, 2, 3, 4, 5], 2) // [[1, 2], [3, 4], [5]]

    总结

    方法作用修改原数组返回值
    push/pop尾部操作是长度/元素
    unshift/shift头部操作是长度/元素
    splice任意位置操作是删除的元素
    map映射否新数组
    filter过滤否新数组
    reduce归约否任意值
    find查找元素否元素/undefined
    sort排序是原数组
    toSorted排序否新数组

    核心建议:

    • 优先使用不修改原数组的方法
    • 用 Array.isArray() 判断数组
    • 用 at(-1) 获取最后一个元素
    • 链式调用时注意返回值类型
    返回 BlogJavaScript
    上一篇对象基础下一篇原型与原型链
    Skip toc
    • 🎯 创建数组
      • 数组字面量
      • Array 构造函数
      • Array.from
      • Array.fill 填充
    • 索引访问
      • 读取和修改
      • length 属性
    • 添加和删除元素
      • push 和 pop(尾部操作)
      • unshift 和 shift(头部操作)
      • splice(任意位置操作)
      • concat(合并数组)
    • 查找元素
      • indexOf 和 lastIndexOf
      • includes
      • find 和 findIndex
    • 遍历方法
      • forEach
      • map(映射)
      • filter(过滤)
      • reduce(归约)
      • some 和 every
    • 排序
      • sort
      • toSorted(ES2023,不可变)
      • reverse
    • 数组转换
      • slice(切片)
      • flat(扁平化)
      • join(转字符串)
    • 判断数组
    • 不可变数组方法(ES2023)
    • 实用技巧
    • 总结
    Table of Contents
    • 🎯 创建数组
      • 数组字面量
      • Array 构造函数
      • Array.from
      • Array.fill 填充
    • 索引访问
      • 读取和修改
      • length 属性
    • 添加和删除元素
      • push 和 pop(尾部操作)
      • unshift 和 shift(头部操作)
      • splice(任意位置操作)
      • concat(合并数组)
    • 查找元素
      • indexOf 和 lastIndexOf
      • includes
      • find 和 findIndex
    • 遍历方法
      • forEach
      • map(映射)
      • filter(过滤)
      • reduce(归约)
      • some 和 every
    • 排序
      • sort
      • toSorted(ES2023,不可变)
      • reverse
    • 数组转换
      • slice(切片)
      • flat(扁平化)
      • join(转字符串)
    • 判断数组
    • 不可变数组方法(ES2023)
    • 实用技巧
    • 总结
    > share on twitter