javascript基本数据类型与值类型引用类型说明

た入场券 2021-09-10 14:48 471阅读 0赞

[林炳文Evankaka][Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][http_blog.csdn.net_evankaka]

摘要：本文主要讲了javascript中的基本数据类型，以及值类型和引用类型的区别与使用

# 一、基本数据类型 #

在javascript中申明变量使用的关键字都是var，这点与其他的编程语言不尽相同，但是javascript亦含有五种基本的数据类型（也可以说是简单数据类型），它们分别是：Undefined，Null，Boolean，Number和String。还含有一种复杂数据类型—Object。

(1)、"undefined"——未申明，或者变量的值即为undefined或者未初始化；

(2)、"boolean" ——如果这变量的值是布尔类型；  
(3)、"string" ——值是字符串类型；  
(4)、"number" ——值是数字类型；  
(5)、"object" ——对象或者值为null；  
    typeof这个关键字是一定要说的，因为javascript是松散类型的，在变量申明时并没有使用与之类型相对应的关键字，如果在代码中想要获知某个变量的基本数据量，就可以使用typeof。这里要注意的是typeof返回的是字符串类型。

(5)、"function" ——函数。

实例验证：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    function test1(){
    var testMessage;
    alert(typeof testMessage);
    }
    function test2(){
    var testMessage = null;
    alert(typeof testMessage);
    }
    function test3(){
    var testMessage = "hello";
    alert(typeof testMessage)
    }
    function test4(){
    var testMessage = 12;
    alert(typeof testMessage)
    }
    function test5(){
    var testMessage = true;
    alert(typeof testMessage)
    }
    function test6(){
    var testMessage = [];
    alert(typeof testMessage)
    }
    function test7(){
    var testMessage = [];
    alert(typeof testMessage)
    }
    function test8(){
    var testMessage = new Object();
    alert(typeof testMessage)
    }
    function test9(){
    alert(typeof test8)
    }
    </script>
    </head>
    <body>
    <button type="button" id="button1" onclick = "test1()">测试undefined</button>
    <button type="button" id="button2" onclick = "test2()">测试null</button>
    <button type="button" id="button3" onclick = "test3()">测试string</button>
    <button type="button" id="button4" onclick = "test4()">测试number</button>
    <button type="button" id="button5" onclick = "test5()">测试boolean</button>
    <button type="button" id="button6" onclick = "test6()">测试[]</button>
    <button type="button" id="button7" onclick = "test7()">测试{}</button>
    <button type="button" id="button8" onclick = "test8()">测试Object</button>
    <button type="button" id="button9" onclick = "test9()">测试function</button>
    </body>
    </html>

1、Undefined  
Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined

function test1(){
    var testMessage;
    alert(typeof testMessage);
    }

![20150917143511087][]

2、Null

Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象

function test2(){
    var testMessage = null;
    alert(typeof testMessage);
    }

![20150917143533980][]

3、string

字符串，字符串可以是引号中的任意文本。可以使用单引号或双引号：

function test3(){
    var testMessage = "hello";
    alert(typeof testMessage)
    }

![20150917144008494][]

4、number

可以是浮点数，整数

function test4(){
    var testMessage = 12;
    alert(typeof testMessage)
    }

![20150917144147319][]

5、boolean

布尔型，有两个值 true or false.

function test5(){
    var testMessage = true;
    alert(typeof testMessage)
    }

![20150917144158263][]

6、obeject：

对象与数组，还有null也是。对象和数组里都可以包含不同的类型，包括对象和数组。

![20150917144401674][]

![20150917144446388][]

![20150917144409307][]

7、function

函数类型

function test9(){
    alert(typeof test8)
    }

![20150917144620015][]

# 二、值类型与引用类型 #

（1）值类型：数值、布尔值、null、undefined

值类型指的是保存在栈内存中的简单数据段，按值访问，操作的是他们实际保存的值；

（2）引用类型：对象、数组、函数

引用类型指的是那些保存在堆内存中的对象，意思是，变量中保存的实际上只是一个指针，这个指针执行内存中的另一个位置，由该位置保存对象；引用访问，当查询时，我们需要先从栈中读取内存地址，然后再顺藤摸瓜地找到保存在堆内存中的值；

如：以下都是引用类型

var cars=   new Array;
    var person= new Object;

1、值类型实例：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    function fun1(){
    var a=1;
    var b=a;
    b=-1;
    alert("a="+a+" b="+b);
    }
    function fun2(){
    var a=new String("lin");
    var b=a;
    b = new String("bing");
    alert("a="+a+" b="+b);
    }
    function fun3(){
    var a="lin";
    var b=a;
    b = "bing";
    alert("a="+a+" b="+b);
    }
    </script>
    </head>
    <body>
    <button type="button" id="button1" onclick = "fun1()">测试值类型</button>
    <button type="button" id="button2" onclick = "fun2()">测试值类型</button>
    <button type="button" id="button1" onclick = "fun3()">测试值类型</button>
    </body>
    </html>

![20150917150900896][]

![20150917150908775][]

![20150917150916935][]

2、引用类型实例

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript">
    function fun1(){
    var a=[1,2,3];
    var b=a;
    a[0]=1000;
    alert("a="+a+" b="+b);
    }
    function fun2(){
    var a = [1,2,3];
    var b = a;
    b = [11, 12, 13];//b指向了另一个内存地址，与a断开关联
    a[0] = 2;
    alert("a="+a+" b="+b);
    }
    
    function fun3(){
        function ClassDemo(){
           this.name = "linbingwen";
           this.url = "我的博客：http://blog.csdn.net/evankaka";
        }
        var objDemo = new ClassDemo();
        var   objDemo1 = objDemo;
        var   objDemo2 = objDemo;
        objDemo1.url = "我的主页：http://my.csdn.net/Evankaka";
        alert(
        "objDemo1.url的值：\n" + objDemo1.url + "\n" +
        "objDemo2.url的值：\n" + objDemo2.url
    );
    }
    </script>
    </head>
    <body>
    <button type="button" id="button1" onclick = "fun1()">测试引用类型</button>
    <button type="button" id="button2" onclick = "fun2()">测试引用类型</button>
    <button type="button" id="button3" onclick = "fun3()">测试引用类型</button>
    </body>
    </html>

![20150917152554504][]

![20150917152600638][]

![20150917152609108][]

注意：  
undefined，null，空字符串，0都等于false，都可以通过！来取反。

[Evankaka]: http://my.csdn.net/?ref=toolbar
[http_blog.csdn.net_evankaka]: http://blog.csdn.net/evankaka
[20150917143511087]: /images/20210811/ebcad41a0fa8491da1563bbd8890af21.png
[20150917143533980]: /images/20210811/c2cf4f5da0034156a5e737da19cb701b.png
[20150917144008494]: /images/20210811/c0e917fa24f74780b63faea98e8610c0.png
[20150917144147319]: /images/20210811/4c8b90c1246a41179e08765f4225c768.png
[20150917144158263]: /images/20210811/4ca77783ffbe4169a298377309557936.png
[20150917144401674]: /images/20210811/6ba49a15cc2d403abd169db824f3552e.png
[20150917144446388]: /images/20210811/87d897c737b44c8da8642b267fb4392f.png
[20150917144409307]: /images/20210811/193418fb528046799599323258c06775.png
[20150917144620015]: /images/20210811/b98efaf2793d458f817bb86ac96bc209.png
[20150917150900896]: /images/20210811/caa0ecdc9d96468b8fdc1088ae028830.png
[20150917150908775]: /images/20210811/d2b9ee933ccd484abb2c6f7ec7683e25.png
[20150917150916935]: /images/20210811/769b6d52b2fe45a1b56e1abc7451e303.png
[20150917152554504]: /images/20210811/c9f7160707bc4ed3ad2553871c430e5a.png
[20150917152600638]: /images/20210811/78a665b33404422fb6c67c71da545fec.png
[20150917152609108]: /images/20210811/326bf9a7fd2b4a258026c2d3068e4d5c.png