前端面试真题(一)

发布时间 2023-06-20 15:31:40作者: li&り&Lee

1.深拷贝和浅拷贝的区别

   浅拷贝:创建一个新对象,将原对象的属性值复制到新对象中,如果某个属性是引用类型(如对象、数组等),那么复制的就是引用地址,新对象和原对象共享该属性。
   深拷贝:创建一个新对象,递归地将原对象的每个属性值复制到新对象中,包括引用类型属性,新对象和原对象互不影响。

2.节流和防抖

      二者有什么区别:

  防抖:当一个动作连续触发,只执行最后一次。通俗来说,就是防止抖动,“你先抖动着,啥时候停了,在执行下一步”,例如一个搜索输入框,等输入停止之后,再出发搜索。

     防抖代码:

function throttle(fn, delay) {
  let last = 0; // 记录上一次触发的时间
  return function () {
    let now = +new Date(); // 当前时间
    if (now - last >= delay) { // 如果当前时间与上次触发时间的间隔大于delay,执行fn
      last = now;
      fn.apply(this, arguments);
    }
  };
}
输入框防抖实现html:
<template>
    <div>
       输入框: <input id="input1"/>
    </div>
</template>
js:
<script> export default { name: 'FangDou', data() { return { }; }, mounted() { const input1 = document.getElementById('input1') input1.addEventListener('keyup',this.debounce(()=>{ console.log('发起搜索',input1.value) },200)) }, methods: { debounce(fn,delay=200){ let timer = 0 return function(){ if(timer) clearTimeout(timer) timer = setTimeout(()=>{ fn.apply(this,arguments) timer = 0 },delay) } } }, }; </script>
节流:限制一个动作在一段时间内只能执行一次。节省交互沟通。流不一定指流量。“别急,一个一个来,按照时间节奏来,插队者无效”。

鼠标拖拽节流的代码实现html:
<template>
    <div>
        <div id="div1" draggable="true"
            style="width:100px;height:100px;background:#bfa;text-align:center;line-height:100px">可拖拽</div>
    </div>
</template>
<script>
export default {
    name: 'JieLiu',

    data() {
        return {

        };
    },

    mounted() {
        const div1 = document.getElementById('div1')
        div1.addEventListener('drag', this.throttle((e) => {
            console.log('鼠标拖拽的位置:', e.offsetX, e.offsetY)
        }, 100))

    },

    methods: {
        // 节流
        throttle(fn, delay = 200) {
            let timer = 0
            return function () {
                if (timer) return
                timer = setTimeout(() => {
                    fn.apply(this, arguments)
                    timer = 0

                }, delay);
            }
        }

    },
};
</script>
 
节流与防抖的区别是:
(1)节流限制执行频率,有节奏的执行;
(2)防抖限制执行次数,多次密集的出发只执行一次;
(3)节流关注过程,防抖关注结果。

3.介绍下promise

Promise 是 JavaScript 的异步编程解决方案,可以避免回调地狱,提供了链式调用、错误捕获及状态管理。一个 Promise 对象代表一个还没有完成但预期将来会完成的操作,有三个状态:Pending(进行中)、Fulfilled(已成功)与 Rejected(已失败)。

4.vue中的权限

Vue 中的权限通常是通过自定义指令、路由守卫等方式来实现。自定义指令可以指定特定角色的用户才能操作界面元素,路由守卫则可以用于控制用户是否有权限访问某个页面。

5.介绍下git

Git 是一种分布式版本控制系统,可在多人协作过程中追踪代码的更改历史和合并冲突。主要命令包括:`git init`创建仓库,`git add`添加内容,`git commit`提交更改,`git status`查看状态,`git log`查看提交记录等。

6.Vue 中组件传值方式:

(1)父组件给子组件传值用props,$parent
(2)子组件给父组件传值用$emit,$refs(vue3),$children(vue2)
(3)不相关的组件通信用event自定义事件
(4)$attrs用于接收没有被接收的属性和方法,本质上是props和$emit的候补
(5)多层级组件之间传值可以用provide(产生数据)和inject(使用数据)
(6)全局组件:全局事件总线eventBus和vuex

7.Vue 内存泄漏可能原因

 
 - 组件销毁时未取消定时器。
   - 长列表数据没有使用虚拟滚动加载。
   - 使用闭包缓存数据时未释放。
   - 对象属性或数组元素被多次引用。

防止内存泄漏的方法:
   - 在组件销毁时,取消所有与该组件相关的事件监听、定时器。
   - 使用虚拟滚动库,如 vue-virtual-scroller。
   - 谨慎使用闭包缓存数据,确保数据在不需要时能被垃圾回收。
   - 深拷贝或浅拷贝时严格控制对象属性与数组元素的引用关系。