js写到哪里？

js是前端通用的脚本语言，可以卸载内联脚本，内部脚本和外部脚本中。

1. 内联脚本： 事件属性
2. 内部脚本： script标签中
3. 外部脚本：script:src属性中

变量与常量

// 1. 变量
// 声明
let userName;
// 声明时并初始化(第一次赋值)
let itemName = "手机";
// 更新
userName = "天蓬老师";
// 2. 常量
// 声明时必须初始化
const unitPrice = 3699;
//   unitPrice = 2888;

const APP_NAME = "在线商城";

// 3. 标识符
// 字母,数字,下划线,$,但是不能用数字开头, let 123abc;error
// 严格区分大小写, unerName,username不是同一个
// 不得使用关键字可保留字

// 4. 命名方案
// 驼峰式: userName
// 帕斯卡: UserName,大驼峰
// 匈牙利: oBtn, _sex, _salary

 js中推荐全部使用驼峰式

变量类型与类型转换

1.原始类型: 字符串，数值,布尔,undefined,null
2. 引用类型: 数组,对象,函数

函数提升与重写

// 声明一个函数,会自动提升到顶部
      function getName(name) {
        return "Welcome to " + name;
      }

// 1. 函数声明提升
      //   console.log(sum(1, 2));
      //   使用了匿名函数/函数表达式（将函数做为值,赋给一个常量）
      //   let sum = function (a, b) {
      //     return a + b;
      //   };

2. 函数可以被重写
      const sum = function (a, b) {
        return a + b;
      };
      console.log(sum(1, 2));

函数参数与返回值

// 必选参数
      let sum = function (a, b) {
        return a + b;
      };

//默认参数
      sum = function (a, b = 2) {
        return a + b;
      };
// ...归内参数,简化函数的参数声明
      sum = function (...arr) {
        console.log(arr);
        return arr.reduce(function (p, c) {
          return p + c;
        });
      };


let params = [15, 20, 35, 40];
      console.log(params);
// ...扩展参数,简化函数的调用参数
      console.log(sum(...params));


  //   函数都是单值返回,如果想返回多个值,将结果封装到数组或对象中
      let getItems = function () {
        return [100, "手机", 6699];
      };
      console.log(getItems());

      getItems = function () {
        return { id: 100, name: "手机", price: 6699 };
      };
      console.table(getItems());

高阶函数

高阶函数: 使用函数为参数或者将函数做为返回值的函数

      // 1. 回调函数（写在参数内）
      document.addEventListener("click", function () {
        alert("Hello World~~");
      });
      // 2. 偏函数: 简化了声明时的参数声明
      let sum = function (a, b) {
        return function (c, d) {
          return a + b + c + d;
        };
      };

      let f1 = sum(1, 2);
      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(10)(20)(30)(40);
      console.log(res);

      // 4. 纯函数
      // 完全独立于调用上下文,返回值只能受到传入的参数影响
      function getDate() {
        return Date.now();
      }
      console.log(getDate());

      // 是纯函数
      function add(a, b) {
        console.log(a + b);
      }
      add(1, 2);

箭头函数

 let sum = function (a, b) {
        return a + b;
      };
      // 箭头函数用来简化 "匿名函数" 的声明
      sum = (a, b) => {
        return a + b;
      };
      console.log(sum(1, 2));

      // 如果函数体只有一条语句,可不写return
      sum = (a, b) => a + b;

      console.log(sum(10, 20));

      // 如果只有一个参数,连小括号都可以不用了
      let tips = str => console.log(str);
      tips("欢迎新同学");
      // 如果没有参数,小括号不能省略
      tips = () => console.log("Success");
      console.log(tips());
      // 1. 箭头函数没有原型属性prototype,不能当构造函数用
      // 2. 箭头函数中的this,始终与它的上下文绑定

作用域与闭包

js三种作用域: 全局, 函数,块

 // 1. 全局作用域
      let site = "php中文网";
      console.log(site);
      //2. 函数作用域
      function getSite() {
        // 私有变量
        let domain = "www.php.cn";
        return site + domain;
      }
      //   console.log(domain);
      console.log(getSite());
      // 3. 块作用域
      {
        let a = 1;
        const B = "Hello";
      }
      //   console.log(a, B);

      // 4. 闭包
      // 自由变量: 即不是函数参数变量也不是私有变量,存在于函数调用上下文中
      // 闭包: 能够访问自由变量的函数,所以理论上讲,任何函数都是闭包
      let num = 100;
      function add(a, b) {
        //   a,b: 参数变量
        // t: 私有变量
        let t = 0;
        // num: 自由变量
        return t + a + b + num;
      }

      function a() {
        let n = 100;
        // 这个返回的子函数就是闭包
        return function () {
          return n;
        };
      }

      //   console.log(n);
      console.log(a()());

      function f1() {
        let a = 1;
        // a 相对于f1是私有变量,但是相对于返回的匿名函数就是一个自由变量
        return function () {
          return a++;
        };
      }

      let f2 = f1();
      console.log(f2());
      console.log(f2());
      console.log(f2());

立即执行函数IIFE

// 立即执行函数: IIFE
      function sum(a, b) {
        console.log(a + b);
      }
      sum(10, 20);

      // 立即执行:声明完直接调用

      (function (a, b) {
        console.log(a + b);
      })(50, 20);

      // 在远古时代,js不支持块作用域
      // IIFE模拟块作用域
      (function () {
        if (true) {
          var b = 888;
        }
      })();

      //   console.log(b);

      //   if (true) {
      //     let b = 888;
      //   }
      //   console.log(b);

      // 在上古时代,js不支持模块编程
      let module = (function (name, email) {
        return {
          getEmail: () => "Email: " + email,
          getName: () => "Name: " + name,
        };
      })("amdin", "admin@php.cn");

      console.log(module);
      console.log(module.getName());
      console.log(module.getEmail());

作业内容

作业内容：

1. 实例演示变量与常量的区别;
2. 函数与匿名函数的区别
3. 箭头函数的参数特征
4. 闭包原理与实现并演示它
5. 四种高阶函数，全部实例演示，并理解回调和纯函数是什么，写出你的答案

作业代码

    //定义常量，必须要初始化
        const URL_HOST = "www.gzj2001.com";
        console.log(URL_HOST);
        //定义变量，可以不初始化，变量可以重写
        let blogName;
        console.log(blogName);
        console.log("-------");
        blogName = "城南花开";
        console.log(blogName);


        //函数可以被重写
        function getInformation() {
            return "美好的事情即将发生~";
        }
        console.log(getInformation());

        function getInformation() {
            return "现在美好的事情已经发生了~";
        }

        //匿名函数
        let good = function () {
            return "你改变不了我的内容";
        }
        console.log(good);
        console.log(good());

        console.log("---------");

        //使用箭头函数
        let sum = function (a, b) {
            return a + b;
        };
        // 箭头函数用来简化 "匿名函数" 的声明
        sum = (a, b) => {
            return a + b;
        };


        //箭头函数的参数特征
        //如果函数只有一条语句,可不写return
        let list = (a, b) => a + b;
        console.log(list(1, 2));

        //如果只有一个参数,小括号可以省略
        let list2 = a => a + "小括号能省略";
        console.log(list2("list2"));

        //如果没有参数,小括号不能省略
        let list3 = () => "小括号不能省略";
        console.log(list3());


        //闭包
        function getAllUser() {
            let userList = {
                id: 1,
                name: "admin",
                email: "admin@qq.com",
            }

            return function () {
                return userList;
            }
        }
        console.log("--------");
        console.log(getAllUser());
        console.table(getAllUser()());

        //高阶函数
        // 1.回调函数:写在参数内的函数
        document.addEventListener("click", function () {
            alert("Hello World~~");
        });

        // 2.偏函数: 简化了声明时的参数声明
        let sum2 = function (a, b) {
            return function (c, d) {
                return a + b + c + d;
            };
        };

        //可以先储存固定需要传入的一部分参数，然后一起传入
        let f1 = sum2(2, 3);
        console.log(f1(3, 4));

        // 3.柯里化:简化了调用参数

        sum3 = function (a) {
            return function (b) {
                return function (c) {
                    return function (d) {
                        return a + b + c + d;
                    };
                };
            };
        };

        //一层一层的传入参数
        let res = sum3(10)(20)(30)(40);
        console.log(res);


        // 4.纯函数:完全独立于调用上下文,返回值只能受到传入的参数影响
        function addSum(a,b){
            return a + b;
        }
        console.log(addSum(1,8));


        //理解回调和纯函数是什么。
        // 回调函数是沟通两个不同功能函数的中间件，类似以前的电话接线员。
        // 纯函数是自己写的功能函数，返回的内容受到传入参数的影响而变化的。
        
        function testA(a,b){
            console.log("a is" + a);
            console.log("b is" + b);
            // console.log(testB(a,b));
            testB(a,b);
        }

        function testB(c,d){
            console.log(c + d);
            
        }

        testA(11,52);