search

博客列表 >js数据类型、循环、流程控制

js数据类型、循环、流程控制

P粉314265155
P粉314265155原创
2022年07月21日 19:35:20317浏览

数据类型

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>数据类型</title>
  8. </head>
  9. <body>
  10.     <script> 
  11.     let a = '我是字符串';
  12.     let b = 123;
  13. const arr= ['中文网',123,5000];
  14.     // 我是字符串  string
  15. console.log(typeof a);
  16. // 我是数值 number
  17. console.log(typeof b);
  18. // 我是数值。是对象object 类型   布尔类类型 true
  19. console.log(typeof arr);
  20. console.log(arr[2]);
  21. console.log(arr);
  22. console.log(Array.isArray (arr));
  23. // 我是布尔类型
  24. console.log(typeof true);
  25. // 。是返回object 类型  但其实是 null
  26. console.log(typeof null);
  27. console.log(typeof undefined);
  28. // 函数  function函数 是类型 在script 等于对象  ，  但是在php不是
  29. console.log(typeof function(){});
  30. // instanceof   判断左右 边数据类型
  31. console.log(function () {} instanceof Object);
  32. console.log(function () {} instanceof Number);
  33. console.log(function () {} instanceof String);
  34. console.log('------------------------');
  35.  obj =  {
  36.     name:'手机',
  37.       num: 30,
  38.       price:2000,
  39.        total  :function () {
  40.     return  obj.num*obj.price;
  41.       },
  42.   }
  43. console.log(obj);
  45. console.log(obj.total());
  46. console.log('------------------------');
  48. obj1 =  {
  49.     name:'手机',
  50.       num: 30,
  51.       price:2000,
  52.        total  :function () {
  53.         // this当前对象obj的引用
  54.     return  this.num*this.price;
  55.       },
  56.   }
  57.   console.log(obj1.total());
  58.   console.log('------------------------');
  60. obj2 = [
  61.     { name:'电暖袋1' ,num:10, price:100  },
  62.     { name:'电暖袋2' ,num:20, price:200  },
  63.     { name:'电暖袋3' ,num:30, price:300  },
  64. ]
  65. console.log(obj2);
  66. console.log('------------------------');
  67. console.log(obj2[1]);
  68. console.log('------------------------');
  69. console.log(obj2[1],[2]);
  70. console.log('******************');
  72. function f1(){
  73. }
  74. function f2(f){
  75.    console.log(typeof f);
  76. }
  77. // 函数调用函数   将f1传入，成为回调
  78. f2(f1);
  80. // 闭包 
  81. function f3(){
  82.     // 注意分好
  83.     return  function(){
  84.     return   'hello';
  85.     };
  86. }
  87. console.log(f3());
  88. console.log('------------------------');
  89. console.log(f3()());
  93.     </script>
  97. </body>
  98. </html>

循环控制

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>循环、流程</title>
  9. </head>
  10. <body>
  11.     <script>
  13.         // 单分支
  14.  if (true) {
  15. console.log('你好呀');
  16.  }
  18.  if(false) {
  19.     console.log('真的，执行');
  20.  }
  21. else {
  22.     console.log('假的');
  23. }
  25.  // 多分支
  26. // let a =100;
  27. let a =10;
  29. if (a>100){
  30.     console.log('我在等死');
  32. }
  33. else if (a<=100 && a>60 ){
  34.     console.log('我退休了');
  35. }
  37. else if (a<=60&& a>=18 ){
  38.     console.log('我得上班');
  39. }
  40. else{
  41.     console.log('我不上班');
  42. }
  43. console.log('------------------');
  44. // 三元操作     条件判断 ?   true  : fsale
  45. let b=1;
  46. let res = b >= 18 ? '上班' : '不上班';
  47.       console.log(res);
  48.       console.log(b >= 18 ? '上班' : '不上班');
  49.       console.log('*************');
  50. //switch 
  51. let c =110;
  52. switch (true) {
  53.  case (c<18):
  54.     console.log('不上班');
  55.     break;
  56.     case (c >=18&& c <=60):
  57.     console.log('上班');
  58.     break;
  59.     default:
  60.     console.log('等死');
  61. }
  63.     </script>
  64. </body>
  65. </html>

循环遍历

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <script>
  11. const colors =['红','绿','黄'];
  13. console.log(colors);
  14. console.log(colors[2]);
  15. console.log(colors.length);
  16. console.log(colors[colors.length - 1]);
  17. console.log('=============');
  18. // 取反
  19.  if (undefined) {
  20.     console.log(true+',我是真');
  21.  }else{
  22.     console.log( '我是假');
  23.  }
  25.  if (!undefined) {
  26.     console.log(true+',我是真');
  27.  }else{
  28.     console.log( '我是假');
  29.  }
  30.  console.log('=============');
  33. d =0;
  34. let length = colors.length;
  35. console.log(length);
  36. console.log('=============');
  38. // while (d < length) {
  39. //         console.log(colors[2]);
  40.         // 必须要更新循环条件,否则进入死循环
  41.     //    d++;
  42.     //   }
  43.       console.log('----------------');
  44.       console.log(d);
  45. // while (d > length){
  47. //     console.log(colors[d]);
  48. //     // d++;
  49. //  }
  50. console.log('----------------');
  51. console.log(length);
  52. J = 0;
  53.       // 入口判断
  54.       while (J < length) {
  55.         console.log(colors[J]);
  56.         // 必须要更新循环条件,否则进入死循环
  57.         J= J+1;
  58.         console.log('******************');
  59.         console.log(colors);
  61.     }
  62.     console.log(J);
  64. console.log('----------------');
  65. i = 0;
  66.       // 出口判断, 至少要执行一次循环体中的代码,哪必条件为false
  67.       do {
  68.         console.log(colors[i]);
  69.         // 必须要更新循环条件,否则进入死循环
  70.         i++;
  71.       } while (i > length);
  72.       console.log('----------------');
  75.       console.log('******************');
  78.     for(let g = 0;  i < length; i++){
  79.         console.log(colors[i]);
  80.     }
  82.     console.log('----------------');
  83.     for(let h of colors){
  84.         console.log('我是值valus: ' +  h);
  85.             }
  86.   // 完整语法: 只看值
  87. //   for (let item of colors.values()) {
  88. //         console.log('values: ' + item);
  89. //       }
  91. // for (let item of colors.keys()) {
  92. //         console.log('values: ' + item);
  93. //       }
  94. console.log('==============');
  95. for(let y of colors.keys()){
  96.     console.log('我是键key: ' + y);
  97. }
  98. console.log('==============');
  99. for (let z of colors.entries()) {
  100.         console.log('我是键key和值values key-valus,中间用都和隔开: ' + z);
  101.       }
  103.       console.log('=============='); 
  105.       const obj = {
  106.         a: 1,
  107.         b: 2,
  108.         f: function () {},
  109.       };
  111.     // 对象要用for -in 遍历
  112.     for (let key in obj){
  113.         console.log(obj[key]);
  115.     }
  117.  console.log('----------------');
  118.  for(let h in colors){
  119.         console.log('我是键key: ' +  h);
  120.         console.log('我是值valus:' + colors[h]);
  122.     }
  126.     </script>
  127. </body>
  128. </html>

上一条：grid+flex布局实例下一条：数据类型及流程控制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多