JavaScript标准书写格式规范|新手从零学会优雅写JS代码
很多新手写 JavaScript 代码最大的问题不是不会写逻辑而是 书写混乱、格式随意缩进乱、不加分号、变量随便命名、代码堆砌一堆。看似代码能跑但是可读性极差、极易出Bug、后期完全无法维护。本篇博客总结一套新手通用、企业通用的 JS 标准书写格式照着写就能写出干净、规范、专业的JS代码。一、为什么要统一JS书写格式可读性高自己和别人都能一眼看懂代码结构减少隐性Bug格式不规范是很多诡异报错的元凶团队协作必备企业开发强制统一编码风格方便调试与迭代结构清晰改代码不翻车二、JS 基础全局书写规范必背缩进规范最重要统一使用 2个空格 或 4个空格缩进全程一致禁止混用Tab推荐新手4个空格缩进结构最清晰。❌ 错误写法缩进混乱function test(){let a1;if(a0){console.log(a)}}✅ 标准规范写法function test() {let a 1;if (a 0) {console.log(a);}}语句必须结尾分号 ;虽然JS可以自动补全分号但绝对不要依赖自动分号极易出现隐秘Bug。✅ 每条语句末尾必须加 ;运算符前后必须加空格赋值、比较、加减乘除等运算符左右必须留空代码更舒展。❌ 不规范let a12;✅ 规范let a 1 2;大括号格式同一行开启企业统一风格左大括号不换行✅ 标准if (flag) {// 代码}❌ 不允许if (flag){}三、变量 常量 书写格式规范声明方式强制规范禁止使用 var全部使用 let / const值不改变用 const值会改变用let命名规范驼峰命名法JS 统一使用 小驼峰命名变量、函数小驼峰 userName常量全大写下划线MAX_COUNT禁止拼音、禁止中文、禁止随意简写✅ 规范示例const PAGE_SIZE 10;let userName “张三”;let userAge 20;❌ 不规范let a 10;let name222 “”;let yonghuMing “”;四、数组、对象标准书写格式数组书写规范简单数组单行书写复杂数组换行对齐✅ 规范let arr [11, 22, 33, 44];let list [{ id: 1, name: “测试1” },{ id: 2, name: “测试2” }];2. 对象书写规范key 后冒号加空格最后一项也可以带逗号兼容规范let userInfo {id: 1001,username: “小明”,age: 18};五、条件、循环语句书写格式if 标准格式无论代码几行必须加大括号禁止单行省略大括号✅ 标准if (score 60) {console.log(“及格”);} else {console.log(“不及格”);}❌ 禁止极易出错if(score60) console.log(“ok”);for / while 规范for (let i 0; i arr.length; i) {console.log(arr[i]);}while (flag) {// 循环逻辑}六、函数标准书写格式函数是JS核心格式必须统一、整洁。普通函数规范// 函数功能简短注释function getUserName(userId) {return “用户” userId;}箭头函数规范复杂函数换行简单函数单行// 简单写法let add (a, b) a b;// 复杂写法换行let filterList (arr) {return arr.filter(item item 10);};七、注释书写规范注释不是越多越好关键逻辑必须注释基础代码不废话注释单行注释// 注释内容//后面加空格多行注释用于函数、模块说明✅ 规范示例// 获取用户列表数据function getUserList() {// 模拟接口请求return [];}八、完整规范 JS 代码模板可直接复用这是一套企业级标准JS书写模板新手写代码直接套这个格式九、新手最容易犯的格式错误汇总不写分号、缩进混乱乱用 var变量不规范if/for 省略大括号运算符前后不加空格代码拥挤所有代码堆在一起不分模块命名随便 a、b、c、temp、aaa十、规范总结记住这6句话全程统一缩进代码层层对齐语句必须带分号运算符前后空格常量用const变量用let禁止var命名小驼峰语义清晰不随意判断循环必加大括号不偷懒简写代码分区常量→变量→函数→业务逻辑写在最后代码的书写格式决定了你代码的下限。逻辑可以慢慢练但是格式必须从第一天就写标准。养成规范的JS书写习惯后续学习ES6、AJAX、Vue、React 都会事半功倍。

相关新闻

Kimi K2 API v2.3接口变更预警:9月30日前未升级将触发兼容性降级,附一键迁移脚本

Kimi K2 API v2.3接口变更预警:9月30日前未升级将触发兼容性降级,附一键迁移脚本

更多请点击: https://kaifayun.com 第一章:Kimi K2 API v2.3接口变更核心概览 Kimi K2 API v2.3 版本于2024年第三季度正式发布,聚焦于稳定性增强、响应效率优化与安全策略升级。本次更新不引入全新端点,但对现有核心接口的请求结…

2026/10/28 20:36:43 阅读更多 →
统计画像中的数据操作:业务语义驱动的数据变形方法论

统计画像中的数据操作:业务语义驱动的数据变形方法论

1. 项目概述:这不是简单的数据清洗,而是统计画像的“解剖刀”“Part 19: Data Manipulation in Statistical Profiling”——这个标题乍看像教科书里一个不起眼的章节编号,但在我带团队做过二十多个行业统计建模项目后,它实际代表…

2026/10/28 8:31:04 阅读更多 →
别再用ChatGPT随便写稿了:AI写作SOP设计的5个致命盲区(附ISO/GB级合规检查清单)

别再用ChatGPT随便写稿了:AI写作SOP设计的5个致命盲区(附ISO/GB级合规检查清单)

更多请点击: https://codechina.net 第一章:别再用ChatGPT随便写稿了:AI写作SOP设计的5个致命盲区(附ISO/GB级合规检查清单) AI写作正从“辅助工具”演变为“责任主体”,但多数团队仍沿用“提问—复制—发…

2026/10/28 20:36:46 阅读更多 →

最新新闻

Electron桌面应用开发实战:从环境搭建到打包发布全流程

Electron桌面应用开发实战:从环境搭建到打包发布全流程

做前端这些年,我大部分时间都在跟浏览器标签页打交道,直到第一次把桌面应用跑起来,才发现原来自己一直被限制在地址栏和刷新按钮围起来的框框里。Electron这个词,最开始是在某段时间频繁出现在同事的讨论里,一个用HTML…

2026/10/31 0:19:11 阅读更多 →
滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

滑盖智能锁T109深度解析:结构原理、安装调试与故障排查

简介:亚太天能T109滑盖智能锁产品说明书是一份PDF格式的官方技术文档,主要面向智能锁安装人员、终端用户及售后维护者,帮助快速掌握产品安装、配置与常见故障处理。全包仅1个PDF文件,大小4.37MB,内容结构清晰&#xff…

2026/10/31 10:20:19 阅读更多 →
PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

PMSM弱磁控制原理与Simulink建模:高速AGV驱动系统设计指南

上个月我在调试一台高速AGV的驱动系统,整车要求空载跑到8m/s,电机转速已经拉到额定点,驱动器的输出电压也顶到了母线电压极限附近。再往上踩速度指令,转速纹丝不动,三相电流反而开始震荡。那会儿我的第一反应就是&…

2026/10/31 10:20:23 阅读更多 →
C++核心知识点:从内存管理到STL的实战指南

C++核心知识点:从内存管理到STL的实战指南

C 这门语言我前前后后折腾了十几年,用它写过嵌入式驱动、做过游戏服务端,也搭过基础组件库。每次看到新人一头扎进"C 核心知识点"这个搜索词,我其实挺感慨的——这门语言的难点从来不是语法多,而是知识点之间的耦合太深…

2026/10/31 0:59:28 阅读更多 →
T109滑盖智能锁怎么装?安装调试与故障排查全攻略

T109滑盖智能锁怎么装?安装调试与故障排查全攻略

简介:亚太天能T109滑盖智能锁产品说明书以PDF格式发布,适合智能锁用户、安装人员与售后维修人员阅读。内容围绕T109系列指纹密码刷卡锁展开,先介绍前面板、后面板、锁体、机械钥匙、电池盒盖等部件名称与功能,再给出完整安装步骤&…

2026/10/31 10:30:19 阅读更多 →
LLM知识降熵:从信息垄断到理解权下放

LLM知识降熵:从信息垄断到理解权下放

你有没有过这种经历:翻开源码注释、论文摘要或者一份专业报告,每个字都认识,连在一起却像天书。想找人聊聊,身边要么没人懂,要么懂的懒得跟你解释。后来我试着把同一段内容丢给一个大语言模型,几秒钟之后&a…

2026/10/31 9:29:43 阅读更多 →

日新闻

周新闻

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/30 17:32:24 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/31 11:00:40 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/31 0:09:01 阅读更多 →