前端常见问题

1. 什么是尾调用优化和尾递归？        

就是指某个函数的最后一步是调用另一个函数。

function f() {
    let m = 1; 
    let n = 2; 
    return g(m + n); 
} 
f(); 

// 等同于 
function f() { 
    return g(3); 
} 
f(); 

// 等同于 
g(3);

尾调用优化
尾调用之所以与其他调用不同，就在于它的特殊的调用位置。
我们知道，函数调用会在内存形成一个"调用记录"，又称"调用帧"（call frame），保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用记录上方，还会形成一个B的调用记录。等到B运行结束，将结果返回到A，B的调用记录才会消失。如果函数B内部还调用函数C，那就还有一个C的调用记录栈，以此类推。所有的调用记录，就形成一个"调用栈"（call stack）。
尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用记录，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用记录，取代外层函数的调用记录就可以了。

上面代码中，如果函数g不是尾调用，函数f就需要保存内部变量m和n的值、g的调用位置等信息。但由于调用g之后，函数f就结束了，所以执行到最后一步，完全可以删除 f() 的调用记录，只保留 g(3) 的调用记录。
这就叫做"尾调用优化"（Tail call optimization），即只保留内层函数的调用记录。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用记录只有一项，这将大大节省内存。这就是"尾调用优化"的意义

尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。

function factorial(n) { 
    if (n === 1) return 1; 
    return n * factorial(n - 1); 
} 
factorial(5) // 120

递归非常耗费内存，因为需要同时保存成千上百个调用记录，很容易发生"栈溢出"错误（stack overflow）。但对于尾递归来说，由于只存在一个调用记录，所以永远不会发生"栈溢出"错误。

上面代码是一个阶乘函数，计算n的阶乘，最多需要保存n个调用记录，复杂度 O(n) 。如果改写成尾递归，只保留一个调用记录，复杂度 O(1) 。

"尾调用优化"对递归操作意义重大，所以一些函数式编程语言将其写入了语言规格。ES6也是如此，第一次明确规定，所有 ECMAScript 的实现，都必须部署"尾调用优化"。这就是说，在 ES6 中，只要使用尾递归，就不会发生栈溢出，相对节省内存。

2.防抖节流

防抖

• 防抖是指在事件触发n秒后再执行，如果在n秒内再次被触发，则重新计算时间。（就是在触发某个事件后，在下一次触发之前，中间的间隔时间如果超过设置的时间才会发送请求，一直触发就不会发送请求 应用场景：
  a、scroll事件滚动触发，
  b、搜索框输入查询
  c、表单验证
  d、按钮提交事件
  e、浏览器窗口缩放，resize事件

function debounce(func, delay) {
        let timer = null // 计时器
        return function (...args) {
          clearTimeout(timer) // 清除上一次计时器
          timer = setTimeout(() => {
            // 重新定时
            func.apply(this, args)
          }, delay)
        }
      }
复制代码

节流

• 节流是指如果持续触发某个事件，则每隔n秒执行一次。

function throtte(func, time) {
        let timer = null // 计时器
        return function (...args) {
          if (timer) return // 无视，直接返回
          timer = setTimeout(() => {
            func.apply(this, args)
          }, time)
        }
      }
复制代码

 

3.深拷贝和浅拷贝

• 浅拷贝：只是拷贝一层，更深层次对象级别的只拷贝了地址

• 深拷贝：层层拷贝，每一级别的数据都会拷贝

• 浅拷贝方法：
  1. 使用 lodash 浅拷贝 clone 方法，让他们俩指向不同地址
  2. 使用 Object.assign 方法
  3. 使用es6语法的 ... 拓展运算符

• 深拷贝方法：
  1. 使用JSON.parse(JSON.stringify(obj)) ，缺点：当对象有方法和undefined属性的时候会丢失
  2. 使用递归

  • 如果存在循环引用就会出现堆栈溢出
  • 解决思路：把处理好的对象存起来，在处理新的对象的时候，会现在这个存的地方找一找有没有处理好，如果有就直接返回就行了

let obj = {
        name: "zs",
        age: 20,
        father: [2, 3, 4],
      };
 
      function deepClone(target) {
        //这一行如果不用三元判断 如果是数组会有bug会被拷贝成伪数组对象
        let tempObj = Array.isArray(target) ? [] : {};
        for (let key in target) {
          if (typeof target[key] === "object") {
            tempObj[key] = deepClone(target[key]);
          } else {
            tempObj[key] = target[key];
          }
        }
        return tempObj;
      }
 
      let obj1 = deepClone(obj);
      console.log(obj1);
复制代码