js基础：变量与常量的声明以及函数知识 -

js引入方式

<!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>
      .aa {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>你好</h1>
    <!-- 1. 行内脚本,直接与一个元素的事件属性绑定 -->
    <!-- <button onclick="document.querySelector('h1').classList.toggle('aa')">Click</button> -->
    <button onclick="toggleColor()">Click</button>
    <!-- 2. 内部脚本,将js代码写到一对script标签中 -->
    <!-- <script>
      function toggleColor() {
        document.querySelector("h1").classList.toggle("aa");
      }
    </script> -->
    <!-- 3.外部脚本,实现了js代码的共享 -->
    <script src="toggle.js"></script>
  </body>
</html>

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

变量是用于存放数值的容器
要使用变量,先要声明变量

// 声明变量
  let userName;
// 第一次赋值: 初始化
  userName = "你好"
// 第二次赋值: 更新,修改
  userName = "再见";

函数与高阶函数

JavaScript 使用关键字 function 定义函数。
高阶函数: 使用函数为参数或者将函数做为返回值的函数

<script>
    //回调函数:函数做为参数
      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>

函数的参数

 <script>
      // 函数都是单值返回
      // 必选参数
      let sum = function (a, b) {
        return a + b;
      };
      //   console.log(sum(1, 2));
        console.log(sum(1));
      // 默认参数
      sum = function (a, b = 10) {
        return a + b;
      };
      console.log(sum(1));
      console.log(sum(1, 15));
      // 归并参数,rest语法,将所有参数压到一个数组中来简化参数的获取过程
      sum = function (...arr) {
        console.log(arr);
        return arr.reduce((p, c) => p + c);
      };
      console.log(sum(1, 2, 3, 4, 5, 6, 7));
      // 返回多个值,使用数组或对象
      function getUser() {
        return [10, "admin", "admin@php.cn"];
      }
      function getUser() {
        return { id: 10, username: "admin", email: "admin@php.cn" };
      }
      console.table(getUser());
    </script>

箭头函数的语法与使用场景

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

立即执行函数的语法与使用方式

立即执行函数可以将声明调用二合一, 声明后直接执行

<script>
      (function (a, b) {
        console.log(a + b);
      })(100, 600);
    </script>