JavaScript（简称 JS）作为前端开发的核心语言，其语法是构建交互性网页、实现复杂业务逻辑的基础。无论是前端工程师还是后端开发者，掌握 JS 语法都是提升开发效率、规避代码漏洞的关键。本文将从基础语法到进阶特性，全面梳理 JS 语法体系，助力开发者夯实技术基础。
一、变量与数据类型
变量是 JS 中存储数据的容器，声明变量需使用var、let和const三个关键字，三者在作用域、变量提升和可修改性上存在显著差异。var存在变量提升现象，作用域为函数级，在同一作用域内可重复声明；let和const是 ES6 新增关键字，作用域为块级（如if、for代码块），不存在变量提升且不可重复声明，其中const声明的变量为常量，声明时必须赋值且后续不可修改引用（若为对象或数组，可修改内部属性或元素）。
JS 的数据类型分为基本数据类型和引用数据类型。基本数据类型包括Number（数字，如123、3.14）、String（字符串，如"hello"、'JS'）、Boolean（布尔值，true或false）、Undefined（未定义，变量声明未赋值时的默认值）、Null（空值，表示空对象指针）、Symbol（ES6 新增，唯一且不可变的值）和BigInt（用于表示大整数，如9007199254740991n）。引用数据类型主要包括Object（对象，如{name: "张三", age: 20}）、Array（数组，如[1, 2, 3]）、Function（函数）等，其特点是存储的是数据在内存中的引用地址，赋值时传递的是引用而非值本身。
数据类型转换是 JS 语法中的常见操作，分为隐式转换和显式转换。隐式转换由 JS 引擎自动完成，例如1 + "2"会自动将数字1转为字符串"1"，结果为"12"；显式转换需开发者手动调用方法，如Number("123")将字符串转为数字，String(123)将数字转为字符串，Boolean(0)将数字转为布尔值false。
二、运算符
JS 运算符按功能可分为算术运算符、赋值运算符、比较运算符、逻辑运算符、三元运算符等，是实现数据计算和逻辑判断的核心工具。
算术运算符包括+（加）、-（减）、（乘）、/（除）、%（取余）、++（自增）、--（自减）。需注意，+运算符既能进行算术加法，也能进行字符串拼接，当其中一个操作数为字符串时，会触发字符串拼接逻辑。例如3 + 5结果为8（算术加法），3 + "5"结果为"35"（字符串拼接）。
赋值运算符以=为基础，衍生出+=、-=、=、/=等复合赋值运算符，用于简化赋值操作。如let a = 2; a += 3等价于a = a + 3，最终a的值为5。
比较运算符用于判断两个值的关系，返回布尔值，包括==（相等，忽略数据类型，会进行隐式转换）、===（严格相等，不忽略数据类型，不进行隐式转换）、!=（不相等）、!==（严格不相等）、>（大于）、<（小于）、>=（大于等于）、<=（小于等于）。开发中推荐使用===和!==，避免隐式转换导致的逻辑错误，例如"123" == 123结果为true，而"123" === 123结果为false。
逻辑运算符包括&&（逻辑与，两边都为true时结果为true，否则为false，具有短路特性）、||（逻辑或，两边有一个为true时结果为true，否则为false，同样具有短路特性）、!（逻辑非，将值转为布尔值后取反）。三元运算符condition ? expr1 : expr2是简化if-else判断的语法，当condition为true时执行expr1，否则执行expr2，例如let result = 5 > 3 ? "大于" : "小于"，result最终为"大于"。
三、控制流语句
控制流语句用于改变代码的执行顺序，包括条件语句、循环语句和跳转语句，是实现复杂逻辑的关键。
条件语句主要有if-else和switch。if-else语句根据条件执行不同代码块，可嵌套使用，例如：
let score = 85;
if (score >= 90) {
console.log("优秀");
} else if (score >= 80) {
console.log("良好");
} else {
console.log("合格");
}
switch语句适用于多条件判断，根据expression的值匹配case，执行对应代码块，break用于跳出switch，default处理未匹配的情况：
let day = 3;
switch (day) {
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
default:
console.log("其他日期");
}
循环语句用于重复执行代码块，包括for、while和do-while。for循环适用于已知循环次数的场景，语法为for(初始化; 条件; 更新)，例如：
for (let i = 0; i < 5; i++) {
console.log(i); // 依次输出0、1、2、3、4
}
while循环先判断条件，条件为true时执行循环体，语法为while(条件)；do-while循环先执行一次循环体，再判断条件，确保循环至少执行一次，语法为do { 循环体 } while(条件)。
跳转语句包括break（跳出循环或switch）和continue（跳过当前循环次，进入下一次循环），例如：
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // 跳过i=2的循环次
}
if (i === 4) {
break; // 当i=4时跳出循环
}
console.log(i); // 输出0、1、3
}
四、函数
函数是 JS 中的可复用代码块，用于封装逻辑，通过function关键字声明，或使用函数表达式、箭头函数（ES6 新增）定义。
函数声明的语法为function 函数名(参数列表) { 函数体 }，例如：
function add(a, b) {
return a + b;
}
console.log(add(2, 3)); // 输出5
函数表达式是将函数赋值给变量，语法为let 变量名 = function(参数列表) { 函数体 }，例如let multiply = function(a, b) { return a b; }，调用时使用multiply(2, 3)，结果为6。
箭头函数是 ES6 简化函数定义的语法，语法为(参数列表) => { 函数体 }，若只有一个参数可省略括号，若函数体只有一条返回语句可省略大括号和return，例如let subtract = (a, b) => a - b，调用subtract(5, 2)结果为3。箭头函数与普通函数的区别在于：没有自己的this，其this指向外层作用域的this；不能作为构造函数使用；没有arguments对象。
函数参数支持默认值（ES6 新增）和剩余参数。默认值允许参数在未传递时使用默认值，例如function greet(name = "游客") { console.log("欢迎，" + name); }，调用greet()时输出"欢迎，游客"。剩余参数使用...接收多个参数并转为数组，例如function sum(...nums) { return nums.reduce((total, num) => total + num, 0); }，调用sum(1, 2, 3)结果为6。
五、对象与数组
对象和数组是 JS 中存储复杂数据的核心结构，在实际开发中应用广泛。
对象是键值对的集合，键（属性名）为字符串或Symbol，值（属性值）可为任意数据类型。对象的创建方式有两种：字面量方式let obj = { name: "李四", age: 25, sayHi: function() { console.log("Hi"); } }；构造函数方式let obj = new Object(); obj.name = "李四";。访问对象属性可使用.语法（如obj.name）或[]语法（如obj["age"]），调用对象方法直接使用obj.sayHi()。
数组是有序的数据集合，元素可为任意数据类型，通过索引（从 0 开始）访问。数组的创建方式包括字面量方式let arr = [1, "a", true]和构造函数方式let arr = new Array(1, "a", true)。JS 提供了丰富的数组方法，如push()（在末尾添加元素）、pop()（删除末尾元素）、shift()（删除开头元素）、unshift()（在开头添加元素）、map()（遍历数组并返回新数组）、filter()（筛选数组元素并返回新数组）、reduce()（累加数组元素）等。例如：
let arr = [1, 2, 3, 4];
let doubled = arr.map(num => num 2); // [2, 4, 6, 8]
let evenNums = arr.filter(num => num % 2 === 0); // [2, 4]
let total = arr.reduce((sum, num) => sum + num, 0); // 10
六、ES6 + 关键语法特性
ES6（2015 年发布）及后续版本为 JS 语法带来了诸多实用特性，大幅提升开发效率。除前文提及的let、const、箭头函数、参数默认值、剩余参数外，常用特性还包括：
模板字符串：使用反引号（）包裹，支持多行字符串和变量插值（({变量}），例如let name = "王五"; let info = `姓名：){name}，年龄：22;，info的值为"姓名：王五，年龄：22"。
解构赋值：快速从对象或数组中提取数据并赋值给变量，例如let { name, age } = { name: "赵六", age: 28 }（对象解构）、let [a, b] = [1, 2]（数组解构）。
Promise：用于处理异步操作，解决回调地狱问题，语法为new Promise((resolve, reject) => { 异步操作; 成功时调用resolve，失败时调用reject; })，可通过then()处理成功结果，catch()处理错误。
class：ES6 新增的类语法，简化面向对象编程，例如：
class Person {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}
let person = new Person("孙七");
person.sayName(); // 输出"孙七"
七、语法实践与注意事项
在实际开发中，遵循 JS 语法规范和最佳实践，可显著提升代码质量和可维护性。首先，建议开启严格模式（在代码开头添加"use strict";），严格模式下会禁用一些不规范语法（如未声明变量直接赋值），减少代码漏洞。其次，避免使用var声明变量，优先使用let和const，降低作用域相关问题的风险。再者，注意数据类型判断，推荐使用typeof判断基本数据类型（typeof null返回"object"，需特殊处理），使用instanceof判断引用数据类型（如arr instanceof Array判断是否为数组）。最后，遵循代码规范（如 ESLint 规则），保持代码风格统一，提高团队协作效率。
