从零开始学前端 | 第十二章：变量、数据类型与运算

本章定位

上一章我们已经正式进入 JavaScript 学习阶段，解决了一个非常关键的基础问题：

1. JavaScript 是什么。
2. JavaScript 在前端里负责什么。
3. JavaScript 可以在哪里运行。
4. JavaScript 怎么进入网页。
5. 控制台和报错应该怎么看。

也就是说，你现在已经知道：

JavaScript 是一门会真正“执行逻辑”的语言。

那接下来的问题就变成了：

代码到底在处理什么？

答案就是：数据。

比如：

• 用户名是什么
• 年龄是多少
• 商品价格是多少
• 是否登录成功
• 当前总价是不是超过预算

这些都属于程序要处理的数据。

而从这一章开始，你会第一次正式接触：

• 怎么把数据存起来
• 数据分成哪些类型
• 数据之间怎么计算和比较

这也是为什么“变量、数据类型与运算”几乎是所有编程入门都会最先讲的一组基础内容。

本章学习目标

学完这一章后，你应该能做到：

1. 理解变量是什么，为什么程序需要变量。
2. 掌握let和const的基础用法与区别。
3. 理解变量名和值不是同一回事。
4. 认识 JavaScript 中最常见的数据类型：数字、字符串、布尔值、undefined、null。
5. 学会使用typeof观察一个值的大致类型。
6. 掌握算术运算、比较运算、逻辑运算的最基础用法。
7. 能写出一个简单的“购物金额计算器”小练习。

一、变量到底是什么

变量可以先用一句最容易理解的话来记：

变量就是给一个值起名字，方便后面继续使用。

例如：

constuserName="小白";

你现在可以先把它理解成：

• "小白"是一个值
• userName是这个值的名字

之后你在代码里就可以通过userName来使用这个值，而不用每次都重新写一遍"小白"。

二、为什么程序需要变量

如果没有变量，很多代码会变得非常难写，也很难维护。

比如你想表示：

• 一个商品价格
• 一个商品数量
• 一个总价

如果完全不用变量，你就只能把值硬写死在代码里。

例如：

console.log(99*3);

这当然能算出结果，但问题是：

• 99是什么？
• 3是什么？
• 后面如果数量改了怎么办？

如果换成变量：

constunitPrice=99;constquantity=3;console.log(unitPrice*quantity);

你一下子就更容易看懂了。

所以变量最大的价值之一是：

让代码更清楚，也让数据更容易重复使用。

1. 变量不是“高级写法”，而是最基础的组织方式

很多纯小白第一次看到变量，会把它想得很复杂。

其实你可以先把它理解成：

程序里的“带名字的小盒子”，里面装着某个值。

这个理解虽然不严格，但对入门特别有帮助。

2. 一个最直观的类比

假设你桌上有三个盒子：

• 一个盒子写着“姓名”
• 一个盒子写着“年龄”
• 一个盒子写着“城市”

盒子里分别装着：

• 小白
• 18
• 北京

那你以后要用这些信息时，就不用每次都重新找原始内容，而是直接看盒子名字。

这和变量的思路很像：

• 变量名像盒子上的标签
• 变量值像盒子里装的东西

三、如何声明变量：let和const

在现代 JavaScript 中，初学阶段你最需要掌握的是两个关键字：

• let
• const

它们都可以用来声明变量。

1.let：适合后面可能会变化的值

例如：

letscore=60;console.log(score);

这里我们声明了一个变量score，它当前的值是60。

如果后面这个值需要改变，你可以重新赋值：

letscore=60;score=80;console.log(score);

最后输出的是80。

你可以先把let理解成：

这个变量后面还可能会变。

1.let常见适用场景

例如：

• 数量可能变化
• 总价可能变化
• 当前页码可能变化
• 输入内容可能变化

如果一个值在程序执行过程中很可能被更新，通常就可以考虑用let。

2.const：适合后面不打算重新赋值的值

例如：

constsiteName="从零开始学前端";console.log(siteName);

这里的siteName用const声明，表示：

这个变量后面不打算再改成别的值。

如果你强行重新赋值，例如：

constsiteName="从零开始学前端";siteName="JavaScript 新站点";

浏览器就会报错。

1.const常见适用场景

例如：

• 网站名称
• 固定单价
• 默认配置值
• 不打算再改变的说明文本

2. 初学阶段可以先记一个很实用的判断法

你可以先这样用：

• 会变的值，用let
• 不打算变的值，用const

这是一个很适合新手的起步规则。

3. 什么时候用let，什么时候用const

这是初学者几乎一定会问的问题。

你可以先用一个很简单的思路来判断：

1. 如果这个值只是“存起来备用”，后面不重新赋值

优先考虑：

const

2. 如果这个值后面还会更新

优先考虑：

let

例如：

constunitPrice=99;letquantity=2;lettotalPrice=unitPrice*quantity;

这里：

• 单价通常不变，所以可以用const
• 数量可能调整，所以可以用let
• 总价也可能跟着变化，所以也可以用let

4. 初学阶段先别急着用var

你以后可能还会看到一种更老的写法：

varuserName="小白";

它确实存在，但对纯小白来说，当前阶段不建议优先学习它。

你现在先专注掌握：

• let
• const

就足够了。

后面如果有需要，再理解var的历史和区别会更合适。

四、变量名和值不是一回事

这是初学阶段特别容易混淆的一点。

例如：

constuserName="小白";

这里：

• userName是变量名
• "小白"是值

你可以把它理解成：

变量名是“代号”，值才是“真正装进去的内容”。

1. 为什么这个区别很重要

因为很多初学者一开始写代码时，会把：

• 变量名
• 字符串内容
• 页面上看到的文字

混在一起理解。

如果你能早点把这三件事分清楚，后面学变量、条件、函数时会轻松很多。

2. 一个直观例子

constcourseName="JavaScript 入门";console.log(courseName);

你在控制台里看到的可能是：

JavaScript 入门

但这不代表变量名就是“JavaScript 入门”。

变量名仍然是：

courseName

五、变量名应该怎么取

从这一章开始，变量命名习惯非常重要。

因为你后面写的不是一两行代码，而会越来越多。

变量名如果乱写，代码很快就会变得难懂。

1. 一个最重要的原则：变量名要表达含义

例如：

推荐：

constuserName="小白";constunitPrice=99;lettotalPrice=198;

不推荐：

consta="小白";constb=99;letc=198;

后者虽然浏览器也能执行，但对阅读代码的人几乎没有帮助。

1. 为什么变量名不能太随便

因为变量名本来就是帮你“看懂这段代码”的。

如果名字没有含义，变量的价值就会大打折扣。

2. 尽量贴近业务含义

例如你在写购物相关逻辑时，变量名可以是：

• productName
• unitPrice
• quantity
• totalPrice

如果你在写用户信息相关逻辑时，变量名可以是：

• userName
• userEmail
• cityName

这会比随便写成：

• data1
• item2
• value3

清楚得多。

六、数据类型是什么

现在我们开始进入第二个核心概念：数据类型。

你可以先这样理解：

数据类型，就是“这个值属于哪一类值”。

例如：

• 18是数字
• "小白"是字符串
• true是布尔值

为什么要区分类型？

因为不同类型的值，能做的事情不一样。

例如：

• 数字可以做加减乘除
• 字符串更适合拼接文本
• 布尔值通常用于表示真假

如果你不区分类型，后面很多运算结果就会让你觉得莫名其妙。

七、数字类型：number

在 JavaScript 中，数字类型通常叫number。

例如：

constage=18;constprice=99.5;

这些都属于数字。

1. 数字可以是整数，也可以是小数

例如：

constcount=3;constscore=95.5;

这两个都还是数字类型。

2. 数字最常见的用途

例如：

• 年龄
• 数量
• 价格
• 分数
• 长度

只要你后面要做计算，通常就会和数字打交道。

八、字符串类型：string

字符串通常就是“文本”。

例如：

constuserName="小白";constcityName="北京";constcourseName="前端入门";

这些值都属于字符串。

1. 字符串通常要放在引号里

例如：

constuserName="小白";constjobTitle='前端学习者';

双引号和单引号都可以，初学阶段只要保持一致就行。

2. 字符串最常见的用途

例如：

• 姓名
• 城市
• 页面标题
• 提示文案
• 按钮文字

简单说：

只要是文本信息，很多时候就是字符串。

九、布尔值：boolean

布尔值只有两个可能：

• true
• false

你可以先把它理解成：

“是 / 否”，“真 / 假”，“成立 / 不成立”

例如：

constisStudent=true;consthasCoupon=false;

1. 布尔值最常见的用途

例如：

• 是否登录
• 是否超过预算
• 是否填写完成
• 是否同意协议

它特别适合表示“状态”。

十、undefined：有变量，但还没有得到明确的值

这是一个初学者第一次看到时容易觉得抽象的概念。

你可以先这样理解：

undefined表示“现在还没有一个明确值”。

例如：

letuserEmail;console.log(userEmail);

这时输出通常是：

undefined

因为这个变量虽然声明了，但你还没有给它赋具体值。

1. 不用把undefined想得太神秘

你现在只要先记住：

变量存在，但当前没有明确内容时，经常会看到undefined。

十一、null：有意地表示“现在没有值”

null和undefined很容易被混淆。

你现在可以先做一个非常基础的区分：

• undefined：通常表示“还没有值”
• null：通常表示“我明确知道这里现在没有值”

例如：

constselectedCourse=null;

你可以先把它理解成：

这个值现在是空的，而且这是我明确写出来的。

初学阶段你不用特别深究它们的底层差异，只要先建立这个直观认识就很好。

十二、怎么观察一个值是什么类型：typeof

JavaScript 里有一个很常见的工具：

typeof

它可以帮助你大致查看一个值的类型。

例如：

console.log(typeof18);console.log(typeof"小白");console.log(typeoftrue);

你通常会看到：

number string boolean

1. 初学阶段怎么用typeof

你不用把它想得特别复杂。

现在它最主要的作用就是：

帮你观察一个值到底更接近哪一类数据。

2. 一个适合练习的小例子

constuserName="小白";constage=18;constisStudent=true;console.log(typeofuserName);console.log(typeofage);console.log(typeofisStudent);

这个练习很适合你用来建立“值和类型”的第一层直觉。

十三、什么是运算

现在我们开始进入第三个核心概念：运算。

你可以先把运算理解成：

对值做处理，让程序得出新的结果。

例如：

• 价格相加
• 数量相乘
• 比较两个值大小
• 判断一个条件是否成立

JavaScript 中，最基础的运算可以先分成三类：

• 算术运算
• 比较运算
• 逻辑运算

十四、算术运算：做加减乘除

这类最容易理解，因为和我们平时算数最接近。

1. 加、减、乘、除

例如：

constpriceA=100;constpriceB=50;console.log(priceA+priceB);// 加法console.log(priceA-priceB);// 减法console.log(priceA*priceB);// 乘法console.log(priceA/priceB);// 除法

1. 最常见的购物场景例子

constunitPrice=99;constquantity=3;consttotalPrice=unitPrice*quantity;console.log(totalPrice);

这里很容易看出：

• 单价是99
• 数量是3
• 总价是它们相乘的结果

2. 取余运算：%

%表示取余，也就是“除完之后剩多少”。

例如：

console.log(10%3);

结果是：

1

因为10除以3，商是3，余数是1。

1. 初学阶段为什么要知道取余

你现在不一定马上大量使用它，但它很常见。

例如：

• 判断奇偶数
• 某些循环规律判断

所以现在先认识它就很好。

十五、字符串拼接：把文本连起来

运算不只发生在数字上，字符串也有常见的处理方式。

例如：

constfirstName="前端";constlastName="学习者";console.log(firstName+lastName);

结果会是：

前端学习者

这就叫字符串拼接。

1. 字符串拼接的常见用途

例如：

• 组合提示文字
• 组合用户名展示
• 拼接输出结果

2. 初学者要特别注意的一点

加号+在数字里表示加法，在字符串里可能表示拼接。

这也是后面容易产生混淆的地方。

十六、模板字符串：更推荐的新手写法

在现代 JavaScript 中，拼接文字时更推荐一种更清晰的方式：模板字符串。

它使用的是反引号：

`

不是单引号，也不是双引号。

例如：

constuserName="小白";constcityName="北京";console.log(`你好，我是${userName}，我来自${cityName}`);

输出结果会是：

你好，我是小白，我来自北京

1. 为什么模板字符串对初学者很友好

因为它更接近我们平时写一句完整话的方式，不需要频繁地：

• 开字符串
• 关字符串
• 再加一个变量
• 再继续开字符串

相比之下，下面这种写法就更容易乱：

console.log("你好，我是"+userName+"，我来自"+cityName);

它当然也能用，但在内容一长时会不如模板字符串清楚。

十七、比较运算：判断两个值之间的关系

比较运算的结果通常是：

• true
• false

也就是说，它最终会得到一个布尔值。

1. 常见比较运算

例如：

console.log(10>5);console.log(10<5);console.log(10>=10);console.log(10<=8);

这些分别表示：

• 大于
• 小于
• 大于等于
• 小于等于

1. 用购物预算举例

consttotalPrice=297;constbudget=300;console.log(totalPrice>budget);

这表示：

总价是否超过预算

结果通常会是：

false

因为297没有超过300。

2. 相等比较：优先先用===和!==

初学阶段，你会看到多种“相等比较”写法。

为了减少混淆，你现在先优先掌握两种：

• ===
• !==

例如：

console.log(10===10);console.log(10!==5);

它们表示：

• 严格相等
• 严格不相等

1. 初学阶段为什么更推荐===

因为它更稳定，也更少让你掉进“看起来一样但其实不一样”的坑里。

所以你现在可以先形成一个很实用的习惯：

需要比较是否相等时，优先先用===。

2. 一个很重要的提醒：=不是比较

这点非常非常重要。

很多小白刚开始会混淆：

• =：赋值
• ===：比较是否相等

例如：

letscore=80;

这里的=不是“判断”，而是“把右边的值放进左边变量”。

十八、逻辑运算：把多个判断组合起来

逻辑运算通常用于：

• 同时满足多个条件
• 满足其中一个条件
• 对真假做反转

最常见的三个逻辑运算符是：

• &&
• ||
• !

1.&&：并且

你可以先把它理解成：

左边成立，并且右边也成立，整个结果才成立。

例如：

consthasAccount=true;consthasPassword=true;console.log(hasAccount&&hasPassword);

如果两边都为true，结果就是true。

2.||：或者

你可以先理解成：

左边和右边，只要有一个成立，结果就成立。

例如：

constisVipUser=false;consthasCoupon=true;console.log(isVipUser||hasCoupon);

结果会是：

true

因为虽然不是会员，但有优惠券。

3.!：取反

!可以先理解成：

把真假反过来。

例如：

constisFinished=false;console.log(!isFinished);

结果会是：

true

因为false被反转成了true。

十九、一个完整示例：购物金额计算器

这一节我们把前面学过的变量、数据类型和运算真正组合起来。

注意，这个版本我们先不引入条件判断if，因为那会在下一章系统学习。

这一章的重点，是让你先把：

• 存值
• 取值
• 计算
• 比较
• 输出

这几件事串起来。

1. 示例代码

constproductName="前端入门课程";constunitPrice=99;letquantity=3;constshippingFee=12;// 先计算商品总价constproductTotalPrice=unitPrice*quantity;// 再计算最终支付金额constfinalTotalPrice=productTotalPrice+shippingFee;// 用布尔值保存“是否超过预算”的判断结果，后面继续学条件判断时会更常用到这种写法constisOverBudget=finalTotalPrice>300;console.log(`商品名称：${productName}`);console.log(`商品单价：${unitPrice}元`);console.log(`购买数量：${quantity}`);console.log(`商品总价：${productTotalPrice}元`);console.log(`运费：${shippingFee}元`);console.log(`最终总价：${finalTotalPrice}元`);console.log(`是否超过 300 元预算：${isOverBudget}`);

这个例子里，你能看到很多本章核心点：

1. 字符串：productName
2. 数字：unitPrice、quantity、shippingFee
3. 布尔值：isOverBudget
4. 算术运算：乘法和加法
5. 比较运算：>
6. 模板字符串：`...${...}...`

二十、怎么逐步读懂这段代码

如果你第一次看到这一段，不要怕，可以按顺序一点点读。

1. 先看原始数据

例如：

• 商品名称是什么
• 单价是多少
• 数量是多少
• 运费是多少

2. 再看中间计算结果

例如：

• 商品总价是多少
• 最终总价是多少

3. 最后看判断结果

例如：

• 最终是否超过预算

你会发现：

程序并不是魔法，它只是把“已知值 → 中间计算 → 最终结果”一步步写清楚。

二十一、字符串和数字混用时要特别小心

这是初学者很常见的坑之一。

例如：

console.log("100"+20);

结果通常会是：

10020

而不是：

120

因为这里的"100"是字符串，不是数字。

1. 为什么这件事值得现在就提醒

因为你后面做表单、处理输入值时，经常会碰到“看起来像数字，实际上是字符串”的情况。

现在你先建立这个警觉就很好：

值长得像数字，不代表它一定就是数字类型。

二十二、初学者最容易踩的坑

1. 把变量名和值混为一谈

例如：

constuserName="小白";

变量名是userName，值是"小白"，这两件事一定要分清。

2.const声明后又想重新赋值

例如：

constcityName="北京";cityName="上海";

这会报错。

如果后面值可能变化，就应该考虑用let。

3. 变量名太随意

例如：

consta=99;constb=3;constc=a*b;

虽然能运行，但阅读体验非常差。

4. 把=和===混淆

再强调一次：

• =是赋值
• ===是比较

5. 看到结果不对，却不先看类型

例如字符串和数字混用时，最值得优先检查的一件事就是：

这个值到底是什么类型？

这时typeof就很有帮助。

二十三、本章实践练习

这一章非常适合通过小练习把“值、类型、运算”真正建立起直觉。

1. 练习 1：声明几个有意义的变量

请你自己声明下面几类变量：

• 一个姓名字符串
• 一个年龄数字
• 一个是否是学生的布尔值
• 一个当前城市字符串

例如：

constuserName="小白";constage=18;constisStudent=true;constcityName="北京";

然后用console.log打印它们。

2. 练习 2：观察不同值的类型

请尝试打印下面这些值的类型：

console.log(typeof18);console.log(typeof"18");console.log(typeoftrue);console.log(typeofundefined);console.log(typeofnull);

重点不是一开始背答案，而是开始建立“值长什么样”和“它属于什么类型”之间的联系。

3. 练习 3：练习字符串拼接和模板字符串

请完成下面两种写法：

constuserName="小白";constcityName="北京";console.log("你好，我是"+userName+"，我来自"+cityName);console.log(`你好，我是${userName}，我来自${cityName}`);

然后感受一下：

• 哪种写法更容易读
• 内容一长时哪种更不容易乱

4. 练习 4：编写一个购物金额计算器

请自己写一段代码，至少包含：

• 商品名
• 单价
• 数量
• 运费
• 商品总价
• 最终总价
• 是否超过预算

你可以参考下面的思路，但尽量自己重新写一遍：

constproductName="前端课程";constunitPrice=99;letquantity=2;constshippingFee=10;

这个练习非常适合帮助你把本章知识串起来。

二十四、学习重点提示

这一章最重要的，不是把所有术语硬背下来，而是把“值、变量、类型、运算”这四件事真正分清楚。

请重点记住：

1. 变量是给值起名字，方便后面继续使用。
2. let通常用于后面可能变化的值，const通常用于不打算重新赋值的值。
3. 变量名和值不是同一回事。
4. 常见数据类型包括：数字、字符串、布尔值、undefined、null。
5. 算术运算是算结果，比较运算是得出真假，逻辑运算是组合真假。
6. 变量名要有意义，尽量贴近业务含义。

如果你只记一句话，请记住：

JavaScript 代码本质上一直在处理“值”，而变量、类型和运算就是你组织这些值的第一套基础工具。

二十五、本章小结

这一章我们正式进入了 JavaScript 中最基础、也最核心的一层内容。

你已经学习了：

• 什么是变量
• let和const的区别
• 什么是数据类型
• 常见基础类型有哪些
• 什么是算术运算、比较运算和逻辑运算
• 如何通过一个购物金额计算器把这些概念串起来

这一步非常关键，因为后面你学习条件判断、循环、函数时，本质上都还在继续处理这些值。

如果变量、类型和运算这一步学扎实了，后面很多内容都会顺很多；如果这一步含糊，后面就会经常感觉“代码在动，但我不知道它在处理什么”。

二十六、课后思考题

请你思考下面几个问题：

1. 为什么程序需要变量，而不是把值全部硬写在代码里？
2. let和const的最直观区别，你现在会怎么解释？
3. 为什么说变量名和值不是一回事？
4. 为什么"100" + 20的结果和100 + 20不一样？
5. 为什么比较运算的结果通常是true或false？

建议你用自己的话把答案写下来。只要你能把这些问题说清楚，说明你已经开始真正建立 JavaScript 的数据思维了。

二十七、下一章预告

下一章我们会继续学习：

从零开始学前端 | 第十三章：条件判断与循环

到那时，你会开始让程序根据不同情况走不同路径，也会第一次写出“重复执行一段逻辑”的代码，这会让你的 JavaScript 开始真正像“程序”。