Blogger Information
Blog 11
fans 0
comment 0
visits 6580
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
js引入方式、变量与常量的声明与使用方式、函数与高阶函数,实例演示、实例演示函数的参数及归并参数、箭头函数的语法与使用场景、立即执行函数的语法与使用方式,实例演示
Ghcᝰ
Original
723 people have browsed it

js引入方式

引入方式效果图

代码实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>JS的引入方式</title>
  8. </head>
  9. <body>
  10. <!-- 外部鸡屎代码 -->
  11. <!-- function FsayHello(content) {
  12. document.write(content + "<br>");
  13. } -->
  14. <!-- JS外部引用方式 -->
  15. <script src="jswb.js"></script>
  16. <script>
  17. FsayHello('今日系鱼人节,兄弟姐妹们收好你地条尾啦~~');
  18. </script>
  19. <!-- JS内部引用方式 -->
  20. <script>
  21. document.write('万一被人踩到,就扑街咯~~~</br>')
  22. console.log('学个鸡屎学到头晕、身庆')
  23. </script>
  24. <!-- 属性事件方式 -->
  25. <button onclick="alert('学鸡屎的难度系数:\n 五颗星!!!')">收到</button>
  26. </body>
  27. </html>

变量与常量的声明与使用方式

  • 命名方式;
    1) 由字母,数字,下划线,$组成,禁止数字开头.
    2) 严格区分大小写.
    3) 不能使用系统关键字和保留字

  • 命名方案;
    1) 驼峰式【推荐使用】:userName;
    2) 帕斯卡式【大驼峰】:UserName 常应用与类及构造函数
    3) 蛇形式:user_name
    4) 匈牙利式:oBtn 将数据类型放在变量最前面 aNmubers

  • 常量的值不允许被修改

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. <!-- 命名方式;
  11. 由字母,数字,下划线,$组成,禁止数字开头,严格区分大小写 ,不能使用系统关键字和保留字
  12. 命名方案;
  13. 驼峰式【推荐使用】:userName;
  14. 帕斯卡式【大驼峰】:UserName 常应用与类及构造函数
  15. 蛇形式:user_name
  16. 匈牙利式:oBtn 将数据类型放在变量最前面 aNmubers -->
  17. <script>
  18. let a = 1;
  19. let A = 2;
  20. // 以上两个变量是不同的
  21. // 判断变量是否为数组使用命令:Array.isArray(变量)返回值为布尔型true,false;
  22. // 变量的数据类型:
  23. // 1.原始类型:数值,字符串,布尔
  24. // boolean[布尔型]\null[空值]\number[数值]\string[字符串]\undefined[未定义]\
  25. // typeof 变量 ,可以查看变量的类型
  26. let price = 999;
  27. console.log(price, typeof price);
  28. let userName = "php";
  29. console.log(userName, typeof userName);
  30. // 把变量赋值为null即可
  31. userName = null;
  32. // 将原始值以某种规则进行组合,就构成了复合类型;
  33. // 引用类型(对象):对象(Object),数组(array),函数(function)
  34. // 函数允许添加属性或方法
  35. // 生成一个字符串
  36. let str = new String('hello word');
  37. // console.log(str);
  38. // 拿到字符串的原始值
  39. console.log(str.valueOf());
  40. let sum = 200;
  41. sun = sum++ + ++sum;
  42. console.log(sum);
  43. // 为什么会等于202呢?
  44. // 下面解析说明一下
  45. let sum1 = 10;
  46. document.write(sum1++, ",", sum1, "<br>")
  47. // 第一个sum1++这个时候输出仍为10 ,后面的sum1才得到自增后的结果
  48. document.write(++sum1, ",", sum1)
  49. // 第一个sum1++这个时候输出为12,再11的基础上自增了1并赋值给了自己
  50. // 所以 上面的sum算式理解为 200 +(201+1)=202
  51. // 常量的值不允许被修改
  52. const myName = "Tigon";
  53. </script>
  54. </body>
  55. </html>

函数与高阶函数,函数参数,归并参数、箭头函数的语法与使用场景、执行函数的语法与使用方式实例演示

代码区

  1. <!DOCTYPE html>
  2. <html lang="en">
  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. <!-- 函数允许重写 -->
  11. <script>
  12. console.log(sum(50));
  13. function sum(num) {
  14. let m = 0;
  15. for (let i = 0; i <= num; i++) {
  16. m += i;
  17. }
  18. return m;
  19. }
  20. // 如果不希望函数提升,必须先声明再使用,可以使用匿名函数
  21. // 通过变量或者常量来引用这个函数
  22. let sum1 = function (num) {
  23. let m = 0;
  24. for (let i = 0; i <= num; i++) {
  25. m += i;
  26. }
  27. return m;
  28. }
  29. console.log(sum1(50));
  30. // ...归并参数,rest语法,将所有参数压到一个数组中来简化参数的获取过程
  31. let sum2 = function (...arr) {
  32. let k = 0;
  33. for (let index = 0; index < arr.length; index++) {
  34. k += arr[index];
  35. }
  36. return k;
  37. }
  38. console.log(sum2(1, 2, 3, 4));
  39. let sum3 = function (...arr) {
  40. // reduce 计算数组所有内容求和
  41. return arr.reduce((p, c) => p + c);
  42. }
  43. console.log(sum3(1, 2, 3, 4));
  44. //返回多个值的办法,用数组或者对象返回
  45. function getuser() {
  46. return { id: 1, name: "php", email: "php@qq.com" };
  47. }
  48. console.table(getuser());
  49. // 高阶函数:使用函数为参数或者将函数做为返回值的函数
  50. // 函数作为参数传参的就是回调函数
  51. // 1.回调函数
  52. document.addEventListener("click", function () {
  53. alert("大家晚上好");
  54. });
  55. // 2.偏函数
  56. let sum4 = function (a, b) {
  57. return function (c, d) {
  58. return a + b + c + d;
  59. }
  60. }
  61. let f1 = sum4(1, 2);
  62. console.log(f1(3, 4));
  63. // 进一步优化,柯里化
  64. sum4 = function (a) {
  65. return function (b) {
  66. return function (c) {
  67. return function (d) {
  68. return a + b + c + d;
  69. }
  70. }
  71. }
  72. }
  73. let res = sum4(1)(2)(3)(4);
  74. console.log(res);
  75. // 纯函数,没有引入外部变量的,如果引入了就不是纯函数了
  76. let ccc = 100;
  77. function add(a, b) {
  78. return a + b + c;
  79. // 这里去掉C就是纯函数了
  80. }
  81. // 箭头函数
  82. let sum5 = function (a, b) {
  83. return a + b;
  84. }
  85. // 简化 匿名函数可以使用箭头函数来简化它
  86. sum5 = (a, b) => {
  87. return a + b;
  88. }
  89. console.log(sum5(10, 20));
  90. // 可以再次简化, 如果箭头函数的代码体只有一行语句,可以删除大括号,同时return也要去掉,因为自动了return功能
  91. sum5 = (a, b) => a + b;
  92. //如果只有一个参数的时候参数的括号也可以去掉,不过不建议去掉,容易搞混
  93. console.log(sum5(20, 20));
  94. // 立即置行函数(这里放函数)(这里放参数) --IIFE
  95. (function add2(a, b) {
  96. console.log(a + b);
  97. })(100, 200);
  98. // 因为是立即调用的关系可去掉函数名
  99. function (a, b) {
  100. console.log(a + b);
  101. }) (100, 200);
  102. </script>
  103. </body>
  104. </html>
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
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