变量
1.变量是什么?
1.一个容器，用来存放数据的
2.变量通过 let 来声明 通过 = 实现赋值
3.变量通过变量名来获得里面的数据
4.可以同时声明多个变量
2.变量的基本使用
1.声明变量
①要想使用变量，首先需要创建变量（专业说法： 声明变量）
②语法: (let) 变量名
③声明变量有两部分构成：声明关键字、变量名.
④所谓关键字是系统提供的专门用来声明（定义）变量的词语
⑤例:let age (age 即变量的名称，也叫标识符)
⑥let不允许多次声明一个变量。
2.变量赋值
①定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。
注意:是通过变量名来获得变量里面的数据.
②案例:
<!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>
</head>
<body>
<script>
/* 变量 我的名字 */
let username;/* 创建变量 */
username = '冯';/* 变量赋值 */
console.log(username);/* 变量的使用 */
/* 变量 我喜欢的类型 */
let type;/* 创建变量 */
type = '性感';/* 变量赋值 */
console.log(type);/* 变量的使用 */
/* 变量 我的体重*/
let weight;/* 创建变量 */
weight = '102'/* 变量赋值 */
console.log(weight);/* 变量的使用 */
/* 声明变量的同时 也赋值常用 */
let age = '19';
age = '20'; /* 变量更新 */
</script>
</body>
</html>
3.变量的交换案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>03-变量的交换.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
1 有两个变量 实现交换他们的值
num1 = 10 num2 = 20
经过程序的运作
num1 = 20 num2 = 10
*/
// // 1 声明两个变量
// let num1 = 10,
// num2 = 20;
// // 2 错误的演示
// num1 = num2; // num1 和 num2 = 20
// num2 = num1; // num2 = num1
// console.log(num1);
// console.log(num2);
// 1 要创建三个变量
let num1 = 101,
num2 = 202,
temp;
// 2 设置 空的变量 存放num1的值
temp = num1;
// 3 设置num1 等于 num2
num1 = num2;
// 4 设置num2 等于之前num1的值(temp)
num2 = temp;
console.log(num1);
console.log(num2);
// 5 小结
// 思路在于 要多创建一个变量 来存放临时的数据 即可
</script>
</body>
</html>
3.变量的本质
1.内存：计算机中存储数据的地方，相当于一个空间
2.变量：是程序在内存中申请的一块用来存放数据的小空间
3.如图所示:
4.变量命名规则与规范
1.规则
①必须遵守，不遵守报错
②规范：不遵守就是出错 “不合法”
③创建一个变量 名字就叫做 let 、var 、 if 、 for 。。。内置的关键字 都不能使用
例如:let for = 123;(错误的写法)
④.只能用下划线(_)、字母(abc)、数字(123)、($) 组成，且数字不能开头
⑤字母严格区分大小写，如 Age 和 age 是不同的变量
例如: let USER = '用户1';
let user = '用户2';
⑥建议:
由于初学还不太会创建变量和起那些名字;
多学习老师的命名即可;
多敲上课的代码的时候 命名规则 自然就熟悉了;
而且 命名有意义
let height = '100';
// 如果变量单词比较多
let userName = '姓名';
let userHeight = '100';
⑦如图所示:
2.规范
①起名要有意义
②遵守小驼峰命名法
③ 第一个单词首字母小写，后面每个单词首字母大写。
例： let shoppingSupermarketShop = '111';
let ShoppingSupermarketShop = '111';
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-变量的规则和规范.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<!--
规则
不遵守就是出错 “不合法”
-->
<script>
// 创建一个变量 名字就叫做 let 、var 、 if 、 for 。。。内置的关键字 都不能使用
// let for = 123;
// 符号也是ok
let _hello = '123'; // 下划线开头
let $hello = '123'; // $
let hello = '123'; // 字母开头
// let 123bac="123" // 不能以数字开头
// 区分大小写
let USER = '用户1'; // 大写 单独
let user = '用户2'; // 小写 单独
// 最后 初学者还不太会创建变量和起那些名字
// 多学习老师的命名即可
// 多敲上课的代码的时候 命名规则 自然就熟悉了
// 命名有意义
// let a,b,c,d; // 不推荐 ！！
let height = '100';
// 如果变量单词比较多
let userName = '姓名'; // 推荐的
let userHeight = '100'; // 推荐的
let shoppingSupermarketShop = '111'; // 小驼峰 首字母小写
let ShoppingSupermarketShop = '111'; // 大驼峰 首字母大写
</script>
</body>
</html>
5.变量基本类型
1.let 和 var 区别
let 为了解决 var 的一些问题
2.var
1.可以先使用 在声明 (不合理)
2.var 声明过的变量可以重复声明(不合理)
3.比如变量提升、全局变量、没有块级作用域等等
以后声明变量我们统一使用 let
6.数据类型
1.基本数据类型
①number 数字型
②string 字符串型
③boolean 布尔型
④undefined 未定义型
⑤null 空类型
2.引用数据类型
①object 对象
②function 函数
③array 数组
7.数字(number)
1.即我们数学中学习到的数字，可以是整数、小数、正数、负数。
2.JavaScript 中的正数、负数、小数等 统一称为 数字类型。
注意事项:
①JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
②Java是强数据类型 例如 int a = 3 必须是整数
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>05-基本数据类型.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 数字类型
// let height=100; // 数字类型 外边一定不能够加 ''
// let weight='100';// 是数字类型吗 不是数字类型！！
// let msg ='我不是字符串类型哦' ;// 它就是 字符串类型 不用管里面装什么内容 就看有没有单引号和双引号
// // let userName='张三"; 错误的 单双引号 配套出现！！
// let address='我家住在"珠江新城对面的桥洞里" '; // 外单内双 或者 外双内单
// //
// console.log(' 我家 住在 "桥底" ');
// 数字类型和字符串类型
// 以上这两种类型 使用 加号 + 功能不一样
// 数字类型使用 + 表示数字的相加
let money1 = 100;
let money2 = 200;
let sum = money1 + money2; // 300
// console.log(sum);
// 字符串类型 使用加号 表示两段文字的 拼接
let userName = '奥特曼';
let skill = '打怪兽';
let msg = userName + skill;
console.log(msg);
</script>
</body>
</html>
8.字符串(string)
1.通过单引号（''） 、双引号（""） 或反引号( ` ) 包裹的数据都叫字符串，单引号和双引号没有本质上的区别;
推荐使用单引号。
let userName = '小明'; 使用单引号
let gender = "男"; 使用双引号
let str = '123'; 字符串
let str1 = ''; 空字符串
2.注意：
1.无论单引号或是双引号必须成对使用
2.单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
3.必要时可以使用转义符 \，输出单引号或双引号
2.模板字符串
1. 作用 : 拼接字符串和变量
2. 符号 (`` ) 内容拼接变量时，用 ${} 包住变量
document.write(`大家好,我叫${name},今年${age}岁`)
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>06-字符串拼接.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 早些时候 写代码 都是这样来拼接的 看起来不太直观
let every = '大家好';
let age=100;
console.log('你好-' + every + '-世界美好');
console.log('你好' + '-' + every + '-' + '世界美好');
// 你好-大家好-世界美好
// 使用 反引号的方式来拼接 字符串 推荐！！
console.log(`你好-every-世界美好`);
// 模版字符串
console.log(`你好-${every}-世界美好${age}`);// 变量 在反引号中 只能使用 ${every} 固定用法
// 错误的演示
console.log('你好-${every}-世界美好${age}');
// 反引号和 ${} 两个是一对 要配套出现 。 .;..........
</script>
</body>
</html>
9.布尔类型（boolean)
1. true
表示肯定的数据 (真）
2. false
表示否定的数据（假）
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>08-布尔类型.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
boolean 布尔 只有两种值 真 true 假 false
*/
// 你吃饭了吗
let isEat = true;
// 你睡觉了没有
let isSleep = false;
// 有什么用 ？ 还没有学习到 条件语句 暂时 感觉不到它的作用
// 感受
// 如果你吃饭了， 我现在就去吃大餐
// 如果你还没有吃饭， 我现在就去吃沙县
</script>
</body>
</html>
10. 未定义类型（undefined)
1.未定义是比较特殊的类型，只有一个值 undefined
2.我们开发中经常声明一个变量，等待传送过来的数据。
如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否
有数据传递过来。
let age 声明了变量却没有赋值
document.trite(age) 输出 undefined
11.空类型(null)
1.null 表示 值为 空
null 和 undefined 区别：
1.undefined 表示没有赋值
2.null 表示赋值了，但是内容为空
null 开发中的使用场景:
官方解释：把 null 作为尚未创建的对象
大白话： 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>10-null.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
let age = null;
console.log(age);
// undefined 表示没有赋值
// 创建了一个变量 但是没有辅助 里面就是空
// 创建了一个房子 里面什么都没有
// null 表示辅助了 但是为空
// 创建了一个变量，但是赋值 这个值 本身就空
// 创建了一个房子，往里面放了一些空气（看不见，闻不着）
// 对于我们初学者来说，
// 只要发现 这个变量 是 undefined 或者 null => 变量 没有拿到合适的值即可
// undefined 就像是 肺癌
// null 就是 胃癌
// 都是不太好
</script>
</body>
</html>
12.检测类型( typeof)
- 通过 typeof 关键字检测数据类型
2.例:
let age = 18
let userName = '小明'
let flag = false
let buy
console.log(typeof age) //number
console.log(typeof userName) //string
console.log(typeof flag) //boolean
console.log(typeof buy) //undefind
13.类型转换
1.隐式转换
1.某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换
2.规则：
+号两边只要有一个是字符串，都会把另外一个转成字符串
除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
+号可以转换成Number
3.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>13-隐式转换.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// let num1 = 1;
// let num2 = '2';
// // console.log(num1+num2); // 3
// // 隐式转换
// // console.log(num1+num2); // 12// 答案
// let num3 = num2 - 0;
// console.log(typeof num3 ); // number
// console.log(typeof num3 ); // string
// 工作中 比较常用的隐式转换写法
let num2 = '2';
let num3 = num2 - 0; // num3 是一个数字类型
console.log(typeof num3);
// 最简洁的写法 //没有为什么 js内部就有这样的技巧 你知道会用即可
let num4 = +num2; // 也是可以的！
console.log(typeof num4);
</script>
</body>
</html>
2.显式转换
1.自己写代码告诉系统该转成什么类型
2.转成数字类型 (Number)
3.如果字符串内容里有非数字，转换失败结果为NaN（Not a Number); NaN也是number类型的数据，代表非数字
只保留整数 (parseInt)
保留小数(parseFloat)
4.转换为字符型(String)
变量.toString(进制)
5.案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>15-显示转换.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// 你把一个真正的 字符串 给我 转成数字，会失败！！
// let num1 = 'abbcc';
// // 显示转换 转成 数字类型
// let num2 = Number(num1);
// console.log( num2 ); // NaN num2 不是一个数字 类似 确实 number类型
// 对于 其他类型 转成数字
// 1 成功 数字本身
// 2 失败 NaN (not a number)
// let num1 = 'aaaa';
// let num2 = +num1;
// console.log(num2);// NaN
// let num1 = '9.9';
// 砍价 收个整数 9块 integer
// let num2 = parseInt(9.9); // 常用
// console.log(num2);
// let num2 = parseFloat(num1); // 少
/* let num2 = +num1; // 常用
console.log(num2);
console.log(Number(Number(Number(num1))))
*/
let num1 = 123;
// 把 num1 转换成 字符串
/* let str = 123 + '' 隐式转换 常用 */
// let str = String(num1); 显示转换 常用
// console.log(typeof str);
let str = num1.toString();/显示转换 常用* */
console.log(typeof str);
</script>
</body>
</html>
\
