JavaScript数据类型及运算符

1. 数据类型

变量是程序中用来临时存储数据的 , 变量可以存储 任意类型的值

js中的数据类型可以分为两大类
  1. 基本数据类型
      number string boolean undefined null
  2. 复杂数据类型(引用数据类型)
      对象 数组 function函数 正则表达式...
    

1. number 数值类型

  取值: 数字 小数,NaN...等等      
  100 200  1.1  0  -6  -999 都是数字
  NaN（NaN: not a number） 表示这个数据 不是一个数,但NaN是number数据类型
  
  // var num1 = 100;
  // var num2 = 100.1;
  // var num3 = NaN;  
  // console.log(num1,num2,num3);
  
    // 数值类型的取值可以是数字 或 NaN
  // NaN 也是数值类型,表示 这个数据 不是一个数
  // NaN: not a number
  // var n = NaN
  // console.log( typeof n ) // 'number'

扩展
      判断一个值,是否是NaN
      语法: isNaN(变量)
      作用: 判断这个变量的值,是否是一个 非数字
      返回值: 布尔类型
      如果变量是一个数,则返回 false
      如果变量不是一个数,则返回 true
      注意: 此语法默认会将变量中的值进行一次 隐式转换(转为数值)

  var num = 'leon'
  console.log( isNaN(num) ) // true

  var num1 = 100
  console.log( isNaN(num1) ) // false

  var num2 = '100'
  console.log( isNaN(num2) ) // false

2. String 类型

   字符串类型: 只要是引号包裹的内容, 就是字符串类型(引号不区分单双引号)
   // var str1 = '100';
   // var userName = "leon";
  

3. undefined 类型

   当变量只定义, 不赋值的时候,此时变量的值就是undefined
   
    var un = undefined  // 定义一个变量, 变量名为 un, 并给它赋值为 undefined
    console.log(un) //输出undefined
    
    var z   // 定义一个变量, 变量名为 z, 没有赋值操作, 所以变量默认的值为 undefined
    console.log(z) //输出undefined
    

4. boolean 布尔类型

  取值: true false
  
  // var flag1 = true;
  // var flag2 = false;
  // console.log(flag1，flag2);
  

5. null 空

     null 代表的含义是 空，不是对象
     本身是一种数据类型, 只不过代表的是 空(啥也没有)       
     使用场景: 在创建 对象 的时候, 如果开始不知道对象内部有什么, 可以给一个 null
     Null 和 undefined 不同!!!
     
    //var nu = null   // 定义一个变量, 名为 nu, 值为 null类型, 代表空
    //console.log(nu) //输出null
    

6. 数据类型的存储区别

我们一般将  存储内存空间 分为两个
  1. 栈内存
  2. 堆内存

  js中的数据类型 分为基本数据类型 和 复杂数据类型(引用数据类型)
  1）基本数据类型的数据 存储在栈内存 中 栈内存中的标识对应的变量
  2）复杂数据类型数据存储在 堆内存 中 而地址存储在栈内存中

小结: 给变量赋值一个基本数据类型, 则在这个  变量的 栈内存 中直接存储数据
      给变量赋值一个复杂数据类型, 则就是将 数据 存储在堆内存,然后将存储空间的地址 直接存储在变量的 栈内存中

    

2. 判断数据类型

1） typeof

  语法1: typeof 变量
  语法2: typeof(变量)
  返回值: 通过字符串表示变量中数据的类型
  ！注意: typeof 语法只能获取基本数据类型,而且null类型获取不到，
  检测 null 的时候打印结果为 object

       var str1 = '100'
       var str2 = 100
       var str3
       var str4 = true
       var str5 = false
       var str6 = null
       var str7 = NaN
       
       console.log(typeof str1 )   // string
       console.log(typeof str2 )   // number
       console.log(typeof(str7))   // number
       console.log(typeof(str3))   // undefined
       console.log(typeof(str4))   // boolean
       console.log(typeof(str5))   // boolean
       console.log(typeof(str6))   // object

2）constructor

   语法: 数据结构.constructor
   问题: null 和 undefined 不能使用
   使用场景: 一般用于引用数据类型
   潜在问题: 这是原型对象的某一个属性, 我们是可以手动更改的
   
   console.log([].constructor === Array)//true
   console.log({}.constructor === Array) //false
   console.log(null.constructor === Array) // 会报错, 不能使用
   console.log(undefined.constructor === Array) // 会报错, Uncaught TypeError: Cannot read properties of undefined (reading 'constructor') 不能使用 
   
   function Person () {}
   const p1 = new Person()
   console.log(p1.constructor === Person)//true

3）万能法 Object.prototype.toString.call(要检测的数据)

   返回值: [object 数据类型](字符串格式的, 并且数据类型的首字母是大写)
   使用场景: 任意类型都可准确判断, 所以大部分情况下都可以使用

3. JS的数据类型转换

1. 其他数据类型 转为 数值类型 的方法

+Number( )方法

   语法: Number(变量)
   作用:可以用于任何数据类型, 将其转换为 number类型
   返回值: 转换后的数字,或者NaN
   
   用途：
   1. 字符串转数字
      1）如果转换的字符串是纯数字组成的, 那么直接转换为 数字
          var str = '1234'
          var res = Number(str)
          console.log( res ) // 1234
          console.log( typeof res ) // number
          var str2 = '192.1'
          var res2 = Number(str2)
          console.log( res2 ) // 192.1 
  
      2）如果转换的字符串是 空字符串 或者 空白字符串, 那么直接转换为 数字0
          console.log(typeof(Number('')), Number(''))   // number 0
          console.log(typeof(Number(' ')), Number(' ')) // number 0
        
      3）其他类型的字符串(不是  空---空白---纯数字字符串) 会转换为 NaN
          var str1 = 'leon'
          var res1 = Number(str1)
          console.log( res1 ) // NaN
          console.log( typeof res1 ) // number

          var str3 = '192.168.1.1'
          var res3 = Number(str3)
          console.log( res3 ) // NaN

          var str4 = '192 168.1.1'
          var res4 = Number(str4)
          console.log( res4 ) // NaN
      
   2. 布尔值转数字
        true 转换为 1
        false 转换为 0
        console.log(typeof(Number(true)), Number(true))   // number 1
        console.log(typeof(Number(false)), Number(false)) // number 0
        
   3. undefined 转数字
        会直接转换为 NaN
        console.log(typeof(Number(undefined)), Number(undefined)) // number NaN
        
   4. null 转数字
        会直接转换为 0
        console.log(typeof(Number(null)), Number(null)) // number 0

+parseInt( )方法

      语法: parseInt(变量) 
      作用：将变量中的值转为整数
      返回值: 转换后的整数 或 NaN
      转化规则：从数据的第一位开始转换,直到遇见非数字,则停止转换
      
      1）小数点以后的值, 直接省略掉
          var n2 = '100.1'
          console.log( parseInt(n2) ) // 100
      
      2）字符串以 数字字符串 或者 数字 开头的, 会转换为数字, 否则就是转换为 NaN
          var n3 = '100leon'
          console.log( parseInt(n3) ) // 100

          var n3 = 'leon100'
          console.log( parseInt(n3) ) // NaN
      
         console.log(typeof(parseInt('100.123')), parseInt('100.12'))   // number 100
         console.log(typeof(parseInt('100')), parseInt('100'))   // number 100
         console.log(typeof(parseInt('100abc')), parseInt('100abc'))   // number 100
         console.log(typeof(parseInt('999abc')), parseInt('999abc'))   // number 999
         console.log(typeof(parseInt('abc')), parseInt('abc'))   // number NaN
         console.log(typeof(parseInt('abc666')), parseInt('abc666'))   // number NaN
         console.log(typeof(parseInt('')), parseInt(''))   // number NaN
         console.log(typeof(parseInt(' ')), parseInt(' '))   // number NaN
         console.log(typeof(parseInt(true)), parseInt(true))   // number NaN
         console.log(typeof(parseInt(false)), parseInt(false))   // number NaN
         console.log(typeof(parseInt(undefined)), parseInt(undefined))   // number NaN
         console.log(typeof(parseInt(null)), parseInt(null))   // number NaN  

+parseFloat( )方法

  语法: parseFloat(变量)  将变量转为数值,可以转小数
  返回值: 数字,或 NaN
  和parseInt一样的转换规则,只不过parseFolat可以识别一个小数点

      var num1 = '100.1';
      console.log( parseFloat(num1) )// 100.1
      
      var num3 = '100.1.2';
      console.log( parseFloat(num3) )// 100.1
      console.log( Number(num3) )// NaN

      var num2 = '100';
      console.log( parseFloat(num2) )// 100

      var num4 = 'leon100.1';
      console.log( parseFloat(num4) )// NaN
  
     console.log(typeof(parseFloat('100.12')), parseFloat('100.12')) // number 100.12
     console.log(typeof(parseFloat('100')), parseFloat('100')) // number 100
     console.log(typeof(parseFloat('100abc')), parseFloat('100abc')) // number 100
     console.log(typeof(parseFloat('999abc')), parseFloat('999abc')) // number 999
     console.log(typeof(parseFloat('abc')), parseFloat('abc')) // number NaN
     console.log(typeof(parseFloat('abc666')), parseFloat('abc666')) // number NaN
     console.log(typeof(parseFloat('')), parseFloat('')) // number NaN
     console.log(typeof(parseFloat(' ')), parseFloat(' ')) // number NaN
     console.log(typeof(parseFloat(true)), parseFloat(true)) // number NaN
     console.log(typeof(parseFloat(false)), parseFloat(false)) // number NaN
     console.log(typeof(parseFloat(undefined)), parseFloat(undefined)) // number NaN
     console.log(typeof(parseFloat(null)), parseFloat(null)) // number NaN
     

+数学运算符 ( -, *, /, %)

    除了加号'+'之外的 数学运算符(-,*,/,%) 会在运算之前将变量通过Number()方法隐式转换为
    数值后再运进行运算('+' 运算 不会进行数值的隐式转换)
    
      var num = '1000';
      var res = num - 0; // 在运算之前,会隐式的将num中的值转为数值类型1000,然后在运算
      console.log( res ) //1000
      console.log( typeof res ) // 'number'
      
      console.log(typeof('100.99' - 0), '100.99' - 0)   // number 100.99
      
      var num1 = '1000phone';
      var res1 = num1 - 0;
      // 在运算之前,会隐式的将num1中的值转为数值类型,然后在运算
      // num1通过Number(num1)方法转为数值的结果  NaN
      // NaN - 0 运算结果还是NaN
      console.log( res1 ) //NaN

      // ! 在js中 加号 除了是加法运算之外,还具有字符串拼接的作用
      // + 运算 不会进行数值的隐式转换
      var num2 = '100';
      var res2 = num2 + 1;
      console.log(typeof res2, res2 ) //string, 1001
      

2. 其他数据类型转为 字符串类型 的方法

+String( )方法

      语法: String(变量) 
      作用：将变量中的值转为字符串类型的值。
      //该方法 什么类型 都可以转换为字符串类型的, 包括 undefined 和 null 类型
      返回值: 转换后的字符串
      
        var str1 = 100
        console.log(typeof(String(str1)), String(str1))   // string 100
        
        var str2 = true
        console.log(typeof(String(str2)), String(str2))   // string true
        
        var str3 = false
        console.log(typeof(String(str3)), String(str3))   // string false
        
        var str4 = undefined
        console.log(typeof(String(str4)), String(str4))   // string undefined
        
        var str5 = null
        console.log(typeof(String(str5)), String(str5))   // string null
        

+变量.toString() 方法

     语法: 变量.toString() 
     作用：将变量的值 转为字符串类型 然后返回
     返回值: 转换后的字符串
     ! 注意: undefined和null 数据类型的变量不可以使用toStirng方法
     
        var str1 = 100
        console.log(typeof(str1.toString()), str1.toString()) // string 100

        var str2 = true
        console.log(typeof(str2.toString()), str2.toString()) // string true

        var str3 = false
        console.log(typeof(str3.toString()), str3.toString()) // string false

        var str4 = undefined
        console.log(typeof(str4.toString()), str4.toString())
        // 这里会报错, 因为 undefined 不能使用 toString

        var str5 = null
        console.log(typeof(str5.toString()), str5.toString()) 
        // 这里会报错, 因为 null 不能使用 toString
        

+加号： 变量 + ''

      语法： 变量 + '' (开发时常用的一个方法!)
      加号作用:1. 数学运算 2.字符串拼接
      var num = 1000
      var res = num + 'phone'
   // 在加号运算执行之前: 如果加号两边,有一边是字符串,则会先将另一边的值隐式转为字符串然后拼接
   // 隐式转为字符串 是通过String()方法转换的
      console.log( res )// '1000phone'
      
        var str1 = 100
        var str2 = true
        var str3 = false
        var str4 = undefined
        var str5 = null        
        console.log(typeof(str1 + ''), str1 + '')   // string 100
        console.log(typeof(str2 + ''), str2 + '')   // string true
        console.log(typeof(str3 + ''), str3 + '')   // string false
        console.log(typeof(str4 + ''), str4 + '')   // string undefined
        console.log(typeof(str5 + ''), str5 + '')   // string null
        

3. 其他数据类型转为布尔类型

+Boolean()方法

  语法：Boolean(变量)  将变量中的值转为布尔值然后返回
  返回值: 转换后的布尔值
  注意：在js中只有 1) 空字符串 2) 数值0  3) 数值NaN  4) undefined 5) null 
  这五个数据通过Boolean()方法转换后的值为false,其他别的数据转换都是true
  
   // 1. 数字转换布尔值, 只有0会转换为 false   其他的数字都会转换为 true, (非0即为真)
    var num1 = 100
    var num2 = 0
    var num3 = -1
    console.log(num1, '-->', Boolean(num1)) // 100 ---> true
    console.log(num2, '-->', Boolean(num2)) // 0 ---> false
    console.log(num3, '-->', Boolean(num3)) // -1 ---> true
    
    // 2. 字符串转换布尔值, 只有 空字符串 会转换为 false 其他的字符串都会转换为 true
    var str1 = ''
    var str2 = ' '
    var str3 = 'abc'
    var str4 = '0'
    console.log(str1, '-->', Boolean(str1)) // '' ---> false
    console.log(str2, '-->', Boolean(str2)) // ' ' ---> true
    console.log(str3, '-->', Boolean(str3)) // 'abc' ---> true
    console.log(str4, '-->', Boolean(str4)) // '0' ---> true
    
    // 3. undefined 和 null 转换为 布尔值的时候 就是 false  (重点, 以后会常用!!!)
    var und = undefined
    var nul = null
    console.log(und, '-->', Boolean(und)) // undefined ---> false
    console.log(nul, '-->', Boolean(nul)) // null ---> false

4. 运算符

1. 算术运算符

   1. + 运算符:
    1) 在js中 + 两边都是数值的时候,才是加运算       console.log(1 + 1)  // 2

    2) 两边有一边是字符串,则加号就是 字符串拼接的作用  console.log(5 + '0') //'50'
        
   2. - 运算符:
    1) 在js中 - 两边都是数值的时候,才是减运算        console.log(5 - 0)  // 5

    2) 两边出现了一个 字符串类型的'0', JS 会帮助我们将他的类型先转换为数字0 然后再运算减法
    console.log(5 - '0') // 5
    
   3. * 运算符:
    1) 在js中 * 两边都是数值的时候,才是减运算        console.log(5 * 0)  // 0

    2) 两边出现了一个 字符串类型的'0', JS 会帮助我们将他的类型先转换为数字0 然后再运算乘法
    console.log(5 * '0') // 0 
    
   4. / 运算符:
    1) 在js中 / 两边都是数值的时候,才是除运算       console.log(6 / 2)  // 3

    2) 两边出现了一个 字符串类型的'2', JS 会帮助我们将他的类型先转换为数字2 然后再运算除法
    console.log(6 / '2')    // 3 
    
   5. % 运算符:
    1) 在js中 % 两边都是数值的时候,才是除运算      
    console.log(10 % 3)  // 计算 10 / 3 的余数    余数为 1

    2) 两边出现了一个 字符串类型的'2', JS 会帮助我们将他的类型先转换为数字2 然后再运算除法
    console.log(6 % '2')       // 0
        

2. 赋值运算符

     =
     += -=  *=  /=  %=      
     例子: a = a + 10    优化后: a += 10

3. 比较运算符

返回值：比较 运算两边 的值之后, 返回一个 布尔值, 也就是返回一个true或者false

1) > 大于 < 小于 >= 大于或者等于 <= 小于或者等于
    console.log(5 < 6)  //  true
    console.log(6 < 5)  //  false
    console.log(20 >= 20)// true
    console.log(20 <= 20)// true

2) == 等等比较 
  1. 判断符号两边是否相等 且不会对比数据类型, 在JS中判断时会做隐式转换
  
  下面的了解即可：
  2. undefined 和 null 等等比较结果为true,其他任何数据和undefined或null比较都是false
  3. 数值NaN和任何数值比较都为false
  4. 如果是布尔值,则会先将布尔值转为数值,然后比较
    - 布尔值true 转为数值为1; 布尔值false 转为数值为0 
  5. 如果一边是数值,则另一边的值 隐式转会为数值然后比较
     console.log( 'leon' == 'leon' )// true
     console.log( 10 == 10 ) // true
     console.log( '10' == 10 ) // true
     console.log( '10leon' == 10 ) // false
     console.log( null == undefined ) // true
     console.log( null == 0 ) // false
     console.log( undefined == 0 ) // false
     console.log( 1 == true ) // true
     console.log( 0 == false )// true
     console.log( '10leon' == true ) //  false
     console.log( NaN == NaN ) //  false

3)  === 全等比较 
    判断符号两边是否相等 且会对比数据类型，在判断的时候不会做隐式转换
    console.log( 10 === '10' ) // false
    console.log( '10' === '10' ) // true

4) != 不等比较   
    判断符号两边是否不相等  且不会对比数据类型
    console.log( 10 != '10' ) // false
    console.log( 100 != '10' ) // true

5) !== 全不等比较
    判断符号两边是否不相等 且会对比数据类型
    console.log( 10 !== '10' ) // true
    console.log( '10' !== '101' ) // true
    console.log( '10' !== '10' ) // false

4. 逻辑运算符

  1. &&  逻辑与 
  作为条件判断的时候: 
      && 符号两边都为true的时候,最终结果才为true,只要有一边为false,最终结果就是false
      var res1 = true && true;
      var res2 = true && false;
      console.log( res1 )// true
      console.log( res2 )// false
  
  作为表达式的时候:
      && 符号如果左边转为布尔值 为false,则左边的内容就是返回值
      && 符号如果左边转为布尔值 为true,则右边的内容就是返回值
      var res1 = 0 && 100;
      var res2 = undefined && NaN;
      var res3 = 100 && null;
      var res4 = 100 && 200;
      var res5 = (100 < 20) && 200;
      console.log(res1) // 0
      console.log(res2) // undefined
      console.log(res3) // null
      console.log(res4) // 200
      console.log(res5) // false
  
  2. || 逻辑或
  作为条件判断的时候: 
      || 符号两边都为false的时候,最终结果才为false,只要又一边为true,最终结果就是true
      var res1 = false || false;
      var res2 = true || false;
      console.log( res1 )// false
      console.log( res2 )// true
      
  作为表达式的时候:
      || 符号如果左边转为布尔值 为true,则左边的内容就是返回值
      || 符号如果左边转为布尔值 为false,则右边的内容就是返回值
      var r1 = 1000 || 666;
      var r2 = 1000 || 0;
      var r3 = 0 || NaN;
      var r4 = 0 || 888;
      console.log(r1) // 1000
      console.log(r2) // 1000
      console.log(r3) // NaN
      console.log(r4) // 888
      
  3. !变量  取反 逻辑非
    返回值: 布尔值
    隐式的将变量的值转为布尔值,然后取反
      console.log( !0 ) // true
      console.log( !NaN )// true
      console.log( !'' )// true
      console.log( !undefined ) // true
      console.log( !null ) // true
      console.log( !'0' )// false

5. 自操作运算符

      自操作运算符 也叫 一元运算符
      分为两个, 分别是自增和自减
      ++    变量+1 
      --    变量-1

      自增  ++
      分为前自增和后自增
      变量++   后自增
      ++变量   前自增
      
      自操作的特点
      1. 无论前置还是后置操作,都会改变变量的值
      var n = 10;
      n++; // n = n +1
      console.log( n ) // 11
      ++n; // n = n +1
      console.log( n ) // 12
      
      2. 当后置操作 遇见赋值、运算、输出等操作的时候，先执行操作，然后再自增。
         前置增操作，则一定是先进行自增，然后才是别的操作。
         
          1) 后自增遇见 赋值 的时候
          var n = 6;
          var res = n++; // 后置增操作遇见赋值,则先将n的值赋值给res变量,然后n自增
          console.log( res ) // 6
          console.log( n ) // 7

          2) 后自增遇见 运算 的时候
          var n = 6
          var res = 1 + n++; // 后置增操作遇见运算,则先将n的值用于运算,然后n自增
          // res = 1 + 6
          // console.log( res ) // 7
          // console.log( n ) // 7

          3) 后自增遇见 输出 的时候
          var n = 6;
          console.log( n++ )//6 先输出n的值,然后n自增
          console.log( n )//7

          var k = 10
          var res = k++ + ++k + k++ + k--
          // k = 10
          // k++ + ++k + k++ + k-- ===> 10 + ++k + k++ + k-- 此时k=11
          // 10 + ++k + k++ + k--  ===> 10 + 12 + k++ + k--  此时k=12
          // 10 + 12 + k++ + k--   ===> 10 + 12 + 12 + k--   此时k=13
          // 10 + 12 + 12 + k--    ===> 10 + 12 + 12 + 13    此时k=12
          // 47
          console.log( res ) // 47
          console.log( k )// 12