面试滴滴，我最自信了。。

哈，大家好，我是千羽。分享一下来自深圳大学的朋友滴滴秋招一面的面经。

这一次滴滴面试官问了很多问题，主要是围绕着简历去展开。有问了node进程，还有express等等。手撕的代码比较多，对，然后还变到了vue2和vue3，目前Vue3的话现在是全面使用。

然后是写了大概有四五道算法题吧，总体来说还是比较强度比较大的，不过我这边硬着头皮扛下来的。

Node进程间通信实现，其他进程间通信方式

Socket.IO：Socket.IO 是一个为实时应用提供跨平台实时通讯的库。它使用WebSocket、Polling、XHR、JSONP、Flash、WebRTC等所有现代浏览器和移动设备支持的通信技术。
HTTP：Node.js的http模块可以实现服务器端和客户端的通信。通过在服务器端启动http服务，并在客户端发起http请求，可以实现进程间的通信。
WebSocket ：WebSocket是一种网络通信协议，它在单个TCP连接上进行全双工通信。这个协议允许在客户端和服务器之间进行实时、双向、基于文本或二进制消息的通信。
Message Queues (例如RabbitMQ, Kafka) ：这些工具提供了分布式或并行应用程序之间的异步消息传递。它们通常用于处理大量数据或确保消息传递的可靠性和持久性。
Shared Database：虽然这不是直接在Node.js进程之间进行通信的方式，但它是一种常见的方法，用于使不同的进程或服务能够共享和同步数据。
Unix Sockets：Unix Sockets是一种进程间通信机制，允许在同一台机器上的不同进程之间进行通信。
管道（Pipes）：管道是一种简单的IPC机制，它允许一个进程的输出直接成为另一个进程的输入。
Mailboxes（例如ZeroMQ）：类似于消息队列，但是提供更灵活的消息路由和分发模式。

Express和Koa的区别，中间件的实现方式 compose

Express和Koa都是基于Node.js的服务端框架，主要用于处理HTTP请求和响应。它们都提供了中间件的概念，但是中间件的实现方式以及框架本身的特性有所不同。

启动方式：在Express中，我们通常使用传统的函数形式来创建服务器。而在Koa中，我们使用new Koa()的方式来创建一个新的Koa实例。
错误处理：在Express中，我们通常使用回调函数来处理错误。而在Koa中，由于其基于ES6 generator的特性，我们使用async/await语法来处理错误，这有助于解决长期诟病的"callback hell"问题。
中间件模型：Express的中间件模型是线性的，即一个接一个地执行。而Koa的中间件模型是U型的，也可称为洋葱模型构造中间件。这意味着在Koa中，中间件的执行流程是先从外层到内层，然后再从内层到外层。这种模型使得中间件的执行更为灵活。
内置功能：Express包含了许多内置的中间件，如路由、视图渲染等。这些功能可以直接在Express应用中使用。而Koa则移除了这些内置功能，使得框架本身更轻量。同时，Koa致力于核心中间件功能，其模块化程度更高。这意味着用户只需包含所需的模块即可。

实现一个compose

代码语言：javascript复制

const Koa = require('koa');
const compose = require('koa-compose');

const app = new Koa();

// 定义一些中间件函数
const middleware1 = async (ctx, next) => {
  console.log('Middleware 1');
  await next();
};

const middleware2 = async (ctx, next) => {
  console.log('Middleware 2');
  await next();
};

// 使用compose函数组合中间件
app.use(compose([middleware1, middleware2]));

app.listen(3000);

定义了两个中间件函数middleware1和middleware2，然后使用koa-compose的compose函数将它们组合在一起。在app.use中，我们使用这个组合后的中间件。当一个请求来到时，它首先会经过middleware1，然后经过middleware2。在每个中间件中，都会打印一条日志，并调用next函数来将控制权传递给下一个中间件。

compose函数看代码写输出带try catch和抛错

以下是一个使用try-catch和抛错的Koa Compose函数的示例代码：

代码语言：javascript复制

const Koa = require('koa');
const compose = require('koa-compose');

const app = new Koa();

// 定义一个中间件函数，用于抛出错误
const throwError = async (ctx, next) => {
  console.log('Throwing error');
  throw new Error('An error occurred');
};

// 定义一个中间件函数，用于捕获错误并返回错误信息
const catchError = async (ctx, next) => {
  try {
    await next();
  } catch (err) {
    console.log('Error caught');
    ctx.status = 500;
    ctx.body = 'An error occurred';
  }
};

// 使用compose函数组合中间件，并按照从外到内的顺序执行
app.use(compose([catchError, throwError]));

app.listen(3000);

讲讲对webpack的理解

Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。它能够很好地管理与打包开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等）。以下是Webpack的主要特性和理解：

模块化：Webpack能够将js、jsx、coffee、样式sass、less，图片等作为模块来使用和处理。除了JavaScript，Webpack还可以处理其他类型的文件，如CSS、HTML、图片等，这使得Webpack成为一种通用的模块打包工具。
灵活性和扩展性：Webpack通过串联式模块加载器以及插件机制，具有更好的灵活性和扩展性。它能够灵活地处理各种模块，并且可以通过插件机制进行扩展，以适应不同的项目需求。
按需加载：Webpack支持按需加载，可以基于配置或者智能分析打包成多个文件，实现公共模块或者按需加载。这有助于优化应用程序的性能，减少不必要的代码加载，提高应用程序的加载速度。
打包：Webpack支持对CSS、图片等资源进行打包，从而无需借助Grunt或Gulp（browserify只能打包JS文件）。它可以处理各种类型的资源，并对其进行优化和打包。
性能优化：Webpack在开发时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求。它还对source map有很好的支持，有助于开发者在开发过程中更好地调试代码。
依赖分析：当Webpack处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块（不再局限js文件），然后形成资源列表，最终打包生成到指定的文件中。Webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。

vue2和vue3的区别

Vue2和Vue3在许多方面存在显著差异，包括双向数据绑定原理、是否支持碎片、API类型、定义数据变量和方法以及性能优化等方面。

双向数据绑定原理：Vue2使用ES5的Object.defineProperty() API对数据进行劫持，并结合发布订阅模式实现双向数据绑定。而Vue3则使用ES6的Proxy API对数据进行代理，这是Vue3对数据劫持的改进，它允许更细粒度的控制，包括检测数组的变化。
碎片（Fragments）：Vue3支持碎片，这意味着一个组件可以有多个根节点。这使得在构建如分割面板或模态对话框等组件时更加灵活。
API类型：Vue2使用选项式API，其中数据、计算、方法等属性在各自的选项中定义。相比之下，Vue3引入了基于组合的API，通过函数方式分割，使代码更简洁和整洁。
定义数据变量和方法：在Vue2中，数据被放入data函数中定义，而方法在methods中定义。而在Vue3中，将数据放入setup函数中定义，而方法直接在组件内定义。
性能优化：Vue3相对于Vue2在性能上有所提升。例如，当数据量较大时，Vue3的性能表现优于Vue2。此外，Vue3利用Proxy API的优势，可以更高效地检测数组内部数据的变化。
启动项目命令：Vue3改变了启动项目的命令，从npm run dev变成了npm run serve。此外，一些文件结构也有所改变，如移除了config和build文件，移除了vue.config.js文件，并将public文件夹中的index.html移到了public文件夹中。
TypeScript和PWA支持：Vue3加入了TypeScript的支持，使得开发者可以使用类型系统来编写和调试代码。同时，Vue3也支持PWA（Progressive Web Apps），使得开发的应用程序能够更好地利用Web技术提供的高质量用户体验。

vue组件传值$attr

在Vue中，attrs 是一个特殊的属性，用于传递父组件中没有被子组件的props捕获的属性。这意味着，当父组件传递一个属性给子组件，但子组件没有使用props来接收这个属性时，这个属性会被放入attrs中。

attrs包含父作用域中不被prop所识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v-bind="

在Vue 2.4版本中，为了解决该需求，引入了attrs和listeners，新增了inheritAttrs选项。

使用attrs时，需要注意的是，如果子组件需要接收父组件传递的属性，应该使用props来接收，而不是依赖attrs。因为

Vue的插槽有哪几种类型，分别有什么区别

Vue中有三种插槽：普通插槽、具名插槽和作用域插槽。

普通插槽：普通插槽就是放在子组件的一个站位，父组件代码中需要添加< slot>进行站位，不然不展示。
具名插槽：给内容添加名字，先在父组件中定义好名字，子组件接收时使用<slotname="具名插槽名称">< /slot>。
作用域插槽：作用域插槽是一种更灵活的插槽，子组件中定义<slotname="具名插槽名称"：data="变量">，父组件中定义[templatev-slot:具名插槽名称="{变量}"]< /template>。

手撕最长公共子串 LeetCode 1143 middle

最长公共子串问题是一个经典的动态规划问题，而 LeetCode 1143 的题目要求是找到两个字符串的中间公共子串。这个问题的本质和最长公共子串问题是一样的，只是目标变成了找到中间的子串，而不是最长的子串。

下面是一个 Java 实现的例子：

代码语言：javascript复制

public class Solution {
    public String middle(String word1, String word2) {
        int m = word1.length();
        int n = word2.length();
        int[][] dp = new int[m 1][n 1];
        for (int i = 1; i <= m; i  ) {
            for (int j = 1; j <= n; j  ) {
                if (word1.charAt(i-1) == word2.charAt(j-1)) {
                    dp[i][j] = dp[i-1][j-1]   1;
                } else {
                    dp[i][j] = Math.max(dp[i-1][j], dp[i][j-1]);
                }
            }
        }
        int len = dp[m][n];
        int mid = (m   n - len) / 2;
        StringBuilder sb = new StringBuilder();
        for (int i = m - 1, j = n - 1; len > 0; len--) {
            if (word1.charAt(i) == word2.charAt(j)) {
                sb.append(word1.charAt(i));
                i--;
                j--;
            } else if (dp[i-1][j] > dp[i][j-1]) {
                i--;
            } else {
                j--;
            }
        }
        return sb.reverse().toString();
    }
}

手撕深拷贝

深拷贝在JavaScript中通常是指复制一个对象，包括其所有的属性和子对象，而不共享任何引用。这是一种非常重要的操作，因为它可以防止原始对象被修改。

使用JSON的stringify和parse方法

这是最简单的方法，但是它不能处理循环引用的情况，也不能处理函数和其他非JSON类型的属性。

代码语言：javascript复制

function deepCopyUsingJSON(obj) {
    return JSON.parse(JSON.stringify(obj));
}

使用递归

这种方法可以处理更复杂的情况，包括函数、循环引用等。但是它需要更多的代码。

代码语言：javascript复制

function deepCopyUsingRecursion(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    let copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepCopyUsingRecursion(obj[key]);
        }
    }
    return copy;
}

使用第三方库

有一些第三方库如 lodash 的 _.cloneDeep 方法可以方便的实现深拷贝。但这是建立在引入外部库的基础上的。

判断数据类型的方法

在JavaScript中，可以使用typeof运算符或instanceof运算符来判断数据类型。

使用typeof运算符：

代码语言：javascript复制

var num = 123;
console.log(typeof num); // 输出 "number"

var str = "hello";
console.log(typeof str); // 输出 "string"

var obj = {};
console.log(typeof obj); // 输出 "object"

typeof运算符可以判断基本数据类型，包括number、string、boolean、null、undefined、symbol等。对于对象类型，typeof运算符返回"object"，但需要注意的是，对于数组和函数类型，typeof运算符也会返回"object"。

使用instanceof运算符：

代码语言：javascript复制

var arr = [];
console.log(arr instanceof Array); // 输出 "true"

var func = function() {};
console.log(func instanceof Function); // 输出 "true"

instanceof运算符可以判断对象是否是某个构造函数或类实例。对于数组和函数类型，可以使用Array和Function构造函数来判断。对于自定义对象类型，可以使用自定义构造函数来判断。需要注意的是，instanceof运算符对于基本数据类型和null类型不起作用。

手撕发布订阅模式

发布-订阅模式（Pub-Sub）是一种消息传递模式，其中发送者（发布者）发送消息，而接收者（订阅者）通过注册来接收消息。应用场景：事件驱动的系统、实时应用等。

以下是一个简单的发布-订阅模式的JavaScript实现：

代码语言：javascript复制

class EventBus {
    constructor() {
        this.subscribers = {};
    }

    subscribe(event, callback) {
        if (!this.subscribers[event]) {
            this.subscribers[event] = [];
        }
        this.subscribers[event].push(callback);
    }

    publish(event, data) {
        if (this.subscribers[event]) {
            this.subscribers[event].forEach(callback => callback(data));
        }
    }
}

// 使用示例：
const eventBus = new EventBus();

// 订阅事件
eventBus.subscribe('message', (data) => {
    console.log(`Received message: ${data}`);
});

// 发布事件
eventBus.publish('message', 'Hello, world!'); // 输出: Received message: Hello, world!

这个简单的实现中，有一个EventBus类，它维护了一个subscribers对象，该对象存储了每个事件的订阅者（回调函数）。subscribe方法允许订阅者注册他们感兴趣的事件，而publish方法允许发布者发布一个事件，这会触发所有注册了该事件的订阅者。