引用方式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>www.php.cn</h1>
    <!-- 1. 行内脚本,直接与一个元素的事件属性绑定 -->
    <!-- <button onclick="document.querySelector('h1').classList.toggle('active')">Click</button> -->
    <button onclick="toggleColor()">Click</button>
    <!-- 2. 内部脚本,将js代码写到一对script标签中 -->
    <!-- <script>
      function toggleColor() {
        document.querySelector("h1").classList.toggle("active");
      }
    </script> -->
    <!-- 3.外部脚本,实现了js代码的共享 -->
    <script src="toggle.js"></script>
  </body>
</html>

toggle.js

function toggleColor() {
document.querySelector("h1").classList.toggle("active");
}

变量与常量

// "php":字面量，直接量
// 变量：数据共享，重复使用
// 声明
let userName；
console.log(userName)；//undefind
//第一次赋值，初始化
userName = "老师"
console.log(userName)；
//第二次赋值，更新、修改
userName = "学生"
console.log(userName)；

函数、高阶函数

      //回调函数:函数做为参数
      document.addEventListener("click", function () {
          alert("大家晚上好");
      });
      // 2. 偏函数:将函数做为返回值
      let sum = function (a, b) {
          return function (c, d) {
              return a + b + c + d;
          };
      };
      let f1 = sum(1, 2);
      //   f1是一个函数
      console.log(typeof f1);
      console.log(f1(3, 4));
      // 柯里化
      sum = function (a) {
          return function (b) {
              return function (c) {
                  return function (d) {
                      return a + b + c + d;
                  };
              };
          };
      };
      let res = sum(1)(2)(3)(4);
      console.log("res =", res);
      // 纯函数: 在函数内部没有引用外部数据的函数
      let c = 100;
      function add(a, b) {
          //   c来自函数外部
          // return a + b + c;
          // 去掉c即为纯函数,此时函数的所有参数都必须是通过调用者传入的
          return a + b;
      }
      console.log(add(1, 2));

箭头函数

<script>
    let sum = function (a, b) {
      return a + b;
    };
    //匿名函数,可以使用箭头函数来简化它
    sum = (a, b) => {
      return a + b;
    };
    console.log(sum(10, 20));
    //如果箭头函数的代码体只有一行语句,可以删除大括号与return
    sum = (a, b) => a + b;
    //如果函数中要使用到this,就不要用箭头函数,不能当构造函数用
  </script>

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

引用方式

变量与常量

函数、高阶函数

箭头函数

更多相关文章

随机推荐

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

引用方式

变量与常量

函数、高阶函数

箭头函数

更多相关文章

随机推荐

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