从零入门JavaScript：基础语法全解析

作为世界上最流行的编程语言之一，JavaScript（简称JS）早已超越了最初"表单验证工具"的定位，成为横跨网页开发、游戏开发、服务器端、桌面程序乃至手机APP的通用编程语言。无论是前端交互特效，还是基于Node.js的后端服务，JS都扮演着核心角色。今天这篇文章，就带大家从零开始，系统梳理JavaScript的基础语法，帮你快速搭建JS知识框架。

一、JavaScript核心认知

1. JS的本质与定位

JavaScript是一种脚本语言，通过解释器运行，主要在浏览器端执行，也可基于Node.js在服务器端运行。它与HTML、CSS共同构成了网页的三大基石：

HTML：网页的结构（骨）
CSS：网页的表现（皮）
JavaScript：网页的行为（魂）

2. 与Java的"爱恨情仇"

很多人会因名字混淆两者，但实际上它们的关系就像"雷锋与雷峰塔"------毫无关联。1995年，布兰登·艾奇用10天完成JS设计，最初命名为LiveScript，后因Java的流行度更名为JavaScript以助力传播。两者语法风格、设计理念截然不同，仅名字有交集。

3. JS的组成部分

JavaScript的功能实现依赖三大核心：

ECMAScript（ES）：JS的语法标准，规定了变量、函数、数据类型等基础语法，所有JS引擎都需遵循
DOM：文档对象模型，用于操作网页中的元素（如按钮点击、内容修改）
BOM：浏览器对象模型，用于操作浏览器窗口（如弹出框、地址栏控制）

二、JS的书写与运行方式

1. 三种书写形式

行内式：直接嵌入HTML元素内部，适合简单交互

HTML 复制代码

<input type="button" value="点我一下" onclick="alert('haha')">

内嵌式：写在<script>标签中，适合中等体量代码

HTML 复制代码

<script>
alert("这是内嵌式JS");
</script>

外部式：单独写在.js文件中，通过<script src="文件名.js">引入，适合大型项目（注意：引入时script标签中间不能写代码）

2. 运行过程

浏览器读取硬盘中的HTML/JS文件，加载到内存
JS引擎（如Chrome的V8引擎）逐行解析JS代码，翻译成二进制指令
CPU执行二进制指令，完成交互效果

3. 注释与输入输出

注释：单行注释// 注释内容（推荐），多行注释/* 注释内容 */（不可嵌套），快捷键Ctrl+/
输入：prompt("提示文字")，弹出输入框获取用户输入
输出：alert("内容")（弹出警示框）、console.log("内容")（控制台打印日志，开发者调试用，F12打开控制台查看）

三、核心基础语法

1. 变量与动态类型

（1）变量定义

使用var或let关键字声明变量（两者差异后续详解），语法格式：

JavaScript 复制代码

var name = '张三'; // 字符串类型，单引号推荐
var age = 20; // 数字类型，无需声明整数/小数
var isStudent = true; // 布尔类型

=表示赋值，两侧建议留空格
语句结尾建议加英文分号;
字符串需用单/双引号包裹，数字直接赋值

（2）动态类型特性

JS是动态类型语言，变量类型在运行时确定，且可随时改变：

JavaScript 复制代码

var a = 10; // 此时是数字类型
a = "hello"; // 后续可改为字符串类型

这与Java、C++等静态类型语言截然不同（静态语言变量类型创建时确定，不可修改）。

2. 基本数据类型

JS内置5种基本数据类型：

number：数字类型（整数、小数、进制数等），特殊值包括Infinity（无穷大）、-Infinity（负无穷大）、NaN（非数字）
boolean：布尔类型，仅true（真）和false（假）
string：字符串类型，支持转义字符（\n换行、"双引号、'单引号等），通过length属性获取长度
undefined：未初始化的变量默认值，如var a; console.log(a); // 输出undefined
null：空值，表示变量是一个空对象

类型相关注意点

字符串拼接：使用+，数字与字符串拼接会转为字符串，如"分数：" + 90 // 结果为"分数：90"
判定非数字：isNaN(值)，返回true表示非数字
null与undefined区别：null是"空盒子"，undefined是"没有盒子"

3. 运算符

与Java用法基本一致，重点关注：

比较运算符：==（会隐式类型转换） vs ===（严格相等，不转换类型），推荐使用===
逻辑运算符：&&（与，一假则假）、||（或，一真则真）、!（非）
复合赋值运算符：+=、-=、*=等

4. 流程控制语句

（1）条件语句

if-else语句：

JavaScript 复制代码

var num = 15;
if (num % 2 === 0) {
console.log("偶数");
} else if (num < 0) {
console.log("负数");
} else {
console.log("奇数");
}

三元表达式（if-else简化）：条件 ? 表达式1 : 表达式2

JavaScript 复制代码

var result = 80 >= 60 ? "及格" : "不及格";

switch语句（多分支场景）：

JavaScript 复制代码

var day = parseInt(prompt("输入星期几："));
switch (day) {
case 1: console.log("星期一"); break;
case 2: console.log("星期二"); break;
default: console.log("输入有误");
}

（2）循环语句

while循环：

JavaScript 复制代码

// 打印1-10
var i = 1;
while (i <= 10) {
console.log(i);
i++;
}

for循环（更简洁）：

JavaScript 复制代码

// 计算5的阶乘
var result = 1;
for (var i = 1; i <= 5; i++) {
result *= i;
}

循环控制：continue（结束本次循环）、break（结束整个循环）

四、数组与对象

1. 数组

数组是有序集合，JS数组无需统一元素类型，灵活度高。

（1）创建数组

JavaScript 复制代码

var arr1 = []; // 空数组（字面量方式，推荐）
var arr2 = [1, "hello", true]; // 混合类型数组
var arr3 = new Array(); // new关键字方式

（2）数组操作

访问元素：arr[索引]（索引从0开始），超出范围返回undefined
新增元素：push(元素)（末尾添加）、arr[索引] = 值（指定位置添加）
删除元素：splice(起始索引, 删除个数)
获取长度：arr.length

2. 对象

对象是无序集合，用于存储复杂数据（属性+方法），比如描述一个学生、一个商品。

（1）创建对象

字面量方式（推荐）：

JavaScript 复制代码

var student = {
name: "蔡徐坤",
height: 175,
sayHello: function() {
console.log("hello！");
}
};

构造函数方式（批量创建对象）：

JavaScript 复制代码

function Cat(name, type) {
this.name = name;
this.type = type;
this.miao = function() {
console.log("喵~");
};
}
// 创建实例
var mimi = new Cat("咪咪", "中华田园喵");

（2）访问对象

属性：对象.属性名 或 对象["属性名"]
方法：对象.方法名()（必须加括号）

五、函数

函数是可复用的代码块，用于封装逻辑。

1. 函数定义与调用

JavaScript 复制代码

// 定义函数
function sum(a, b) {
return a + b; // 返回值
}
// 调用函数
var result = sum(10, 20);
console.log(result); // 输出30

2. 函数特性

函数定义与调用顺序无关，可先调用后定义
实参和形参个数可不匹配（多的参数忽略，少的参数为undefined）
函数表达式（匿名函数）：

JavaScript 复制代码

var add = function() {
var total = 0;
for (var i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
};
add(1,2,3); // 输出6

六、总结

JavaScript基础语法的核心在于"灵活"------动态类型、松散的语法规则、多样化的书写方式，让它上手门槛较低，但也需要注意细节（如==与===的区别、作用域问题）。本文梳理了JS的核心概念、语法规则和常用API，后续还会深入讲解ES6+新特性、DOM/BOM操作、原型链等进阶内容。

如果是前端新手，建议先通过简单案例（如表单验证、数字计算）巩固基础，再逐步尝试DOM操作实现交互特效；如果是后端开发者转向前端，重点关注JS与Java的差异（如动态类型、原型机制），避免用Java思维写JS代码。

学习JS的关键在于多练多试，打开浏览器控制台，把每个语法点都亲手敲一遍，才能真正掌握这门"万能语言"～后续会持续更新JS进阶内容，敬请关注！