PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > JavaScript基础之 变量与常量的声明、函数 箭头函数

JavaScript基础之 变量与常量的声明、函数 箭头函数

Blastix Riotz
Blastix Riotz 原创
2021年04月02日 00:39:09 595浏览

引用方式

  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. <style>
  9. .active {
  10. color: red;
  11. background-color: yellow;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <h1>www.php.cn</h1>
  17. <!-- 1. 行内脚本,直接与一个元素的事件属性绑定 -->
  18. <!-- <button onclick="document.querySelector('h1').classList.toggle('active')">Click</button> -->
  19. <button onclick="toggleColor()">Click</button>
  20. <!-- 2. 内部脚本,将js代码写到一对script标签中 -->
  21. <!-- <script>
  22. function toggleColor() {
  23. document.querySelector("h1").classList.toggle("active");
  24. }
  25. </script> -->
  26. <!-- 3.外部脚本,实现了js代码的共享 -->
  27. <script src="toggle.js"></script>
  28. </body>
  29. </html>
  • toggle.js
    1. function toggleColor() {
    2. document.querySelector("h1").classList.toggle("active");
    3. }

    变量与常量

    1. // "php":字面量,直接量
    2. // 变量:数据共享,重复使用
    3. // 声明
    4. let userName
    5. console.log(userName);//undefind
    6. //第一次赋值,初始化
    7. userName = "老师"
    8. console.log(userName);
    9. //第二次赋值,更新、修改
    10. userName = "学生"
    11. console.log(userName);

    函数、高阶函数

    1. //回调函数:函数做为参数
    2. document.addEventListener("click", function () {
    3. alert("大家晚上好");
    4. });
    5. // 2. 偏函数:将函数做为返回值
    6. let sum = function (a, b) {
    7. return function (c, d) {
    8. return a + b + c + d;
    9. };
    10. };
    11. let f1 = sum(1, 2);
    12. // f1是一个函数
    13. console.log(typeof f1);
    14. console.log(f1(3, 4));
    15. // 柯里化
    16. sum = function (a) {
    17. return function (b) {
    18. return function (c) {
    19. return function (d) {
    20. return a + b + c + d;
    21. };
    22. };
    23. };
    24. };
    25. let res = sum(1)(2)(3)(4);
    26. console.log("res =", res);
    27. // 纯函数: 在函数内部没有引用外部数据的函数
    28. let c = 100;
    29. function add(a, b) {
    30. // c来自函数外部
    31. // return a + b + c;
    32. // 去掉c即为纯函数,此时函数的所有参数都必须是通过调用者传入的
    33. return a + b;
    34. }
    35. console.log(add(1, 2));

    箭头函数

    1. <script>
    2. let sum = function (a, b) {
    3. return a + b;
    4. };
    5. //匿名函数,可以使用箭头函数来简化它
    6. sum = (a, b) => {
    7. return a + b;
    8. };
    9. console.log(sum(10, 20));
    10. //如果箭头函数的代码体只有一行语句,可以删除大括号与return
    11. sum = (a, b) => a + b;
    12. //如果函数中要使用到this,就不要用箭头函数,不能当构造函数用
    13. </script>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议