JS数据类型和流程控制语句

Joker_ZzzZ_

于 2022-08-24 22:37:29 发布

阅读量49

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/joker_zzzz_/article/details/126514064

版权

2.数据类型转换

数据类型转换分为两种
- 显式转换(强制转换):通过js的方法，转换成自己想要的数据类型
- 隐式转换：在js进行某些运算的时候自动完成转换数据类型

2.1 强制转换

2.1.1 强制转换为number

Number(要转换的数据)
- 作用:将数据转换成number类型，如果转换不了则是返回NaN
- <script>
  // Number类型转换
  // 1.number类型
  var n1 = 10;
  console.log( Number(n1) );//10
  // 2.string类型转换
  var n2 = "10";
  console.log( Number(n2));//10
  
  var n3 = "10px";
  console.log(Number(n3));//NaN
  
  var n4 = "px10abc";
  console.log(Number(n4));//NaN
  
  var n5 = "";
  console.log(Number(n5));//0
  
  // 3.boolean类型
  var n6 = true;
  console.log(Number(n6));//true----1
  var n7 = false;
  console.log(Number(n7));//false----0
  
  // 4.undefined
  var n8 = undefined;
  console.log(Number(n8));//NaN
  // 5.null
  var n9 = null;
  console.log(Number(n9));//0
  
  // 总结:Number可以转换的有：string类型(纯数字，""-0 " "-0) boolean(true-1 false-0) null(0)
  </script>
- parseInt(要转换的数据)
  - ==主要是针对字符串数据操作==
  - 作用：将数据转换成number类型，从左往右转换，遇到不能转换的或者是末尾结束，如果一开始都不能转换则是NaN 并且取整(舍弃小数)

var n1 = "10.5";
console.log(parseInt(n1));//10
var n2 = "10.5px";
console.log(parseInt(n2));//10

var n3 = "px10.5";
console.log(parseInt(n3));//NaN

var n4 = "11px123";
console.log(parseInt(n4));//11

var n5 = undefined;
console.log(parseInt(n5));

parseFloat(要转换的数据)
- ==主要针对字符串数据操作==
- 作用：将数据转换成number类型，从左往右转换，遇到不能转换的或者是末尾结束，如果一开始都不能转换则是NaN 保留小数
- <script>
  // parseFloat: 将数据转换成number类型，从左往右转换，遇到不能转换的或者是末尾结束，如果一开始都不能转换则是NaN 保留小数
  
  var n1 = "10.8";
  console.log(parseFloat(n1));//10.8
  
  var n2 = "10.8px";
  console.log(parseFloat(n2));//10.8
  
  var n3 = "px10.8";
  console.log(parseFloat(n3));//NaN
  
  var n4 = "11.8px1234";
  console.log(parseFloat(n4));//11.8
  
  var n5 = undefined;
  console.log(parseFloat(n5));//NaN
  </script>

2.1.2 强制转换为string

String(要转换的数据)
- 作用：将数据强制转换为string类型直接在数据外面加""
- <script>
  // String():将数据强制转换为string类型直接在数据外面加""
  var s1 = 10;
  console.log(String(s1));// "10"
  
  var s2 = null;
  console.log(String(s2));// "null"
  
  var s3 = undefined;
  console.log(String(s3)); //"undefined"
  
  var s4 = true;
  console.log(String(s4));// "true"
  </script>
- 要转换的数据.toString(num)
  - num表示转换num进制的字符串不写默认是10进制

var n2 = true;
console.log(n2.toString());// "true"

// undefined没有tostring方法
var n3 = undefined
// console.log(n3.toString());//报错

var n4 = null
// null 没有tostring方法
console.log(n4.toString());//
</script>

2.1.3 强制转换为Boolean

Boolean() : 强制转换为Boolean类型结果为true

<script>
// Boolean(要转换的数据) 将数据转换boolean类型转换结果只有两种true和false
// 1.number类型转换非0即真(只要不是0 都是true)
var b1 = 1;
console.log(Boolean(b1));//true
var b2 = 0;
console.log(Boolean(b2));//false

// 2.string类型转换有值即为真
var b3 = "中文wertyuewrty";
console.log(Boolean(b3));//true

var b4 = "";
console.log(Boolean(b4));//false

//3.undefined
var b5 = undefined;
console.log(Boolean(b5));//false
// 4.null
var b6 = null;
console.log(Boolean(b6));//false

// 5.NaN
var n7 = NaN;
console.log(Boolean(n7));

//总结:Boolean结果为false的有:0 null undefined "" NaN
</script>

，false
2.2 小方法

2.2.1 toFixed
要保留的数据.toFixed(n) 保留n位小数

var n2 = "3.1415926";
console.log(n2.toFixed(2));//报错
</script>

2.2.1 isNaN

isNaN(检测的数据): 检测数据是不是不是一个数
==判断之前会先用Number方法强制转换再进行判断==

// isNaN 检测数据是不是不是一个数
// 判断之前会先用Number方法强制转换再进行判断
var n3 = 10;
console.log(isNaN(n3));//n1不是一个数 false

var n4 = "123"; // 先用Number方法转成 123
console.log(isNaN(n4));//123不是一个数 false

var n5 = "123你好";//Number类型转换是NaN
console.log(isNaN(n5));//true

3.运算符与表达式

3.1 运算符和表达式的概念

运算符: 连接一个以上的操作数中间的符号叫做运算符
算术运算符 + - * / % ++ --
赋值运算符 = += -= /= %=
逻辑运算符 && || !
三目运算符条件 ? true执行的结果 : false执行的结果
比较运算符 > < >= <= == != ===
表达式:由操作数和运算符组成的式子就叫表达式

算术表达式   操作数和算术运算符组成
赋值表达式   操作数和赋值运算符组成    
逻辑表达式   操作数和逻辑表达式组成
三目表达式   操作数和三目表达式组成
比较表达式   操作数和比较运算符组成

算术运算符

var b = 10-4;
console.log(b);//6

console.log(10*4);//40
console.log(10/4);//2.5
console.log(11%4);//3 取余
console.log(12%4);//0

// 1.求n的倍数
var n = 9;
console.log(100%n == 0);//true 是9的倍数 false 不是9的倍数

// 2.判断当前这个数是不是偶数都是2的倍数
console.log(11%2==0)//true 偶数 false 奇数

// 3.精度缺失在运算过程中是先转换成二进制进行计算在转换过程中会造成精度缺失
console.log(0.1+0.2);//0.30000000000000004
console.log(0.7+0.1);//0.7999999999999999
console.log(0.1*0.7);//0.06999999999999999

// 4.隐式转换在运算过程中数据自动进行数据类型的转换
// 隐式转换的规律:都会转换number类型进行运算
console.log(100 * false);//0
console.log(100 * "123");//12300
console.log(100 * "123px");//NaN

console.log(100 / true);//100
console.log(100+null); //100
console.log("100"- 10);//90

// 特殊：+ 字符串遇到+会拼接除了字符串数据，其他的还是会隐式转换
console.log(100 + "123");// "100123"
console.log(100+true);// 101
</script>

自加/自减 ++ --

var b = 10;
++b;//b = b+1；
console.log(b);//11

// 2.++和-- 参与运算
/*
++在前先自加1 然后再运算(打印)
++在后先运算(打印) 再自加1
*/
var x = 10;
var y = x++;// y=10 x=11
console.log(x, y);//11 10

var n1 = 10;
var n2 = ++n1;// n2=11 n1=11
console.log(n1, n2);// 11 11

</script>

3.3 赋值运算符

var b = 10;
b+=10;// b = b+10
console.log(b);//20

var c = 10;
c-=5;
console.log(c);//5

var d = 20;
d*=10;
console.log(d);//200

var e = 20;
e/=5;
console.log(e);//4

var f = 101;
f%=10;
console.log(f);//1

</script>

3.4 比较运算符

console.log(10 != 20);//true
console.log(10 !=10) ;//false

console.log(10==10);//true
// 两个字符比较一位一位的比较而且比较的ASCII字符编码
// "1" 49 > "2" 50 false
console.log("1000000" > "2");//false
// "a" 97 > "A" 65
// "a"-"z" 97-122 "A"-"Z" 65-90
console.log("a" > "A");

//2 ==和===的区别是什么面试题
console.log(10=="10");//true ==在进行比较的时候会进行隐式转换尽量都会转成number类型
console.log(10==="10")//false ===在进行比较的时候不会隐式转换必须一模一样才可以
console.log("10"==="10");//true
console.log(null==null);//true
console.log(undefined==undefined);//true

//3.特殊： null在判断相等的时候不会进行隐式转换
console.log(null==0);//false

console.log(undefined==0)//NaN==0 false
console.log(null==undefined);///true

console.log(NaN==NaN);//false 任何两个NaN都不相等

console.log(null>=0);//true
console.log(null<=0);//true

</script>