JavaScript 基础
Document
运算符
深入数据和类型
函数进阶
原型、继承
类
浏览器存储
Web API
事件
错误处理
异步编程
网络请求
模块
练习
实例
工具与规范
软件架构模式
设计模式
数据类型
JavaScript 中的数据被区分成各种各样的类型,如此一来能对不同类型的数据进行不同的操作。
比如对于数字的数据,我们希望能对其进行加减乘除,因此有便有了数字类型。对于字符串的数据,我们希望能对其进行拼接,或查询是否包含某个字符的操作,因此便有了字符串类型。
$$tip
一个变量的类型由它所赋值的数据确定。
$$
$$edit$$
$$jsdemo$$
let n = 3 // n 是数字类型
alert(n + 2) // 加法运算
$$edit$$
$$jsdemo$$
let name = "三眼鸭" // name 是字符串类型
alert(name + "的编程教室") // 拼接字符串
动态类型
JavaScript 是一门动态类型(dynamically typed)的编程语言,这意味着变量的类型可以运行时被改变。与之相对的是静态类型的编程语言,即变量的类型是开始就定义好的,不能在运行时改变。
$$tip
常见的动态类型语言有:
- JavaScript
- Python
- PHP
常见的静态类型语言有:
- Java
- C#
- C++
- Golang
$$
$$edit$$
$$jsdemo$$
let x
x = 123 // x 此时是数字类型
// 提示:typeof 返回右操作数的类型
alert(typeof x) // number
x = "三眼鸭" // x 此时是字符串类型
alert(typeof x) // string
$$tip
typeof
运算符能返回右操作数的类型。
$$
常用类型
Number 类型
number 类型包括了整数与浮点数(小数)。
$$tip
在很多语言中会区分整数和浮点数,JavaScript 是为数不多将其归为一类的语言。
$$
对于数字类型可以进行很多数学上的操作,比如加减乘除等等。
$$edit$$
$$jsdemo$$
let x = 3
alert(x + 2) // 5
alert(x - 2) // 1
alert(x * 2) // 6
alert(x / 2) // 1.5
除了常规的数字, number 类型还包括了关键字定义的特殊数值,比如:
- Infinity:正无穷大
- -Infinity:负无穷大
- NaN:无效数。
$$edit$$
$$jsdemo$$
alert(1 / 0) // Infinity
alert(1 / Infinity) // 0
alert(-1 / 0) // -Infinity
alert("三眼鸭" / 4) // NaN
BigInt 类型
JavaScript 无法表达或有效运算大于 (2<sup>53</sup>-1)( 9007199254740991),或小于 -(2<sup>53</sup>-1) 的整数。
当涉及到大整数的运算时就会有些力不从心,比如加密货币相关。因此便有了 BigInt 类型,在整数后面加一个 n
表示这是一个 BigInt 类型。
$$edit$$
$$jsdemo$$
let n = 9999999999999999999999n // 尾数加 n 表示是 BigInt 类型
alert(typeof n)
大整数的运算。
$$jsdemo$$
$$edit$$
// 数字类型无法有效处理大整数的运算
alert(9999999999999999999999 + 2) // 1e+22
// 大整数类型,能正确运算
alert(9999999999999999999999n + 2n) // 10000000000000000000001
大整数只能与大整数进行运算,否则会出错。
$$jsdemo$$
$$edit$$
9999999999999999999999n + 2 // Cannot mix BigInt and other types, use explicit conversions
String 类型
当存在单引号、双引号或反引号内的数据则被当作字符串类型。
$$edit$$
$$jsdemo$$
let str = '三眼鸭'
let str2 = "三眼鸭"
let str3 = `三眼鸭`
let str4 = '' // 空字符串
let str5 = '123' // 内容虽然是数字,但在引号内仍是字符串类型
alert(typeof str4)
alert(typeof str5)
反引号可以搭配 ${ ... }
将变量或表达式嵌入字符串。
let name = "三眼鸭"
alert(`${name}的编程教室`)
alert(`1 + 2 = ${1 + 2}`)
当字符串内有双引号时,包括符号可以用单引号,反之亦然。
$$edit$$
$$jsdemo$$
let name = '"三眼鸭"的编程教室'
alert(name)
name = "'三眼鸭'的编程教室"
alert(name)
或者可以用转义字符处理。
转义字符
转义字符可以让我们在字符串中表示一些特殊字符,常用转义字符有以下:
代码 | 描述 |
---|---|
\' | 单引号 |
\" | 双引号 |
\\ | 反斜杠 |
\n | 换行 |
\r | 回车 |
\t | tab(制表符) |
\b | 退格符 |
\f | 换页符 |
Boolean 类型
boolean 类型仅有两个值:
- true:真
- false:假
boolean 类型常用来表示条件是真还是假,比较运算符返回的结果就是 boolean 类型。
$$edit$$
$$jsdemo$$
alert(4 > 2) // true
alert(10 < 2) // false
undefined
undefined
是一个值,也是一个类型,表示变量被声明未赋值。
以下情况会存在 undefined
:
- 声明变量未赋值
- 函数没设置返回值
- 引用未赋值的对象属性
- 使用未提供的函数参数
$$edit$$
$$jsdemo$$
let x
alert(x)
null
null
同样是一个值,也是一个类型,通常用来表示一个变量为空。
使用 null
的情况通常是主观上的,比如获取一个人的资料,当此人不存在时返回的结果应为 null
。
$$edit$$
$$jsdemo$$
let x = null
alert(x)
$$tip
很多人会纠结于 null
与 undefined
之间的区别,但这只是历史遗留的设计问题,不必过分在意,绝大多数语言只有一个类似 null
的表示空的值,唯独 JavaScript 存在两个。
提供参考:undefined 与 null的区别
$$
总结
JavaScript 中的类型分为原始类型与对象类型两大类。
原始类型:
- String:字符串类型,保存文本的字符序列,例如:
"三眼鸭的编程教室"
- Number:数字类型,整数或浮点数,例如:
42
或者3.14159
。 - BigInt:大整数类型。
- Boolean:布尔类型,只有两个值
true
和false
。 - undefined:未定义类型,变量未赋值时的值。
- null:空值类型,与
undefined
类似。 - Symbol:标识符类型,实例是唯一且不可更改的类型。
对象(引用)类型:
能存储多个值作为属性,包括并不限于 object
、 function
、 arrary
等等。
$$tip
本篇文章仅是概述了几个常用的类型与一些基本的操作,方便之后学习。有关数据类型的深入学习将会在后续的章节进行。
$$
练习
- 使用合适的变量命名与类型存储以下关于你的数据:
- 名字
- 身高
- 是否学生
- 宠物的名字
$$answer
<script>
let name = "鸣人"
let height = 1.8
let isStudent = false
let petName = "九尾"
</script>
$$
- 实现以下的
alert
显示效果,注:不需要实现按钮。 $$demo <button onclick="show()">显示学生名录</button> <script> function show() { alert("学生名录:\n1.鸣人\n2.佐助\n3.小樱") } </script> $$
$$answer
$$jsdemo$$
$$edit$$
<script>
alert("学生名录:\n1.鸣人\n2.佐助\n3.小樱")
</script>
$$