JavaScript 数据类型

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

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

目录：

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 中 Object 和 Function 的关系是微妙的，他们互为对方的一个“实例”。

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)

关注公众号，了解更多it技术（it问答网）

←

→