什么是闭包

函数套函数，并把内部函数return，内部函数可以访问外部函数的变量，一级级向上找。 内部函数访问父函数的变量的最终结果

作用：封装变量，收敛权限

闭包的作用有以下几点：

  • 避免变量污染
  • 变量私有化
  • 保存变量，常驻内存

优点：创建私有环境、不会造成变量污染

内存：垃圾回收机制：当一个变量在作用域内部不再被使用，会被内存释放 闭包被子函数引用的变量不会被回收，有可能造成内存泄漏

例子：

<!DOCTYPE html>
<html lang="en">
  <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>闭包函数</title>
  </head>
  <body>
    <input type="text" placeholder="请输入名字" id="input" />
    <button id="add">插入</button>
  </body>
  <script>
    const inputDemo = document.querySelector("#input");
    const addDemo = document.querySelector("#add");
    const studentsSys = (function () {
      const students = new Set(["小红"]); // 使用 Set 替代数组以提高查找效率

      return {
        searchUserName(name) {
          return !students.has(name); // 直接返回 Set 的查找结果
        },
        insert(name) {
          if (this.searchUserName(name)) {
            students.add(name);
            console.log("报名成功");
          } else {
            alert("该用户已经报名，请勿重复报名");
          }
          console.log("已经报名的名单", Array.from(students)); // 将 Set 转换为数组输出
        },
      };
    })();
    addDemo.onclick = () => {
      if (inputDemo.value) {
        studentsSys.insert(inputDemo.value);
      } else {
        alert("文本框内容不能为空");
      }
    };
  </script>
</html>

什么是事件委托

事件委托就是列用事件冒泡，指定一个事件处理程序，接可以管理某一类型的所有事件

例子如下：

<!DOCTYPE html>
<html lang="en">
  <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>事件委托</title>
  </head>
  <body>
    <h1>事件委托</h1>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
    <script>
      const ul = document.querySelector("ul");
      ul.onclick = function (event) {
        event = event || window.event;
        let target = event.target;
        if (target.nodeName == "LI") {
          console.log("target.innerHTML", target.innerHTML);
        }
      };
    </script>
  </body>
</html>

reduce

reduce（减少）是一个Array的高阶函数，它接受一个回调函数作为参数，用来处理数组中的每个元素，并将它们逐个合并成一个值。这个合并的过程可以根据我们的需要进行自定义。

具体来说，reduce函数有两个参数：回调函数和初始值。

  • 回调函数接受四个参数：累计值（初始值或上一次回调函数的返回值），当前值（数组中当前被处理的元素），当前索引和原数组。
  • 初始值是可选的，如果没有提供，则默认使用数组的第一个元素作为初始值。
  • 回调函数在每一次执行时都会返回一个新的累计值，这个累计值会在下一次回调时作为参数传入。

reduce函数的执行过程是从左到右的。它遍历数组中的每个元素，并通过调用回调函数来处理每个元素，最终返回一个累计值。

使用reduce函数可以实现很多功能，例如计算数组的总和、找到数组中的最大值或最小值、将二维数组转换为一维数组等。它提供了一种简洁、高效的方式来操作数组数据。

使用例子：

let numList = [1, 2, 3, 4, 5];
let total = numList.reduce((current, next) => {
    return current + next;
}, 0);
console.log(total); // 15

两道简单的算法

1、实现从1到100的求和

 const addNum = (num1, num2) => {
        // 声明一个num 值为两个参数相加
        let num = num1 + num2;
        if (num2 + 1 > 100) {
          return num;
        } else {
          return addNum(num, num2 + 1);
   }
};
console.log(addNum(1, 2)); // 5050

2、统计字符窜中出现次数最多的字符

let str = "rewqrewqrewfczvczcggggggrweqrefvcxznhkdfasfad";
      const occursTheMost = (str) => {
        // 将字符串切割成单个字母
        // 定义一个空对象 将切割的字符当作key 出现的次数当作value
        // 如果字符的长度为1不用比较 直接返回当前的字符
        if (str.length == 1) {
          return str;
        }
        let obj = {};
        for (let i = 0; i < str.length; i++) {
          // 如果对象中不存在这个key 那么往这个对象里面新增key且value为1
          // 如果对象中存在这个key 那么往这个对象里面新增key且value增加1
          !obj[str.charAt(i)]
            ? (obj[str.charAt(i)] = 1)
            : (obj[str.charAt(i)] += 1);
        }
        // 定义出现最多的字符
        let maxChar = "",
          maxValue = 0;
        for (let k in obj) {
          if (obj[k] > maxValue) {
            maxValue = obj[k];
            maxChar = k;
          }
        }
        return maxChar;
      };
      occursTheMost(str);
打赏作者
微信
支付宝
返回顶部