Blogger Information
Blog 26
fans 0
comment 2
visits 35113
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
数据类型的用法实践(0225)
小辰
Original
1164 people have browsed it

1.数据类型的检测

效果图

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>数据类型检测</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <li>1.将视频中的所有测试全部在控制台操作一遍</li>
  9. <li>2. 对于常见的数据类型反复操作</li>
  10. <li>3. 将你对字符串,对象,null,undefined的理解,写到博客中</li>
  11. <script>
  12. //数据类型检测
  13. //检测null
  14. var q = null;
  15. console.log(typeof q);
  16. if (typeof q !== 'undefined' && !q) {
  17. console.log('q 是 null 类型');
  18. }
  19. //检测数组
  20. var a =[1,2,3,4];
  21. console.log(typeof a);
  22. //这种方法检测的返回值都为true
  23. console.log(a instanceof Array);
  24. console.log(a instanceof Object);
  25. //这才是正确的检测方法
  26. console.log(Array.isArray(a));
  27. </script>
  28. </body>
  29. </html>

2.数值类型

效果图

对于值加减特殊实例

取值范围

数值表示法

对于NaN的应用

parseInt(): 将字符串转为整数

字符串定界符: 引号,单/双引号

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>数值类型</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <!-- //对于值加减特殊实例
  9. 15 === 15
  10. true
  11. 13.000=== 13
  12. true
  13. 0.2+0.3
  14. 0.5
  15. 0.1+0.2
  16. 0.30000000000000004
  17. 0.1+0.2===0.3
  18. false
  19. 0.3-0.2
  20. 0.09999999999999998
  21. 0.3-0.2===0.1
  22. false -->
  23. <!-- //取值范围
  24. Math.pow(3,1024)
  25. Infinity
  26. Math.pow(3,1024)-1
  27. Infinity
  28. Math.pow(3,1023)
  29. Infinity
  30. Math.pow(3,-1023)
  31. 0
  32. -1023+-33
  33. -1056
  34. Number.MAX_VALUE
  35. 1.7976931348623157e+308
  36. Number.MAX_SAFE_INTEGER
  37. 9007199254740991
  38. Number.MIN_VALUE
  39. 5e-324 -->
  40. <!-- //数值表示法
  41. 0x8a
  42. 138
  43. 11e3
  44. 11000
  45. 11e-3
  46. 0.011
  47. 5e-11
  48. 5e-11
  49. 12345678901
  50. 12345678901
  51. 1234567890112345678901
  52. 1.2345678901123458e+21
  53. 0.000002
  54. 0.000002
  55. 0.0000022
  56. 0.0000022
  57. 0.0000002
  58. 2e-7 -->
  59. <!-- //对于NaN的应用
  60. NaN
  61. NaN
  62. 10*55
  63. 550
  64. 10*'a'
  65. NaN
  66. 10*'55
  67. SyntaxError: '' string literal contains an unescaped line break debugger eval code:1:6
  68. 10*'55'
  69. 550
  70. Math.log(-2)
  71. NaN
  72. Math.sqrt(-4)
  73. NaN
  74. typeof NaN
  75. "number"
  76. NaN===11
  77. false
  78. NaN==='11'
  79. false
  80. NaN==='number'
  81. false
  82. NaN===Object
  83. false
  84. NaN===NaN
  85. false
  86. NaN ? true : false
  87. false
  88. 20+NaN
  89. NaN
  90. 2*NaN
  91. NaN
  92. 'HELLO'-NaN
  93. NaN
  94. 'HELLO'+NaN
  95. "HELLONaN" -->
  96. <!-- //parseInt(): 将字符串转为整数
  97. ​parseInt('350')
  98. 350
  99. parseInt(' 350 ')
  100. 350
  101. parseInt(33)
  102. 33
  103. parseInt(33.33)
  104. 33
  105. parseInt('350px')
  106. 350
  107. parseInt('350.111px')
  108. 350
  109. parseInt('35e2')
  110. 35
  111. parseInt('0x8a')
  112. 138
  113. parseInt('08a')
  114. 8
  115. parseInt('html')
  116. NaN
  117. parseInt('css')
  118. NaN
  119. parseInt(true)
  120. NaN -->
  121. <script >
  122. // 字符串定界符: 引号,单/双引号
  123. //单行输出
  124. console.log('html, \ CSS, \ js');
  125. var str = 'html,' + 'css,'+ 'js';
  126. console.log(str);
  127. //多行输出
  128. var str = 'html, \ncss, \njs';
  129. console.log(str);
  130. var str = ['第1行','第2行','第3行'].join('\n');
  131. console.log(str);
  132. // ES6模板字面量, 用反引号代替了引号
  133. console.log(typeof `This is string`);
  134. //直接用反引号,按照代码格式展现效果
  135. console.log(`This
  136. is
  137. string`);
  138. console.log(`
  139. <div>
  140. <p>qaqa</p>
  141. </div>`.trim());
  142. </script>
  143. </body>
  144. </html>

3.布尔型的转化

效果图

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>布尔型</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <script type="text/javascript">
  9. //转为false的情况
  10. var qa = false ? true : false;
  11. console.log(qa);
  12. var qa = undefined ? true : false;
  13. console.log(qa);
  14. var qa = null ? true : false;
  15. console.log(qa);
  16. var qa = 0 ? true : false;
  17. console.log(qa);
  18. var qa = NaN ? true : false;
  19. console.log(qa);
  20. //是空字符串,不是空格
  21. var qa = '' ? true : false;
  22. console.log(qa);
  23. //转为true的情况
  24. // 空对象返回true
  25. var res = {} ? true : false;
  26. console.log(res);
  27. // 空数组返回true
  28. var res = [] ? true : false;
  29. console.log(res);
  30. if (!null) {
  31. console.log('null 转为 false');
  32. }
  33. if (!undefined) {
  34. console.log('undefined 转为 false');
  35. }
  36. </script>
  37. </body>
  38. </html>

4.对象类型

效果图

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>对象类型</title>
  5. <meta charset="utf-8">
  6. </head>
  7. <body>
  8. <script >
  9. var qw = {
  10. id:132,"name":'Rob ert','my qq':'1446582qq'
  11. };
  12. console.log(qw.id);
  13. console.log(qw.name);
  14. console.log(qw['my qq']);
  15. //对象的属性可以是数组,数值,布尔,对象
  16. var qaq = {
  17. qe:{id:132,"name":'Rob ert','my qq':'1446582qq'},
  18. we:['css','html5']
  19. };
  20. console.log(qaq.qe);
  21. console.log(qaq.we);
  22. console.log(qaq.we[1]);
  23. console.log(qaq.qe['id']);
  24. console.log(qaq.qe[0]);
  25. console.log(qaq.qe.name);
  26. //获取对象中数组的最后一个值
  27. console.log(qaq.we[qaq.we.length-1]);
  28. //对象的属性也可以是一个方法
  29. var qaq = {
  30. qe:{id:132,"name":'Rob ert','my qq':'1446582qq'},
  31. we:['css','html5'],
  32. getInfo: function(){
  33. return 'wo zhen shuai';
  34. }
  35. };
  36. console.log(typeof qaq.getInfo);
  37. console.log(qaq.getInfo());
  38. //值传递类型
  39. //b中只保存着a的值, 深拷贝
  40. var a = 12;
  41. var b = a;
  42. console.log(b);
  43. b = 45;
  44. console.log(b);
  45. console.log(a);
  46. //obj2中保存的是obj1的内存中地址,浅拷贝
  47. var obj1 = {x: 11, y: 222};
  48. var obj2 = obj1;
  49. obj2.x = 36;
  50. obj2.y = 37;
  51. console.log(obj2);
  52. console.log(obj1);
  53. // for - in : 遍历对象属性
  54. // for (var 键名 in 对象) {
  55. //对象.键名;
  56. // }
  57. for (var id in qw) {
  58. console.log(qw[id]);
  59. }
  60. // in: 判断某个属性是否在某个对象中
  61. console.log('my qq' in qw);
  62. </script>
  63. </script>
  64. </body>
  65. </html>

5.对字符串,对象,null,undefined的理解

字符串在一个对象中作为属性,用单引号标识的字符串作为ID的话,可以接引用,如果中间有空格,只能用console.log(qw[‘my qq’])这种方法引用,具体的一些使用可以看对象类型的代码部分。
对象的属性可以有函数,数值,数组,字符串,布尔。对象是由属性组成的。
null是空值为0,而undefined是未定义的意思,主要用于对象,null主要用于一个值。
以上就是我对这些的理解。

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:null与undefined有许多地方是相似的, 大多数场景下混用并不会有问题的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post