1.02-js的数据类型与转换

164 阅读8分钟

1. 数据类型

   这是  (' ')空白字符串 " "之间有空格
   NaN 非数字(not a number)属性是代表非数字值的特殊值该属性用于指示某个值不是数字,如果有非数值参与计算,结果就是 NaN1.1 数字类型(number):     
   
  - 整数 : 100, -100, 234
  - 浮点数 : 100.234, -0.456  
  - 科学记数法 : 10e5
  - 其他进制表示
  - 二进制 : 0b100
  - 八进制 : 0o100
  - 十六进制 : 0x100
  - 非数字 : NaN
    
    
    
 1.2 字符串类型(string): 在 JS 中, 只要是引号包裹的内容, 统称为字符串
   字符串类型
     被引号包裹的所有内容都是字符串,这里的引号可以是单引号也可以是双引号也可以是反引号
    var str1 = 'qwer'
    var str2 = '!@#$%'
    var str3 = '10086'
    var s5=`小花今年的年龄是${s42}岁`
    var s5=`小花今年的年龄是${s42+20}岁`     
         
         
   
  1.3 布尔类型(boolean): 表明 对/错(真/假)
    布尔类型
    true  真  在计算机存储的数值是1
    false 假  在计算机存储的数值是0
     
     

   1.4 undefined类型 (undefined): 表明未定义, 通常我们不会给一个变量赋值为 undefined,因为 变量定义但不赋值就是一个 undefined
      // undefined 类型
        var und1 = undefined
      
    
    1.5 null类型(null): 表明为 空对象指针 (空), 一般很少使用, 但是如果创建了一个对象, 但是不知道对象的值是什么的时候可能会给一个 null 就是和对象联动
         // null 类型
          var nul = null
          对象:object
 
          undefined类型 与null 类型的区别
          var a1
          console.log(a1)//定义未赋值  没有值
          var a2=null
          console.log(a2)//定义赋值了,赋的值是null
          
           /*  undefined和null 都是空
              我现在嘴里吃了一个大象,你现在能看到我,我现在嘴里真没有大象,这个大象是真没有 大象是undefined
              不同点  undefined是未赋值,没有值
              酒肉穿肠过,佛祖心中留  虽然你看不见我心里的佛祖,但是我心里有,这个佛祖就是null
              不同点  null是赋值了,有值,是空值 */



     *  2. 复杂数据类型 (引用数据类型)  之一
         2-1: 函数 function
         2-2: 数组 array
         2-3: 对象 object
         2-4: 时间 date
         ...
   

数据类型检测

     *  为什么要检测类型?
     *      在 JS 中, 一个变量内部保存的值 是可以任意更改的
     *
     *      所以在使用的时候为了放置 因为数据类型不对, 导致的错误, 所以需要在使用前 检测一下数据的类型


      
     
   /**
     *  判断数据类型
     *      
     *      1. typeof
     *          缺点: 引用数据类型判断的时候不太准确
                它会将 null 识别为 object 类型
     * 
     * 
     *       var box = '我是一个字符串类型的数据'
             console.log(typeof(box))
             console.log(typeof box)

            var num = 10086
             console.log(typeof(num))
             console.log(typeof num)

             console.log(typeof('我是一个字符串类型的数据'))
             console.log(typeof (true))
             console.log(typeof (undefined))
     * 
     * 
     *      2. constructor
     *          语法: 数据.constructor === 构造函数
     *              我们可以通过 对比他等于那个构造函数, 然后确认他是那个数据类型
     * 
     *          缺点: undefined 和 null 不能使用
     *                  constructor 其实就是一个对象内部的一个属性, 是有可能被修改的
     * 
     *      3. instanceof
     *          语法: 数据 instanceof 构造函数
     *          
     *          缺点:   undefined 和 null 不能使用
     *                  引用数据类型, 有可能会被识别对 对象类型
     * 
     * 
     *      4. Object.prototype.toString.call(要判断数据类型的数据)
     *          能够判断 JS 中 所有的 数据类型
    */

    console.log(Object)  // 一个内置的构造函数
    console.log(Object.prototype)    // 构造函数的原型对象
    console.log(Object.prototype.toString)   // 原型对象中的一个属性, 值是一个函数
    console.log(Object.prototype.toString.call([]))  // 调用了 函数的 call 这个方法, 修改了 前边函数内部的 this


    console.log(Object.prototype.toString.call([]))
    console.log(Object.prototype.toString.call({}))
    console.log(Object.prototype.toString.call(100))
    console.log(Object.prototype.toString.call('100'))
    console.log(Object.prototype.toString.call(undefined))
    console.log(Object.prototype.toString.call(null))   
    console.log(Object.prototype.toString.call(function () { }))
    console.log(Object.prototype.toString.call(true))
    console.log(Object.prototype.toString.call(/\d/))

isNaN()
      可以使用 isNaN 这个方法来判断一个变量是不是一个合法的数字  
      var a1='你好'//转换成NaN
      var a2=123
      var a3='123'
      // a1不是一个数字,所以isNaN的检测结果是true
      // isNaN 检测当前的变量是  不是一个数字
      // 如果不是一个数字,返回结果是true
      // 如果是一个数字,返回结果是false
      console.log(isNaN(a1))//true
      console.log(isNaN(a2))//false
      console.log(isNaN(a3))//false  这里中间把字符串123转换成了数字123

数据类型转换 转数值

     *      JS 转换的时候 任意类型都能够转换为数字使用, 主要是字符串转数字
     * 
     * 
     *      1. 借助一个 转型函数 Number(数据)
               转型函数Number()可以用于任何数据类型,将其他数据类型转为数字
     * 
     *      2. parseInt(数据)
     *      3. parseFloat(数据) 
     * 
     *      4. 开发中很有效的方式(转为数字类型)
     *          变量/数据 - 0(可以保留小数部分)
            var box = '10086.233'
            console.log(box)
            console.log(box - 0)
            console.log(typeof(box - 0))
    
    // 1. Number
            var box = '10086'
            console.log('box 原本的数据类型', typeof(box), box)
            var newBox = Number(box)
            console.log('box 通过转型函数转换后的值', typeof(newBox), newBox)

      //数值用方法转其他类型时
     // 1.1 字符串:纯数字字符串转为对应数字,空字符串和空白字符串转为0,非空非纯数字字符串转为NaN
         console.log(Number('')) // 空字符串 --- 0
         console.log(Number(' ')) // 空白字符串 --- 0
         console.log(Number('qwertyui')) // 没有数字的字符串 --- NaN 此时已经将这个字符串转换为数字类型了, 但是没有一个合适的数字能够表达他, 所以使用一个统一的 NaN
         console.log(Number("123456789.233"))    // 只有数字的字符串 --- 123456789.233 直接转换成数字了    

    
           // 1.2 布尔值:true转为1,false转为0
           console.log(Number(true))    // 1
           console.log(Number(false))   // 0

            // 1.3 undefined:转为NaN, null:转为0
            console.log(Number(undefined))   // NaN
            console.log(Number(null))    // 0

           //1.4 对象转换为数值就是NaN
             var a={a:1,b:2};
             a=Number(a);
             console.log(a);

    // 2. parseInt:字符串转整数方法
            // 2.1 parseInt 如果传递的是一个数字, 那么会忽略小数点以后的所有内容
             console.log(parseInt(100))
             console.log(parseInt(100.666))

            // 2.2 如果不是数字打头的字符串,会转换为NaN
            console.log(parseInt(''))   // 空字符串 --- NaN
            console.log(parseInt(' '))   // 空白字符串 --- NaN

            console.log(parseInt('!@#$%^&'))   // 非空非空白字符串 --- NaN
            console.log(parseInt('qwerty'))   // 非空非空白字符串 --- NaN
            console.log(parseInt('qwerty10086'))   // 非空非空白字符串 --- NaN

           // 2.3 字符串中,必须是纯数字字符串或者数字字符开头的字符串,才能转换为正常数字,且只取整数部分
             console.log(parseInt('10086qwerty'))   // 字符串中开头为数字, 那么直接保留数字并忽略数字以后的所有内容 --- 10086
             console.log(parseInt('10086qwe999rty'))   // 字符串中开头为数字, 那么直接保留数字并忽略数字以后的所有内容 --- 10086
             console.log(parseInt('100'))   // 直接将字符串中的数字转为 数字类型
             console.log(parseInt('100.10086'))   // 直接将字符串中的数字转为 数字类型并取整数部分

   
   
   parseFloat:符串转浮点数方法
          console.log(parseFloat(255))   整数
          console.log(parseFloat(255.233)) 带小数
          console.log(parseFloat('22.22')) 带小数
          console.log(parseFloat('22'))   整数
          console.log(parseFloat(''))  NaN
          console.log(parseFloat(' ')) NaN
          console.log(parseFloat('ssvsv'))NaN
          console.log(parseFloat('2.5bfb')) 显示小数2.5
          console.log(parseFloat('bfb2.22')) NaN

   

转布尔类型

     空字符  0  false  NaN null undefined '' 这六个转换为布尔值都是false
     除此以外转换后都是true
         一般开发的时候不会主动的转换布尔类型
          一般是隐式转换, 也就是由 JS 帮我们完成了数据的转换, 一般做判断的时候比较常见
     
           1. 借助一个转型函数 Boolean(变量/数据)
     
           2. !!变量/数据
              一个! 表示得到这个数据取反后的布尔值
                console.log(!undefined) // true
                console.log(!!undefined)// false
                console.log(!0)(这里变为了真)
   

    // 数字转布尔值 非0即为真
     console.log(Boolean(0))
     console.log(Boolean(1))
     console.log(Boolean(-1))
     console.log(Boolean(100))
     console.log(Boolean(-10000))
     console.log(Boolean(1.567))

    // 字符串转布尔值 只有空字符串会转为 false
     console.log(Boolean(''))就是他(falseconsole.log(Boolean(' '))
     console.log(Boolean('1234567'))
     console.log(Boolean('!@#$'))
     console.log(Boolean('qwerts'))
     console.log(Boolean('你好!@#$%qwert12345'))

    // undefined 和 null
     console.log(Boolean(undefined)) // false
     console.log(Boolean(null)) // false

转字符串类型

     *      1. 变量/数据.toString()
     *              问题: undefinednull 不能使用
     * 
     *      2. String(变量/数据)
     *          什么类型都能转换为 字符串
     * 
     *      3.  变量/数据 + ''
     *              原理讲到 运算符的时候再说
    */

// 1. 变量/数据.toString()
     var box = 100
    console.log('box 原本的值: ', typeof (box), box)
    console.log('box 转换数据类型后: ', typeof (box.toString()), box.toString())

    // 布尔值的转换
     console.log(typeof(true), typeof(true.toString()))
     console.log(true, true.toString())
    //  false 的转换
     console.log(typeof(false),typeof(false.toString()))
    


    // undefined 不能使用 toString 去转换
    console.log(undefined.toString())
    var und = undefined
     console.log(und)
    console.log(und.toString())

    // null 也不能通过 toString 转换
     console.log(null.toString())


   // 2. String(变量/数据)
        var o={a:1,b:2};
        var o={a:10,b:20};
        o=String(o);
        console.log(o);//[object Object];
        任何对象,不管里面什么属性,什么值,在使用String强制转换为字符串以后都会变成 "[object Object]" 字符串
        
     console.log(typeof(undefined), typeof(String(undefined)))
     console.log(typeof(null), typeof(String(null)))

     console.log(typeof(String(100)))
     console.log(typeof(String(true)))
     console.log(typeof(undefined) ,typeof(String(undefined)))


     console.log(typeof(String(true)))
     var sd = 100;
     console.log(sd.toString());  
     
     
     

     toString()在括号外面,注意要用变量而不是值;
     console.log(true. toString());     // // String(在括号里面写)
     console.log(String(sd));
     console.log(typeof(String(undefined)));


  // 3.  变量/数据 + ''  变为字符串方法
    console.log(typeof(undefined), typeof(undefined + ''))
    console.log(typeof(null), typeof(null + ''))
    console.log(typeof(undefined),typeof(undefined + ''))
      打出来是个对象:object
     console.log(typeof(null),typeof(null + ''))
     console.log(typeof(true),typeof(true + ''))
     var sd = 100;
     console.log(sd)  直接用数字也行
     console.log(233.23 + '')
     console.log(typeof(sd),typeof(sd + ''))
     console.log(undefined + '')
     
  //4   toFixed(fractionDigits)  保留几位小数,并且四舍五入转换为字符串 
     var a=3.456;
     a=a.toFixed(fractionDigits) //fractionDigits 小数点后位数
     a=a.toFixed(2);//保留两位小数,四舍五入
     console.log(a);

js运算符

    /*
     *   也叫 操作符, 是 JS 中 发起一个运算的最简单的方式
     * 
     *  算数运算符
     *      +   -  *  /  %                  **(幂)
     *      加  减 乘 除 取余(写相除的余数)
             注意/的得数没有余,可以是带小数
     * 
     *  运算符本身就是给 数字类型使用的
    */

             -  *  /   %  **  都是按照算术运算符计算,如果符号两端的值不是数值类型,将会自动转换为数值并且计算
            这种自动转换类型我们叫做隐式转换

            console.log("10"/2);//5
            console.log("5"*true);//5*1
            console.log(10*null);//0
            

            var a;
            console.log(a*3);//NaN*3  NaN NaN与任何数值计算时都等于NaN

    /**
     *  + 就是将 符号左右两边的值, 相加 得到一个新的值
     *      这个也叫做表达式, 表达式就是会计算出一个值, 然后参与周围程序的运行
     * 
     * 
     *  注意: + 一般是给数字使用的, 但是如果 符号的任意一边有字符串类型的, 那么不在计算求和, 而是计算一个拼接(加号里才有)
     *      并且拼接后的值是字符串类型的
     * 
     *      这也是为什么 一个数据 + ''      能够转换为 字符串类型
    */
     console.log(1 + 1)   结果为2
     console.log(undefined + null)  NaN
     console.log(1 + '1')  结果是11

插入字符串   
    var div1=document.getElementById("div1");
    
    var a=1;
    var b=2;
    var c=3;
    div1.innerHTML="<ul><li>"+a+"</li><li>"+b+"</li><li>"+c+"</li></ul>"
    字符串插入变量,在要插入的部分输入一对双引号,双引号中两个+号,然后再两个加号之间输入
    变量
    

    // console.log("a"+{});"a[object Object]"

    // 2、加法运算中,不包含字符串,但是包含布尔值,将布尔值转换为数值运算
    // console.log(3+true)


    // 3、加法运算中,不包含字符串,但是有undefined,将undefined转换为数值运算
    // console.log(3+undefined);

    // 4、加法运算中,不包含字符串,但是有null,将null转换为数值运算
    // console.log(3+null);

    // 5、加法运算中,不包含字符串,但是有对象,将对象转换为字符串运算
    // console.log({}+{});
    // console.log({}+3)


    // console.log(true+{});//"true[object Object]"

    // console.log(true+true);//2

    // console.log(undefined+null);//NaN

    /**
     *  - 就是将 符号两边的值 相减 得到一个新的值
     * 
     *      运算的时候, 如果符号两边有字符串. 那么 JS 会将 字符串转换为 数字 然后参与运算
     * 
     *      这也是为什么 数据 - 0 能够转换为 number 类型
    */
     console.log(100 - 50)
     console.log('100' - 50)

    
    
    

赋值运算符

           /**
             *      =   赋值号
             * 
             *      +=  当要给一个变量重新赋值, 赋值为他本身加一个内容, 就可以使用 +=
            */

            // +=
            var a = 100
            // a = a + 500
            a += 500
            console.log(a)


            // -=
            var b = 100
            // b = b - 50
            b -= 50
            console.log(b)

            // *=
            var c = 10
            // c = c * 10
            c *= 10
            console.log(c)

            // /=
            var d = 9
            d /= 3
            console.log(d)

            // %=
            var q = 9
            q %= 4
            console.log(q)

      

比较运算符

     *      大于            >
     *      小于            <
     *      大于等于        >=
     *      小于等于        <=
     *
     *      等于  
     *       == 比较是否相等   先把等号两端值转换为相同的类型,然后再比较是否相等
             === 比较是否绝对相等  先比较等号两端类型是否相等,如果相等,在比较值是否相等
     *                  一定要注意, 等于 最少要两个 ==          千万不要写成 =
     *
     *      不等于
     *          !=      对比两边是否不相等, 不会区分数据类型
     *          !==     对比两边是否不相等, 区分数据类型            推荐写 !==
    

             console.log(100 > 99)   // true
             console.log(100 < 99)   // false
             console.log(100 < 100)   // false
             console.log(100 > 100)   // false
             console.log(100 >= 100)   // true


             console.log(1 == 1) // true
             console.log(1 === 1)    // true

             console.log(1 == '1') // true
             console.log(1 === '1')  // false


            console.log(100 != 100)
            console.log(100 != 99)

            console.log(100 !== 100)
            console.log(100 !== '100')  // 因为区分数据类型, 所以 条件成立, 返回 true
            console.log(100 != '100')   // 不区分类型, 条件不成立, 返回 false

           // 0  ""  false  使用==比较时相同
             console.log(0==false);
             console.log(0=="");
             console.log(false=="");


            // undefined和null 使用==比较时相同
             console.log(undefined==null);


            // 任何数与NaN都是不相同的,包括NaN自己
             console.log(NaN==NaN);
             
     // isNaN和Number.isNaN  isNaN会自动将里面的值转换为数值后再判断是否是NaN,而Number.isNaN直接判断里面的值是不是NaN
          var a="a";
          // 如果将a转换为数值后,是不是NaN
          var b=isNaN(a);
          console.log(b);// true 表示变量a是NaN

           var a="A";
           a=Number(a);
           var b=Number.isNaN(a);
           console.log(b) // true 表示变量a是NaN


         // 判断两个值是否绝对相等 等同于===
            console.log( Object.is(3,3))// true

             var a=3;
             var b=3;
             console.log(Object.is(a,b));//true

             var a="a";
             a=Number(a);
             var b=Object.is(a,NaN);
             console.log(b); // true

> >= < <=

    错误就是false  正确就是true
    console.log(a>b);

    var c=a>b;
    console.log(c);

    console.log(a>=b)

    console.log(a<b);
    console.log(a<=b);


    


    字符串比较,先转换为unicode编码,然后比较编码值
    var a="a";
    var b="b";

    console.log(a>b);
    console.log(a<b);


    如果第一个字符的编码相同,则比较第二个字符的编码
    var a="ab";
    var b="ac";
    console.log(b<a);



    优先转换为数值,然后比较   NaN和任何值都无法比较 无论怎么比都是false
    var a=undefined;
    var b=null;
    console.log(a>b); //false
    console.log(a<b); //false


    var a=10;
    var b=null;
    var c;
    console.log(a>b);
    console.log(a>c);


    如果对象和某个值比较,另一个值是字符串,对象转换为"[object Object]" 然后比较。
    如果另一个是数值,则对象转为数值NaN
    var a="[";
    var b={};//"[object Object]"
    console.log(a>b);
    console.log(a<b);



    var o={a:4};
    var b=5;
    var b="5";
    NaN>5  NaN<5   false
    "[object Object]">"5" 
   
    

课下小练习

  // 作业一
    var num = 3 - '36' % 5 + '2' - 2 
    console.log(num)
    // 先乘除后加减,从左到右加减
    // 先36除5取余数1,在从左到右加减,3减1等于2,2与'2'拼接为22,最后减去2等于20.
    // 作业2
    var abc = 123.456789
     *  
     *  需求:
     *      书写一段代码, 让 abc 保留两位小数, 值为 123.45
 1.        var abc = 123.456789                      
           bbc = 123.45
           abc = bbc
           console.log(abc)