2022年面试题之JS

1. js 数组的哪些方法会改变原数组

pop() 删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值
push() 方法可把它的参数顺序添加到 arrayObject 的尾部
reverse() 将数组中元素颠倒过来,该方法会改变原来的数组，而不会创建新的数组。
shift() 数组的第一个元素从其中删除，并返回第一个元素的值,
sort() 在原数组上进行排序
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度

具体参考：https://blog.csdn.net/m0_62239766/article/details/124748963

2. new 关键字的底层逻辑

// 构造一辆汽车, 入参是车的品牌
function Car (logo) {
    this.logo = logo || 'unknown name'
}
// 汽车的基本功能放置在原型链上
Car.prototype={ 
    start(){},
    run(){},
    stop(){}
}
//创建汽车
let myCar = new Car('myCar')

执行new操作是发生了啥事：
① 创建一个新的对象 let myCar = {}
② 为新的对象指定_proto_属性 myCar._proto_= Car.prototype
③ 利用apply/call 对新对象执行构造方法 Car.apply( myCar, arguments)

3. 作用域与变量提升

作用域：对某个范围产生作用，外部不能访问内部变量，但内部可以访问外部变量
变量提升：变量的声明被自动移动到了函数或全局代码的最顶上

4. JavaScript的设计模式

单例模式：它只实例化一次（保证一个类仅有一个实例，并提供一个访问它的全局访问点。）
策略模式：策略模式是指有一定行动内容的相对稳定的策略名称。策略模式作为一种软件设计模式，指对象有某个行为，但是在不同的场景中，该行为有不同的实现算法。
代理模式：为一个对象提供一个代用品或占位符，以便控制对它的访问。
发布订阅模式：也称作观察者模式，定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知
工厂模式：将创建对象的过程单独封装。

5. 函数 防抖和 节流

防抖：在短时间内多次触发同一个函数，只执行最后一次。举例：搭乘公交车的时候，陆续有不同的乘客上车，但师傅只会在最后一个乘客上车后才关门。

function debounce(fn, wait = 1000) {
    let timer = null;
    let _this = this;
    return function debounced() {
        // 重置计时器
        if (timer) clearTimeout(timer);
        // 新计时器
        timer = setTimeout(() => {
            fn.call(_this, arguments)
        }, wait);
    };
}        

节流：多次触发同一个函数，同一段时间内只执行一次。举例：获取验证码很多都会限制 60s 的时间，在 60s 内再次获取验证码是无效，只能获取一次。下个60s才能再次获取。

function throttled(fn, wait = 1000) {
   let previous = 0;
   let _this = this;
   return function(){
      const now = new Date();
      if (now - previous > wait) {
         fn.apply(_this, args);
         previous = now;
      }
   };
}

 6. 服务端渲染 ssr 

简述：
    又称为后端渲染，服务器端在返回html之前，在html特定的区域特定的符号里用数据填充，再给客户端，客户端只负责解析HTML。
    鼠标右击点击查看源码时，页面代码可以在源代码中看到。
    性能消耗在服务器端，用户达到一定程度的时候，后端会考虑缓存
    部分数据，避免消耗过多的资源重复渲染。
优点：
    前端耗时少，首次渲染快，更快的内容到达时间
    利于SEO
缺点：
    网络传输数据量大，占用部分服务器运算资源
    用户体验差
    不容易维护，前端修改部分html/css后端也要改

场景：

　　　　注重SEO的新闻网站，非强交互的页面，建议采用服务器端渲染

具体实例参考：https://www.likecs.com/show-182937.html

7. 什么是闭包？闭包的使用场景有哪些？闭包的缺点是什么？

闭包实际上就是一个函数中嵌套了另一个函数，内部函数可以访问外部函数的变量。

使用场景： setTimeout，封装私有变量，防抖节流

缺点：闭包会使函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，可能会导致内存泄露。解决方法是在退出函数之前，将不使用的变量全部删除。