数据类型
计算机世界中的万事万物都是数据。
计算机程序可以处理大量的数据,为什么要给数据分类?
- 更加充分和高效的利用内存
- 也更加方便程序员的使用数据
基本数据类型
number 数字型
- JavaScript中正数、负数、小数等统一称为number
- JS是弱数据类型,变量到底属于哪种类型,只有赋值之后,才能确定
- Java是强数据类型,例如: int a = 3,必须是整数
- 可以进行+、-、*、/、%的运算
- *、/、%的优先级相同
NaN
代表一个计算错误。它是一个不正确的或者一个未定义的数字操作所得到的结果
console.log("good" - 2) //输出:NaN
NaN是粘性的。任何对NaN的操作都会返回NaN
console.log(NaN+2) // 输出:NaN
甚至两个NaN都不相等
console.log(NaN === NaN) // 输出:false
string 字符串型
通过单引号(")、双引号("")或反引号(`)包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。
string 字符串型
通过单引号(")、双引号("")或反引号(`)包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。
模板字符串
使用场景
- 拼接字符串和变量
- 在没有它之前,要拼接变量比较麻烦
语法
- ··(反引号)
- 内容拼接变量时,用${}包住变量
boolean 布尔型
只有两个值:true和false
undefined 未定义型
未定义是比较特殊的类型,只有一个值undefined。
什么情况出现未定义类型?
只声明变量,不赋值的情况下,变量的默认值为undefined,一般很少【直接】为某个变量赋值为undefined。
let num
console.log(num)
开发场景
我们开发中经常声明一个变量,等待传送过来的数据。
如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined,就判断用户是否有数据传递过来。
null 空类型
let obj = null
confirm.log(obj)
引用数字类型
object 对象
检测数据类型
通过typeof关键字检测数据类型
typeof运算符可以返回被检测的数据类型。它支持两种语法形式:
1.作为运算符: typeof x(常用的写法)
2.函数形式: typeof(x)
换言之,有括号和没有括号,得到的结果是一样的,所以我们直接使用运算符的写法。
let obj = null
console.log(typeof obj) // object
// 这是一个比较特殊的结果
类型转换
隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
- +号两边只要有一个是字符串,都会把另外一个转成字符串
- 除了+以外的算术运算符,比如–、*、/等都会把数据转成数字类型
缺点:
- 转换类型不明确,靠经验才能总结
小技巧:
- +号作为正号解析可以转换成数字型
- 任何数据和字符串相加结果都是字符串
console.log(2 + '2') // 22 string
console.log(2 - '2') // 0 number
console.log(+ '2') // 把字符串类型转化为了数字型
console.log(typeof + '2') // 类型为数字型
显示转换
- Number()
- 把对象的值转换为数字,如果无法转换为数字,那么Number()函数返回NaN
- parseInt()
- 分析一个字符串,并且返回一个整数
- parseFloat
- 分析一个字符串,并且返回一个浮点数
console.log(Number(str))
// 1 显示转化
// let age = Number(prompt('请输入你的年龄')) // 转化为数字型
// 2 隐式转换
let age = + prompt('请输入你的年龄')
console.log(typeof age)
console.log(parseInt('12ps')) // 只能取数字开头的字符串中的整数 12
console.log(parseInt('13.12ps')) // 只能取数字开头的字符串中的整数 13
console.log(parseInt('asd123dfa')) // 结果为NaN
//.................
console.log(parseFloat('12ps')) // 12
console.log(parseFloat('13.12ps')) // 13.12
console.log(parseFloat('asd123dfa')) // 结果为NaN
操作实例
let num1 = +prompt('请输入第一个数字:')
let num2 = +prompt('请输入第二个数字:')
alert(`两个数之和为:${num1 + num2}`)
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
text-align: center;
/*给字体为h2的设为中心对齐*/
}
table {
/*合并边框*/
border-collapse: collapse;
/* 设置每个表格的高度为80px */
height: 80px;
/* 设置表格中的数据都居中对齐 */
text-align: center;
/* 让块元素水平剧中 */
margin: 0 auto;
}
th {
/* 设置表头单元格的左右边宽距 */
padding: 5px 30px;
/* padding: 10px 5px 15px 20px;
上填充是 10px 右填充是 5px 下填充是 15px 左填充是 20px 顺时针的
padding: 10px 5px 15px;
上填充是 10px 右填充和左填充是 5px 下填充是 15px
padding: 10px 5px;
上填充和下填充是 10px 右填充和左填充是 5px
padding: 10px;
所有四个填充都是 10px */
}
table,
th,
td {
border: 1px solid #000
/*solid定义实现边框*/
}
</style>
</head>
<body>
<h2>订单付款确认</h2>
<!-- 下面这个表达式的快捷键为:table>tr>th*5 -->
<!--
tr table row 表示表格的一行
td table data 表示表格的数据单元格
th table header 表示表格的表头单元格
-->
<script>
// 1 用户输入
let price = +prompt('请输入商品价格:')
let num = +prompt('请输入商品数量:')
let address = prompt('请输入收货地址:')
// 2 计算总额
let total = price * num
// 3 页面打印
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>HUAWEI Mate 60 Pro</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>