关于我调部门感觉又重新面试一次这件事，做出知识总结

前言

这篇文章的起因是，当时上周部门调整，要调动到其他部门，最开始我以为就走个流程意思意思，一点准备都没有。没想到，去其他部门还经过了3面，感觉挺正式的，在这期间问的问题有些令我印象深刻，发现了许多不足吧，我是去年毕业的，工作了1年多了，本来以为一些基础知识掌握的差不多了，路还远着，还得学啊！本来那天我还准备一下班就回去玩战地2042，免费周啊！啪的一下兴趣全无，总结一下知识吧，指不定什么时候用上（手动狗头）

节流

节流是指一定时间内只触发一次函数调用，如果在指定时间内多次触发，执行第一次，其他的触发将会被忽略，直到过了设定的时间间隔才触发。

function throttle (fn,delay) {
    let timer;
    retrun function (...args) {
        if(!timer) {
            fn(this,args)
             timer = settimeout(()=>{
                timer=null
            },delay)
        }
    }
}

防抖

防抖是在函数调用后，在指定时间间隔后才触发一次。如果在这个时间间隔内再次触发函数，将重新计时，直到过了设定的时间间隔才会触发最后一次函数调用。

function debounce (fn,delay) {
    let timer;
    retrun function (...args) {
        if(timer) {
          clearTimetout(timer)
        }
         timer = settimeout(()=>{
             fn(this,args)
              timer=null
         },delay) 
    }
}

数据扁平化

数组

function flatter(arr) {
    let result = []
    for(let i =0;i<arr.length;i++) {
        if(Array.isArray(arr[i]) {
            result = result.concat(flatter(arr[i]))
        } esle {
            result.push(arr[i])
        }
    }
    return result
}

去重

const arr1 = [...new Set(arr)]

const arr1 = arr.map((item,index)=>{
    return arr.indexof(item)==index
})

查找字符串中出现最多的字符

当时手写了一半，str.split(item).length应该还要-1才是当前字符出现的次数

const str = ref<string>('sdfgsgdd');
const fn = (str: string) => {
  const arr = Array.from(str);
  let maxCount = 0;
  let mostFrequentChar = '';
  const Nsome = [...new Set(arr)];
  Nsome.forEach((item) => {
    const count = str.split(item).length - 1;
    if (count > maxCount) {
      maxCount = count;
      mostFrequentChar = item;
    }
  });
  console.log('出现最多的次数，字符', maxCount, mostFrequentChar);
};

闭包及其应用场景

我的回答是：
函数里面嵌套函数，并且内部函数引用了外部函数的变量，就是函数能访问其作用域外的变量

应用场景：
我的回答其中之一是：vueX中状态共享是使用了闭包，节流，防抖
但在 Vuex 中，闭包主要用于封装和共享状态，而不是用于访问和操作外部函数的变量。它使用了闭包的概念，但不是严格意义上的闭包。

1.模块化开发 2.回调函数 3.延迟执行（节流，防抖）

原型&原型链及其应用场景

1. 原型（Prototype）：

• 每个 JavaScript 对象都有一个原型（prototype），它是一个对象。
• 对象的原型用于共享属性和方法，当我们访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端。
• 原型可以通过 proto 属性访问，也可以通过 Object.getPrototypeOf() 方法获取。

2. 原型链（Prototype Chain）：

• 原型链是由对象的原型组成的链式结构，它用于实现对象之间的继承。
• 当我们访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端。
• 原型链的顶端是 Object.prototype，它是所有对象的原型。

应用场景：

• 继承：通过原型链，我们可以实现对象之间的继承，一个对象可以继承另一个对象的属性和方法。这样可以避免重复定义和维护相似的代码，提高代码的重用性和可维护性。
• 共享属性和方法：通过原型链，我们可以将属性和方法定义在原型上，从而实现对象之间的共享。这样可以节省内存空间，避免重复创建相同的属性和方法。
• 扩展原生对象：通过修改原型链，我们可以扩展 JavaScript 的原生对象，为其添加新的方法和属性。这样可以为原生对象添加自定义的功能，满足特定的需求。

在没有class之前，js是怎么做面向对象的

没答出来，只知道js可以通过class实现面向对象，然后又被问在没有class之前，js是怎么做面向对象的。这也是原型链的应用场景之一，可能是前面原型链的应用场景没说这个，想给我一个提示。

在没有class关键字之前，JavaScript使用原型继承来实现面向对象编程。
javaScript 中的每个对象都有一个原型（prototype），原型是一个对象，它包含了共享的属性和方法。当我们访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript 会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端。

通过原型链，我们可以实现对象之间的继承和共享属性和方法。下面是一个使用原型继承的示例：

// 创建一个构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}
// 在构造函数的原型上定义方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};
// 创建一个 Person 对象
const person1 = new Person('Alice', 25);
// 调用对象的方法
person1.sayHello(); // 输出 "Hello, my name is Alice and I am 25 years old."

node是什么，express是什么，node服务中的中间件是用来干什么的

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，可以用于构建高性能的网络应用程序。它允许使用 JavaScript 在服务器端运行代码，而不仅仅局限于在浏览器中运行。

Express 是一个基于 Node.js 的 Web 应用程序框架，它提供了一组简洁而灵活的功能，用于构建 Web 应用程序和 API。Express 提供了路由、中间件、模板引擎等功能，使得构建 Web 应用程序变得更加简单和高效。

中间件的作用是增强和扩展 Node.js 服务的功能，使得处理请求和响应的过程更加灵活和可定制。通过使用中间件，可以将常见的功能模块化，提高代码的可维护性和可重用性。

Express 提供了一些内置的中间件，同时也支持自定义中间件。您可以使用内置的中间件，如 express.json()、express.urlencoded() 来处理请求体的解析，或者编写自己的中间件来满足特定的需求。

你h5怎么处理兼容性

因为是vite+v3项目，vite官方有推荐的插件库，在插件库中有一个关于浏览器兼容支持的插件：@vitejs/plugin-legacy

插件@vitejs/plugin-legacy的作用是为打包后的文件提供传统浏览器兼容性支持

1. 首先安装插件：npm i @vitejs/plugin-legacy -D
2. 然后在vite.config.js中配置

import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig( {
    plugins: [
        legacyPlugin({
            targets:['chrome 52'],  // 需要兼容的目标列表，可以设置多个
            additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11时需要此插件
        })
    ]
})

rem,px,em这些有什么区别

1. px（像素）：px 是绝对单位，表示屏幕上的一个物理像素点。它是最常用的单位，具有固定的大小，不会根据其他因素而改变。例如，font-size: 16px; 表示字体大小为 16 像素。
2. rem（根元素字体大小的倍数）：rem 是相对单位，相对于根元素（即 元素）的字体大小。如果根元素的字体大小为 16 像素，那么 1rem 就等于 16 像素。如果根元素的字体大小为 20 像素，那么 1rem 就等于 20 像素。通过设置根元素的字体大小，可以方便地调整整个页面的大小。例如，font-size: 1.5rem; 表示字体大小为根元素字体大小的 1.5 倍。
3. em（相对于父元素字体大小的倍数）：em 也是相对单位，相对于父元素的字体大小。如果父元素的字体大小为 16 像素，那么 1em 就等于 16 像素。如果父元素的字体大小为 20 像素，那么 1em 就等于 20 像素。通过设置父元素的字体大小，可以影响其子元素的大小。例如，font-size: 1.2em; 表示字体大小为父元素字体大小的 1.2 倍。

总结来说，px 是绝对单位，不会随其他因素改变；rem 是相对于根元素字体大小的倍数，可以方便地调整整个页面的大小；em 是相对于父元素字体大小的倍数，可以影响子元素的大小。

在实际使用中，可以根据需求选择合适的单位。对于响应式设计，使用 rem 可以方便地调整整个页面的大小；对于局部样式，可以使用 px 或 em 来控制具体的大小。

你工作中遇到了什么坑或者解决什么让自己印象深刻的问题

• element-plus的el-table表格的二次封装（可以使用tsx）
• el-table表格的动态合并
• h5 ios时调起键盘会把整个布局往上推
• h5调用封装的app JSbrige完成返回
• 登录的拼图验证
• h5嵌套在微信小程序中时，由我们h5跳到三方提供的安全验证h5页面，返回时，本地存储的东西没了
• 利用git hooks+husky+eslint完成前端代码规范和提交规范
• 银行卡拖拽排序，把排完的顺序返回服务端

上面这些都是我解决了，也不仅仅只有这些，回头想了了下明明自己有很多可以说的，在当时就说了2，3个，然后负责人问我还有吗时，我卡壳了，居然不知道还要说什么。后面我感觉也是根据这个展开来问的

V2混入和V3的hooks，为什么V3要改成hooks的方式

感觉应该是问hooks的好处吧？反正我是答的不太对的，以下是总结：

Vue 3 引入了 Composition API（包括 setup 函数和 hooks），这是一个新的方式来组织和复用代码，与 Vue 2 的混入（mixins）有所不同。
混入在 Vue 2 中被广泛使用，它们允许你在多个组件之间共享行为。然而，混入有一些问题：

1. 命名冲突：如果混入和组件有相同的方法或数据属性，可能会导致冲突。
2. 来源不明：当一个组件使用了多个混入时，可能很难确定一个特定的方法或数据属性来自哪个混入。
3. 复杂性：混入可以包含生命周期钩子、方法、数据等，这可能会增加理解和维护组件的复杂性。
   相比之下，Vue 3 的 Composition API（包括 hooks）提供了一种更灵活、更可控的方式来组织和复用代码：
4. 更好的逻辑复用和代码组织：你可以将相关的代码（如数据、方法和生命周期钩子）组织在一起，而不是强制按照 Vue 的选项（data、methods、created 等）来组织代码。
5. 更好的类型推断：对于使用 TypeScript 的项目，Composition API 提供了更好的类型推断。
6. 更清晰的来源：每个函数和响应式数据的来源都非常明确，因为它们都是从特定的 hook 或 setup 函数返回的。
   因此，虽然 Vue 3 仍然支持混入，但推荐使用 Composition API 来组织和复用代码。

vue3中怎么封装一个自定义指令

• 通过app.directive()方法注册指令，该方法接受两个参数，第一个参数是指令的名称，第二个参数是一个对象，包含指令的各个生命周期的钩子函数
• 然后我们就可以在生命周期的钩子函数中定义指令的行为，根据指令的需求，在相应的生命周期钩子函数中编写逻辑代码

什么情况下会使用自定义指令

我的回答是：想要操作dom元素时并且这种类似情况经常出现，如节流和防抖指令，就是给dom加上disabled。按钮权限指令，给当前按钮dom一个显示和隐藏

拖拽排序

拖拽排序的实现原理主要涉及一下几个步骤：

• 1.监听拖拽事件: 浏览器提供了一系列的拖拽事件，设置draggable=”true”
• 2. 开始拖拽：当用户开始拖拽一个元素时，会触发 dragstart 事件。在这个事件的处理函数中，我们可以通过 传入的dragstart(e,index) ,中的index来设置当前被拖拽元素的下标。
• 3. 拖拽过程：当用户拖拽元素时，会不断触发 dragover 事件。在这个事件的处理函数中，我们需要调用 event.preventDefault 方法来阻止浏览器的默认行为，否则无法触发 拖拽 事件。
• 4. 拖拽到另一个元素区域时：当用户拖拽到另一个元素时，会触发 dragenter 事件。在这个事件的处理函数中，我们可以通过 dragente(e,index)方法来获取拖拽到的元素的下标，然后根据获取的两下标来更新列表的排序。

表格动态合并

element-plus表格合并（例如前两列合并） | 耀耀切克闹 (yaoyaoqiekenao.com)

模拟new实例创建的过程

• 1.创建了新对象并将._proto_指向构造函数.prototype
• 2.将this指向新创建的对象
• 3.返回新对象

function newSimulator() {
    //1.创建新对象
    const obj = new Object()
    //2.设置_proto_为构造函数prototype
    const constructor = [].shift.call(arguments)
    obj._proto_ = constructor.prototype
    //3.this指向新对象，也就是改变this的指向
    const ret = constructor.apply(obj,arguments)
    //4.返回对象或this
    return typeof ret = 'object' ? ret : obj
}

冒泡排序

const arr = [1,7,9,2,3,5]
for(let i=0;i<arr.length;i++){
    for(let j=0;j<arr.length-i-1;j++){
        let a = []
        if(arr[j]<arr[j+1]){
            a =arr[j]
            arr[j]=arr[j+1]
            arr[j+1]=a
        }
    }
}

深拷贝

1.使用 JSON 序列化和反序列化

const obj={
   arr:[1,2]
}
const clone = JSON.parse(JSON.stringify(obj))

2.使用递归完成深拷贝

这种方式通过递归地遍历原始对象，并对该对象的的属性进行逐一的深拷贝，以创建一个原对象的独立副本。

function deepCloneObject(obj) {
       if(obj ===null||typeof object !='object') {
           return obj
       }
       const clone = Array.isArray(obj)?[]:{}
       for(let key in obj) {
           if(object.prototype.hasOwnProperty.call(obj,key))
           clone[key] = deepClone(obj[key])
       }
       retrun clone
} 

函数柯里化

函数柯里化是一种将具有多个参数的函数转换为逐个应用参数的函数序列的技术。通过柯里化，我们可以将一个函数的多个参数转化为一系列嵌套的函数调用。

柯里化的优点是可以创建可复用的函数模板。通过部分应用来生成新的函数。这样可以更灵活地使用函数，并且可以方便的创建更专注于特定功能的函数。
简单的函数柯里化例子：

function add(x) {
  return function(y) {
    return x + y;
  }
}

// 使用柯里化的add函数
var add5 = add(5);
console.log(add5(3)); // 输出 8
console.log(add5(7)); // 输出 12

封装一下

function curry(fn) {
    return function curried(...args) {
        if(args.length>=fn.length) {
            return fn.apply(this,args)
        } else {
            return function(...moreArgs) {
                return curried.apply(this,args.concat(moreArgs))
            }
        }
    }
}

数组API的实现

forEach

Array.portotype.my_forEach = function(callback) {
    for(let i=0;i<this.length;i++) {
        callback(this[i],i,this)
    }
}

map

Array.portotype.my_map = function(callback) {
    let res= []
    for(let i=0;i<this.length;i++) {
     callback(this[i],i,this)&&res.push( callback(this[i],i,this))
    }
    return res
}

filter

Array.portotype.my_filter = function(callback) {
    let res= []
    for(let i=0;i<this.length;i++) {
       callback(this[i], i, this) && res.push(this[i])
    }
    return res
}

前端模块化

问：你讲讲前端模块化吧
答：模块化的开发方式可以提高代码复用率，方便进行代码的管理，通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。

问：模块化有哪几种标准？
答：目前流行的js模块化规范有CommonJS、AMD、CMD以及Es6的模块系统

问：ES Modules 和CommonJS的一些区别
答：
1.使用语法层面，CommonJs是通过modules.exports,exports导出，require导入；ES Modules则是export导出，import导入
2.CommonJs是运行时加载模块，EsModules是在静态编译期间就确定模块的依赖
3.EsModulse在编译期间会将所有import提升到顶部,CommonJs不会提升require
4.CommonJs导出是一个值拷贝，会对加载结果进行缓存，一但内部再修改这个值，则不会同步到外部。ESModule是导出的一个引用，内部修改可以同步到外部
5. CommonJs中顶层的this指向这个模块本身，而ESModule中顶层this指向undefined
6. CommonJS加载的是整个模块，将所有的接口全部加载进来，ESModule可以单独加载其中的某个接口

vue的数据双向绑定的原理

vue的响应式原理是采用‘发布-订阅’的设计模式结合object.defineProperty()劫持各个属性的getter和setter，在数据发生变动时通过调用Deo.notity函数发布订阅给观察者watcher，让其更新响应的视图。

虚拟dom

虚拟dom是用来表现真实dom结果的javaScript对象树，是构建在浏览器真实dom上的抽象层，虚拟dom是可以直接在内存中操作的，可以通过diff算法来新旧dom的差异，将最终变化应用到真实dom上

diff算法

diff算法又称虚拟Dom的周界算法，vue的diff算法是通过深度优先、先序遍历的方式进行的，它将前后两个虚拟Dom树进行逐层比较，当找到某一层不一样的节点时，停止下降，然后比较这些节点的子节点，当所有的子节点都完成比较之后，算法会由下至上进行回溯，此过程被称为执行patch操作。在执行patch操作时，Vue对于不同类型的节点的更新方式也不同，对于元素节点可以更新他的属性和子节点；对于文本节点，只能更新它的文本内容；对于每个子节点，如果key值相同，可以进行复用或者重新排序，或者将其他的节点移动到这个位置。

vue中nextTick的理解及作用

使用场景描述：更改一个数据，导致dom元素的width发生了更改，但又要获取这个更新后的dom元素的width，可以用nextTick
vue2 中的nextTick是在下次Dom更新循环之后执行回调函数，并且是作为vue实例的方法调用的

this.$nextTick(() => { // 组件的DOM已经更新完毕，可以进行相应操作 // ... });

Vue 3的nextTick作为一个独立的函数导入，返回一个Promise，并且可以直接传递回调函数作为参数。这些变化使得Vue 3中的nextTick更加灵活和易于使用。

// Vue 3 
import { nextTick } from 'vue'; 
nextTick(() => { // 在下次DOM更新循环之后执行 });

vue在实例挂载的过程中发生了什么？

1. 实例化：首先，Vue.js会创建一个新的Vue实例。在这个过程中，Vue.js会设置实例的各种属性和方法，包括数据对象、计算属性、方法、指令等。
2. 编译模板：Vue.js会将模板编译成渲染函数。模板就是包含Vue特定语法的HTML代码。编译过程中，Vue.js会解析模板中的指令（如v-if、v-for等）和插值表达式（如），并将它们转换为JavaScript代码。
3. 创建虚拟DOM：渲染函数会被调用，生成一个虚拟DOM树。虚拟DOM是对真实DOM的轻量级表示，它可以更高效地处理DOM的更新。
4. 挂载：最后，Vue.js会将虚拟DOM渲染为真实DOM，并将其挂载到指定的元素上。这个过程通常在调用vm.$mount()方法或者在实例化Vue时传入el选项后发生。
5. 更新：当数据变化时，Vue.js会重新执行渲染函数，生成新的虚拟DOM，并与旧的虚拟DOM进行对比（这个过程称为diff）。然后，Vue.js会根据diff结果，以最小的代价更新真实DOM。

这个过程中还会触发一系列的生命周期钩子，如created、mounted等，开发者可以在这些钩子中执行自己的代码。

vue2中data是一个函数而不是对象的原因

data之所以是一个函数，是因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，这样，可以避免多处调用之间的数据污染。

vue2中给对象添加新属性界面页面不刷新

vue2是用Object.defineProperty实现数据响应式，而后面新增的属性，并没有通过Object.defineProperty设置成响应式数据，所以页面没变化，常用解决方式：

• Vue.set()
• Object.assign()
• $forcecUpdated()

Vue SSR的实现原理

vue.js的ssR是一种在服务器上预渲染Vue.js应用程序的技术。

1. 服务器接收请求：当服务器接收一个请求时，它会创建一个新的Vue实例。
2. 创建渲染器：使用vue-server-renderer包创建一个渲染器。
3. 渲染页面：服务器使用渲染器将Vue实例渲染为Html字符串。
4. 发送响应：服务器将渲染后的Html字符串作为响应发送给客户端。
5. 客户端接收响应：客户端接收到服务器的响应后，将HTML字符串解析为DOM并显示给用户。
6. 激活(Hydration): Vue在客户端创建一个新的Vue实例，将其挂载到服务器收到的Dom上

keep-alive的使用

keep-alive的主要作用是缓存路由组件，以提高性能

<router-view v-slot="{ Component }">  
    <keep-alive :include="permissionStore.keepAliveName">  
        <component :is="Component" :key="$route.path" />  
    </keep-alive>  
</router-view>

1. router-view是 Vue Router 的一个组件，用于渲染当前路由对应的组件。
2. v-slot=”{ Component }” 是一个插槽，用于获取当前路由对应的组件。
3. keep-alive 是 Vue 的一个内置组件，用于缓存组件，避免重复渲染。
4. :include=”permissionStore.keepAliveName” 是的一个属性，表示只有名称在 permissionStore.keepAliveName 中的组件会被缓存。
5. 是一个动态组件，:is=”Component” 表示组件的类型由 Component 决定，:key=”$route.path” 表示每个路由路径对应一个唯一的组件实例。

Vue项目中有封装axios吗？主要是封装哪方面的？

• 1.封装前需要和后端协商好一些约定，请求头，状态码，请求时间….
• 2.设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分
• 3.移除重复的请求，如果请求在pending中，提示’操作太频繁，请稍后再试’
• 4.用map结构根据相应状态码处理错误信息
• 5.请求拦截，若headers中没有token的，移除请求
• 6.响应拦截器，例如服务端返回的message中有’message’，提示’请求超时，请刷新网页重试’
• 7.请求方法的封装，封装get、post请求方法，使用起来更为方便

css预处理器

css预处理器扩充了css语言，增加了诸如变量、混合（mixin）、函数等功能，让css更易维护、方便。本质上。预处理是css的超集。包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器编译生成对应的css文件。

如何实现上拉加载

触底公式：

scrollTop + clientHeight >= scrollHeight

简单实现：

let clientHeight = document.documentElement.clientHeight;//浏览器高度
let scrollHigiht = documnet.body.scrollHeight;//元素内容高度的度量，包括由于溢出导致的视图中不可见内容
let scrollTop = documnet.body.scrollTop; //滚动视窗的高度距离`window`顶部的距离
let distance = 50;  //距离视窗还用50的时候，开始触发；

if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
    console.log("开始加载数据");
}

如何实现下拉刷新

关于下拉刷新的原生实现，主要分成三步：

1. 监听原生touchstart事件，记录其初始位置的值，e.touches[0].pageY;
2. 监听原生touchmove事件，记录并计算当前滑动的位置值与初始位置值的差值，大于0表示向下拉动，并借助CSS3的3. translateY属性使元素跟随手势向下滑动对应的差值，同时也应设置一个允许滑动的最大值
3. 监听原生touchend事件，若此时元素滑动达到最大值，则触发callback，同时将translateY重设为0，元素回到初始位置。

封装和使用JSBrige

1. 定义协议：首先，需要定义一种协议，用于约定H5页面与App之间的通信规则。这可以是一组自定义的URL Scheme或JavaScript函数。
2. 注册事件监听：在H5页面中，通过JavaScript代码注册事件监听器，用于接收来自App的消息或回调。可以使用window.addEventListener或其他类似的方法来监听特定的事件。
3. 发送消息给App：在H5页面中，通过调用JSBridge提供的方法，将消息发送给App。这可以是通过修改URL Scheme的方式，或者调用App提供的JavaScript接口。
4. 处理App的消息或回调：在App原生代码中，通过监听URL Scheme或执行JavaScript代码的方式，接收来自H5页面的消息或回调。根据协议约定，处理相应的逻辑或调用相应的功能。
5. 回调结果给H5页面：在App原生代码中，根据协议约定，将处理结果或回调信息发送回H5页面。可以通过修改URL Scheme的方式，或者调用H5页面中注册的JavaScript回调函数。

个人博客

耀耀切克闹 (yaoyaoqiekenao.com)

gitHub

DarknessZY (zhangyao) (github.com)