【前端开发之JavaScript】（二）JS基础语法上篇：吃透变量 / 类型 / 输入输出

前言

作为前端开发的核心语言，JavaScript 的语法是所有学习的基石。如果把 JavaScript 的学习比作建房子，那基础语法就是打地基 ------ 地基打不牢，后续的 DOM 操作、框架开发、全栈进阶都会举步维艰。

上一篇我们了解了 JavaScript 的起源、运行机制和核心组成，这一篇我们聚焦JavaScript 基础语法上篇 ，手把手教你吃透前置核心知识 （第一个程序、书写形式、注释、输入输出）、变量的使用 （定义、赋值、动态类型特性）和基本数据类型（数字、字符串、布尔、undefined、null）三大核心模块。

本文全程搭配代码示例，避开晦涩的专业黑话，用生活化的类比讲透核心概念，无论是零基础小白还是想巩固基础的开发者，都能轻松理解。学完这篇，你能独立写出简单的 JS 交互代码，实现用户输入、数据处理、结果输出的完整逻辑，为后续学习流程控制、数组函数打下坚实基础！下面就让我们正式开始吧！

一、前置核心知识：开启 JS 编程的第一步

在写第一行 JS 代码之前，我们需要先掌握几个最基础的前置知识 ------ 如何写出第一个可运行的 JS 程序、JS 代码有哪些书写形式、如何给代码加注释、以及最基础的输入输出方式。这些知识是 JS 编程的 "敲门砖"，看似简单，却藏着很多新手容易踩坑的细节。

1.1 第一个 JS 程序：从一句 "你好！" 开始

和所有编程语言一样，我们的第一个 JS 程序就做最简单的事 ------ 弹出一个提示框，显示 "你好！"。

在 JavaScript 中，代码需要嵌入到 HTML 的**<script>**标签中才能在浏览器中运行，完整代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个JS程序</title>
</head>
<body>
    <!-- JS代码写在script标签中 -->
    <script>
        // 弹出提示框，显示你好！
        alert("你好！");
    </script>
</body>
</html>

将代码保存为index.html，用浏览器打开，就能看到浏览器弹出了一个包含 "你好！" 的提示框，这就是你的第一个 JS 程序！

核心知识点：

JS 代码必须放在**<script**>标签中，浏览器遇到该标签会自动启动 JS 引擎执行内部代码；

**<script>标签可以放在 HTML 的<head>或<body>**中，位置会影响代码执行顺序（后续会详细讲解）；

代码结尾的**;是语句结束符，JS 中可以省略，但强烈建议加上**，避免后续代码出现语法问题。

1.2 JavaScript 的三种书写形式：行内、内嵌、外部

根据开发场景的不同，JS 代码有三种书写形式，分别是行内式 、内嵌式 和外部式，三种形式各有优劣，适用于不同的开发场景。

1.2.1 行内式：直接嵌入 HTML 元素内部

行内式是将 JS 代码直接写在 HTML 元素的事件属性中（如**onclick点击事件），适用于简单的单个交互效果**。

html 复制代码

<!-- 点击按钮弹出提示框 -->
<input type="button" value="点我一下" onclick="alert('haha')">
<!-- 也可以写在a标签的href中 -->
<a href="javascript:alert('点击了链接')">点我</a>

注意事项：

行内式的 JS 代码需要用单引号包裹，因为 HTML 元素的属性本身用双引号，避免引号冲突；

行内式只能写简单的代码，复杂逻辑会让 HTML 代码杂乱，不易维护，不推荐大量使用；

核心原则：HTML 负责结构，JS 负责行为，尽量让两者分离。

1.2.2 内嵌式：写在 script 标签中

内嵌式是将 JS 代码写在 HTML 文件的**<script>标签中，是开发中最常用的形式** ，适用于中等复杂度的代码，也是我们入门阶段最主要的书写形式。

html 复制代码

<script>
    // 内嵌式：多个语句可以写在同一个script标签中
    alert("这是内嵌式JS");
    console.log("控制台打印日志");
</script>

优点：

代码和 HTML 在同一个文件中，方便调试；

无需额外引入文件，加载速度快；

可以写多行复杂代码，比行内式更易维护。

1.2.3 外部式：写在单独的.js 文件中

外部式是将 JS 代码写在单独的.js文件中，通过**<script>标签的src属性引入到 HTML 中，适用于代码量较大的项目开发** ，是企业开发的标准形式。

步骤 1 ：创建hello.js文件，写入 JS 代码

javascript 复制代码

// hello.js 外部JS文件
alert("这是外部式JS");
console.log("外部文件的日志");

步骤 2 ：在 HTML 中通过src属性引入

html 复制代码

<!-- 引入外部JS文件，src属性指定文件路径 -->
<script src="hello.js"></script>

核心注意事项：

（1）引入外部 JS 文件的**<script>标签中间不能写任何代码**，即使写了也不会执行；

html 复制代码

<!-- 错误写法：中间的代码不会执行 -->
<script src="hello.js">
    alert("这段代码无效");
</script>
<!-- 正确写法：分开写两个script标签 -->
<script src="hello.js"></script>
<script>
    alert("这段代码有效");
</script>

（2）src属性可以写相对路径（如./js/hello.js）或绝对路径（如https://xxx.com/hello.js）；

（3）一个 HTML 文件可以引入多个外部 JS 文件，按引入顺序依次执行。

优点：

代码分离：HTML 负责结构，JS 负责行为，代码结构清晰，便于维护；

代码复用：同一个.js 文件可以被多个 HTML 文件引入，避免重复代码；

便于调试：单独的 JS 文件在浏览器开发者工具中更易断点调试。

三种书写形式对比：

书写形式	适用场景	优点	缺点
行内式	简单的单个交互（如按钮点击）	书写简单，快速实现	代码杂乱，不易维护，耦合度高
内嵌式	入门学习、中等复杂度的单页面代码	无需额外文件，调试方便	代码和 HTML 混写，不利于大型项目维护
外部式	企业开发、多页面项目、代码量较大	代码分离，便于维护和复用	需要额外引入文件，略增开发步骤

1.3 注释：程序员的 "笔记"，代码的 "说明书"

注释是在代码中添加的说明性文字 ，浏览器的 JS 引擎会忽略所有注释 ，不会执行。注释的核心作用是解释代码的含义，方便自己和其他开发者阅读、理解代码，是团队开发中必不可少的规范。

JavaScript 支持单行注释 和多行注释两种形式，其中单行注释是开发中最常用的。

1.3.1 单行注释：// 注释内容

单行注释以**//开头，后面跟注释内容，适用于单行的说明文字**，可以放在代码的上方或右侧。

javascript 复制代码

// 弹出提示框（行上注释）
alert("单行注释演示"); 
console.log("这是日志"); // 向控制台打印日志（行尾注释）

快捷操作 ：在 VSCode 中，选中代码后按**ctrl + /**（Mac 是cmd + /），可以快速为代码添加 / 取消单行注释，这是开发中最常用的快捷键，一定要记住！

1.3.2 多行注释：/* 注释内容 */

多行注释以**/开头，/结尾，中间可以写多行注释内容，适用于对代码块的整体说明**（如函数、类的功能说明）。

javascript 复制代码

/*
 * 这是多行注释
 * 功能：实现用户信息的输入和输出
 * 开发者：xxx
 * 开发时间：2026-02
 */
var name = prompt("请输入姓名：");
alert("你的姓名是：" + name);

重要注意点 ：多行注释不能嵌套，否则会出现语法错误，这是新手最容易踩的坑！

javascript 复制代码

// 错误写法：多行注释嵌套，会报错
/*
  外层注释
  /* 内层注释 */
  继续外层注释
*/
// 正确写法：用单行注释嵌套在多行注释中
/*
  外层注释
  // 内层注释
  继续外层注释
*/

注释的编写规范：

注释要简洁明了 ，不要写废话，如var a = 10; // 定义变量a并赋值为10这种无意义的注释可以省略；

复杂逻辑、核心算法必须加注释，说明代码的设计思路；

代码修改后，要及时更新注释，避免注释和代码不一致；

不要注释掉无用的代码，直接删除（无用代码可以通过 Git 版本控制找回）。

1.4 输入输出：和计算机的 "对话方式"

编程的本质是数据的处理 ，而数据的处理离不开输入和输出------ 输入是从用户 / 外部获取数据，输出是将处理后的结果展示给用户 / 外部。

JavaScript 为浏览器环境提供了简单的输入输出方式，其中输出有三种常用形式，输入主要用弹窗输入框，接下来逐一讲解。

1.4.1 输入：prompt () 弹出输入框

prompt()方法会弹出一个包含输入框、确定按钮、取消按钮 的弹窗，让用户输入内容，点击确定后返回用户输入的字符串 ，点击取消则返回null。

javascript 复制代码

// 基本用法：prompt(提示文字)
var name = prompt("请输入你的姓名：");
var age = prompt("请输入你的年龄：");
// 打印用户输入的内容
console.log("姓名：", name);
console.log("年龄：", age);

注意：prompt()返回的内容永远是字符串类型，即使用户输入的是数字，后续需要做数值计算时要进行类型转换（后续会讲解）。

1.4.2 输出 1：alert () 弹出警示框

alert()方法会弹出一个包含提示文字和确定按钮 的警示框，是最基础的输出方式，适用于简单的结果展示，用户必须点击确定才能继续操作。

javascript 复制代码

var score = 90;
alert("你的考试分数是：" + score); // 弹出框显示：你的考试分数是：90

特点：alert () 会阻塞代码执行，在用户点击确定前，后续的 JS 代码都不会执行。

1.4.3 输出 2：console.log () 控制台打印日志

console.log()方法会将内容打印到浏览器的开发者工具控制台 ，是开发中最常用的输出方式，也是程序员调试代码的核心手段。

使用步骤：

写好**console.log()**代码，运行 HTML 文件；

打开浏览器开发者工具（快捷键 F12 或 Ctrl+Shift+I）；

切换到Console标签页，就能看到打印的内容。

javascript 复制代码

var num1 = 10;
var num2 = 20;
console.log(num1 + num2); // 控制台打印30
console.log("num1和num2的和是：", num1 + num2); // 控制台打印：num1和num2的和是：30

快捷操作 ：在 VSCode 中，输入log后按Tab 键 ，可以快速生成**console.log()**代码，大幅提升开发效率！

核心作用 ：console.log()的输出内容只有程序员能看到 ，普通用户无法查看，因此适合用于代码调试------ 通过打印变量、中间结果，检查代码的执行逻辑是否正确。

我们可以用一个生活化的类比理解日志的作用：医生给病人看病时，会让病人做血常规、B 超等检查，这些检查结果普通人看不懂，但医生能通过结果诊断病情；而**console.log()**的日志就是程序员的 "检查结果"，通过日志能快速定位代码中的问题。

1.4.4 输入输出综合案例：获取用户信息并展示

结合**prompt()输入和alert()、console.log()**输出，实现一个完整的交互案例：获取用户的姓名、年龄、分数，在弹窗中展示，同时在控制台打印日志。

javascript 复制代码

<script>
    // 1. 获取用户输入
    var name = prompt("请输入你的姓名：");
    var age = prompt("请输入你的年龄：");
    var score = prompt("请输入你的考试分数：");

    // 2. 控制台打印日志（调试用）
    console.log("用户姓名：", name);
    console.log("用户年龄：", age);
    console.log("用户分数：", score);

    // 3. 弹窗展示结果，\n表示换行
    var result = "你的个人信息：\n姓名：" + name + "\n年龄：" + age + "\n分数：" + score;
    alert(result);
</script>

运行代码后，依次输入姓名、年龄、分数，就能看到弹窗展示的格式化信息，同时控制台会打印对应的用户数据，这就是一个简单的 "输入 - 处理 - 输出" 完整流程。

二、变量的使用：JS 中的 "数据容器"

在编程中，变量是用来存储数据的容器，可以把它理解成一个 "盒子"------ 我们把数据放进盒子里，给盒子起一个名字，后续通过盒子的名字就能取出里面的数据，也可以随时修改盒子里的内容。

JavaScript 的变量使用非常灵活，和 Java、C 等静态语言有很大区别，核心要掌握变量的定义、赋值、使用 和动态类型特性。

2.1 变量的基本用法：定义、赋值、使用

JavaScript 中定义变量的关键字主要有var （ES5 标准）、let 和const （ES6 标准），入门阶段我们先掌握var的使用，后续会讲解三者的区别。

2.1.1 变量的定义和初始化

定义变量 ：使用var关键字 + 变量名，如var name;；变量初始化 ：定义变量的同时给变量赋值，如var name = "张三";（推荐方式）。

javascript 复制代码

// 方式1：先定义，后赋值
var age; // 定义变量age
age = 20; // 给变量age赋值为20

// 方式2：定义的同时赋值（初始化，推荐）
var name = "张三"; 
var score = 95;

// 方式3：一次定义多个变量，用逗号分隔
var a = 10, b = 20, c = "hello";

核心语法规则：

变量名可以由 字母、数字、下划线_、美元符 $ 组成，不能以数字开头；

变量名区分大小写 ，如name和Name是两个不同的变量；

变量名不能使用 JavaScript 的关键字和保留字（如 var、if、for、function 等）；

变量名要见名知意 ，用英文单词表示，不要用拼音或数字（如userName比mingzi、a1更好）；

多个单词组成的变量名，使用驼峰命名法 ：第一个单词小写，后续单词首字母大写（如userAge、studentScore）。

2.1.2 变量的使用：读取和修改

定义并赋值变量后，就可以通过变量名读取变量的内容，也可以通过 ** 赋值符号 =** 修改变量的内容。

javascript 复制代码

// 定义并初始化变量
var num = 10;
// 读取变量内容：打印到控制台
console.log(num); // 输出10

// 修改变量内容：重新赋值
num = 20;
console.log(num); // 输出20

// 变量可以参与运算
var num2 = 30;
var sum = num + num2;
console.log(sum); // 输出50

重要原则 ：变量必须先定义，后使用 ，如果使用未定义的变量，会报**ReferenceError**错误。

javascript 复制代码

// 错误写法：使用未定义的变量
console.log(x); // 报错：ReferenceError: x is not defined

// 正确写法：先定义，后使用
var x = 5;
console.log(x); // 输出5

这就像动漫中的角色要先喊出技能名字才能释放技能一样，变量必须先声明（定义），才能被使用。

2.1.3 变量使用综合案例：计算两个数的和

实现一个案例：通过**prompt()获取用户输入的两个数字，计算它们的和，并用alert()**展示结果。

javascript 复制代码

<script>
    // 1. 获取用户输入的两个数（prompt返回字符串，需要用Number()转成数字）
    var num1 = Number(prompt("请输入第一个数字："));
    var num2 = Number(prompt("请输入第二个数字："));

    // 2. 计算和
    var sum = num1 + num2;

    // 3. 展示结果
    alert(num1 + " + " + num2 + " = " + sum);
</script>

注意：因为**prompt()返回的是字符串，直接相加会进行字符串拼接（如 "10"+"20"="1020"），所以需要用Number()**将字符串转成数字后再计算。

2.2 理解动态类型：JS 变量的 "百变特性"

JavaScript 是动态类型语言，这是它和 Java、C 等静态类型语言最核心的区别之一，也是新手需要重点理解的概念。

所谓动态类型 ，就是变量的类型不需要提前声明 ，并且在程序运行过程中，变量的类型可以随时改变------ 同一个变量，既可以存储数字，也可以存储字符串、布尔值等。

而 Java、C 等静态类型语言，变量在定义时必须指定类型，且类型一旦确定，就不能改变（如int a = 10;，a 只能是 int 类型，不能赋值为字符串）。

2.2.1 动态类型的两个核心特性

javascript 复制代码

// 特性1：变量类型在运行时确定（赋值时才确定）
var a = 10; // 赋值数字，a是数字类型
console.log(typeof a); // 输出number（typeof可以检测变量类型）

a = "hello"; // 重新赋值字符串，a变成字符串类型
console.log(typeof a); // 输出string

a = true; // 重新赋值布尔值，a变成布尔类型
console.log(typeof a); // 输出boolean

// 特性2：同一个变量可以存储不同类型的数据
var b;
b = 200; // 数字
b = [1,2,3]; // 数组
b = function() { // 函数
    console.log("我是函数");
};

typeof 运算符：用于检测变量的类型，返回一个字符串，表示变量的类型，是开发中调试类型的常用工具。

2.2.2 动态类型的优缺点

优点：使用灵活，无需提前声明类型，开发效率高，适合快速开发；

缺点：类型不固定，容易出现隐式类型转换的问题，如字符串和数字相加会进行拼接，而非计算，新手容易踩坑。

开发建议 ：虽然 JS 的变量类型灵活，但在实际开发中，尽量保证一个变量只存储一种类型的数据，避免随意修改变量类型，提升代码的可读性和可维护性。

三、JavaScript 的基本数据类型：编程的 "基础数据砖块"

JavaScript 提供了五种内置的基本数据类型，这些类型是构成所有 JS 数据的基础，就像盖房子的 "砖块"，所有复杂的数据结构（如数组、对象）都是由基本数据类型组成的。

五种基本数据类型分别是：

number：数字类型（整数、小数）

string：字符串类型

boolean：布尔类型（真、假）

undefined：未定义类型

null：空值类型

接下来我们逐一讲解每种数据类型的特性、使用方法和常见坑点。

3.1 number 数字类型：不区分整数和小数的数字容器

number 类型是 JavaScript 中的数字容器 ，不区分整数和浮点数（小数），所有数字都用 number 类型表示，这一点和 Java（int、float、double）不同，简化了数字的使用。

3.1.1 基本使用

javascript 复制代码

// 整数
var num1 = 10;
var num2 = -5;
// 小数
var num3 = 3.14;
var num4 = 0.5;
// 0和负数
var num5 = 0;
var num6 = -100.2;

console.log(typeof num1); // 输出number
console.log(typeof num3); // 输出number

3.1.2 数字的进制表示

在 JavaScript 中，数字可以用十进制、八进制、十六进制、二进制表示，日常开发中主要用十进制，其他进制多用于底层开发和进制转换。

javascript 复制代码

// 十进制：默认的表示方式
var dec = 100;
// 八进制：以0开头，数字范围0-7
var oct = 077; // 八进制的77，转十进制是63
// 十六进制：以0x开头，数字范围0-9，字母a-f（A-F）
var hex = 0xa; // 十六进制的a，转十进制是10
var hex2 = 0xFF; // 十六进制的FF，转十进制是255
// 二进制：以0b开头，数字范围0-1
var bin = 0b101; // 二进制的101，转十进制是5

console.log(oct); // 输出63
console.log(hex); // 输出10
console.log(bin); // 输出5

小知识：一个八进制数字对应三个二进制数字，一个十六进制数字对应四个二进制数字，两个十六进制数字就是一个字节（8 位）。

3.1.3 特殊的数字值

JavaScript 的 number类型有三个特殊的值，分别是**Infinity（无穷大）、-Infinity（负无穷大）和NaN**（非数字），这三个值是新手容易踩坑的点，必须重点掌握。

javascript 复制代码

// 1. Infinity：无穷大，超过JS能表示的最大数字
var maxNum = Number.MAX_VALUE; // JS能表示的最大数字
console.log(maxNum * 2); // 输出Infinity

// 2. -Infinity：负无穷大，小于JS能表示的最小数字
var minNum = Number.MIN_VALUE;
console.log(-minNum * 2); // 输出-Infinity

// 3. NaN：Not a Number，表示"不是一个数字"，通常是数字运算出错的结果
console.log('hello' - 10); // 输出NaN（字符串减数字，运算出错）
console.log(0 / 0); // 输出NaN（0除以0，无意义）

重要注意点：

负无穷大 ≠ 无穷小：无穷小指无限趋近于 0 的数（如 1/Infinity），而负无穷大是比所有数字都小的数；

字符串和数字的加法不是 NaN ：'hehe' + 10的结果是'hehe10'，JS 会将数字隐式转换为字符串，然后进行字符串拼接，而非数字运算；

isNaN () 函数：用于检测一个值是否是 NaN，返回布尔值，是判断非数字的标准方法。

javascript 复制代码

console.log(isNaN(10)); // 输出false（10是数字）
console.log(isNaN('hehe' - 10)); // 输出true（结果是NaN）
console.log(isNaN('10')); // 输出false（字符串10可以转成数字）
console.log(isNaN('hello')); // 输出true（字符串hello无法转成数字）

3.2 string 字符串类型：用引号包裹的文本内容

string 类型表示文本内容 ，所有用**单引号 ''或双引号 ""**包裹的内容都是字符串，单引号和双引号的作用完全一致，开发中可以任选一种，推荐使用单引号（避免和 HTML 的双引号冲突）。

3.2.1 基本使用

javascript 复制代码

// 双引号包裹
var str1 = "Hello JavaScript";
// 单引号包裹
var str2 = '前端开发';
// 空字符串
var str3 = "";
var str4 = '';
// 包含数字和符号的字符串
var str5 = '123456';
var str6 = '你好！我的分数是90';

console.log(typeof str1); // 输出string
console.log(typeof str5); // 输出string（即使是数字，用引号包裹也是字符串）

注意：字符串必须用引号包裹，没有引号的会被当作变量，若变量未定义则会报错。

javascript 复制代码

// 错误写法：未用引号包裹，当作变量处理，x未定义报错
var str = x; // ReferenceError: x is not defined
// 正确写法：用引号包裹
var str = 'x';

3.2.2 字符串的引号嵌套问题

如果字符串本身包含引号，需要注意引号嵌套的问题，不能用相同的引号嵌套，否则会出现语法错误，有两种解决方法：

方法 1：单引号和双引号互相嵌套（推荐）

javascript 复制代码

// 正确：双引号包裹的字符串内部用单引号
var str1 = "My name is '张三'";
// 正确：单引号包裹的字符串内部用双引号
var str2 = 'My name is "李四"';
// 错误：相同引号嵌套，语法错误
var str3 = "My name is "张三"";

方法 2 ：使用转义字符\转义引号转义字符\可以将特殊字符（如引号、换行）转义为普通字符，常用的转义字符还有**\n（换行）、\t（制表符）、\\（反斜杠）**。

javascript 复制代码

// 用\转义双引号
var str1 = "My name is \"张三\"";
// 用\转义单引号
var str2 = 'My name is \'李四\'';
// 换行符\n
var str3 = '第一行\n第二行\n第三行';
// 制表符\t
var str4 = '姓名：\t张三\n年龄：\t20';

console.log(str1); // 输出：My name is "张三"
console.log(str3); // 输出换行的三行文字
console.log(str4); // 输出带制表符的格式化文字

3.2.3 字符串的长度和拼接

获取长度 ：通过字符串的**length属性获取字符串的字符个数**，这是字符串最常用的属性。

javascript 复制代码

var str1 = 'hello';
var str2 = '前端开发学习';
var str3 = ''; // 空字符串

console.log(str1.length); // 输出5
console.log(str2.length); // 输出6
console.log(str3.length); // 输出0

字符串拼接 ：使用 + 运算符将多个字符串拼接成一个新的字符串，数字和字符串拼接时，数字会被隐式转换为字符串。

javascript 复制代码

// 字符串和字符串拼接
var str1 = 'Hello' + ' ' + 'JavaScript';
console.log(str1); // 输出Hello JavaScript

// 字符串和数字拼接
var name = '张三';
var age = 20;
var info = name + '今年' + age + '岁';
console.log(info); // 输出张三今年20岁

// 注意：数字和字符串拼接的顺序
console.log(100 + 100); // 输出200（数字相加）
console.log('100' + 100); // 输出100100（字符串拼接）
console.log(100 + 100 + '100'); // 输出200100（先数字相加，再拼接）
console.log('100' + 100 + 100); // 输出100100100（依次拼接）

拼接技巧 ：使用**\n换行符**可以拼接出格式化的多行字符串，适合在alert()和console.log()中展示。

3.3 boolean 布尔类型：只有真和假的逻辑判断

boolean 类型是逻辑判断类型 ，只有两个值：true（真）和false（假），主要用于条件判断 （if、for、while）和逻辑运算（与、或、非），是实现程序逻辑分支的核心。

3.3.1 基本使用

javascript 复制代码

var isOk = true;
var isFalse = false;
var isAdult = true; // 是否是成年人

console.log(typeof isOk); // 输出boolean

3.3.2 布尔类型的运算

布尔类型可以参与算术运算 ，此时true会被当作1 ，false会被当作0 ，但这种用法不推荐，实际开发中布尔类型只用于逻辑判断。

javascript 复制代码

console.log(true + 1); // 输出2（true=1）
console.log(false + 1); // 输出1（false=0）
console.log(true + false); // 输出1

3.3.3 常用场景：条件判断

javascript 复制代码

var score = 85;
// 判断分数是否及格，isPass是布尔值
var isPass = score >= 60;
console.log(isPass); // 输出true

// 结合if语句进行条件判断
if (isPass) {
    alert("考试及格！");
} else {
    alert("考试不及格！");
}

3.4 undefined 未定义类型：只有一个值的 "空容器"

undefined类型只有唯一的值 ：undefined，表示变量已经被定义，但没有被赋值，简单来说就是 "声明了变量，但盒子里什么都没装"。

3.4.1 触发场景

javascript 复制代码

// 场景1：变量声明未赋值
var a;
console.log(a); // 输出undefined
console.log(typeof a); // 输出undefined

// 场景2：函数没有返回值，默认返回undefined
function fn() {
    // 无return语句
}
console.log(fn()); // 输出undefined

// 场景3：访问对象不存在的属性
var obj = {name: "张三"};
console.log(obj.age); // 输出undefined

3.4.2 undefined 的运算特性

undefined和其他类型运算时，结果多为**NaN（数字运算）或字符串拼接**（字符串运算）。

javascript 复制代码

var a;
console.log(a + 10); // 输出NaN（undefined无法转成数字）
console.log(a + "10"); // 输出undefined10（字符串拼接）
console.log(a + true); // 输出NaN

3.5 null 空值类型：表示 "空对象" 的特殊值

null类型只有唯一的值 ：null，表示一个空的对象引用，简单来说就是 "变量的值是一个空对象"，或者说 "盒子里装的是一个空的对象盒子"。

3.5.1 基本使用

javascript 复制代码

var b = null;
console.log(b); // 输出null
// 注意：typeof检测null会返回object，这是JS的历史bug，不是语法错误
console.log(typeof b); // 输出object

3.5.2 null 的运算特性

null 和其他类型运算时，会被当作0 （数字运算）或字符串"null"（字符串运算）。

javascript 复制代码

var b = null;
console.log(b + 10); // 输出10（null被当作0）
console.log(b + "10"); // 输出null10（字符串拼接）
console.log(b + true); // 输出1（null=0，true=1）

3.6 undefined 和 null 的核心区别：空盒子 vs 空对象盒子

undefined 和 null 都表示 "空"，但两者的语义和使用场景完全不同，这是 JS 面试的高频考点，也是新手容易混淆的点，用一个简单的类比就能理解：

undefined ：声明了一个盒子，但盒子里什么都没装，是真正的 "空盒子"；

null ：声明了一个盒子，盒子里装了一个空的对象盒子，盒子本身不是空的，只是里面的内容是空对象。

核心使用场景：

undefined ：由 JS 引擎自动赋值 ，表示 "变量未赋值"，开发者不要手动给变量赋值为 undefined；

null ：由开发者手动赋值 ，表示 "变量的值是一个空对象"，常用于初始化对象变量（如var obj = null;），表示后续该变量会存储一个对象。

javascript 复制代码

// 不推荐：手动赋值undefined
var a = undefined;
// 推荐：手动赋值null，表示后续存储对象
var obj = null;
// 后续给obj赋值为对象
obj = {name: "张三", age: 20};

四、总结与常见坑点汇总

4.1 核心知识点总结

前置知识 ：JS 代码写在**<script>标签中，有行内、内嵌、外部三种书写形式；注释用//和/* */；输入用prompt()，输出用alert()和console.log()**；

变量：用var定义，是存储数据的容器，遵循驼峰命名法，必须先定义后使用；JS 是动态类型，变量类型可以随时改变；

基本数据类型：五种基本类型（number、string、boolean、undefined、null），各有特性和使用场景；

核心运算 ：字符串拼接用+，数字运算用算术运算符，布尔类型用于条件判断。

5.2 新手常见坑点汇总

引号冲突：行内式 JS 用单引号，HTML 属性用双引号，避免嵌套冲突；

外部 JS 标签的坑 ：引入外部 JS 的<script>标签中间不能写代码；

prompt 的返回类型 ：prompt()返回的永远是字符串，数值计算需要用Number()转换；

字符串和数字的拼接 ：+遇到字符串会进行拼接，而非数字运算；

多行注释不能嵌套：否则会出现语法错误；

undefined 和 null 的区别：undefined 是变量未赋值，null 是开发者手动赋值的空对象；

typeof 检测 null 的 bug ：typeof null返回object，而非null；

变量名的命名规则：不能以数字开头，不能使用关键字，见名知意。

总结

本篇我们吃透了 JavaScript 基础语法的上篇，接下来的下篇我们会学习流程控制 （if、switch、for、while）、数组和函数，这些知识是实现复杂逻辑的核心，学完后你能独立编写中等复杂度的 JS 代码，实现如 "九九乘法表"、"数组去重"、"简易计算器" 等案例。

编程的核心是多练，建议大家把本篇的所有代码都手动敲一遍，结合综合案例进行拓展（如修改成绩等级的划分标准、增加用户性别输入等），在练习中巩固知识点，避开坑点。

下一篇我们继续深入 JavaScript 基础语法，不见不散！

【前端开发之JavaScript】（二）JS基础语法上篇：吃透变量 / 类型 / 输入输出

目录

前言

一、前置核心知识：开启 JS 编程的第一步

1.1 第一个 JS 程序：从一句 "你好！" 开始

1.2 JavaScript 的三种书写形式：行内、内嵌、外部

1.2.1 行内式：直接嵌入 HTML 元素内部

1.2.2 内嵌式：写在 script 标签中

1.2.3 外部式：写在单独的.js 文件中

1.3 注释：程序员的 "笔记"，代码的 "说明书"

1.3.1 单行注释：// 注释内容

1.3.2 多行注释：/* 注释内容 */

1.4 输入输出：和计算机的 "对话方式"

1.4.1 输入：prompt () 弹出输入框

1.4.2 输出 1：alert () 弹出警示框

1.4.3 输出 2：console.log () 控制台打印日志

1.4.4 输入输出综合案例：获取用户信息并展示

二、变量的使用：JS 中的 "数据容器"

2.1 变量的基本用法：定义、赋值、使用

2.1.1 变量的定义和初始化

2.1.2 变量的使用：读取和修改

2.1.3 变量使用综合案例：计算两个数的和

2.2 理解动态类型：JS 变量的 "百变特性"

2.2.1 动态类型的两个核心特性

2.2.2 动态类型的优缺点

三、JavaScript 的基本数据类型：编程的 "基础数据砖块"

3.1 number 数字类型：不区分整数和小数的数字容器

3.1.1 基本使用

3.1.2 数字的进制表示

3.1.3 特殊的数字值

3.2 string 字符串类型：用引号包裹的文本内容

3.2.1 基本使用

3.2.2 字符串的引号嵌套问题

3.2.3 字符串的长度和拼接

3.3 boolean 布尔类型：只有真和假的逻辑判断

3.3.1 基本使用

3.3.2 布尔类型的运算

3.3.3 常用场景：条件判断

3.4 undefined 未定义类型：只有一个值的 "空容器"

3.4.1 触发场景

3.4.2 undefined 的运算特性

3.5 null 空值类型：表示 "空对象" 的特殊值

3.5.1 基本使用

3.5.2 null 的运算特性

3.6 undefined 和 null 的核心区别：空盒子 vs 空对象盒子

四、总结与常见坑点汇总

4.1 核心知识点总结

5.2 新手常见坑点汇总

总结