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

た 入场券 2021-09-10 14:48 603阅读 0赞
  1. [林炳文Evankaka][Evankaka]原创作品。转载请注明出处[http://blog.csdn.net/evankaka][http_blog.csdn.net_evankaka]
  2. 摘要:本文主要讲了javascript中的基本数据类型,以及值类型和引用类型的区别与使用

一、基本数据类型

  1. javascript中申明变量使用的关键字都是var,这点与其他的编程语言不尽相同,但是javascript亦含有五种基本的数据类型(也可以说是简单数据类型),它们分别是:UndefinedNullBooleanNumberString。还含有一种复杂数据类型—Object

(1)、”undefined”——未申明,或者变量的值即为undefined或者未初始化;

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

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

实例验证:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <script type="text/javascript">
  5. function test1(){
  6. var testMessage;
  7. alert(typeof testMessage);
  8. }
  9. function test2(){
  10. var testMessage = null;
  11. alert(typeof testMessage);
  12. }
  13. function test3(){
  14. var testMessage = "hello";
  15. alert(typeof testMessage)
  16. }
  17. function test4(){
  18. var testMessage = 12;
  19. alert(typeof testMessage)
  20. }
  21. function test5(){
  22. var testMessage = true;
  23. alert(typeof testMessage)
  24. }
  25. function test6(){
  26. var testMessage = [];
  27. alert(typeof testMessage)
  28. }
  29. function test7(){
  30. var testMessage = [];
  31. alert(typeof testMessage)
  32. }
  33. function test8(){
  34. var testMessage = new Object();
  35. alert(typeof testMessage)
  36. }
  37. function test9(){
  38. alert(typeof test8)
  39. }
  40. </script>
  41. </head>
  42. <body>
  43. <button type="button" id="button1" onclick = "test1()">测试undefined</button>
  44. <button type="button" id="button2" onclick = "test2()">测试null</button>
  45. <button type="button" id="button3" onclick = "test3()">测试string</button>
  46. <button type="button" id="button4" onclick = "test4()">测试number</button>
  47. <button type="button" id="button5" onclick = "test5()">测试boolean</button>
  48. <button type="button" id="button6" onclick = "test6()">测试[]</button>
  49. <button type="button" id="button7" onclick = "test7()">测试{}</button>
  50. <button type="button" id="button8" onclick = "test8()">测试Object</button>
  51. <button type="button" id="button9" onclick = "test9()">测试function</button>
  52. </body>
  53. </html>

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

  1. function test1(){
  2. var testMessage;
  3. alert(typeof testMessage);
  4. }

20150917143511087

2、Null

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

  1. function test2(){
  2. var testMessage = null;
  3. alert(typeof testMessage);
  4. }

20150917143533980

3、string

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

  1. function test3(){
  2. var testMessage = "hello";
  3. alert(typeof testMessage)
  4. }

20150917144008494

4、number

可以是浮点数,整数

  1. function test4(){
  2. var testMessage = 12;
  3. alert(typeof testMessage)
  4. }

20150917144147319

5、boolean

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

  1. function test5(){
  2. var testMessage = true;
  3. alert(typeof testMessage)
  4. }

20150917144158263

6、obeject:

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

  1. function test6(){
  2. var testMessage = [];
  3. alert(typeof testMessage)
  4. }
  5. function test7(){
  6. var testMessage = [];
  7. alert(typeof testMessage)
  8. }
  9. function test8(){
  10. var testMessage = new Object();
  11. alert(typeof testMessage)
  12. }

20150917144401674

20150917144446388

20150917144409307

7、function

函数类型

  1. function test9(){
  2. alert(typeof test8)
  3. }

20150917144620015

二、值类型与引用类型

(1)值类型:数值、布尔值、null、undefined

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

(2)引用类型:对象、数组、函数

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

如:以下都是引用类型

  1. var cars= new Array;
  2. var person= new Object;

1、值类型实例:

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <script type="text/javascript">
  5. function fun1(){
  6. var a=1;
  7. var b=a;
  8. b=-1;
  9. alert("a="+a+" b="+b);
  10. }
  11. function fun2(){
  12. var a=new String("lin");
  13. var b=a;
  14. b = new String("bing");
  15. alert("a="+a+" b="+b);
  16. }
  17. function fun3(){
  18. var a="lin";
  19. var b=a;
  20. b = "bing";
  21. alert("a="+a+" b="+b);
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <button type="button" id="button1" onclick = "fun1()">测试值类型</button>
  27. <button type="button" id="button2" onclick = "fun2()">测试值类型</button>
  28. <button type="button" id="button1" onclick = "fun3()">测试值类型</button>
  29. </body>
  30. </html>

20150917150900896

20150917150908775

20150917150916935

2、引用类型实例

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <script type="text/javascript">
  5. function fun1(){
  6. var a=[1,2,3];
  7. var b=a;
  8. a[0]=1000;
  9. alert("a="+a+" b="+b);
  10. }
  11. function fun2(){
  12. var a = [1,2,3];
  13. var b = a;
  14. b = [11, 12, 13];//b指向了另一个内存地址,与a断开关联
  15. a[0] = 2;
  16. alert("a="+a+" b="+b);
  17. }
  18. function fun3(){
  19. function ClassDemo(){
  20. this.name = "linbingwen";
  21. this.url = "我的博客:http://blog.csdn.net/evankaka";
  22. }
  23. var objDemo = new ClassDemo();
  24. var objDemo1 = objDemo;
  25. var objDemo2 = objDemo;
  26. objDemo1.url = "我的主页:http://my.csdn.net/Evankaka";
  27. alert(
  28. "objDemo1.url的值:\n" + objDemo1.url + "\n" +
  29. "objDemo2.url的值:\n" + objDemo2.url
  30. );
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <button type="button" id="button1" onclick = "fun1()">测试引用类型</button>
  36. <button type="button" id="button2" onclick = "fun2()">测试引用类型</button>
  37. <button type="button" id="button3" onclick = "fun3()">测试引用类型</button>
  38. </body>
  39. </html>

20150917152554504

20150917152600638

20150917152609108

注意:
undefined,null,空字符串,0都等于false,都可以通过!来取反。

发表评论

表情:
评论列表 (有 0 条评论,603人围观)

还没有评论,来说两句吧...

相关阅读