Community Learn Tools Library Leisure
search
English
Home > List of blog posts > JavaScript基础之 变量与常量的声明、函数 箭头函数
Blogger Information
Blog 16
fans 0
comment 0
visits 9550
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
JavaScript基础之 变量与常量的声明、函数 箭头函数
Blastix Riotz
Original
623 people have browsed it

引用方式

  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>
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