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

Posted 小鸟`~`愤飞

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS基础 -- 大复习(阶段二)相关的知识,希望对你有一定的参考价值。

数据类型转换

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

显示转换:程序员利用一些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+2x=7
-x=y-2x=3
*x=y*2x=10
/x=y/2x=2.5
%求余数 (保留整数)x=y%2x=1
++递加x=++yx=6
--递减x=--yx=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 

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

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

以上是关于JS基础 -- 大复习(阶段二)的主要内容,如果未能解决你的问题,请参考以下文章

动态SQL基础概念复习(Javaweb作业5)

js基础复习---字符串操作

[NEFU 数据结构]阶段二复习

学Java的经验分享 扎实的基础是进步的前提

复习 - JavaScript - 阶段02

JS基础复习