修改代码后点击运行,即可查看效果

源代码
JavaScript 历史

JavaScript 由 Brendan Eich 在 Netscape 公司于 1995 年发明,最初命名为 Mocha,后改名为 LiveScript,最终定为 JavaScript。

发展历程:
  • 1995年 — 最初命名为 Mocha,后改名为 LiveScript,最终定名为 JavaScript。
  • 1996 — Microsoft 推出 JScript
  • 1997 — ECMAScript 第一版标准化
  • 2009 — ECMAScript 5 发布
  • 2015 — ECMAScript 2015 (ES6) 重大更新
最后总结:

JavaScript 诞生于 web 时代,最初用于网页交互,如今已成为 全栈开发的核心语言,应用于前端、后端、桌面应用、移动端、游戏开 发等多个领域,仍在持续进化。

热门教程
更多
JavaScript开发环境怎么搭建:Node.js安装与VS Code配置指南

JavaScript开发环境怎么搭建:Node.js安装与VS Code配置指南

本指南详尽讲解如何在本地计算机搭建标准的现代 JavaScript 开发环境:包括 Node.js LTS 版本的安装与系统环境变量验证、npm 镜像源加速设置、Visual Studio Code 编辑器核心配置与 ESLint、Prettier 扩展集成,以及项目创建、代码运行与断点调试的标准操作闭环。

JS怎么使用JSON.stringify实现JSON格式化与缩进 详细讲解在 JavaScript 中使用 JSON.stringify 实现 JSON 数据格式化与层级缩进的方法,解析第三个参数 space 的数值与字符串规则,对比空格与

JS怎么使用JSON.stringify实现JSON格式化与缩进

详细讲解在 JavaScript 中使用 JSON.stringify 实现 JSON 数据格式化与层级缩进的方法,解析第三个参数 space 的数值与字符串规则,对比空格与制表符缩进差异,并提供实际操作步骤与常见避坑指南。

JS Map怎么遍历:forEach与for...of用法详解 深入详解 JavaScript 中 Map 对象的遍历方法,重点剖析 forEach 与 for...of 的用法细节、参数顺序、控制流支持、迭代器变体以及场景选型指南。

JS Map怎么遍历:forEach与for...of用法详解

深入详解 JavaScript 中 Map 对象的遍历方法,重点剖析 forEach 与 for...of 的用法细节、参数顺序、控制流支持、迭代器变体以及场景选型指南。

JS怎么获取body元素:document.body标准用法 本文详细讲解在JavaScript中获取body元素的标准方法document.body,剖析其底层机制、时序加载问题与常见报错,对比querySelector等其他方式,并给出

JS怎么获取body元素:document.body标准用法

本文详细讲解在JavaScript中获取body元素的标准方法document.body,剖析其底层机制、时序加载问题与常见报错,对比querySelector等其他方式,并给出最佳实践。

Node.js入门指南:使用JavaScript构建后端服务器 本教程从零讲解如何使用JavaScript和Node.js构建稳定高效的后端服务器,涵盖核心运行机制、原生HTTP服务搭建、路由解析与生产级框架实践。

Node.js入门指南:使用JavaScript构建后端服务器

本教程从零讲解如何使用JavaScript和Node.js构建稳定高效的后端服务器,涵盖核心运行机制、原生HTTP服务搭建、路由解析与生产级框架实践。

JS使用Array.from和Array.of创建数组的方法 深入解析JavaScript中Array.of与Array.from创建数组的方法,涵盖传统Array构造函数的参数陷阱、类数组与可迭代对象转换、内置映射管道与实战应用技巧。

JS使用Array.from和Array.of创建数组的方法

深入解析JavaScript中Array.of与Array.from创建数组的方法,涵盖传统Array构造函数的参数陷阱、类数组与可迭代对象转换、内置映射管道与实战应用技巧。

JS判空时怎么避免0、false和NaN被误判为空 在JavaScript中进行判空时,直接使用!val或||常导致数字0、布尔值false以及NaN被错误当作空值处理。本文详细剖析JS中假值与空值的边界差异,提供空值合并运算符(??)、显

JS判空时怎么避免0、false和NaN被误判为空

在JavaScript中进行判空时,直接使用!val或||常导致数字0、布尔值false以及NaN被错误当作空值处理。本文详细剖析JS中假值与空值的边界差异,提供空值合并运算符(??)、显式类型校验以及生产级判空函数的具体实现与排查方法。

原生JS鼠标事件模拟拖拽排序:兼容旧浏览器的实现思路 深入讲解使用原生JavaScript鼠标事件(mousedown、mousemove、mouseup)模拟列表拖拽排序的完整实现思路与兼容旧版浏览器的方案,涵盖事件垫片、占位符定位、几何

原生JS鼠标事件模拟拖拽排序:兼容旧浏览器的实现思路

深入讲解使用原生JavaScript鼠标事件(mousedown、mousemove、mouseup)模拟列表拖拽排序的完整实现思路与兼容旧版浏览器的方案,涵盖事件垫片、占位符定位、几何中线碰撞算法及性能优化。

JS对象数组转字符串为什么推荐用JSON.stringify() 深入解析JavaScript中对象数组转字符串为什么推荐使用JSON.stringify(),剖析toString()陷阱、结构保真、字符安全转义机制、跨端通用性及边界限制。

JS对象数组转字符串为什么推荐用JSON.stringify()

深入解析JavaScript中对象数组转字符串为什么推荐使用JSON.stringify(),剖析toString()陷阱、结构保真、字符安全转义机制、跨端通用性及边界限制。

JavaScript与Java有什么区别?新手怎么区分 针对编程新手的实用指南,系统解析JavaScript与Java在设计目的、执行机制、类型系统与应用场景上的本质区别,提供四步排查法与完整代码示例,帮助初学者快速识别并准确区分两种语言。

JavaScript与Java有什么区别?新手怎么区分

针对编程新手的实用指南,系统解析JavaScript与Java在设计目的、执行机制、类型系统与应用场景上的本质区别,提供四步排查法与完整代码示例,帮助初学者快速识别并准确区分两种语言。

JS对象合并时属性覆盖顺序是怎么的 全面讲解 JavaScript 中合并对象时的属性覆盖顺序与执行机制,深入分析展开运算符与 Object.assign 的时序差异、浅拷贝陷阱、原型链与访问器属性处理以及工程最佳实践。

JS对象合并时属性覆盖顺序是怎么的

全面讲解 JavaScript 中合并对象时的属性覆盖顺序与执行机制,深入分析展开运算符与 Object.assign 的时序差异、浅拷贝陷阱、原型链与访问器属性处理以及工程最佳实践。

什么是JavaScript回调函数?作为参数传递的实际案例 深入浅出解析JavaScript回调函数的底层机制与运作原理,详解函数作为参数传递的逻辑,结合数组处理、事件监听与异步模拟等实战案例,帮助开发者彻底掌握回调函数的用法及避坑指南。

什么是JavaScript回调函数?作为参数传递的实际案例

深入浅出解析JavaScript回调函数的底层机制与运作原理,详解函数作为参数传递的逻辑,结合数组处理、事件监听与异步模拟等实战案例,帮助开发者彻底掌握回调函数的用法及避坑指南。

热门工具图片创意
更多
精选文章
JavaScript 基础
JavaScript 项目实战
Vue
Node.js 基础
AI 编程工具
JavaScript求余运算符%的基础语法与用法

深入详解JavaScript中求余运算符(%)的基础语法、底层推导机制、正负符号规则、与数学模运算的区别,以及在循环队列、坐标换算等场景的实际用法与边界陷阱。

11.05
JavaScript求余运算符%的基础语法与用法
JS数值转字符串时怎么保留固定小数位

全面讲解在 JavaScript 中将数值转换为保留固定小数位字符串的实用方法,深入剖析 toFixed 原生方法、IEEE 754 舍入偏差的指数修正方案、截断抹零模式以及国际化格式化处理。

11.05
JS数值转字符串时怎么保留固定小数位
animate.js 快速上手:CDN 引入与基础动画示例

本文介绍如何通过 CDN 快速引入轻量级 JavaScript 动画库 animate.js(animejs),并提供位移、透明度、缩放及多属性组合等高频基础动画的完整代码示例与排坑指南。

11.05
animate.js 快速上手:CDN 引入与基础动画示例
JS toFixed四舍五入精度偏差原因及精准保留两位小数方案

深入解析JavaScript中toFixed保留两位小数时出现四舍五入精度偏差的底层原因(IEEE 754二进制浮点数表示与银行家舍入规范),并提供简单可靠的科学计数法位移法、字符串精确解析与高精度库等实战解决方案。

11.05
JS toFixed四舍五入精度偏差原因及精准保留两位小数方案
JavaScript WeakSet 和 WeakMap 的作用及使用场景

深入解析 JavaScript 中 WeakSet 与 WeakMap 的核心作用、弱引用机制与垃圾回收底层原理,结合 DOM 关联数据、类私有属性封装、防循环引用等典型实战场景与限制条件,提供详尽可执行的技术解析。

11.05
JavaScript WeakSet 和 WeakMap 的作用及使用场景
JS字符串转数字结果为NaN怎么办?常见原因与处理方案

深入剖析JavaScript中字符串转数字得到NaN的底层成因,涵盖非法字符、千分位逗号、特殊空值及进制基数遗漏等高频陷阱,并提供系统化排查步骤与高健壮性的安全转换处理方案。

11.05
JS字符串转数字结果为NaN怎么办?常见原因与处理方案
JavaScript在网页开发中起什么作用?与HTML和CSS的关系解析

深入解析JavaScript在现代网页开发中的核心作用,理清JavaScript与HTML、CSS之间的协作分工机制、加载时序以及工程实践规范。

11.05
JavaScript在网页开发中起什么作用?与HTML和CSS的关系解析
JavaScript三目运算符基础语法与执行流程解析

深入解析JavaScript三目运算符(条件运算符)的基础语法结构、求值机制、短路特性、运算符优先级与右结合性,通过详尽示例与架构图解掌握安全实用的编码实践。

11.05
JavaScript三目运算符基础语法与执行流程解析
查看更多
p5.js 动画原理:利用 frameCount 控制运动轨迹

深入剖析 p5.js 中 frameCount 的底层自增机制与动画原理,详细讲解如何将离散帧计数映射为平滑的直线、正弦波、圆周、螺旋与复合运动轨迹,并提供完整的实战代码与参数设计指导。

11.05
p5.js 动画原理:利用 frameCount 控制运动轨迹
响应式JavaScript网站模板源码下载与结构解析

深入解析响应式JavaScript网站模板的源码获取渠道、标准工程目录结构、媒体查询与JS交互状态协同机制,并提供规范的二次开发与上线核验指南。

11.05
响应式JavaScript网站模板源码下载与结构解析
怎么在 Three.js 中实现鼠标点击选中 3D 物体

系统讲解在 Three.js 中通过光线投射器 (Raycaster) 实现鼠标点击精确选中 3D 物体的完整方案。涵盖屏幕坐标归一化换算、空间射线拾取、层级复合模型回溯、材质高亮反馈及拖拽冲突排查。

11.05
怎么在 Three.js 中实现鼠标点击选中 3D 物体
轻量级JS富文本编辑器推荐:适合移动端与低代码场景的解决方案

针对移动端触控交互与低代码平台架构要求,系统推荐与深度解析主流轻量级JavaScript富文本编辑器(Tiptap、Quill、Editor.js、WangEditor)。详解视口避让、JSON Schema数据绑定、按需分包构建与常见避坑方案。

11.05
轻量级JS富文本编辑器推荐:适合移动端与低代码场景的解决方案
Quill.js 自定义图片上传模块实现教程

本教程详细讲解如何在 Quill.js 中拦截默认的 Base64 图片插入行为,实现将本地图片异步上传至服务器,并将获得的远程 URL 正确回填至编辑器光标位置,包含模块封装、光标复位及拖拽粘贴处理。

11.05
Quill.js 自定义图片上传模块实现教程
怎么自定义 Fabric.js 对象的控制点样式与交互行为

深入讲解如何在 Fabric.js 中自定义对象的控制点样式与交互行为。包含修改原生控制点外观属性、利用 fabric.Control 自定义绘制按钮手柄、实现删除操作以及编写自定义拉伸交互算法的完整代码与避坑指南。

11.05
怎么自定义 Fabric.js 对象的控制点样式与交互行为
JS读取Excel出现中文乱码怎么解决

针对JavaScript在前端读取Excel文件(.csv、.xlsx、.xls)时出现的各类中文乱码问题,深入剖析字符集编码冲突与二进制解析机制,提供基于FileReader、TextDecoder与SheetJS的标准解决方案与完整代码范例。

11.05
JS读取Excel出现中文乱码怎么解决
从零编写JavaScript计数器小项目实例

从零实现一个结构清晰、代码健壮的原生JavaScript网页计数器。涵盖DOM节点捕获、单向状态流、事件委托、极值边界约束与本地持久化等核心要点。

11.05
从零编写JavaScript计数器小项目实例
查看更多
React 与 Vue 项目中怎么正确集成和销毁 PixiJS 应用

详解在 React 与 Vue 3 单页应用中集成 PixiJS 的正确方式,重点剖析 React StrictMode 双重挂载竞态、Vue 响应式代理陷阱,以及彻底销毁 Canvas、释放 WebGL 纹理与 Ticker 资源的完整方案。

11.05
React 与 Vue 项目中怎么正确集成和销毁 PixiJS 应用
怎么在 Vue 和 React 项目中正确集成 AOS.js

深入解析如何在 Vue 3 与 React 现代前端单页应用项目中正确集成 AOS.js 滚动动效库,涵盖样式引入、组件生命周期挂载、SPA 路由跳转刷新及异步数据渲染时的坐标校准方法。

11.05
怎么在 Vue 和 React 项目中正确集成 AOS.js
Vue3 项目中怎么集成 Mock.js 模拟后端接口

在 Vue3 项目中集成 Mock.js 的完整实践指南。涵盖依赖安装、规则定义、开发环境按需拦截、动态参数处理及生产构建隔离,帮助前端在脱离后端依赖时高效开发。

11.05
Vue3 项目中怎么集成 Mock.js 模拟后端接口
Vue.js 高阶组件封装与自定义 Hook 实战技巧

深入讲解 Vue.js 高阶组件(HOC)封装与自定义 Hook(Composable)的核心原理、代码模板、边界处理与工程选型技巧,帮助开发者在实际项目中高效落地组件逻辑复用。

11.05
Vue.js 高阶组件封装与自定义 Hook 实战技巧
Vue.js官网地址是多少?区分国际站与中文文档入口

详细解答 Vue.js 官网地址是多少,系统解析国际主站(vuejs.org)与官方中文文档站(cn.vuejs.org)的定位差异、多版本归档规则、语言切换操作步骤与常见混淆误区。

11.05
Vue.js官网地址是多少?区分国际站与中文文档入口
在 React 或 Vue 项目中封装使用 JS 节流防抖

深入解析在 React 与 Vue 3 项目中封装使用节流(Throttle)与防抖(Debounce)的核心原理。分析组件重渲染与响应式机制下的闭包陷阱、引用失效问题,并提供生产级 Custom Hook 与 Composable 实现及生命周期清理方案。

11.05
在 React 或 Vue 项目中封装使用 JS 节流防抖
Vue或React项目中为何不建议直接使用JS刷新页面

深入剖析在Vue与React等单页面应用(SPA)中直接使用location.reload()等原生JS硬刷新所带来的状态丢失、白屏卡顿与性能损耗,并提供数据失效重拉、Key属性重置子树及无感路由重载等工程化最佳实践。

11.05
Vue或React项目中为何不建议直接使用JS刷新页面
Vue项目中怎么集成JS颜色选择器组件

详细讲解如何在Vue项目中集成纯JS颜色选择器组件,包括安装配置、组件封装、双向绑定、事件处理和常见问题排查。

11.05
Vue项目中怎么集成JS颜色选择器组件
查看更多
Node.js 升级后 npm 依赖报错或编译失败怎么解决

针对 Node.js 升级后出现的 npm 依赖报错、C++ 原生扩展编译中断、ABI 版本不匹配、OpenSSL 3.0 加密算法报错以及依赖树解析冲突,提供系统的诊断流程、根因分析、实操解决步骤与长效防护策略。

11.05
Node.js 升级后 npm 依赖报错或编译失败怎么解决
怎么使用 nvm 管理并平滑升级 Node.js 版本

详细讲解如何使用 nvm 管理多个 Node.js 版本,以及如何利用 --reinstall-packages-from 参数实现无缝平滑升级,保留全局 npm 工具链并配合 .nvmrc 保持团队环境统一。

11.05
怎么使用 nvm 管理并平滑升级 Node.js 版本
怎么在 NW.js 中调用 Node.js 模块读写本地文件

详细讲解在 NW.js 桌面应用中直接调用 Node.js 内置 fs 与 path 模块读写本地文件的方法,包含 package.json 配置、文件选择器路径获取、异步读写完整示例与关键避坑指南。

11.05
怎么在 NW.js 中调用 Node.js 模块读写本地文件
NW.js package.json 配置详解:定义入口、窗口行为及权限

深入解析 NW.js 中 package.json 的核心配置,涵盖应用入口定义(main 与 node-main)、窗口尺寸/边框/透明等行为控制,以及 node-remote 与上下文隔离等权限安全机制。

11.05
NW.js package.json 配置详解:定义入口、窗口行为及权限
Node.js中使用path模块获取文件名

深入讲解在Node.js中使用内置path模块获取文件名的标准方法与实践技巧,涵盖path.basename()基础调用、剥离扩展名、path.parse()对象解构以及跨平台和特殊边界路径的处理方案。

11.05
Node.js中使用path模块获取文件名
Node.js中url模块与querystring模块处理查询字符串的区别

深入对比Node.js中url模块与querystring模块在解析查询字符串时的核心区别,涵盖职责定位、前导问号处理、自定义分隔符、安全防护及现代WHATWG标准的演进选型。

11.05
Node.js中url模块与querystring模块处理查询字符串的区别
Node.js 安装配置与第一个 HTTP 服务器编写

本文系统讲解 Node.js 的安装与环境变量配置流程,提供跨平台安装建议与验证方法,并基于原生 http 模块深入实现第一个 HTTP 服务器,解析请求响应生命周期及排查常见运行问题。

11.05
Node.js 安装配置与第一个 HTTP 服务器编写
macOS卸载Node.js指南:区分Homebrew与pkg安装包的处理方式

在macOS上彻底卸载Node.js的专业实用指南。深入解析Homebrew包管理器与Node.js官方.pkg安装包在底层文件系统中的分布差异,分别提供精准卸载命令、系统级残留文件清理路径与终端环境验证排查方法。

11.05
macOS卸载Node.js指南:区分Homebrew与pkg安装包的处理方式
查看更多
支持HTML/CSS/JS混合编写的在线IDE有哪些

全面盘点支持HTML/CSS/JS混合编写的在线IDE,深度解析轻量代码片段沙箱与现代WebContainer工程环境的差异、核心功能、实操步骤与选型决策。

11.05
支持HTML/CSS/JS混合编写的在线IDE有哪些
大型前端项目该选什么JavaScript编辑器?

深入分析大型前端项目中JavaScript/TypeScript编辑器的选型依据,对比VS Code与WebStorm在索引性能、重构安全、内存管理与团队协作上的核心差异,并提供详细的调优配置指南。

11.05
大型前端项目该选什么JavaScript编辑器?
免登录快速分享代码:适合面试协作的轻量级JS在线运行工具推荐

针对技术面试与即时交流场景,梳理免登录、轻量级JavaScript在线运行与代码分享工具。对比URL哈希无状态存储与快照持久化机制,详解TypeScript Playground、JSFiddle、PlayCode等工具的特点与协作规范。

11.05
免登录快速分享代码:适合面试协作的轻量级JS在线运行工具推荐
VS Code怎么一键运行Js脚本?Code Runner插件配置步骤

详细讲解在VS Code中利用Code Runner插件一键运行JavaScript脚本的具体配置步骤、常用快捷键、settings.json优化配置与常见问题排查。

11.03
VS Code怎么一键运行Js脚本?Code Runner插件配置步骤
Auto.js官方下载地址在哪?GitHub与Gitee最新资源汇总

全面梳理Auto.js官方下载地址、GitHub历史归档、Gitee国内镜像及主流社区衍生分支。详细解析不同版本的适用边界、安全验证流程与场景选型建议。

11.03
Auto.js官方下载地址在哪?GitHub与Gitee最新资源汇总
JavaScript编辑器怎么开启智能代码补全?

详细介绍在VS Code等主流JavaScript编辑器中开启并强化智能代码补全(IntelliSense)的具体步骤,包括基础触发设置、jsconfig.json工程上下文配置、JSDoc类型标注及补全失效的系统排查方法。

11.02
JavaScript编辑器怎么开启智能代码补全?
CodePen、JSFiddle与Replit怎么选?JavaScript在线编程平台对比

面对CodePen、JSFiddle与Replit三大主流JavaScript在线平台,本文从底层运行架构、工程结构、依赖引入与协作场景等维度进行详尽对比,并给出清晰实用的四步选型决策指南。

11.02
CodePen、JSFiddle与Replit怎么选?JavaScript在线编程平台对比
JS 在线编辑器能替代本地 IDE 吗?优势与局限分析

深入对比JS在线编辑器与本地IDE的底层架构机制,剖析在线开发环境在零配置、复现分享与轻量验证上的优势,以及在系统原生依赖、大型Monorepo构建、数据合规上的局限,提供明确的项目选型决策流程与现代混合协作实践。

11.02
JS 在线编辑器能替代本地 IDE 吗?优势与局限分析
查看更多