一、变量
1、声明变量
※变量的命名规范
1. 规则:
不能用关键字 关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等 只能用下划线、字母、数字、$组成,且数字不能开头 字母严格区分大小写,如 Age 和 age 是不同的变量
2. 规范:
起名要有意义 遵守小驼峰命名法 第一个单词首字母小写,后面每个单词首字母大写。例:userName
// 语法:
let 变量名
声明变量有两部分构成:声明关键字、变量名(标识)
let即关键字,关键字就是系统专门提供的专门用来声明(定义)变量的词语
举例:
let age;
// age 即变量的名称,也叫标识符
2、变量赋值
① 定义了一个变量后,能够初始化他(赋值)
let age;
// 赋值,将 18 这个数据存入 age 这个“容器”中
age = 18;
// 这样 age 的值就变成了 18
document.write(age);
注意:是通过变量名来获得变量里面的数据
② 可以声明变量的时候同时给变量初始化
// 声明一个age变量,同时里面存放了 18 这个数据
let age = 18;
③ 更新变量
变量赋值后,还可以通过给它一个不同的值来更新它
// 声明一个age变量,同时里面存放了 18 这个数据
let age = 18;
// let age = 19; let 不允许多次声明一个变量
// 变量里面的数据发生变化 更为19
age = 19;
document.write(age); // 输出为19
3、变量的本质
内存:计算机中存储数据的地方,相当于一个空间 变量:是程序在内存中申请的一块用来存放数据的小空间
二、数据类型
JS 是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认
基本数据类型
| 数据 | 类型 |
|---|---|
| number | 数字型 |
| string | 字符串型 |
| boolean | 布尔型 |
| undefined | 未定义型 |
| null | 空类型 |
1、数字类型(number)
let score = 100; // 正整数
let price = 12.345; // 小数
let temperature = -40; // 负数
JavaScript 中的正数、负数、小数等 统一称为 数字类型
2、字符串类型(string)
通过单引号( '') 、双引号( "")或反引号( ` )包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。
let user_name = '小明'; // 使用单引号
let gender = "男"; // 使用双引号
let str = '123'; //看上去是数字,但是用引号包裹了就变成字符串了
let str1 = ''; //这种情况叫空字符串
注意事项:
1. 无论单引号或是双引号必须成对使用 2. 单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双) 3. 必要时可以使用转义符 \,输出单引号或双引号
字符串拼接
// 早些时候 都是使用 + 号来拼接,不方便,不好用
let every = '我好';
console.log('你好'+ every + '很好');
// 现在使用 反引号 `` ,一目了然,使用方便
// 固定用法,中间的值需要使用 ${} 包起来 `${}`
console.log(`你好${every}很好`);
3、布尔类型(boolean)
表示肯定或否定时在计算机中对应的是布尔类型数据。 两个固定的值 true 和 false,表示肯定的数据用 true(真) ,表示否定的数据用 false(假)
let isCool = true;
isCool = false;
// 多在条件控制语句使用
4、未定义型(undefined)
未定义是比较特殊的类型,只有一个值 undefined。
只声明变量,不赋值的情况下,变量的默认值为 undefined,一般很少【直接】为某个变量赋值为 undefined。
let age; // 声明变量但未赋值
document.write(age); // 输出为 undefined
工作中的使用场景: 我们开发中经常声明一个变量,等待传送过来的数据。 如果我们不知道这个数据是否传递过来,此时我们可以通过检测这个变量是不是undefined,就判断用户是否有数据传递过来。
5、null(空类型)
null 表示 值为 空
let obj = null;
6、null 和 undefined区别
undefined 表示没有赋值 null 表示赋值了,但是内容为空
7、检测数据类型
通过 typeof 关键字检测数据类型
let num = 10;
let name = '张三';
let isRain = true;
let age;
let money = null;
console.log(typeof num); // number
console.log(typeof name); // string
console.log(typeof isRain); // boolean
console.log(typeof age); // undefined
console.log(typeof money); // object
8、数据类型转换
就是把一种数据类型的变量转换成我们需要的数据类型
一、隐式转换
某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。
规则:
+号两边只要有一个是字符串,都会把另外一个转成字符串 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
缺点:
转换类型不明确,靠经验才能总结
// 工作中 比较常用的隐式转换写法
let num2 = '2';
let num3 = num2 - 0; // num3 是一个数字类型
console.log(typeof num3); // number
// 最简洁的写法
let num4 = +num2; // 也是可以的
console.log(typeof num4); // number
二、显示转换
隐式转换规律并不清晰,大多是靠经验总结的规律
避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换。
1️⃣ 转换为数字型
Number(数据) 转成数字类型 如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字 NaN也是number类型的数据,代表非数字
// 显式转换 转换成数字类型
let num2 = Number(num1); // NaN[not a number] --->num2不是一个数字但是却是数字类型
parseInt(数据) 只保留整数
let num3 = parseInt('9.9'); // 常用,但是不会保留数字的完整性
console.log(num3); // 9
parseFloat(数据)
可以保留小数
let num4 = parseFloat('9.234'); // 不常用
console.log(num4); // 9.234
2️⃣ 转换为字符串型
String(数据)
let age1 = 18;
let age2 = String(age1);
console.log(typeof age2); // string
变量.toString(进制)
let age1 = 18;
let age3 = age1.toString();
console.log(typeof age3); // string
引用数据类型
| 数据 | 类型 |
|---|---|
| object | 对象 |
| function | 函数 |
| array | 数组 |
三、算术运算符
1、加减乘除 取余(求模)
let num1 = 10;
let num2 = 3;
// 加法
console.log(num1 + num2); // 13
// 减法
console.log(num1 - num2); // 7
// 乘法
console.log(num1 * num2); // 30
// 除法
console.log(num1 / num2); // 3
// 取余=求模
console.log(num1 % num2); // 1
// 如果一行内 出现了多个算术运算符
// 先乘除后加减 如果有括号 就先算括号
2、赋值运算符
// = += -= *= /= %=
let num1 = 10; // 把10赋值给num1
let num2 = 5;
num2 += 1; // num2 = num2 + 1
console.log(num2); // 6
let num3 = 4;
num3 -= 3; // num3 = num3 - 3
console.log(num3); // 1
let num4 = 6;
num4 *= 2; // num4 = num4 * 2
console.log(num4); // 12
let num5 = 4;
num5 %= 3; // num5 = num5 % 3
console.log(num5); // 1
3、自增自减
// ++num 先自增再使用
let num1 = 3;
num1 = ++num1; // 4
console.log(num1);
// num2++ 先使用,再自增
let num2 = 5;
num2 = num2++; // 5
console.log(num2);
4、比较运算符
比较后的结果 最后结果是boolean类型 true 和 false
console.log(3 > 10); //false
console.log(9 > 4); //true
console.log(3 <= 3); // true 满足一个条件即可
// 拿数字和字符串比较
console.log(3 == '3'); // true 两个 == 只会比较值,不会比较类型
console.log(4 === '4'); // false === 全等,同时比较值和类型
console.log(4 != 4); // false
console.log(4 != '4'); //false
console.log(4 !== '4'); // true
拓展
// 对于字符串做比较 更多是判断两者是否相等
console.log('A' === 'B'); // false
// 如果拿字符串作比较,判断的标准是
// ASCII码 先转成ASCII码,再比较
console.log('A' > 'B'); // 65 > 66 false
// NaN 作比较
console.log(NaN === NaN); // false 即使看起来一样,但是并不相等
// 小数作比较,有精度问题
console.log(0.4 + 0.2 === 0.6); // false
// 类型转换
console.log(4 > '3'); // true
// 会把字符串 '3' 转换成数字型 3
console.log(4 > Number('3'));
// 两个字符串数字相比较
console.log( '2' > '19'); // true
执行过程:先判断 '2' > '1',后面的不再进行判断,以第一次判断为准
5、逻辑运算符
&& || !
// 有个数据 大于5 而且 小于10
let num = 6;
console.log(num > 5 && num < 10); // true
console.log(num > 5 && num < 4); // false 一假则假
let money = 1;
// 一真则真
console.log(money === 1 || money === 0); // true 一真则真,两假为假
let gender = true; // true 为男
console.log(!gender); // false 取反
短路运算
两个短路运算 逻辑或 和 逻辑与
工作中的语法 逻辑与 来说 满足了 就去执行
工作中的语法 逻辑或 来说 不满足了 就去执行
// 一假则假 逻辑与 && 左边为false 右边就不再去执行
console.log(2 > 10 && 1 < 3 && 3 > 1 && 9 > 5 && 5 < 10 && 8 > 2); // flase
let rain = true;
rain && console.log('下雨 去吃海鲜'); //左边成立了 右边才会去执行
rain || console.log('下雨 去吃海鲜'); // 不执行,逻辑或 || 前面为真就不在执行后面的
补充
js在判断以下 表达式的时候 会自动先转成 布尔类型 再去判断 空字符串 NaN false undefined null 0 转布尔类型 都是false
最终获取结果的时候 不会转类型,会输出原本的值
let s = '' && 'hello' // 输出 ''