浏览器不支持(未启用)JavaScript,本页面的某些功能无法正常使用

第三课:变量与数据类型——让数据在内存里“安家落户”

大家好!上节课我们学会了在控制台里喊话(console.log)和弹窗吓人(alert),算是和JavaScript混了个脸熟。今天,我们要深入计算机的内存世界,看看数据是怎么存进去、取出来,以及JavaScript里到底有哪些“物种”的数据。

想象一下,你的电脑内存就像一栋巨大的公寓楼,里面有无数的房间(内存单元)。每个房间可以放一些数据,比如数字、文字。但问题来了:你怎么找到这些房间?总不能每次都用钥匙挨个开门找吧?这就需要给房间贴标签——这就是变量的作用。


1. 变量声明:let和const——给数据起个名字

在JavaScript里,要使用变量,得先“声明”一下,告诉系统我要用这个名字了。目前最推荐的方式是使用letconst

1.1 let——可以变的量

let用来声明一个可以改变的变量。就像你有一个存钱罐,今天放10块,明天可以换成20块。

let age = 18;       // 声明一个变量 age,并赋值为 18
console.log(age);   // 18
age = 20;           // 修改变量的值
console.log(age);   // 20

你可以把let想象成一个“可擦写的便签”——想贴什么就贴什么,想换就换。

1.2 const——不变的常量

const用来声明一个不可改变的常量。就像你的身份证号,一旦确定,就不能改。

const PI = 3.14;
console.log(PI);    // 3.14
PI = 3.14159;       // 报错!常量不能被重新赋值

注意:const声明时必须赋值,而且之后不能重新赋值。但如果const声明的是一个对象,对象内部的属性是可以修改的——这个等我们学到对象时再细说,现在你只要记住:简单类型的常量不能改

1.3 变量命名规则

  • 只能包含字母、数字、下划线_、美元符号$
  • 不能以数字开头。
  • 不能是JavaScript的保留字(如ifforfunction等)。
  • 建议使用驼峰命名法:myAgeuserNameisStudent

合法命名nameage2_private$elem
非法命名2age(数字开头)、my-name(短横线是减号)、class(保留字)


2. 关于var——一个老古董的彩蛋

你可能在一些旧教程或代码里看到过var,它是JavaScript早期声明变量的方式。现在有了letconst,我们基本不再使用var,因为它有一些奇怪的行为(比如变量提升、没有块级作用域),容易造成bug。

你只需要知道:现代JavaScript开发,一律用letconst。至于var到底哪里奇怪,我们会在后续课程《执行上下文与作用域链》中揭秘。现在,就当它是一个“历史遗留文物”,看看就好。


3. 数据类型:JavaScript里的“物种起源”

变量是用来存放数据的,那数据有哪些种类呢?JavaScript中有八种数据类型(七种原始类型+一种引用类型)。咱们先认识这七种“原始居民”(原始类型),引用类型(主要是对象)后面再细讲。

3.1 Number(数字):啥都能算,但偶尔抽风

Number类型包括整数、浮点数,以及一些特殊值:Infinity(无穷大)、-Infinity(负无穷)、NaN(Not a Number,不是数字)。

let intNum = 42;
let floatNum = 3.14;
let infinite = 1 / 0; // Infinity
let notNumber = 'abc' * 2; // NaN

注意:NaN很特别,它不等于任何值,包括它自己。判断是不是NaN要用isNaN()函数。

3.2 String(字符串):文本的容器

字符串是用单引号'、双引号"或反引号`括起来的文本。反引号是ES6的模板字符串,支持换行和变量插值(用${})。

let name = '张三';
let greeting = "你好,";
let template = `我的名字是${name},今年${18 + 2}岁。`; // 模板字符串

字符串可以相加(拼接),但要注意数字和字符串相加时的隐式转换(后面讲)。

3.3 Boolean(布尔值):要么真,要么假

布尔值只有两个truefalse,用于逻辑判断。

3.4 Undefined(未定义):声明了但没赋值

当一个变量被声明但没有赋值时,它的值就是undefined。也可以显式地把变量设为undefined,但一般不这么做。

let x;
console.log(x); // undefined

3.5 Null(空):表示“没有对象”

null是一个特殊值,表示“空”、“没有”。它是一个对象(历史遗留问题,typeof null返回"object"),但通常用来表示“此处不该有值”。

let y = null;
console.log(y); // null

有趣的是,nullundefined在相等性上:null == undefinedtrue(因为两者都表示“无”),但null === undefinedfalse(类型不同)。

3.6 Symbol(符号):独一无二的钥匙

ES6新增的Symbol,表示独一无二的值。通常用作对象属性的键,避免命名冲突。每次调用Symbol()都会生成一个全新的唯一值。

let s1 = Symbol();
let s2 = Symbol();
console.log(s1 === s2); // false

3.7 BigInt(大整数):数大无穷

ES2020引入的BigInt,用于表示大于2^53 - 1的整数。写法是在数字后面加n,或者调用BigInt()函数。

let bigNum = 9007199254740991n; // 最大安全整数是 2^53-1,这个更大
let another = BigInt('12345678901234567890');

4. 动态类型:今天你是字符串,明天就能变数字

JavaScript是动态类型语言,意思是变量的类型不是固定的,可以随时改变。这就像变色龙,根据环境变颜色。

let something = 'hello'; // 字符串
something = 42;          // 变成数字
something = true;        // 变成布尔值
something = { name: '对象' }; // 变成对象

这种灵活性有时很方便,但有时也会带来意想不到的bug。比如:

let result = '5' + 3; // 结果是 '53'(字符串拼接)
let result2 = '5' - 3; // 结果是 2(数字运算)

这是因为+运算符遇到字符串会优先进行拼接,而-运算符会尝试把字符串转成数字。这就是所谓的隐式类型转换,经常让新手一脸懵逼。

要查看一个变量的当前类型,可以用typeof运算符:

console.log(typeof 42);        // "number"
console.log(typeof 'hello');   // "string"
console.log(typeof true);      // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null);      // "object" (历史遗留)
console.log(typeof Symbol());  // "symbol"
console.log(typeof 123n);      // "bigint"

5. 动手小练习:变量动物园

现在,让我们用刚学的知识做个有趣的练习。打开控制台,一步步操作:

  1. const声明一个变量myName,赋值为你的名字。
  2. let声明一个变量age,赋值为你的年龄。
  3. let声明一个变量isStudent,赋值为true
  4. 在控制台打印这三个变量。
  5. 尝试把myName改为另一个名字,看看会发生什么(提示:会报错,因为const不能改)。
  6. age改为你的虚岁,再打印出来。
  7. typeof检查isStudent的类型。
  8. 声明一个变量futureJob,但不赋值,打印它的值和类型。
  9. futureJob赋值为null,再次打印值和类型。

做完这些,你应该对变量的声明和基本类型有了直观感受。


6. 小结与下集预告

今天咱们学到了:

  • let声明可变变量,用const声明不可变常量。
  • 七种原始数据类型:numberstringbooleanundefinednullsymbolbigint
  • 动态类型和typeof运算符。

下节课,我们将学习运算符——让数据“动起来”的工具,包括算术运算、比较、逻辑判断等。你将学会如何让JavaScript帮你做决策,写出真正有“智商”的程序。

记得完成作业,下节课见!


课后作业

  1. 猜猜下面表达式的结果(然后在控制台验证):
    • '10' - 5
    • '10' + 5
    • true + true
    • '6' * '3'
  2. 写一段代码,用prompt获取用户输入的年龄,然后用console.log 打印出“明年你就XX岁了”(其中XX是年龄加1)。注意prompt返回的是字符串,需要转换成数字(可以用Number()parseInt())。

下节课再见!

标签: JavaScript
作者: 野码指月
日期:2026年03月18日

评论