JavaScript的变量,数据类型,算术运算符等知识

215 阅读4分钟

一、变量

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、变量的本质

内存:计算机中存储数据的地方,相当于一个空间 变量:是程序在内存中申请的一块用来存放数据的小空间

image.png

二、数据类型

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)

表示肯定否定时在计算机中对应的是布尔类型数据。 两个固定的值 truefalse,表示肯定的数据用 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、逻辑运算符

&& || !

image.png

    // 有个数据  大于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  取反

短路运算

image.png

两个短路运算 逻辑或 和 逻辑与

工作中的语法 逻辑与 来说 满足了 就去执行

工作中的语法 逻辑或 来说 不满足了 就去执行

    // 一假则假  逻辑与 && 左边为false 右边就不再去执行
    console.log(2 > 10 && 1 < 3 && 3 > 1 && 9 > 5 && 5 < 10 && 8 > 2); // flaselet rain = true;
    rain && console.log('下雨 去吃海鲜'); //左边成立了 右边才会去执行
    rain || console.log('下雨 去吃海鲜'); // 不执行,逻辑或 ||  前面为真就不在执行后面的

补充

js在判断以下 表达式的时候 会自动先转成 布尔类型 再去判断 空字符串 NaN false undefined null 0 转布尔类型 都是false

最终获取结果的时候 不会转类型,会输出原本的值

let s = '' && 'hello' // 输出 ''

6、优先级

image.png