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

Posted 2021-11-06 小鸟`~`愤飞

数据类型转换

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

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

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

转换为字符串

1. String(要转换的变量名)

2. 变量名.toString()

3. 使用+ 变量名+ ''

// 1 把数字型转换为字符串 变量.toString() 
    var v1 = 10
    var 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.35
   var 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 = true
     var res = Number(v4);
     console.log(res);
     console.log(typeof res);
     /* var v4 = undefined
     var res = Number(v4);
     console.log(res);
     console.log(typeof res);
     var v4 = null
     var res = Number(v4);
     console.log(res);
     console.log(typeof res); */

利用算术运算符进行转换

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

  console.log('13' - 0); //13
  console.log('13' * 15);//195
  console.log('15' / 5);//3
  var 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 = -1
  var 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

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

      var i = 10
      ++i
      console.log(i)

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

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

      var i = 10
      // 第一步：i = i + 1 = 10 + 1 = 11
      // 第二步：b = i = 11
      var b = ++i
      console.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

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

其它值：

逻辑与：

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

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

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

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

逻辑或：

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

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

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

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

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