【JavaScript 入门到精通】上篇：JS 核心基础语法（变量、数据类型、函数全解析）

JavaScript（简称 JS）是世界上最流行的客户端脚本语言，无需编译，由浏览器逐行解释执行。它最初由布兰登・艾奇用 10 天设计，从 LiveScript 更名为 JavaScript，如今不仅能用于网页开发，还可通过 Node.js 实现服务端编程、桌面应用（Electron）、App 开发等多场景应用。

作为前端开发的 “三驾马车” 之一，HTML 负责页面结构（身体），CSS 负责样式（穿衣化妆），而 JavaScript 负责交互逻辑（动作）—— 没有 JS，网页只是静态的 “图片”，有了 JS 才能实现表单校验、网页特效、动态数据展示等核心功能。

二、JS 基本语法入门

2.1 书写方式

JS 有三种书写形式，根据场景选择：

行内式：写在 HTML 标签的事件属性中（如 onclick），适合少量代码。
html

预览
```
<input type="button" value="点我试试" onclick="alert('Hello World')" />
```
注意：HTML 用双引号，JS 用单引号，避免嵌套冲突。
内嵌式：写在<script>标签中，适合学习和少量代码场景。
html

预览
```
<script>
  alert('Hello World~!');
</script>
```
外部式：独立为.js文件，通过<script src="路径">引入，适合代码量较大的项目，利于复用和维护。
html

预览
```
<script src="my.js"></script>
```
注意：引入外部 JS 的<script>标签中间不能写代码。

2.2 输入输出语句

JS 提供 3 种常用交互方式，直接对接浏览器：

方法	说明	示例
alert(msg)	弹出警示框	`alert('这是提示')`
console.log(msg)	控制台打印（调试用）	`console.log('调试信息')`
prompt(info)	弹出输入框，获取用户输入	`var name = prompt('请输入姓名')`

2.3 变量与命名规范

变量是存放数据的 “容器”，本质是内存中的一块空间。

变量使用步骤：

javascript

运行

// 1. 声明变量（申请空间）
var age;
// 2. 赋值（存入数据）
age = 18;
// 简写：声明+赋值
var name = "张三";

命名规范（必须遵守，否则报错或不规范）：
- 由字母、数字、下划线_、美元符$组成
- 不能以数字开头，不能是关键字（如 var、for）
- 严格区分大小写（age 和 Age 是两个变量）
- 遵循驼峰命名法：首字母小写，后续单词首字母大写（如 myFirstName）
- 变量名要有意义（避免用 a、b、c 等）

三、数据类型：JS 的 “数据分类”

JS 是弱类型语言，变量类型无需提前声明，运行时自动确定。数据类型分为简单类型和复杂类型，重点掌握简单类型：

3.1 简单数据类型

类型	说明	默认值	示例
Number	数字（整数 / 小数）	0	`var num = 21` 或 `3.14`
String	字符串（必须带引号）	""	`var str = "Hello"` 或 `'JS'`
Boolean	布尔值（真 / 假）	false	`var isOk = true`
Undefined	声明未赋值的变量	undefined	`var x;`
Null	空值（后续对象学习常用）	null	`var obj = null`

3.2 数据类型转换

开发中经常需要转换类型，重点掌握以下 3 种场景：

转字符串：

javascript

运行

var num = 123;
// 方式1：toString()
num.toString(); 
// 方式2：String()强制转换
String(num);
// 方式3：加号拼接（最常用）
num + "号"; // 结果："123号"

转数字型（重点）：

javascript

运行

var str = "123";
// 方式1：parseInt() 转整数
parseInt(str); // 123
// 方式2：parseFloat() 转小数
parseFloat("123.45"); // 123.45
// 方式3：Number() 强制转换
Number(str); // 123
// 方式4：隐式转换（利用算术运算）
str - 0; // 123

转布尔型：
- 空值（""、0、NaN、null、undefined）转布尔值为false
- 其余值均转为true
javascript

运行
```
Boolean(""); // false
Boolean(123); // true
```

四、运算符：JS 的 “计算工具”

运算符用于实现赋值、计算、比较等功能，常用分类如下：

4.1 算术运算符

符号	说明	示例
+ - * /	加、减、乘、除	`10+20=30`
%	取余数（取模）	`9%2=1`（判断奇偶常用）

4.2 递增 / 递减运算符

适合反复加 1 或减 1 的场景，分前置和后置：

前置：++num（先自加，后返回值）
javascript

运行
```
var num = 10;
console.log(++num); // 11
```

后置：num++（先返回原值，后自加）

javascript

运行

var num = 10;
console.log(num++); // 10（输出后num变为11）

4.3 比较与逻辑运算符

比较运算符：返回布尔值（true/false），注意==（值相等）和===（值和类型都相等）的区别：
javascript

运行
```
37 == "37"; // true（隐式转换类型）
37 === "37"; // false（类型不同）
```

逻辑运算符：用于多条件判断

符号	说明	示例
&&	逻辑与（都真才真）	`2>1 && 3>2 // true`
			逻辑或（一真就真）	`2>3	1>0 // true`
!	逻辑非（取反）	`!true // false`

4.4 运算符优先级

小括号()优先级最高
算术运算符 > 比较运算符 > 逻辑运算符 > 赋值运算符
示例：3 + 4 * 2 > 10 && 5 - 1 == 4 // false

五、流程控制：JS 的 “执行逻辑”

流程控制决定代码执行顺序，分为顺序结构、分支结构、循环结构。

5.1 分支结构（条件判断）

if 语句（单条件）：

javascript

运行

var age = 18;
if (age >= 18) {
  console.log("成年");
}

if-else 语句（双条件）：

javascript

运行

if (age >= 18) {
  console.log("成年");
} else {
  console.log("未成年");
}

switch 语句（多条件匹配）：

javascript

运行

var fruit = "苹果";
switch (fruit) {
  case "苹果":
    console.log("5元/斤");
    break; // 必须加，否则继续执行下一个case
  case "香蕉":
    console.log("3元/斤");
    break;
  default:
    console.log("无此水果");
}

5.2 循环结构（重复执行）

for 循环（最常用，适合已知次数）：

javascript

运行

// 语法：初始化变量; 条件; 操作表达式
for (var i = 0; i < 10; i++) {
  console.log("第" + (i+1) + "次循环");
}

案例：打印九九乘法表

javascript

运行

for (var i = 1; i <= 9; i++) {
  for (var j = 1; j <= i; j++) {
    document.write(j + "×" + i + "=" + i*j + " ");
  }
  document.write("<br>");
}

while 循环（适合未知次数）：

javascript

运行

var i = 1;
while (i <= 10) {
  console.log(i);
  i++; // 必须有退出条件，否则死循环
}

break 与 continue：
- break：跳出整个循环
- continue：跳出本次循环，继续下一次

六、数组与函数：JS 的 “数据容器” 与 “代码复用”

6.1 数组（存储多个数据）

创建数组：

javascript

运行

// 方式1：数组字面量（推荐）
var arr = ["张三", 18, true];
// 方式2：new Array()
var arr = new Array(3); // 长度为3的空数组

访问与遍历数组：
- 数组索引从 0 开始：arr[0]（第一个元素）
- 遍历（常用 for 循环）：
  javascript
  
  运行
```
var arr = ["红", "绿", "蓝"];
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}
```

新增元素：

javascript

运行

arr[arr.length] = "黄"; // 尾部新增

6.2 函数（复用代码块）

函数声明与调用：

javascript

运行

// 声明函数
function getSum() {
  var sum = 0;
  for (var i = 1; i <= 100; i++) {
    sum += i;
  }
  console.log(sum);
}
// 调用函数（必须调用才执行）
getSum();

函数参数：

javascript

运行

// 带形参的函数
function getSum(a, b) {
  console.log(a + b);
}
// 传实参
getSum(10, 20); // 30

返回值（return）：

javascript

运行

function getSum(a, b) {
  return a + b; // 返回结果，终止函数
}
var result = getSum(10, 20);
console.log(result); // 30

作用域：
- 全局作用域：函数外声明的变量，整个页面可用
- 局部作用域：函数内声明的变量，仅函数内可用
- 注意：JS 在 ES6 前无块级作用域（if/for 循环内的 var 变量是全局的）

总结

上篇我们掌握了 JavaScript 的核心基础：从书写方式、变量数据类型，到运算符、流程控制，再到数组与函数。这些是 JS 的 “内功心法”，无论后续学习 DOM/BOM 还是框架，都离不开这些基础。

下篇将进入实战阶段，学习 DOM 文档操作、事件处理、BOM 浏览器交互等核心应用，让静态页面 “动” 起来！关注我，下篇不见不散～

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

用 Codex 创建论文全文下载 Skill

DAMO开发者矩阵

企业网络管理实战：稳定、安全、高效运维全方案

本文提出了一套针对中小/中大型企业的网络管理方案，涵盖架构设计、基础配置、安全防护、监控运维及自动化规范五大维度。建议采用三层网络架构（核心-汇聚-接入）并部署高可用机制，强调VLAN规划、DHCP标准化及设备安全管理基线。安全方面需构建边界防火墙、内网准入控制及数据合规体系。推荐通过Zabbix等工具实现主动监控，结合自动化脚本和规范文档提升运维效率。核心目标是通过标准化、自动化的管理手段，将企

DAMO开发者矩阵

【机器人 / 强化学习】SERL：让真机强化学习从“难用”走向“可复现”的强化学习框架 ----（1）全景篇

策略实现严格分离JIT 内零副作用，I/O 全在普通 Python显式数据搬运device_put进 JIT,device_get出 JIT异步安全保证参数发布前计算完成配置项不进入 JAX 追踪不用 callback避免顺序不确定性和性能损失进程隔离Actor/Learner 分离天然解决 JIT/I/O 矛盾★核心思想。