1.数据类型
1.1 数据类型
JavaScript数据类型整体分为两大类：
基本数据类型：
-
number 数字型
-
string 字符串型
-
boolean 布尔型
-
undefined 未定义型
-
null 空类型
引用数据类型：
-
object 对象
1.1.1 数字型（number）
即我们数学中学习到的数字，可以是整数、小数、正数、负数。
JavaScript中的正数、负数、小数等统一称为数字类型
注意事项：JavaScript是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认。
数字可以有很多操作，比如，乘法*、除法/、加法+、减法-等等，所以经常和算术运算符一起。
数学运算符也叫算术运算发，主要包括加、减、乘、除、取余（求模）。
-
+：求和
-
-：求差
-
*：求积
-
/：求商
-
%：取模（取余数）
-
开发中经常作为某个数字是否被整除
-
算术运算符优先级：先乘除取余，后加减，有小括号先算小括号里面的。
案例： 计算圆的面积
需求：对话框中输入圆的半径，算出圆的面积并显示到页面
分析：
面积的数学公式：
转换为JavaScript写法：变量*r*r
let r = +prompt('请输入半径')
let s = 3.14 * r * r
document.write(s)
1.1.2 字符串类型（string）
通过单引号（''）、双引号（""）或反引号（``）包裹的数据都叫字符串，单引号和双引号没有本质上的区别，推荐使用单引号。
let username = '小鸣' let gender = "男" let goods = `爱玛` let tel = '1223444545' let str = '' // 这种情况叫空字符串
注意事项:
-
无论单引号或者双引号必须成对使用
-
单引号/双引号可以互相嵌套，但是不可以自己嵌套自己
-
必要时可以使用转义符\，输出单引号或双引号。
字符串拼接：
场景：+运算符 可以实现字符串的拼接
口诀：数字相加，字符相连
document.write('我叫'+'小明') // 我叫小明
let username = 'Mary'
let gender = "女"
document.write(username + gender) // Mary女
模板字符串
使用场景：
拼接字符串和变量
在没有它之前，要拼接变量比较麻烦
document.write('大家好，我叫'+name+',今年'+age+'岁')
语法：
-
反引号（``）
-
在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
-
内容拼接变量时，用${}包住变量
document.write(`大家好，我叫${name},今年${age}岁`)
案例 页面输出用户信息案例
需求：页面弹出对话框，输入名字和年龄，页面显示：大家好，我叫xxx，今年xx岁了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let uname = prompt('请输入您的姓名')
let age = prompt('请输入您的年龄')
document.write(`大家好，我叫${uname},今年${age}岁了`)
</script>
</body>
</html>
1.1.3 布尔类型（boolean）
表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值true和false，表示肯定的数据用true（真），表示否定的数据用false（假）。
let isCool = true console.log(isCool)
1.1.4 未定义类型（undefined）
未定义是比较特殊的类型，只有一个值undefined。
什么情况出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少直接为某个变量赋值为undefined。
let age console.log(age)
工作中的使用场景：
我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这份数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来
1.1.5 空类型（null）
JavaScript中的null仅仅是一个代表“无”、“空”或“值未知”的特殊值
let obj = null console.log(obj) // null
null和undefined区别：
-
undefined表示没有赋值
-
null表示赋值了，但是内容为空
null开发中的使用场景：
官方解释：把null作为尚未创建的对象
将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
1.2 检测数据类型
1.2.1 控制台输出语句：
控制台语句经常用于测试结果来使用。
可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色。
1.2.2 通过typeof关键字检测数据类型
typeof运算符可以返回被检测的数据类型。它支持两种语法形式：
-
作为运算符：typeof x （常用写法）
-
函数形式：typeof(x)
换言之，有括号和没括号，得到的结果是一样的，所以我们直接使用运算符的写法
2.类型转换
2.1 为什么要类型转换
JavaScript是弱数据类型：JavaScript也不知变量到底属于那种数据类型，只有赋值了才清楚。
坑：使用表单、prompt获取过来的数据默认是字符串类型，此时就不能直接简单的进行加法运算。
console.log('10000'+'2000') // 输出结果100002000
此时需要转换变量的数据类型。
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。
2.2 隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则：
-
+号两边只要有一个是字符串，都会把另外一边转成字符串
-
除了+以外的算术运算符 比如- * / 等都会把数据转成数据类型
缺点：
-
转换类型不明确，靠经验才能总结
小技巧：
-
+号作为正号解析可以转换成数字型
-
任何数据和字符串相加结果都是字符串
2.3 显式转换
编写程序时过度依靠系统内部的隐式转换是不严谨的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。为了避免隐式转换带来的问题，通常根逻辑需要对数据进行显式转换。
概念：自己写代码告诉系统该转成什么类型
转换为数字型：
-
Number(数据)
-
转换成数字类型
-
如果字符串内容里面有非数字，转换失败时结果为NaN（Not a Number）即不是一个数字
-
NaN也是number类型的数据，代表非数字
-
-
parseInt(数据)
-
只保留整数
-
-
parseFloat(数据)
-
可以保留小数
-
转换为字符型
-
String(数据)
-
变量.toString()
练习 输入2个数，计算两者的和，打印到页面中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num1 = +prompt('请输入第一个数：')
let num2 = +prompt('请输入第二个数：')
let total = num1 + num2
document.write(`两个数相加的和是${total}`)
</script>
</body>
</html>
3.实战案例
用户订单信息案例
需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息
分析：
需要输入3个数据，所以需要3个变量来存储 price num address
需要计算总的价格total
页面打印成表格，里面填充数据即可
记得最好使用模板字符串
<!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;
}
table{
/* 合并相邻边框 */
border-collapse: collapse;
height: 80px;
margin: 0 auto;
text-align: center;
}
th{
padding: 5px 30px;
}
table,th,td{
border: 1px solid #000;
}
</style>
</head>
<body>
<h2>确认订单</h2>
<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>小米青春版PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
