欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JS学习之变量、函数、数组、对象、作用域及闭包

程序员文章站 2022-03-15 23:53:15
...

JS学习之变量、函数、数组、对象、作用域及闭包

变量有数值（number）、字符串（string）、布尔值（boolean）、undefined 、 null
引用类型有：数组array、对象object、函数function三种

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>初识js</title>
    8. 

  8.   </head>
    9. 

  9.   <body></body>
    10. 

  10.   <script>
    11. 

  11.     //   变量
    12. 

  12.     let myName = "zhangDeng";
    13. 

  13.     console.log(myName);
    14. 

  14.     // alert
    15. 

  15.     //alert(myName);
    16. 

  16.     let price = 99;
    17. 

  17.     console.log(price);
    18. 

  18.     // 变量有数值（number）、字符串（string）、布尔值（boolean）、undefined 、 null
    19. 

  19.     // 引用类型有：数组array、对象object、函数function三种
    20. 

  20.     // 数组
    21. 

  21.     const price1 = [33, 44, 55, 66];
    22. 

  22.     console.log(price1[0], price1[1]);
    23. 

  23.     // 对象
    24. 

  24.     const shop = {
    25. 

  25.       name: "京东便利店",
    26. 

  26.       room: 150,
    27. 

  27.       price: 8899,
    28. 

  28.     };
    29. 

  29.     console.log(shop.name, shop.price, shop.room);
    30. 

  30.     const shop1 = {
    31. 

  31.       "my name": "京东便利店",
    32. 

  32.       "my-room": 150,
    33. 

  33.     };
    34. 

  34.     console.log(shop1["my name"]);
    35. 

  35.     // 实际开发过程中数组和对象结合使用
    36. 

  36.     const shop2 = [
    37. 

  37.       { name: "饼干", num: 2, price: 3.5 },
    38. 

  38.       { name: "面包", num: 4, price: 4.5 },
    39. 

  39.       { name: "水果", num: 6, price: 7 },
    40. 

  40.     ];
    41. 

  41.     console.log(shop2);
    42. 

  42.     // 函数
    43. 

  43.     function getTotal(name) {
    44. 

  44.       return "hello" + name;
    45. 

  45.     }
    46. 

  46.     console.log(getTotal("张老师"));
    47. 

  47.     // typeof是返回判断变量类型;
    48. 

  48.     console.log(typeof getTotal);
    49. 

  49.     console.log(getTotal.name);
    50. 

  50.     console.log(getTotal.length);
    51. 

  51.     // 数组里包含函数
    52. 

  52.     const arr = [
    53. 

  53.       123,
    54. 

  54.       "bbb",
    55. 

  55.       [1, 2, 3, 4],
    56. 

  56.       { a: 1, b: 2, c: 3 },
    57. 

  57.       function age() {
    58. 

  58.         console.log("my age is 33");
    59. 

  59.       },
    60. 

  60.     ];
    61. 

  61.     console.log(arr[0]);
    62. 

  62.     console.log(arr[4]());
    63. 

  63.     // 封装函数 对于重复使用的代码，可以考虑封装，实现复用
    64. 

  64.     function sum(num1, num2) {
    65. 

  65.       let total = 0;
    66. 

  66.       total = num1 + num2;
    67. 

  67.       console.log("total=", total);
    68. 

  68.     }
    69. 

  69.     sum(2, 3);
    70. 

  70.     // 胖箭头
    71. 

  71.     // 1.如果执行语句只有一条，可以不写大括号；
    72. 

  72.     // 2.如果参数只有一个，可以不写参数外部的括号；
    73. 

  73.     // 3。如果没有参数，括号必须写
    74. 

  74.     add = () => 11 + 3;
    75. 

  75.     console.log(add());
    76. 

  76.     // 全局变量，函数可以从外向内传递，无法由内向外传递
    77. 

  77.     // 闭包练习  满足两个条件： 父子函数及*变量
    78. 

  78.     //父函数
    79. 

  79.     function p(n) {
    80. 

  80.       // 子函数
    81. 

  81.       function m() {
    82. 

  82.         return n++;
    83. 

  83.       }
    84. 

  84.       //   返回子函数
    85. 

  85.       return m;
    86. 

  86.     }
    87. 

  87.     // 声明父函数
    88. 

  88.     const r = p(10);
    89. 

  89.     // 返回
    90. 

  90.     r();
    91. 

  91.     console.log(r());
    92. 

  92.     console.log(r());
    93. 

  93.     console.log(r());
    94. 

  94.     console.log(r());
    95. 

    96. 

  96.     // 经典闭包IIFE;
    97. 

  97.     let jishu = (function (i) {
    98. 

  98.       return function () {
    99. 

  99.         return i++;
    100. 

  100.       };
    101. 

  101.     })(99);
    102. 

  102.     console.log(jishu());
    103. 

  103.     console.log(jishu());
    104. 

  104.     console.log(jishu());
    105. 

  105.     console.log(jishu());
    106. 

  106.     console.log(jishu());
    107. 

  107.   </script>
    108. 

  108. </html>
    109.

上一篇： ps文件损坏怎么修复文件

下一篇： html怎么隐藏p标签

推荐阅读