[toc]
JS
变量
定义：储存数据的盒子
如：柜子
let num = "万少"
let 定义一个变量 ，后面接一个自变量名 用来存储数据 ， num为变量名存储 了数据 “万少”
给变量赋值
给let 自变量名 的盒子 存储数据 ，利用= ，右边的值赋值给 左边
如： let num = "万少好帅"
常用： let num = "跟随万少敲代码" ===> 定义一个变量 ，并给变量赋值
例题
变量的交换
把num的值与num1的值换行
let num = 1,num1 = 2,num2
num2 = num
num = num1
num1 = num2
数据类型
基本数据类型
数字类
符号：Number
数字类：没有用引号包裹，可以用来进行运算
数字类数据 ：用 typeof 变量 ===>输出 Number
如：
let num = 8 //不可用引号包裹
字符串
符号：string
特点：用双引号或者单引号包裹
如：
let str = "11111"
console.log(typeof str) //string
布尔型数据（boolean）
- false
- true
let num = false
console.log(typeof num) //Boolean
作用:可以在条件从句中起判断条件依据
undefined
属于一种特殊的基本数据类型
当定义一个变量，但并未给变量赋值时 打印输出控制台会输出undefined
let num
console.log(typeof num) //undefined
注意：从一个undefined中拿值 ，会报错
let num
console.log(num)
null
当定义一个变量，并赋值后，赋值的那个值为Null时 ，为Null
let obj ={}
let nullNumber = obj
console.log(' -----> ',typeof nullNumber ); //object
let number = null
console.log(' -----> ',typeof number );//object
引用类数据类型
- 数组
符号：Array []
特点 ：用[]包裹 里面可以放任意数据
let arr = [1,2,3]
let arr1 = []
console.log(typeof arr) //object
- object
符号:Object {}
特点：用{}包裹 里面可以放任意数据
let obj = {1,"万少"，false,null}
console.log(typeof obj) //object
undefined与null的区别
undefined 定义了一个变量，但并未赋值
null 定义了一个变量，也赋值了，但赋值为null
注意：两种都是不可取，一般表示结果不正常
判断数据类型
typeof
作用：对于一个变量不知道它是什么类型时，可以用typeof 变量 进行判断变量类型
let num = 1
console.log(typeof num) //number 数字类
let str = "123"
console.log(typeof str) //string 字符串
let booleanNumber = false
console.log(typeof booleanNumber) // boolean 布尔型
let number = null
console.log(typeof number) //null
let arr = []
console.log(typeof arr) // object 引用数据类型
数据类型的转换
数字类转字符串
隐式转换
- 当一个数字类型 加一个字符串时，会转换为字符串类型数据
let num = 1
console.log(typeof (num + "")) // string
- 运用：例题简易计算器
let num = +prompt("请输入数值1")，num2 = +prompt("请输入数值1")
console.log(num + num2)
显示转换
- String(变量)
let num = 1
console.log(typeof String(num)) //string
- 变量.toString()
let num8 = 2
console.log(typeof num8.toString()) //string
字符串型转数字类型
隐式转换
- 当变量使用加减乘除运算符号时 ，会转变为数字型数据 （其中运用+号时，数据中两边有一边是字符串，会转为字符串拼接）
let num = "123"
console.log(typeof (num - 1)) //number
拼接
- 用双引号,单引号包裹 中间用+ 会把数据拼接起来 (不建议使用)
- 用反引号拼接（推荐） ------又称：模板字符串 当有变量时，用**${变量}** 不容易错，方便使用 ，拼接标签里有换行时可以
注意：当用document.write解析标签时，又换行，不可用双（单）引号包裹，只能使用模板字符串（反引号）
let str = ` <div class="box">
<p><span>万少带领我们向前冲</span></p>
</div>`;
document.write(str); //有换行，使用模板字符串
模板字符串
定义：使用反引号，里面可以使用**${变量}**来拼接数据
let str = ` <div class="box">
<p><span>万少带领我们向前冲</span></p>
</div>`;
document.write(str); //有换行，使用模板字符串
订单付款案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
margin: 50px auto;
}
tr{
/* 细边框 */
border-collapse: collapse;
/* border: 1px solid #000; */
}
td{
/* border-collapse: collapse;11 */
border: 1px solid #000;
}
</style>
</head>
<body>
<!-- <table border="1">
<tr><th>11</th>
<th>22</th></tr>
<tr></tr>
</table> -->
<script>
let pp = "11.22a"
console.log('Number(pp) -----> ', Number(pp));
let price = +prompt("请输入单价"),num = +prompt("请输入数量"),all,adress = prompt("请输入地址")
all = price * num
document.write(`
<table style="border: 1px solid #000;">
<caption>订单付款确认页面</caption>
<tbody >
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr >
<td>小米手机青春PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${all}元</td>
<td>${adress}</td>
</tr>
</tbody>
</table>
`)
</script>
</body>
</html>
