你好，我是你们的老朋友。很多刚接触前端的朋友都会遇到同一个问题：看了大量 HTML 和 CSS 教程，能写出漂亮的静态页面，但一碰到 JavaScript（JS）就卡住了。原因很简单——HTML 和 CSS 是标记语言，写法相对固定；而 JS 是一门真正的编程语言，涉及变量、函数、逻辑、数据类型等概念，需要换一套“编程思维”来学。
这篇文章就是为你准备的 JS 核心语法速成指南。我会用最简单的方式，把前端开发最常用的 JS 知识点串起来。不需要你提前掌握任何编程基础，只要跟着文章敲一遍代码，30 分钟左右就能建立起对 JS 的整体认知。读完你会发现，JS 并没有想象中那么难。
本文适合下面几类读者：
- 刚学完 HTML 和 CSS、准备进军 JavaScript 的新手。
- 学过 JS 但知识点零散、想系统梳理一遍的初学者。
- 准备前端面试，需要快速复习核心语法的求职者。
- 后端转前端，想快速了解 JS 语法特点的开发者。
下面我们直接开始。
1. 认识 JavaScript
1.1 JavaScript 是什么
JavaScript 是一种运行在浏览器中的脚本语言，也可以借助 Node.js 运行在服务器端。它的主要作用是让网页“动起来”——处理用户点击、表单校验、数据请求、页面动态渲染等操作。
打个比方：如果把网页比作一栋房子，HTML 是房子的结构（墙壁、门窗），CSS 是装修（颜色、大小、位置），那么 JavaScript 就是水电系统——让灯能亮、空调能转、房子真正“活”起来。
现在的前端开发中，JavaScript 几乎无处不在：
- 网页交互特效（轮播图、弹窗、表单验证）。
- 前后端数据交互（Ajax、Fetch、Axios）。
- 单页应用开发（Vue、React、Angular）。
- 小程序开发、桌面应用开发（Electron）、服务端开发（Node.js）。
1.2 JavaScript 和 Java 的关系
很多新手会问：JavaScript 和 Java 有什么关系？
答案很简单：没有关系。只是因为 JavaScript 刚诞生时，Java 语言非常火爆，为了借势取名 JavaScript。两者的语法、运行环境、应用场景完全不同。你只需要学习 JavaScript 本身即可，不必纠结与 Java 的关系。
1.3 怎么运行 JavaScript
学习阶段，最简单的运行方式有两种：
第一种，直接在浏览器控制台运行。打开 Chrome 浏览器，按F12打开开发者工具，切换到 Console（控制台）面板，输入 JS 代码回车即可执行。
第二种，在 HTML 文件中通过<script>标签引入 JS 文件。这是实际项目中常用的方式。
下面我们先创建一个最简单的 HTML 文件，后面所有示例都可以在这个环境中运行。
<!-- 文件路径：demo.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS 速成入门</title> </head> <body> <h1 id="title">Hello JavaScript</h1> <!-- 在页面底部引入 JS 文件 --> <script src="demo.js"></script> </body> </html>再创建一个demo.js文件：
// 文件路径：demo.js console.log("Hello, JavaScript!");用浏览器打开demo.html，按F12打开控制台，就能看到输出结果。这是学习 JS 最常见、也最方便的环境。
2. 变量与数据类型
2.1 变量的声明方式
变量用来存储数据。JS 中有三种声明变量的方式：var、let、const。
在早期 JS 版本中，var是唯一的变量声明方式。但var存在作用域混乱的问题（后面会讲到），所以 ES6（ECMAScript 2015）新增了let和const。现在的实际开发中，推荐默认使用const，变量需要重新赋值时使用let，尽量避免使用var。
// 使用 var（老代码中常见，新手不建议使用） var name = "小明"; // 使用 let（变量，值可以改变） let age = 18; age = 19; // 允许重新赋值 // 使用 const（常量，声明后不可改变） const birthday = "2005-06-01"; birthday = "2005-06-02"; // 报错：Assignment to constant variable. console.log(name, age, birthday);这里有一个容易让新手困惑的点：const声明的对象和数组，里面的内容可以修改吗？
答案是可以的。const限制的是“变量指向的地址不能变”，而不是“地址里的内容不能变”。看下面的示例：
const person = { name: "小红", age: 20 }; // 允许修改属性值 person.age = 21; // 允许新增属性 person.city = "上海"; console.log(person); // { name: '小红', age: 21, city: '上海' } // 但不允许重新赋值给 person // person = {}; 报错面试中经常考这一点，请一定记牢。
2.2 基本数据类型
JavaScript 中最常用的基本数据类型有七种：
| 数据类型 | 说明 | 示例 |
|---|---|---|
| Number | 数值，包括整数和小数 | 42、3.14 |
| String | 字符串，用引号包裹 | '你好'、"hello" |
| Boolean | 布尔值 | true、false |
| Undefined | 变量声明但未赋值 | let a; |
| Null | 空值，表示“没有对象” | let b = null; |
| BigInt | 大整数 | 12345678901234567890n |
| Symbol | 唯一值 | Symbol('id') |
我们可以用typeof运算符查看一个变量的数据类型：
let num = 42; let str = "hello"; let flag = true; let a; let b = null; console.log(typeof num); // "number" console.log(typeof str); // "string" console.log(typeof flag); // "boolean" console.log(typeof a); // "undefined" console.log(typeof b); // "object" 注意：这是 JS 的一个历史遗留问题注意最后一行：typeof null返回的是"object"，而不是"null"。这是 JavaScript 语言早期设计时留下的 Bug，官方一直没有修复，面试中经常被问到，知道这个现象即可。
2.3 类型转换
实际开发中，经常需要把一种类型转换为另一种类型。最常见的场景是：从输入框拿到的是字符串，但我们需要把它当作数字进行运算。
let input = "25"; // 字符串转数字 let num1 = Number(input); let num2 = parseInt(input, 10); let num3 = parseFloat("3.14"); console.log(num1); // 25 console.log(num2); // 25 console.log(num3); // 3.14 // 使用 + 号也可以快速转数字 let num4 = +input; console.log(num4); // 25 // 数字转字符串 let price = 99; console.log(String(price)); // "99" console.log(price.toString()); // "99" console.log(price + ""); // "99"，利用 + 号拼接字符串 // 转布尔值 console.log(Boolean(0)); // false console.log(Boolean("")); // false console.log(Boolean(null)); // false console.log(Boolean(undefined));// false console.log(Boolean("hello")); // true console.log(Boolean(42)); // true这里有一个经典坑点："25" + 1的结果是"251"，而不是26。因为当+号一边是字符串时，它会执行字符串拼接而不是加法。
console.log("25" + 1); // "251"（字符串拼接） console.log("25" - 1); // 24（减号不支持字符串拼接，会转成数字计算） console.log("25" * 2); // 50 console.log("25" / 5); // 5理解这一点，对后续避免逻辑错误非常有帮助。
3. 运算符与流程控制
3.1 常用运算符
JS 运算符分为几类，这里列出最常用的一部分：
算术运算符：
let a = 10; let b = 3; console.log(a + b); // 13 console.log(a - b); // 7 console.log(a * b); // 30 console.log(a / b); // 3.3333333333333335 console.log(a % b); // 1，取余数 console.log(a ** 2); // 100，幂运算比较运算符：
console.log(5 == "5"); // true，只比较值，不比较类型 console.log(5 === "5"); // false，同时比较值和类型 console.log(5 != "5"); // false console.log(5 !== "5"); // true console.log(10 > 5); // true console.log(10 <= 10); // true开发中强烈推荐使用===和!==，避免因为隐式类型转换导致难以排查的 Bug。
逻辑运算符：
let age = 20; let hasTicket = true; console.log(age >= 18 && hasTicket); // true，且（and），两边都 true 才为 true console.log(age < 18 || hasTicket); // true，或（or），一边为 true 即为 true console.log(!hasTicket); // false，非（not），取反赋值运算符：
let count = 5; count += 3; // 相当于 count = count + 3，结果为 8 count -= 2; // 相当于 count = count - 2，结果为 6 count *= 2; // 相当于 count = count * 2，结果为 12 count /= 4; // 相当于 count = count / 4，结果为 3 console.log(count);3.2 条件判断：if / else if / else
条件判断用来根据不同的情况执行不同的代码。前端最常见的场景是：根据用户是否登录，显示不同的界面。
let score = 75; if (score >= 90) { console.log("优秀"); } else if (score >= 60) { console.log("及格"); } else { console.log("不及格"); } // 三元运算符：简洁版的 if-else let result = score >= 60 ? "通过" : "不通过"; console.log(result); // "通过"三元运算符常用于简单判断，写起来比较简洁。但如果条件嵌套过多，反而会影响可读性，建议只在逻辑简单时使用。
3.3 循环：for / while
循环用来重复执行某段代码。最常见的场景是遍历数组。
for 循环：
// 输出 1 到 5 for (let i = 1; i <= 5; i++) { console.log(i); } // 遍历数组 let fruits = ["苹果", "香蕉", "橙子"]; for (let i = 0; i < fruits.length; i++) { console.log(fruits[i]); }while 循环：
let i = 0; while (i < 3) { console.log("当前 i 的值为：" + i); i++; }for...of 循环（ES6 新增）：
let fruits = ["苹果", "香蕉", "橙子"]; for (let fruit of fruits) { console.log(fruit); }for...of写法更简洁，推荐在遍历数组时优先使用。
还有一种for...in循环，主要用来遍历对象的属性名。但由于它会把原型链上的属性也遍历出来，容易出现意料之外的结果，实际开发中不建议随意使用。
4. 函数
4.1 函数的声明与调用
函数是一段可以被重复调用的代码块。函数的诞生让代码从“顺序执行”变成了“按需执行”，这是编程思维的重要一步。
// 函数声明 function greet(name) { return "你好，" + name + "！"; } // 函数调用 let message = greet("小明"); console.log(message); // "你好，小明！"来拆解一下函数的结构：
function：声明函数的关键字。greet：函数名，自己定义，建议用见名知义的动词或动词短语。name：参数，调用函数时传入的数据，可以有多个，用逗号分隔。return：返回值，函数执行后得到的结果。如果不需要返回值，可以省略。
4.2 函数表达式与箭头函数
除了上面的函数声明方式，JS 还支持把函数赋值给变量，这种方式叫函数表达式：
// 函数表达式 const add = function (a, b) { return a + b; }; console.log(add(3, 5)); // 8ES6 推出了箭头函数，写法更简洁，现在是前端开发的主流写法：
// 箭头函数 const add = (a, b) => { return a + b; }; // 如果函数体只有一行 return，可以进一步简化 const addSimple = (a, b) => a + b; // 如果只有一个参数，甚至可以省略括号 const double = x => x * 2; console.log(add(3, 5)); // 8 console.log(addSimple(3, 5)); // 8 console.log(double(4)); // 8箭头函数不仅是语法糖，它和普通函数在this的指向上也有区别。this是 JS 中一个比较进阶的概念，新手阶段只需要记住：在对象方法、事件回调等场景中，箭头函数的this指向更符合直觉。随着学习深入，你会慢慢体会到这一点。
4.3 参数默认值与剩余参数
在实际开发中，经常需要处理“调用函数时参数没传全”的情况。ES6 提供了参数默认值语法：
function greet(name = "游客") { return "你好，" + name + "！"; } console.log(greet()); // "你好，游客！" console.log(greet("小红")); // "你好，小红！"剩余参数用来收集多余的参数：
function sum(...numbers) { let total = 0; for (let num of numbers) { total += num; } return total; } console.log(sum(1, 2, 3)); // 6 console.log(sum(1, 2, 3, 4, 5)); // 154.4 作用域与变量提升
作用域决定了变量在哪些地方可以被访问。JS 中有全局作用域、函数作用域和块级作用域。
let global = "全局变量"; function show() { let local = "局部变量"; console.log(global); // 可以访问全局变量 console.log(local); // 可以访问局部变量 } show(); // console.log(local); // 报错：local is not defined，外部无法访问函数内部变量var和let在作用域上的区别是面试高频题：
if (true) { var a = 1; let b = 2; } console.log(a); // 1，var 没有块级作用域 console.log(b); // 报错：b is not defined，let 有块级作用域再来看变量提升：
console.log(x); // undefined，不会报错 var x = 10; // 上面代码等价于： // var x; // console.log(x); // x = 10;这种现象叫变量提升，是var的典型问题，很容易导致代码逻辑混乱。而let和const不存在变量提升：
// console.log(y); // 报错：Cannot access 'y' before initialization let y = 20;这也是为什么不推荐使用var的核心原因之一。理解作用域后，再看网上的一些代码就不会懵了。
5. 数组与对象
5.1 数组的常用操作
数组用来存放一系列数据。JS 数组可以存放不同类型的元素，但在实际项目中，我们通常会保持数组内元素类型一致。
let fruits = ["苹果", "香蕉"]; let numbers = [1, 2, 3, 4, 5]; // 取值和赋值 console.log(fruits[0]); // "苹果" fruits[1] = "西瓜"; console.log(fruits); // ["苹果", "西瓜"] // 获取数组长度 console.log(numbers.length); // 5 // 添加和删除元素 fruits.push("橙子"); // 末尾添加 console.log(fruits); // ["苹果", "西瓜", "橙子"] fruits.pop(); // 删除末尾元素 console.log(fruits); // ["苹果", "西瓜"] fruits.unshift("草莓"); // 开头添加 console.log(fruits); // ["草莓", "苹果", "西瓜"] fruits.shift(); // 删除开头元素 console.log(fruits); // ["苹果", "西瓜"]5.2 数组的遍历与查找
除了传统的for循环和for...of循环，开发中最常用的是数组自带的forEach、map、filter、find等方法。这些方法配合箭头函数使用，代码非常简洁。
forEach：遍历数组，无返回值。
let list = ["HTML", "CSS", "JS"]; list.forEach(function (item, index) { console.log(index, item); }); // 箭头函数写法 list.forEach((item, index) => { console.log(index, item); });map：遍历数组并返回一个新数组，常用于数据转换。
let numbers = [1, 2, 3]; // 把每个数字乘以 2 let doubled = numbers.map(num => num * 2); console.log(doubled); // [2, 4, 6]filter：过滤出符合条件的元素。
let scores = [55, 85, 72, 43, 96]; // 筛选出及格（>=60）的成绩 let passed = scores.filter(score => score >= 60); console.log(passed); // [85, 72, 96]find：返回第一个符合条件的元素。
let users = [ { id: 1, name: "小明" }, { id: 2, name: "小红" }, { id: 3, name: "小刚" } ]; let user = users.find(u => u.id === 2); console.log(user); // { id: 2, name: "小红" }includes 与 indexOf：判断元素是否存在。
let arr = ["a", "b", "c"]; console.log(arr.includes("b")); // true console.log(arr.includes("d")); // false console.log(arr.indexOf("b")); // 1，找不到时返回 -1面试题中常出现“判断字符串是否包含某个字符”，除了includes，在字符串中同样适用：
let str = "Hello JavaScript"; console.log(str.includes("Java")); // true console.log(str.indexOf("Java")); // 65.3 对象的创建与访问
对象用花括号表示，由键值对组成。前端开发中，对象通常用来描述一组相互关联的数据。
let person = { name: "小明", age: 18, city: "北京", greet: function () { console.log("大家好，我是" + this.name); } }; // 访问对象的属性（两种方式） console.log(person.name); // "小明" console.log(person["age"]); // 18 // 修改属性 person.age = 19; // 新增属性 person.email = "xiaoming@example.com"; // 调用对象的方法 person.greet(); // "大家好，我是小明"更推荐使用点语法person.name，代码更清晰。person["age"]这种写法在“属性名是变量”的场景下才使用。
5.4 对象的结构与解构
ES6 提供了解构赋值语法，可以快速从对象或数组中取出数据。现在前端框架开发中几乎每天都在用。
对象解构：
let user = { name: "小红", age: 20, city: "上海" }; // 以前这样取 // let name = user.name; // let age = user.age; // 解构赋值 const { name, age, city } = user; console.log(name, age, city); // "小红" 20 "上海"数组解构和交换变量：
let colors = ["red", "green", "blue"]; let [first, second, third] = colors; console.log(first, second, third); // "red" "green" "blue" // 利用解构交换两个变量的值 let a = 1; let b = 2; [a, b] = [b, a]; console.log(a, b); // 2 1剩余与扩展运算符：
这三个点...是 ES6 的一个语法，可以在对象和数组中展开或收集数据。
// 扩展运算符：展开数组或对象 let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let combined = [...arr1, ...arr2]; console.log(combined); // [1, 2, 3, 4, 5, 6] // 浅拷贝对象 let original = { a: 1, b: 2 }; let copy = { ...original }; console.log(copy); // { a: 1, b: 2 }6. ES6+ 常用特性
6.1 模板字符串
过去拼接字符串要用+号，写起来繁琐，还容易出错。ES6 的模板字符串用反引号（`）包裹，可以直接在字符串中嵌入变量：
let name = "小明"; let age = 18; // 旧写法 let msg1 = "我叫" + name + "，今年" + age + "岁。"; // 模板字符串 let msg2 = `我叫${name}，今年${age}岁。`; console.log(msg1); // 我叫小明，今年18岁。 console.log(msg2); // 我叫小明，今年18岁。模板字符串还支持换行，在拼接多行 HTML 片段时特别方便：
let user = { name: "小红", age: 20 }; let card = ` <div class="card"> <h3>${user.name}</h3> <p>年龄：${user.age}</p> </div> `; console.log(card);6.2 Promise 与异步处理
JS 是单线程语言，但页面上经常需要处理耗时操作，例如请求服务器数据、读取本地文件、设置定时器等。为了让这些操作不阻塞页面，JS 引入了异步编程模型。
Promise 是处理异步操作的标准方式。先看一个最简单的 Promise 示例：
const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { let success = true; if (success) { resolve("数据获取成功"); } else { reject("数据获取失败"); } }, 1000); }); }; // 使用 then/catch 处理结果 fetchData() .then(data => { console.log(data); // 1秒后输出："数据获取成功" }) .catch(err => { console.log(err); });更推荐使用async/await语法，让异步代码看起来更像同步代码：
const getData = async () => { try { const result = await fetchData(); console.log(result); } catch (err) { console.log("出错啦：" + err); } }; getData();关于 Promise，新手阶段不需要深入原理，但至少要理解三个概念：
- Promise 有三个状态：pending（进行中）、fulfilled（成功）、rejected（失败）。
then接收成功结果，catch接收失败原因。async/await是 Promise 的语法糖，用try/catch捕获异常。
6.3 常用字符串方法
实际开发中，字符串处理是高频场景。下面是最常用的一组方法：
let str = "Hello JavaScript"; console.log(str.length); // 17 console.log(str.toUpperCase()); // "HELLO JAVASCRIPT" console.log(str.toLowerCase()); // "hello javascript" console.log(str.includes("Java")); // true console.log(str.startsWith("Hello")); // true console.log(str.endsWith("Script")); // true console.log(str.indexOf("a")); // 7 // 截取子串 console.log(str.substring(6, 10)); // "Java" console.log(str.slice(6)); // "JavaScript" // 分割成数组 let csv = "苹果,香蕉,橙子"; console.log(csv.split(",")); // ["苹果", "香蕉", "橙子"] // 去除空格 let email = " user@example.com "; console.log(email.trim()); // "user@example.com" // 保留小数（数值方法，常用于价格展示） let price = 3.14159; console.log(price.toFixed(2)); // "3.14"，注意返回值是字符串面试中常见的json.stringify与性能优化，其实也是字符串处理相关的话题。简单来说，JSON.stringify可以把 JS 对象转换成 JSON 字符串，用于数据存储或传输；JSON.parse则反过来把 JSON 字符串解析为对象。
let obj = { name: "小明", age: 18 }; let jsonStr = JSON.stringify(obj); console.log(jsonStr); // {"name":"小明","age":18} let newObj = JSON.parse(jsonStr); console.log(newObj.name); // "小明"7. DOM 操作入门
7.1 什么是 DOM
DOM（Document Object Model，文档对象模型）是浏览器提供的一套接口，让 JS 可以操作 HTML 元素。简单理解：浏览器把 HTML 解析成一个树形结构，JS 通过操作这棵树上的节点，就能动态改变网页内容。
学习 DOM 操作，是前端开发“让页面动起来”的第一步。
7.2 获取元素
最常见的几种获取元素的方式：
// 通过 id 获取元素 const title = document.getElementById("title"); // 通过 class 获取元素列表 const items = document.getElementsByClassName("item"); // 通过标签名获取元素列表 const divs = document.getElementsByTagName("div"); // 使用选择器获取第一个匹配元素（最推荐） const firstItem = document.querySelector(".item"); // 使用选择器获取所有匹配元素 const allItems = document.querySelectorAll(".item");实际开发中，document.querySelector和document.querySelectorAll使用频率最高。
7.3 修改内容与样式
// 获取元素 const title = document.getElementById("title"); // 修改文本内容 title.textContent = "新的标题"; // 修改 HTML 内容（可以插入标签） title.innerHTML = "<span style='color:red'>红色标题</span>"; // 修改样式 title.style.color = "blue"; title.style.fontSize = "24px";修改textContent和innerHTML的区别值得注意：textContent只修改文本，插入的标签会被当作普通文本显示；innerHTML会解析 HTML 标签。在需要渲染用户输入内容时，用innerHTML存在 XSS 安全风险，建议优先使用textContent或在做好转义的前提下使用。
7.4 事件监听
事件可以让页面响应用户操作。最常用的是鼠标点击事件：
const button = document.getElementById("btn"); const output = document.getElementById("output"); button.addEventListener("click", function () { output.textContent = "按钮被点击了！"; });常见的事件类型：
| 事件名称 | 触发时机 |
|---|---|
| click | 鼠标点击 |
| mouseenter | 鼠标移入 |
| mouseleave | 鼠标移出 |
| keydown | 键盘按下 |
| submit | 表单提交 |
| change | 输入框内容改变且失去焦点 |
| input | 输入框内容实时改变 |
7.5 综合示例
下面写一个经典示例：点击按钮，在页面上添加一项待办事项。
<!-- 文件路径：todo.html --> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>待办事项</title> </head> <body> <input type="text" id="taskInput" placeholder="输入待办事项"> <button id="addBtn">添加</button> <ul id="taskList"></ul> <script> const input = document.getElementById("taskInput"); const btn = document.getElementById("addBtn"); const list = document.getElementById("taskList"); btn.addEventListener("click", function () { const taskText = input.value.trim(); if (taskText === "") { alert("请输入内容"); return; } const li = document.createElement("li"); li.textContent = taskText; list.appendChild(li); // 清空输入框并聚焦 input.value = ""; input.focus(); }); </script> </body> </html>这是一个非常经典的入门案例，它把前面学到的变量、事件、条件判断、DOM 操作串联了起来。你可以把代码复制到本地运行，感受一下“页面被 JS 驱动”的过程。
8. 常见问题与排查思路
新手写 JS 时，经常会遇到一些高频问题。下面整理成表格，方便你对照排查：
| 问题现象 | 常见原因 | 排查与解决思路 |
|---|---|---|
xxx is not defined | 变量未声明就使用，或者声明语句尚未执行 | 检查变量名拼写；确认声明语句在调用之前 |
undefined不是报错，但结果不对 | 变量声明了但没有赋值，对象中不存在该属性 | 用console.log打印变量，确认输出是否为undefined |
| 页面没有反应 | JS 代码报错中断 | 打开浏览器控制台查看报错信息；检查<script>标签位置 |
Cannot read property 'xxx' of null | 获取 DOM 元素的时机太早，元素尚未加载 | 把<script>标签放在页面底部，或使用DOMContentLoaded事件 |
| 按钮点击无效果 | 事件绑定代码有误，或选择器选不到元素 | 在事件绑定前打印元素，确认是否获取成功 |
| 结果出现了字符串拼接 | +号两边有字符串，执行了拼接 | 使用Number()、parseInt()显式转换类型 |
NaN的结果 | 非法数值计算，例如把非数字字符串转成数字 | 检查数据来源，确认输入内容是数字格式 |
| 变量值莫名被修改 | 不小心使用了var，产生了全局变量污染 | 使用let和const，按作用域规范声明变量 |
| 异步请求结果拿不到 | 没有正确处理 Promise，或接口报错 | 在.then/catch中打印日志，确认异步是否执行成功 |
9. 最佳实践与工程建议
学完语法只是第一步，工程化开发中还要注意以下几点。这些也是从“会写代码”走向“写好代码”的关键：
9.1 命名清晰
变量名和函数名要做到“见名知义”。
// 不推荐 let a = 18; function fn() {} // 推荐 let userAge = 18; function getUserInfo() {}习惯使用驼峰命名法，类名首字母大写，常量全部大写并用下划线分隔，例如MAX_COUNT。
9.2 优先使用严格相等
统一使用===和!==，避免隐式类型转换带来意外结果。除非你明确需要字符串和数字互相比较，否则不要使用==。
9.3 保持函数单一职责
一个函数只做一件事。函数体过长时，考虑拆分成多个小函数。这能让代码更容易测试、维护和复用。
9.4 处理边界情况
写代码时多想一想：输入为空怎么办？数组为空怎么办？用户输入了特殊字符怎么办？优秀的代码不仅要处理正常流程，更要处理好异常和边界场景。
9.5 善用 console 调试
初学者最常见的调试方式是console.log()，这个习惯很好。但随着项目变大，建议学会使用浏览器开发者工具中的 Sources 面板设置断点，可以更直观地观察变量变化。
9.6 建立代码规范
从一开始就保持良好的代码风格。可以使用 ESLint 和 Prettier 工具统一规范、自动格式化。前端项目中使用这些工具已经是标配，越早接触越好。
9.7 警惕异步陷阱
在循环里做异步操作是新手容易踩坑的地方。如果需要在循环中逐个请求接口，注意异步任务并不是按直觉顺序完成的。建议先掌握Promise.all、Promise.allSettled等 API，再深入异步编程。
10. 总结与下一步学习建议
到此为止，我们已经把 JavaScript 的核心语法过了一遍。回顾一下今天的内容：
- 变量与数据类型：
let、const声明方式，基本数据类型与类型转换。 - 运算符与流程控制：比较、逻辑运算符，
if判断和for循环。 - 函数：函数声明、箭头函数、参数默认值、作用域。
- 数组与对象：数组遍历、
map/filter/find等高阶方法、对象访问与解构。 - ES6+ 新特性：模板字符串、展开运算符、解构赋值、Promise 异步处理。
- DOM 操作：获取元素、修改内容、事件监听，并完成了待办事项小案例。
- 常见问题与工程实践：排错思路、命名规范、边界处理。
这些内容基本覆盖了前端日常开发 80% 以上的 JS 语法场景。接下来的学习路线，可以参考下面几步：
第一步：练习正则与数组对象方法组合。试着用map、filter、reduce实现一组数据处理功能，例如统计数组中的最大值、对商品列表按价格过滤、把用户列表按城市分组。
第二步：掌握事件与 DOM 进阶。理解事件冒泡与事件委托，学会动态创建表格、实现简单的轮播图、实现表单校验。这一步能巩固你对 DOM 操作的理解。
第三步：学习网络请求。掌握fetch和axios的用法，用免费公开 API 做一个数据展示页面。这能帮助你建立前后端交互的完整概念。
第四步：进入框架学习。有了扎实的 JS 基础，再学习 Vue 或 React 会轻松很多。框架是建立在原生 JS 之上的，底层思路都是对 DOM 操作和状态管理的封装。
第五步：阅读优质源码。建议阅读一些知名开源项目中风格清晰的代码，比如 Lodash 中某些函数的实现，理解代码如何组织、如何考虑边界情况。
学习编程没有捷径，只有多敲代码、多调试、多思考。建议你拿到代码后不要直接复制粘贴，而是亲手敲一遍，然后试着改一改、变一变，看看会发生什么。出错是好事，排查错误的过程，就是对知识理解加深的过程。
希望这篇文章能帮你在 JavaScript 入门的路上少走一些弯路。如果你在练习中遇到具体问题，欢迎在评论区留言，我看到后会尽力解答。如果本文对你有帮助，可以收藏备用，也欢迎转发给正在学前端的朋友。
到文件读写，避开常见坑)
