1、变量
2、数据类型
3、数据类型转换
变量
1、概念:
计算机存储数据的“容器”(一个个的盒子)
2、基本使用:
①创建变量 ------> 变量赋值 -----> 使用变量
语法:声明单个变量、声明变量同时赋值、声明多个变量(用逗号 , 隔开)
<script>
// 我的姓名
let name;//声明变量
name = "leilei";//变量赋值
console.log(name);//使用变量
// 我的年龄
let age;
age = "18";
console.log(age);
// 我的体重
let weight;
weight = "99";
console.log(weight);
// 声明变量的同时 也赋值 常用!
let color = 'pink';
color = 'green'; // 变量更新
// 一次性声明多个变量 同时赋值
let username = 'leilei',
height1 = 200,
weight1 = 66;
</script>
②交换变量的值
需求:
有2个变量: num1 里面放的是 10, num2 里面放的是20
最后变为 num1 里面放的是 20 , num2 里面放的是 10
<script>
let num1 = 10,
num2 = 20,
temp;//临时变量,不赋值
// 变换之前的值
console.log(num1 , num2)
temp = num1;
num1 = num2;
num2 = temp;
// 变换之后的值
console.log(num1);
console.log(num2);
</script>
注意:不可直接使用两个变量交换,要多创建一个变量 来存放临时的数据
3、变量的本质
①内存:计算机中存储数据的地方,相当于一个空间
②变量:是程序在内存中申请的一块用来存放数据的小空间
4、规则和规范
①规则:
必须遵守,不遵守报错 “不合法”
Ⅰ、不能用关键字
Ⅱ、关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等
Ⅲ、只能用下划线、字母、数字、$组成,且数字不能开头
Ⅳ、字母严格区分大小写,如 Age 和 age 是不同的变量
②规范:
建议,不遵守不会报错,但不符合业内通识
Ⅰ、起名要有意义
Ⅱ、遵守小驼峰命名法
Ⅲ、第一个单词首字母小写,后面每个单词首字母大写。例:userName
③语法:(推荐与不推荐)
<script>
// 创建一个变量从名字就叫做 let、var、if、for...内置的该关键字都不能使用(错误示范)
// let for = 123;
// 以下符号正确示范
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>
数据类型
1、基本数据类型
① number 数字型
取值:整数、小数、正数、负数
// 数字类型
let height=100; // 数字类型 外边一定不能够加 ''
let width=200;
② string 字符串型
凡是单引号( '') 、双引号( "")或反引号( ` )包裹的数据都叫字符串,不管里面是什么内容
注意事项:
Ⅰ、无论单引号或是双引号必须成对使用
Ⅱ、单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)
Ⅲ、 必要时可以使用转义符 \,输出单引号或双引号
let weight='100';// 不是数字类型!!,是字符串类型
let msg ='我不是字符串类型哦' ;// 字符串类型 不用管里面装什么内容 就看有没有单引号和双引号
let userName='小明"; 错误的 单双引号 配套出现!!
let address='我叫"leilei" '; // 外单内双 或者 外双内单
let str=''; 空字符串
数字类型和字符串类型拼接
// 数字类型和字符串类型
// 以上这两种类型 使用 加号 + 功能不一样
// 数字类型使用 + 表示数字的相加
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);
字符串拼接
①作用
Ⅰ、拼接字符串和变量
Ⅱ、在没有它之前,要拼接变量比较麻烦
②符号
Ⅰ、反引号 ``
Ⅱ、在英文输入模式下按键盘的tab键上方那个键(1左边那个键)
Ⅲ、内容拼接变量时,用 ${} 包住变量
<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>
③ boolean 布尔型
Ⅰ、表示肯定或否定时在计算机中对应的是布尔类型数据。
Ⅱ、它有两个固定的值 true 和 false,表示肯定的数据用 true(真),表示否定的数据用 false(假)。
<script>
/*
boolean 布尔 只有两种值 真 true 假 false
*/
// 你吃饭了吗
let isEat = true;
// 你睡觉了没有
let isSleep = false;
// 有什么用 ? 还没有学习到 条件语句 暂时 感觉不到它的作用
// 感受
// 如果你吃饭了, 我现在就去吃大餐
// 如果你还没有吃饭, 我现在就去吃沙县
</script>
④ undefined 未定义型
工作中的使用场景:
当我们发现这个数据是 undefined 提醒我们是不是忘记给某个变量赋值 矫正我们写代码
只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。
| 情况 | 说明 | 结果 |
|---|---|---|
| let age ; console.log (age) | 只声明 不赋值 | undefined |
| console.log(age) | 不声明 不赋值 直接使用 | 报错 |
| age = 10; console.log (age) | 不声明 只赋值 | 10 (不提倡) |
⑤ null 空类型
null 和 undefined 区别:
Ⅰ、undefined 表示没有赋值
Ⅱ、null 表示赋值了,但是内容为空
<script>
let age = null;
console.log(age);
// undefined 表示没有赋值
// 创建了一个变量 但是没有赋值 里面就是空
// 创建了一个房子 里面什么都没有
// null 表示辅助了 但是为空
// 创建了一个变量,但是赋值 这个值 本身就空
// 创建了一个房子,往里面放了一些空气(看不见,闻不着)
// 对于我们初学者来说,
// 只要发现 这个变量 是 undefined 或者 null => 变量 没有拿到合适的值即可
// undefined 就像是 肺癌
// null 就是 胃癌
// 都是不太好
</script>
2、引用数据类型
① object 对象
② function 函数
③ array 数组
3、typeof 关键字检测数据类型
<script>
let num = 1;
let userName = '翠花';
let isRain = true;
let foods;
let money = null; // 后面继续讲解到 引用类型的时候去补充
// console.log("num是什么数据类型");// 能不能通过程序的方式 自动的输出当前变量的数据类型!!
// typeof
console.log(typeof num); // number 输出 num变量的类型
console.log(typeof userName); // string
console.log(typeof isRain); // boolean
console.log(typeof foods); // undefined
console.log(typeof money); // object 对象类型
</script>
数据类型转换
把一种数据类型的变量转换成我们需要的数据类型
1、隐式转换(简单、用的多)
规则:
- 号两边只要有一个是字符串,都会把另外一个转成字符串
- 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
缺点:
- 转换类型不明确,靠经验才能总结
小技巧:
- +号作为正号解析可以转换成Number
①转数字
<script>
// 工作中 比较常用的隐式转换写法
let num2 = '2';
let num3 = num2 - 0; // num3 是一个数字类型
console.log(typeof num3);
// 最简洁的写法 //没有为什么 js内部就有这样的技巧 你知道会用即可
let num4 = +num2; // 也是可以的!
console.log(typeof num4);
</script>
②转字符串
<script>
let num1 = 123;
let num2 = '2';
// 把 num1 转成 字符串
// let str = 123 + ''; // 隐式转换 常用
// 隐式转换 只要有一个是字符串,都会把另一个转为字符串
console.log(num1+num2); // 1232 答案
</script>
2、显示转换
- 自己写代码告诉系统该转成什么类型
①转换数字型
Number(数据)
-
转成数字类型
-
如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字
-
NaN也是number类型的数据,代表非数字
parseInt(数据)
- 只保留整数
parseFloat(数据)
- 可以保留小数
语法:
Ⅰ、对于 其他类型 转成数字
- 成功 数字本身(字符串里边是数字)
- 失败 NaN (not a number) (字符串里边不是数字)
// 你把一个真正的 字符串 给我 转成数字,会失败 显示 NaN!!
// let num1 = 'abbcc';
// 显示转换 转成 数字类型
// let num2 = Number(num1);
// console.log( num2 ); // NaN num2 不是一个数字 类似 确实 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 num1 = '9.9';
let num2 = parseFloat(num1); // 少
let num2 = +num1; // 常用
console.log(num2);
console.log(Number(Number(Number(num1))));
②转换字符型
自己写代码告诉系统该转成什么类型
Ⅰ、String(数据)
Ⅱ、变量.toString(进制)
let num1 = 123;
// 把 num1 转成 字符串
// let str = 123 + ''; // 隐式转换 常用
// let str = String(num1); // 显示转换 常用
// console.log(typeof str);
let str = num1.toString() ; // 显示转换 常用
console.log( typeof str );