JavaScript-4数据类型

1.基本数据类型

• Number 数值(基本数据类型)

在JavaScript中无论是整数还是小数都是属于数值类型的

• String 字符串(基本数据类型)

在JavaScript中无论是通过单引号还是通过双引号括起来的内容都是属于字符串类型的

• Boolean 布尔(基本数据类型)

在JavaScript中布尔类型比较特殊, 只有两个取值true/false

• Undefined 未定义(基本数据类型)

在JavaScript中未定义类型比较特殊, 只有一个取值undefined
let num;
 // 以下代码的含义是输出num变量中保存的数据
 // 由于没有给num这个变量进行初始化, 所以这个变量中保存的数据默认是undefined
console.log(num);

• Null 空值(基本数据类型)

• Object 对象(引用数据类型)

Object 对象类型

3. 在JavaScript中为了方便我们检测某一种数据是属于哪一种数据类型的, JavaScript提供了一个名称叫做typeof的操作符

typeof 需要检测的数据;
//利用typeof检测123这个常量是属于哪一种数据类型的, 并且将检测的结果保存到res这个变量中
let res = typeof 123;

2.转换为字符串类型

1. 将Number类型转换为字符串类型
2. 将Boolean类型转换为字符串类型
3. 将undefined类型转换为字符串类型
4. 将null类型转换为字符串类型

在JavaScript中如果想将以上的四种基本数据类型转换为字符串类型, 常用的方法有三种

• 对于Number类型和Boolean类型来说, 可以通过 变量名称.toString()的方式来转换

let value = 123;
console.log(value); // 在谷歌浏览器的控制台中如果是Number类型是蓝色的
// 以下代码的含义: 将value变量中存储的数据拷贝一份, 然后将拷贝的数据转换为字符串之后返回
let str = value.toString();
console.log(str); // 在谷歌浏览器的控制台中如果是String类型是灰色的

// 注意点: 不能使用常量直接调用toString方法, 因为常量是不能改变的
let str2 = 123.toString();//不能这么写

注意点:
1.变量名称.toString是对拷贝的数据进行转换, 所以不会影响到原有的数据
2.不能使用常量直接调用toString方法, 因为常量是不能改变的，不能123.toString();不能这么写

• 可以通过String(常量or变量);转换为字符串

let value = undefined;
//以下代码的含义: 根据传入的数据重新生成一个新的字符串
let str = String(value); //string类型的undefined
console.log(typeof str); //string类型

let value = null;
let str = String(value); //string类型的null   
console.log(typeof str); //string类型

注意点 1. String(常量or变量), 因为是根据传入的值重新生成一个新的值, 并不是修改原有的值
2.变量名称.toString()的方式前面不能是常量, 因为常量不能被改变

• 还可以通过 变量or常量 + "" / 变量or常量 + ''转换为字符串

let str = 123 + ''; // +''或者+""底层的本质其实就是调用String()函数
console.log(str);
console.log(typeof str); //String类型

+''或者+""底层的本质其实就是调用String()函数

3.转换为数值类型

1. 将String类型转换为数值类型

• 如果字符串中都是数值, 那么就正常转换
• 如果字符串是一个空串""/" ", 那么转换之后是0
• 如果字符串中不仅仅是数字, 那么转换之后是NaN

2. 将Boolean类型转换为数值类型

• true转换之后是1
• false转换之后是0

3. 将undefined类型转换为数值类型

• 转换之后是NaN

4. 将null类型转换为数值类型

• 转换之后是0

总结： 1.空字符串/false/null转换之后都是0
2.字符串中不仅仅是数字/undefined转换之后是NaN
3.其它的正常转换

在JavaScript中如果想将以上的四种基本数据类型转换为数值类型, 常用的方法有三种

• 通过Number(常量or变量);方式来转换

let str = "123";
console.log(typeof str);  //String
let num = Number(str);
console.log(typeof num);//Number

let num = Number("456");
console.log(typeof num);  //Number


let str = "12px";
let num = Number(str);
console.log(num);    //NaN
console.log(typeof num); //Number

//如果是布尔类型的true, 那么转换之后的结果是1
let flag = true;
let num = Number(flag);
console.log(num);  //1

//如果是布尔类型的false, 那么转换之后的结果是0
let flag = false;
let num = Number(flag);
console.log(num);  //0

let value = null;
let num = Number(value);
console.log(num);    //0  如果是空类型, 那么转换之后的结果是0
console.log(typeof num); //Number


let value = undefined;
let num = Number(value);
console.log(num);      //NaN    如果是未定义类型, 那么转换之后的结果是NaN
console.log(typeof num);  //Number

1.如果字符串中没有数据, 那么转换的结果是0
2.如果字符串中的数据不仅仅是数值, 那么转换的结果是NaN(NaN === Not a Number)
3.如果是布尔类型的true, 那么转换之后的结果是1
4.如果是布尔类型的false, 那么转换之后的结果是0
5.如果是空类型, 那么转换之后的结果是0
6.如果是未定义类型, 那么转换之后的结果是NaN

• 还可以通过数学运算中的+号和-号来转换

let str = "123";
let num = +str;
console.log(num);  //123
let num = -str;
console.log(num); // -123

let num = +"";
let num = +"    ";
console.log(num); // 0


let flag = true;
let num = +flag;
console.log(num);   //1
console.log(typeof num);  //Number


let value = null;
let num = +value;
console.log(num);              //0
console.log(typeof num);  //Number

let value = undefined;
let num = +value;
console.log(num);      //Nan
console.log(typeof num);   //Number


let str = "12px";
let num = +str;
console.log(num); // NaN
console.log(typeof num); //Number

总结 1.虽然通过+/-都可以将其它类型转换为数值类型, 但是-会改变数值的正负性
2.+/-底层本质上就是调用了Number函数

• 还可以通过parseInt(需要转换的字符串)/parseFloat(需要转换的字符串)

let str = "3.14px";
let num = parseInt(str);
console.log(num);      //3

let num = parseFloat(str);
console.log(num);      //3.14



let str = "a3.14px";
let num = parseFloat(str);
console.log(num);      //NaN    parseInt/parseFloat都会从左至右的提取数值, 一旦遇到非数值就会立即停止，停止的时候如何还没有提取到数值, 那么就返回NaN

let value = true;
let num = parseInt(value);
console.log(num);      //1    parseInt/parseFloat都会将传入的数据当做字符串来处理


let num = parseInt(“true”);
console.log(num);      //Nan   parseInt转的是字符串"true"

注意点：1.parseInt/parseFloat都会从左至右的提取数值, 一旦遇到非数值就会立即停止
2.停止的时候如何还没有提取到数值, 那么就返回NaN
3.parseInt/parseFloat都会将传入的数据当做字符串来处理

4.转换为布尔类型

1. 将String类型转换为布尔类型

let str = ""; // false
let str = "     "; // true

只要字符串中有内容都会转换为true, 只有字符串中没有内容才会转换为false

2. 将Number类型转换为布尔类型

//let num = 999; // true
//let num = -123; // true
//let num = -0; // false
//let num = 0; // false
let num = NaN; // false

let flag = Boolean(num);
console.log(flag);
console.log(typeof flag);

1.只有数值是0才会转换为false, 其它的都会转换为true
2.如果是NaN也会转换为false
3.在JavaScript中NaN属于Number类型

3. 将undefined类型转换为布尔类型

let value = undefined; // false
let flag = Boolean(value);
console.log(flag);
console.log(typeof flag);

undefined会转换为false

4. 将null类型转换为布尔类型

let value = null; // false
let flag = Boolean(value);
console.log(flag);
console.log(typeof flag);

null会转换为false

规律

空字符串/0/NaN/undefined/null 会转换成false, 其它的都是true
在JavaScript中如果想将基本数据类型转换为布尔类型, 那么只需要调用Boolean(常量or变量)

let str = "abc"; // true
let str = "     "; // true
let str = ""; // false

let flag = Boolean(str);
console.log(flag);        
console.log(typeof flag);    //boolean


//let num = 999; // true
//let num = -123; // true
//let num = -0; // false
let num = 0; // false

let flag = Boolean(num);
console.log(flag);
console.log(typeof flag);

JavaScript赋值运算符

1. 什么是赋值运算符?
   赋值运算符就是将等号右边的值存储到等号左边的变量中

1.1 简单类型的赋值运算符
=
1.2 复杂类型的赋值运算符
+= -= *= /= %=

2. 赋值运算符的优先级和结合性

• 赋值运算符的优先级低于算数运算符

let res = 1 + 1; //由于算数运算符的优先级高于赋值运算符所以会先计算1 + 1, 然后再赋值给res

• 赋值运算符的结合性是右结合性(从右至左的计算)

//由于赋值运算符的结合性是右结合性, 所以会先将3赋值给num2, 然后再将Num2中的值赋值给num1
let num1, num2;
num1 = num2 = 3;

• 赋值运算符的左边只能放变量, 不能放常量

3. 复杂类型的赋值运算符

• 会将等号左边存储的值取出来和右边进行指定的运算(+、-等), 运算完毕之后再将运算的结果存储到左边

let res = 5;
res -= 5;  // 相当于 res = res - 5;
console.log(res); //0

JavaScript自增自减运算符

1. 什么是自增自减运算符?

• 自增运算符: ++
• 自减运算符: --

2. 自增自减运算符的作用

• 自增运算符: 可以快速的对一个变量中保存的数据进行+1操作
• 自减运算符: 可以快速的对一个变量中保存的数据进行-1操作

3. 自增和自减写在变量的前面和后面的区别?

• 写在变量的后面, 表示变量先参与其它的运算, 然后再自增或者自减

let num = 1;
let res = num++ + 1;  //先进行 let res = num + 1; num++;
console.log(res); // 3

• 写在变量的前面, 表示变量先自增或者自减, 然后再参与其它的运算

let num = 1;
let res = --num + 1; // 先进行num--; let res = num + 1;
console.log(res); // 1

注意点

• 自增自减运算符只能出现在变量的前面或者后面, 不能出现在常量或者表达式的前面或者后面

666++;  //错误的写法

• 表达式就是用运算符连接在一起有意义有结果的语句, 我们就称之为表达式(1 + 1; 表达式)

(1 + 1)++; 错误的写法

JavaScript关系运算符

1. 什么是关系运算符?
   > < >= <= == != === !==
2. 关系运算符的返回值

• 只有两个, 要么是true, 要么是false
• 如果关系成立, 就返回true
• 如果关系不成立, 就返回false

3. 关系运算符的注意点

• 对于非数值类型的数据, 会先转换成数值类型, 再进行判断

let res = 1 > true;   // 先把true，转成1 再进行运算  let res = 1 > 1;

let res = 1 > "10"; // let res = 1 > 10;    //先把字符串转成10，再进行比较，结果为false
let res = 1 > null; // let res = 1 > 0;    //先把null转成0、再进行比较，结果为true

• 对于关系运算符来说, 任何数据和NaN进行比较, 返回值都是false

let res = 666 > NaN;   //结果为false

let res = 666 > undefined;   //先把undefined转成数值为NaN，结果为let res = 666 > NaN;

• 如果参与比较的都是字符串类型, 那么不会转换成数值类型再比较, 而是直接比较字符对应的Unicode编码，如果字符串中有多个字符, 那么会从左至右的依次比较, 直到条件不满足为止

let res = "a" > "b"; 等于 let res = 0061 > 0062;  结果为false
let res = "b" > "a"; 等于 let res = 0062 > 0061;  结果为true

let res = "ab" > "ac";  //如果字符串中有多个字符, 那么会从左至右的依次比较, 直到条件不满足为止

• 特殊比较的结果

let res = null == 0; // false
let res = undefined == 0; // false
let res = null == undefined;  // true

• 在企业开发中千万不要通过==来判断某一个数据是否是NaN,如果想判断某一个数据是否是NaN那么可以通过isNaN来进行判断(let res = NaN == NaN; // 返回false)

let num = NaN;
let res = isNaN(num);
console.log(res);

4. === 和!==

• 会同时判断取值和数据类型，只有两者都相同时，才会输出true

let res = 123 === "123"; // false 类型不同

5. ==和 !=

• 只会判断取值是否相等, 不会判断数据类型是否相等

let res = 123 == "123"; // let res = 123 == 123; true

6. 关系运算符的结合性和优先级

• 关系运算符都是左结合性(从左至右的运算)

let res = 10 > 5 > 3;   //结果为false
先计算10>5,然后返回true,再进行true>3比较，也就是1>3运算，1不大于3，所以返回false，

可以按照下面这么写
let res = (10> 5 = true) > 3;等于let res = (true) > 3; 结果为false

注意点：因为关系运算符是左结合性, 所以不能利用关系运算符来判断区间

• 关系运算符中 > < >= <= 的优先级高于 == != === !==

let res = 10 == 10 > 0;  
先计算 10 > 0，然后在计算 10==true，结果返回是false

JavaScript逻辑运算符

1. 什么是逻辑运算符?

底下的 || 用 V 替代下，你可以把V替换成 || 。

名称	格式	返回值	特点
逻辑与 &&	条件表达式A && 条件表达式B	true或false	一假则假
逻辑或 V	条件表达式A V 条件表达式B	true或false	一真则真
逻辑非 !	!条件表达式	true或false	真变假, 假变真

2. 逻辑运算符的优先级和结合性

• 逻辑运算符的结合性是左结合性(从左至右的运算)
• 在逻辑运算中&&的优先级高于||

let res = true || false && false;
console.log(res); // true

3. 逻辑运算符的注意点

• 在逻辑运算中如果不是布尔类型, 那么会先转换成布尔类型, 再参与其它的运算

let res = !0; // let res = !false; 结果为true
let res = !1; // let res = !true; 结果为false

• 在逻辑与运算中, 如果参与运算的不是布尔类型, 返回值有一个特点
  格式: 条件A && 条件B
  如果条件A不成立, 那么就返回条件A
  如果条件A成立, 无论条件B是否成立, 都会返回条件B

let a = -1;
let b = 0;
if (a > 0 && b > 0){}  
这里 a > 0 不成立，返回a的结果，false
if (a<0 && b > 0) 这里a<0成立，则返回b>0的结果

• 在逻辑或运算中, 如果参与运算的不是布尔类型, 返回值有一个特点
  格式: 条件A || 条件B
  如果条件A成立, 那么就返回条件A
  如果条件A不成立, 无论条件B是否成立, 都会返回条件B

let a = 1;
let b = 0;
if (a > 0 || b >= 0){}  
这里 a > 0 成立，返回a的结果，true

if res = 0 || null; //0不成立，返回null

• 在逻辑与运算中,有一个逻辑短路现象
  格式: 条件A && 条件B
  由于逻辑与运算的规则是一假则假, 所以只要条件A是假, 那么条件B就不会运算

let num = 1;
let res = (10 > 20) && (++num > 0);
console.log(num);  // 1 
console.log(res); // false
10> 20 不成立，返回 10 > 20的结果，后面的++num不会计算，所以num为1

• 在逻辑或运算中,有一个逻辑短路现象
  格式: 条件A || 条件B
  由于逻辑或运算的规则是一真则真, 所以只要条件A是真, 那么条件B就不会运算

let num = 1;
let res = (10 < 20) || (++num > 0);
console.log(num);  // 1
console.log(res);  // true
num为1，因为10<20，成立，所以++num不会执行，所以num还为1.

JavaScript三目运算符

1. 什么是三目运算符
   三目运算符又称之为条件运算符
2. 三目运算符格式
   条件表达式 ? 结果A : 结果B;

• 在三目运算符中当条件为真的时候, 就会返回结果A

let res = true ? 123 : 456;
console.log(res);  //123

• 在三目运算符中当条件为假的时候, 就会返回结果B

let res = false ? 123 : 456;
console.log(res);  //456

3. 三目运算符注意点

• 在三目运算符中?:不能单独出现, 要么一起出现, 要么一起不出现

let res = (10 > 5) ? 10 : 5;
console.log(res);  // 10

JavaScript逗号运算符

逗号运算符 ,

1. 逗号运算符优先级和结合性

• 逗号运算符的结合性是左结合性(从左至右的运算)
• 逗号运算符的优先级是所有运算符中最低的

2. 逗号运算符也是一个运算符, 所以也有运算符结果

• 逗号运算符的运算符结果就是最后一个表达式的结果
• 表达式1, 表达式2, 表达式3, ....;

let res = ((1 + 1), (2 + 2), (3 + 3));
console.log(res);  // 6

3. 利用逗号运算符同时定义多个变量

let a, b;

4. 利用逗号运算符同时给多个变量赋值

let a, b;
a = 10, b = 5;