JavaScript 数据类型

2021-05-06 08:18:05 更新

B站关联视频教程:https://www.bilibili.com/video/BV1RA41137yd?p=5

目录:

一、数据类型分类

    1、数据类型查看 【typeof】

    2、7种数据类型:1、字符串(string),2、数字(number),3、布尔(boolean),4、空(null),5、未定义(undefined),6、对象(object)【子类:数组(array),函数(function)】,7、symbol。

二、数据0 "" false  null undefined

1、!五个值都是true
2、0 "" false == 相等;和  undefined null 分别不等
3、null == undefined 为true;null === undefined 为false

三、数据类型转换

常用转换函数:Number() 转换为数字, String() 转换为字符串, Boolean() 转换为布尔值。


内容:

一、数据类型分类

1)数据类型查看 【typeof】

你可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。

typeof "John"       // 返回 string
typeof 3.14        // 返回 number
typeof NaN        // 返回 number
typeof false       // 返回 boolean
typeof [1,2,3,4]    // 返回 object
typeof {name:'John', age:34}  // 返回 object
typeof new Date()         // 返回 object
typeof function () {}      // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null            // 返回 object
<script>
    t=typeof [1,2,3,4];
    //t=typeof([1,2,3,4]);//()起来更严谨些   
    document.write(t);// 返回 object
</script>

注意:任何时候都不建议显式的设置一个变量为undefined,但是如果保存对象的变量还没有真正保存对象,应该设置成null。



2)7种数据类型:1、字符串(string),2、数字(number),3、布尔(boolean),4、空(null),5、未定义(undefined),6、对象(object)【子类:数组(array),函数(function)】,7、symbol。

注意:JavaScript 拥有动态类型

//JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:
var x;     // x 为 undefined
var x = 5;  // 现在 x 为数字
var x = "itwenda.com";// 现在 x 为字符串

js 中 ObjectFunction 的关系是微妙的,他们互为对方的一个“实例”。


1、字符串(string)

    <script>
        t="www.itwenda.com";
        document.write(typeof t);// 返回 string
    </script>

2、数字(number)

    <script>
        t=666;
        document.write(typeof t);// 返回 number
    </script>

3、布尔(boolean)

    <script>
        t=true;//注意:是小写的true 或 false
        document.write(typeof t);// 返回 boolean
    </script>

4、空(null)

    <script>
        t=null;//注意:是小写的 null
        document.write(typeof t);// 返回 object
    </script>

null其实并不是一个对象,尽管typeof null 输出的是object,但是这其实是一个bug。在js最初的版本中使用的是32位系统,为了性能考虑地位存储变量的类型信息,000开头表示为对象类型,然而null为全0,故而null被判断为对象类型。

5、未定义(undefined)

    <script>
        document.write(typeof t);// 返回 undefined
    </script>

6、对象(object)【子类:数组(array),函数(function)】

    <script>
        t=function(){document.write('11');};
        document.write(typeof t);// 返回 function
        document.write("<br/>");
        
        a=new Array;
        document.write(typeof a);// 返回 object
    </script>

7、Symbol

ES6中,新增了一种数据类型Symbol,现在共7种数据类型。

ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。

ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。

symbol 是一种基本数据类型 (primitive data type)。Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方法。它的静态属性会暴露几个内建的成员对象;它的静态方法会暴露全局的symbol注册,且类似于内建对象类,但作为构造函数来说它并不完整,因为它不支持语法:"new Symbol()"

每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符;这是该数据类型仅有的目的。

Symbol 生成一个全局唯一的值。Symbol 的名字与值无关:

    <script>
    var a1 = Symbol('a');
    var a2 = Symbol('a');
    if(a1 != a2){
        document.write('true');
    }else{
        document.write('false');
    } 
    // true
    </script>

应用场景概述:

    <script>
    var race = {
      protoss: 'protoss', // 神族
      terran: 'terran', // 人族
      zerg: 'zerg' // 虫族
    }
    function createRole(type){
        if(type === race.protoss){
            document.write("创建神族角色");
            
        }  else if(type === race.terran){
            document.write("创建人族角色");
            
        }  else if(type === race.zerg){
             document.write("创建虫族角色");
        }
    }
    
    // 传入字符串
    createRole('zerg');
    // 或者传入变量
    createRole(race.zerg);
    // 一般传入字符串被认为是不好的做法,所以使用 createRole(race.zerg) 的更多。
    // 如果使用 createRole(race.zerg),那么聪明的读者会发现一个问题:race.protoss、race.terran、race.zerg 的值为多少并不重要。

    </script>

一般传入字符串被认为是不好的做法,所以使用 createRole(race.zerg) 的更多。
 如果使用 createRole(race.zerg),那么聪明的读者会发现一个问题:race.protoss、race.terran、race.zerg 的值为多少并不重要。

Symbol优化如下:

<script>
    var race = {
      protoss: Symbol(), // 神族
      terran: Symbol(), // 人族
      zerg: Symbol() // 虫族
    }
    function createRole(type){
        if(type === race.protoss){
            document.write("创建神族角色");
            
        }  else if(type === race.terran){
            document.write("创建人族角色");
            
        }  else if(type === race.zerg){
             document.write("创建虫族角色");
        }
    }
    
    // 传入字符串
    createRole('zerg');//没执行。
    // 或者传入变量
    createRole(race.zerg);//正常执行
    
</script>


二、数据0 "" false  null undefined

5个值数据类型如下:

<script>
    document.write(typeof(undefined));//undefined
    document.write("<br/>");
    //虽然null的类型是object,但是null不具有任何对象的特性,就是说我们并不能执行null.toString()
    document.write(typeof(null));//object 
    document.write("<br/>");
    document.write(typeof(false));//boolean
    document.write("<br/>");
    document.write(typeof(""));//string
    document.write("<br/>");
    document.write(typeof(0));//number
</script>

这五个值的共同

if语句中做判断,都会执行false分支。当然从广义上来看,是说明这些数值都是其对应数据类型上的无效值或空值。还有这五个值作!运算,结果全为:true。

<script>
    document.write(!0); //true
    document.write("<br>");
    document.write(!false); //true
    document.write("<br>");
    document.write(!undefined); //true
    document.write("<br>");
    document.write(!null); //true
    document.write("<br>");
    document.write(!''); //true
    document.write("<br>");
    document.write("<br>");
</script>


这五个值的不同点:

1、这几个值中也有不同,其中undefined和null比较特殊,虽然null的类型是object,但是null不具有任何对象的特性,就是说我们并不能执行null.toString()等对象实例的默认调用。所以从这个意义上来说,null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。不过相似归相似,还是有区别的,就是和数字运算时,10 + null结果为:10;10 + undefined结果为:NaN。

<script>
   document.write(null == undefined); //true
   document.write("<br/>");
   document.write(null === undefined); //false
   document.write("<br/>");
   document.write(10 +null); //10
   document.write("<br/>");
   document.write(10 + undefined);//NaN
</script>

NaN在javascript中表示“非法数值”,但仍然是数值类型,typeof(a)返回number
undefined在javascript中表示“未定义”,将它强制转换成数值会返回NaN所以undefined + 1也会返回NaN

<script>
    document.write(Number(undefined));//undefined
    document.write("<br/>");
    document.write(Number(null));//0
    document.write("<br/>");
    document.write(Number(false));//0
    document.write("<br/>");
    document.write(Number(""));//0
    document.write("<br/>");
    document.write(Number(0));//0
</script>

2、另外""、0和false虽然在if语句表现为"假值",可它们都是有意义数据,只是被作为了"空值"或"假值",因为:"".toString(),(0).toString()和false.toString()都是合法的可执行表达式。

    <script>
         document.write((0).toString());//0
         document.write(false.toString());//false
         document.write("".toString());//
    </script>


3、需要注意区分的是这些值在转换为String时的差异是比较大的,它们到String的转换关系是:

<script>

    document.write(String(undefined));//undefined
    document.write("<br/>");
    
    document.write(String(null));//null
    document.write("<br/>");
        
    document.write(String(""));
    document.write("<br/>");
        
    document.write(String(0));//0
    document.write("<br/>");
     
    document.write(String(false));//false
</script>

 这个转换关系在做字符串累加时需要特别的注意,否则这会出些意想不到的问题。

0 "" false  null undefined总结:

1、!五个值都是true

2、0 "" false == 相等;和  undefined null 分别不等

3、null == undefined 为true;null === undefined 为false

<script>      
    //!五个值都是true
    document.write(!0); //true
    document.write("<br>");
    document.write(!false); //true
    document.write("<br>");
    document.write(!undefined); //true
    document.write("<br>");
    document.write(!null); //true
    document.write("<br>");
    document.write(!''); //true
    document.write("<br>");
    document.write("<br>");
    
    //0 "" false == 相等;和  undefined null 分别不等
        document.write(0 == ''); //true
        document.write("<br>");
        document.write(0 == false); //true
        document.write("<br>");
        document.write(false == ''); //true
        document.write("<br>");
        document.write(null == undefined); //true
        document.write("<br>");
        document.write("<br>");
    
    //0,"",false 和  undefined null 分别不等。
    document.write(0 == undefined); //false
    document.write("<br>");
    document.write(0 == null); //false
    document.write("<br>");
    document.write(false == null); //false
    document.write("<br>");
    document.write(false == undefined);//false
    document.write("<br>");
    document.write('' == null); //false
    document.write("<br>");
    document.write('' == undefined); //false
</script>


三、数据类型转换

常用转换函数:Number() 转换为数字, String() 转换为字符串, Boolean() 转换为布尔值。

<script>
    t=typeof '3';
    document.write(t);//string
    t=Number(t);
    document.write("<br/>"+t);//NaN 非数字转化为number类型便是NaN
    t=3.3;
    document.write("<br/>"+typeof t);//number
    
    t=parseInt(3.3);
    document.write("<br/>"+typeof t+":"+t);//number:3
    
    t=parseFloat(3.3);
    document.write("<br/>"+typeof t+":"+t);//number:3.3
    
    t=3;
    document.write("<br/>"+typeof t+":"+t);//number:3
    t=String(t);
    document.write("<br/>"+typeof t+":"+t);//string:3
    
    
    t=Boolean(t);
    document.write("<br/>"+typeof t+":"+t);//boolean:true
</script>

NaN的数据类型就是数字,就是number;他是一个特殊的number。因为在js中数据类型之间都是可以相互转化的,这方便了其他数据类型转化为number(非数字转化为number类型便是NaN)