第三课:变量与数据类型——让数据在内存里“安家落户”
大家好!上节课我们学会了在控制台里喊话(console.log)和弹窗吓人(alert),算是和JavaScript混了个脸熟。今天,我们要深入计算机的内存世界,看看数据是怎么存进去、取出来,以及JavaScript里到底有哪些“物种”的数据。
想象一下,你的电脑内存就像一栋巨大的公寓楼,里面有无数的房间(内存单元)。每个房间可以放一些数据,比如数字、文字。但问题来了:你怎么找到这些房间?总不能每次都用钥匙挨个开门找吧?这就需要给房间贴标签——这就是变量的作用。
1. 变量声明:let和const——给数据起个名字
在JavaScript里,要使用变量,得先“声明”一下,告诉系统我要用这个名字了。目前最推荐的方式是使用let和const。
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的保留字(如
if、for、function等)。 - 建议使用驼峰命名法:
myAge、userName、isStudent。
合法命名:name、age2、_private、$elem
非法命名:2age(数字开头)、my-name(短横线是减号)、class(保留字)
2. 关于var——一个老古董的彩蛋
你可能在一些旧教程或代码里看到过var,它是JavaScript早期声明变量的方式。现在有了let和const,我们基本不再使用var,因为它有一些奇怪的行为(比如变量提升、没有块级作用域),容易造成bug。
你只需要知道:现代JavaScript开发,一律用let和const。至于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(布尔值):要么真,要么假
布尔值只有两个true和false,用于逻辑判断。
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
有趣的是,null和undefined在相等性上:null == undefined是true(因为两者都表示“无”),但null === undefined是false(类型不同)。
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. 动手小练习:变量动物园
现在,让我们用刚学的知识做个有趣的练习。打开控制台,一步步操作:
- 用
const声明一个变量myName,赋值为你的名字。 - 用
let声明一个变量age,赋值为你的年龄。 - 用
let声明一个变量isStudent,赋值为true。 - 在控制台打印这三个变量。
- 尝试把
myName改为另一个名字,看看会发生什么(提示:会报错,因为const不能改)。 - 把
age改为你的虚岁,再打印出来。 - 用
typeof检查isStudent的类型。 - 声明一个变量
futureJob,但不赋值,打印它的值和类型。 - 把
futureJob赋值为null,再次打印值和类型。
做完这些,你应该对变量的声明和基本类型有了直观感受。
6. 小结与下集预告
今天咱们学到了:
- 用
let声明可变变量,用const声明不可变常量。 - 七种原始数据类型:
number、string、boolean、undefined、null、symbol、bigint。 - 动态类型和
typeof运算符。
下节课,我们将学习运算符——让数据“动起来”的工具,包括算术运算、比较、逻辑判断等。你将学会如何让JavaScript帮你做决策,写出真正有“智商”的程序。
记得完成作业,下节课见!
课后作业:
- 猜猜下面表达式的结果(然后在控制台验证):
'10' - 5'10' + 5true + true'6' * '3'
- 写一段代码,用
prompt获取用户输入的年龄,然后用console.log打印出“明年你就XX岁了”(其中XX是年龄加1)。注意prompt返回的是字符串,需要转换成数字(可以用Number()或parseInt())。
下节课再见!
评论