JS基础 -- 大复习(阶段二)

数据类型转换

数据类型转换：就是把一种数据类型的变量转换成另外一种数据类型。

显示转换：程序员利用一些JS给我们提供的工具函数进行数据类型的转换

隐式转换：程序在运行的过程中，根据上下文的环境将变量的数据类型进行转换

转换为字符串

String(要转换的变量名)
变量名.toString()
使用+ 变量名+ ''

// 1 把数字型转换为字符串 变量.toString() var v1 = 10var str = v1.toString()console.log(str);console.log(typeof str);
// 2 利用 String()
console.log(String(v1));
// 3 利用 + 拼接字符串的方法实现转换效果隐式转换
console.log(v1 + ' ');

转换为数字型(重点)

parseInt应用

语法：parseInt(变量名|字面量)

作用：从一个变量名提取整数，假设这个变量名是一个字符串数据类型，如果变量的第一个字符不是数字直接返回NaN，如果是数字就往后进行提取，如果遇到了非数字就停止提取

// parseInt 把字符型的转换为数字型 得到是整数 var v1 = '10.111' console.log(parseInt(v1)); // 10 var v2 = '200px' console.log(parseInt(v2)); // 200  var v3 = 'px150' console.log(parseInt(v3)); //NaN

parseFloat应用

语法：parseFloat(变量名|字面量

作用：从一个变量名提取小数，假设这个变量名是一个字符串数据类型，如果变量的第一个字符不是数字直接返回NaN，如果是数字就往后进行提取，如果遇到了除了第一个小数点以外的非数字就停止提取

// 2 parseFloat把字符型转换为数字型 得到的是浮点数       var num1 = '12.35'console.log(parseFloat(num1)); // 12.35var num2 = 'rem3.14'console.log(parseFloat(num2)); //NaN

Number()强制转换

语法：Number(要转换的变量名)

因为我们之前讲过 Number类型的值只有两种：数字、NaN。如果我们将其它的数据类型转换为Number，有可能转换为数字，也有可能转换不成功，就会用NaN (Not a Number) 来表示。

将字符串类型的数据转换为Number类型 如果字符串里面包含非数字的字符那么就转换为NaN，如果字符串里面全是数字就被转换为对应的数字
将boolean类型数据转换为number类型 true ----> 1 false -----> 0
将undefined类型数据转换为number类型结果NaN
将null类型转换为number转换结果 0

// 3 Number()强制转换 把字符型的转换为数字型var v4 = '1234'// var v4 = '1234ab'var res = Number(v4);console.log(res);console.log(typeof res);var v4 = truevar res = Number(v4);console.log(res);console.log(typeof res);/* var v4 = undefinedvar res = Number(v4);console.log(res);console.log(typeof res);var v4 = nullvar res = Number(v4);console.log(res);console.log(typeof res); */

利用算术运算符进行转换

js算术运算符-隐式转换(- * /)

  console.log('13' - 0); //13console.log('13' * 15);//195console.log('15' / 5);//3var a = isNaN('123'); //false
如果判断的变量的数据类型不是Number类型，它会先将这个变量转换为Number类型再作判断

计算年龄案例

   // 弹出一个输入框（prompt)，让用户输入出生年份 （用户输入）
  // 把用户输入的值用变量保存起来，然后用今年的年份减去变量值，结果就是现在的年龄 （程序内部处理）  // 弹出警示框（alert) ， 把计算的结果输出 （输出结果）var year = prompt('请您输入您的出生年份');var age = 2018 - year; // year 取过来的是字符串型  但是这里用的减法 有隐式转换alert('您今年已经' + age + '岁了');

简单加法计算器案例

// 1 需要准备2个用户输入对话框让用户输入数字保存起来
var num1 = prompt('请输入第一个数字');
var num2 = prompt('请输入第二个数字');
// 2 将两个数字进行相加
var sum = Number(num1) + Number(num2)
alert(`您的结果是${sum}`)

转换为布尔型

Boolean(要转换的变量名)

转换的结果只有两种：true和false

将字符串类型转换为Boolean 只有空字符串为 false，其它的都是true
将Number类型转换为Boolean 只有0与NaN才为false 其它的都是true
将undefined与null转换为Boolean 结果都为false

var num = -1var res = Boolean(num)console.log(res)var v1 = undefined
console.log(Boolean(v1))

算术运行符

JavaScript 算术运算符

算术运算符用于执行变量与/或值之间的算术运算。

给定 y=5，下面的表格解释了这些算术运算符：

运算符	描述	例子	结果
+	加	x=y+2	x=7
-	减	x=y-2	x=3
*	乘	x=y*2	x=10
/	除	x=y/2	x=2.5
%	求余数 (保留整数)	x=y%2	x=1
++	递加	x=++y	x=6
--	递减	x=--y	x=4

递加与递减运算符

加加运算符

我们会把加加运算符分为前加加和后加加

前加加：比如 ++i 加加符号在变量的前面

后加加：比如 i++ 加加符号在变量的后面

//自增运算符自身值加1
// 注意点：变量++ var num=10 num++
var num=10
num++ // 11
或
++num // 11
//总结：前置自增与后置自增单独是一行，没有区别，都是自身变量+1

//1.前置自增:先自增,再返回，
++num

//2.后置自增 : 先返回，再自增
num++

规则：

如果只是单独运算不管是前加加还是后加加它们自己都会进行加1

// 累加 指的就是这个变量会进行自加1操作//   var i = 10//   i++ // i = i+ 1//   document.write(i)var i = 10++iconsole.log(i)

2 .如果将加加运算符进行赋值结果就不一样了

前加加：第一步：先会将自己的值进行加1 第二步：然后才赋值给另外一个变量

      var i = 10 // 第一步：i = i + 1 = 10 + 1 = 11// 第二步：b = i = 11var b = ++iconsole.log(i)console.log(b)

后加加：第一步：先会将自己的值赋值给等号左边的变量 第二步：然后才将自己进行加1操作

var i = 10
// 第一步：将变量i的值赋值给变量 b b = i = 10
// 第二步：将i的值进行自加1 i = i + 1
var b = i++
console.log(i) // 11
console.log(b) // 10

变态加加

var i = 10
// 10 11 12
// var b = i++ + i++ + i++;

// 11 12 13
var b = ++i + ++i + ++i
console.log(b)

比较运算符

比较运算符它会得到布尔类型的结果：true或者false

比较运算符在逻辑语句中使用，以测定变量或值是否相等。

给定 x=5，下面的表格解释了比较运算符：

运算符	描述	例子
==	等于	x==8 为 false
===	全等（值和类型）	x===5 为 true；x==="5" 为 false
!=	不等于	x!=8 为 true
>	大于	x>8 为 false
<	小于	x<8 为 true
>=	大于或等于	x>=8 为 false
<=	小于或等于	x<=8 为 true
!==	不全等

注意：==与 ===之间的区别二个等号只是在比较值是否相等，不会比较变量的数据类型

三个等号不仅仅比较值是否相等同时还要比较变量的数据类型是否相等

建议：多使用三个等号

逻辑运算符

逻辑运算符用于测定变量或值之间的逻辑。

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&& 逻辑与	and	(x < 10 && y > 1) 为 true
\|\| 逻辑或	or	(x==5 \|\| y==5) 为 false
! 逻辑非	not	!(x==y) 为 true

逻辑运算符不仅仅可以等到布尔类型的值还可以得到其它值

布尔类型的值

逻辑与：只有一种情况会得到 true ，就是&&两边都为真的时候才为真，只要一边为假就会得到 false 其它的情况都是假的

逻辑或：只有一种情况会得到 false ，就是||两边都为假才为假，只它的情况都为 true

逻辑非：一般是配置布尔类型的数据来使用 !变量名取反将真变假将假变真

其它值：

逻辑与：

如果&&符号左边的值为假，不会管&&符号右边的值到底是真还是假，返回&&符号左边的结果
如果&&符号左边的值为真，不会管&&符号右边的值到底是真还是假，返回&&符号右边的结果

 var res1 =0 && 20
console.log(res1)// 0 var res2 = 5 && 20
console.log(res2)// 20

逻辑或：

如果|| 符号左边的值为假，不会管||符号右边的值到底是真还是假，返回||符号右边的结果
如果||符号左边的值为真，不会管||符号右边的值到底是真还是假，返回||符号左边的结果

var res = 5 || NaN
console.log(res) // 5

练习的时候可以一步一步拆分,注意拆分之后代码的执行顺序以及语法的机制,

细心勤练,你我皆是前端的赢家