Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 数据类型的用法实践（0225）
Blogger Information
Blog 26
fans 0
comment 2
visits 35047
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
数据类型的用法实践（0225）
小辰
Original
1162 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 -->
  24. <!-- //取值范围
  25. Math.pow(3,1024)
  26. Infinity
  27. Math.pow(3,1024)-1
  28. Infinity
  29. Math.pow(3,1023)
  30. Infinity
  31. Math.pow(3,-1023)
  32. 0
  33. -1023+-33
  34. -1056
  35. Number.MAX_VALUE
  36. 1.7976931348623157e+308
  37. Number.MAX_SAFE_INTEGER
  38. 9007199254740991
  39. Number.MIN_VALUE
  40. 5e-324 -->
  42. <!-- //数值表示法
  43. 0x8a
  44. 138
  45. 11e3
  46. 11000
  47. 11e-3
  48. 0.011
  49. 5e-11
  50. 5e-11
  51. 12345678901
  52. 12345678901
  53. 1234567890112345678901
  54. 1.2345678901123458e+21
  55. 0.000002
  56. 0.000002
  57. 0.0000022
  58. 0.0000022
  59. 0.0000002
  60. 2e-7 -->
  62. <!-- //对于NaN的应用
  63. NaN
  64. NaN
  65. 10*55
  66. 550
  67. 10*'a'
  68. NaN
  69. 10*'55
  70. SyntaxError: '' string literal contains an unescaped line break debugger eval code:1:6
  71. 10*'55'
  72. 550
  73. Math.log(-2)
  74. NaN
  75. Math.sqrt(-4)
  76. NaN
  77. typeof NaN
  78. "number"
  79. NaN===11
  80. false
  81. NaN==='11'
  82. false
  83. NaN==='number'
  84. false
  85. NaN===Object
  86. false
  87. NaN===NaN
  88. false
  89. NaN ? true : false
  90. false
  91. 20+NaN
  92. NaN
  93. 2*NaN
  94. NaN
  95. 'HELLO'-NaN
  96. NaN
  97. 'HELLO'+NaN
  98. "HELLONaN" -->
  100. <!-- //parseInt(): 将字符串转为整数
  101. ​parseInt('350')
  102. 350
  103. parseInt('  350  ')
  104. 350
  105. parseInt(33)
  106. 33
  107. parseInt(33.33)
  108. 33
  109. parseInt('350px')
  110. 350
  111. parseInt('350.111px')
  112. 350
  113. parseInt('35e2')
  114. 35
  115. parseInt('0x8a')
  116. 138
  117. parseInt('08a')
  118. 8
  119. parseInt('html')
  120. NaN
  121. parseInt('css')
  122. NaN
  123. parseInt(true)
  124. NaN -->
  125. <script >
  126. // 字符串定界符: 引号,单/双引号
  127. //单行输出
  128. console.log('html, \ CSS, \ js');
  129. var str = 'html,' + 'css,'+ 'js';
  130. console.log(str);
  132. //多行输出
  133. var str = 'html, \ncss, \njs';
  134. console.log(str);
  135. var str = ['第1行','第2行','第3行'].join('\n');
  136. console.log(str);
  137. // ES6模板字面量, 用反引号代替了引号
  138. console.log(typeof `This is string`);
  139. //直接用反引号，按照代码格式展现效果
  140. console.log(`This 
  141. is 
  142. string`);
  143. console.log(`
  144. <div>
  145.     <p>qaqa</p>
  146. </div>`.trim());
  147. </script>
  148. </body>
  149. </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);
  24. //转为true的情况
  25. // 空对象返回true
  26. var res = {}  ? true : false;
  27. console.log(res);
  28. // 空数组返回true
  29. var res = []  ? true : false;
  30. console.log(res);
  31. if (!null) {
  32.             console.log('null 转为 false');
  33.             }
  34. if (!undefined) {
  35. console.log('undefined 转为 false');
  36.                 }
  37. </script>
  38. </body>
  39. </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']);
  16. //对象的属性可以是数组，数值,布尔,对象
  17. var qaq = {
  18.     qe:{id:132,"name":'Rob ert','my qq':'1446582qq'},
  19.     we:['css','html5']
  20. };
  21. console.log(qaq.qe);
  22. console.log(qaq.we);
  23. console.log(qaq.we[1]);
  24. console.log(qaq.qe['id']);
  25. console.log(qaq.qe[0]);
  26. console.log(qaq.qe.name);
  27. //获取对象中数组的最后一个值
  28. console.log(qaq.we[qaq.we.length-1]);
  30. //对象的属性也可以是一个方法
  31. var qaq = {
  32.     qe:{id:132,"name":'Rob ert','my qq':'1446582qq'},
  33.     we:['css','html5'],
  34.     getInfo: function(){
  35.                 return 'wo zhen shuai';
  36.             }
  37. };
  38. console.log(typeof qaq.getInfo);
  39. console.log(qaq.getInfo());
  41. //值传递类型
  42. //b中只保存着a的值, 深拷贝
  43. var a = 12;
  44. var b = a; 
  45. console.log(b);
  46. b = 45;
  47. console.log(b);
  48. console.log(a);
  50. //obj2中保存的是obj1的内存中地址,浅拷贝       
  51. var obj1 = {x: 11, y: 222};
  52. var obj2 = obj1;  
  53. obj2.x = 36;
  54. obj2.y = 37;
  55. console.log(obj2);
  56. console.log(obj1);
  59. // for - in : 遍历对象属性
  60. // for (var 键名 in 对象) {
  61. //对象.键名;
  62. // }
  63. for (var id in qw) {
  64.     console.log(qw[id]);
  65.         }
  66.  // in: 判断某个属性是否在某个对象中
  67.  console.log('my qq' in qw);
  68.     </script>
  69. </script>
  70. </body>
  71. </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