小浣熊写代码，让我每天摸鱼时间增加 2h

作者：landred

2024-07-01
江苏
本文字数：2444 字
阅读完需：约 8 分钟

作为一名前端程序猿，对于一个新的事物总是有种跃跃欲试的冲动，无意间发现了小浣熊，有点惊喜和不安，就开始了马不停蹄的使用和试验，注册环节我就略过，接下来直接给大家上用例也可以说面试😄，看一下小浣熊当前的代码等级。

面试开始：

一、做一个简单的自我介绍

对于这个回答，似乎还缺少些什么，前端框架、UI 库和打包工具，工程化这些都还没有提及，让我们继续谈谈你对这些的认识。

二、说说你的 Vue 的理解，以及 Vue3 的那些优点

小浣熊的回答：

Vue 是一个渐进式的 JavaScript 框架，用于构建用户界面。它易于集成到项目中，并且提供了许多强大的功能，例如响应式数据绑定、组件系统、路由和状态管理等。

Vue 3 是 Vue 的最新版本，它带来了许多改进和优化。以下是一些主要的优点：

性能优化: Vue 3 的性能得到了显著提升，这得益于它的轻量化设计和优化的 C++代码生成。
更小的包大小: Vue 3 的包大小更小，这有助于减少加载时间。
更好的 TypeScript 支持: Vue 3 提供了更好的 TypeScript 支持，这使得静态类型检查更加容易。
Composition API: Vue 3 引入了 Composition API，这是一种新的 API，它使得代码更加灵活和可维护。
Teleport: Vue 3 引入了 Teleport，这是一种可以将子组件渲染到 DOM 中任何位置的功能。
Fragment: Vue 3 引入了 Fragment，这是一种可以将多个元素组合成一个元素，从而避免多余的 DOM 节点。
更好的性能: Vue 3 的性能得到了显著提升，这得益于它的轻量化设计和优化的 C++代码生成。
Fragments: Vue 3 引入了 Fragments，允许开发者将多个元素组合成一个元素，这样可以避免多余的 DOM 节点。

总的来说，Vue 3 是一个强大且灵活的框架，它为开发者提供了许多新功能和优化，有助于创建更高效、更可维护的应用程序。

面试官（自白）：不错嘛，小伙子回答的还比较全，接下来让我们写一些代码

三、手写一下防抖和节流

防抖函数：

function debounce(func, wait) {
 let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
 }, wait);
 };
}

复制代码

节流函数：

function throttle(func, limit) {  let lastFunc;  let lastRan;  return function () {    const context = this;    const args = arguments;    if (!lastRan) {      func.apply(context, args);      lastRan = Date.now();    } else {      clearTimeout(lastFunc);      lastFunc = setTimeout(function () {        if ((Date.now() - lastRan) >= limit) {          func.apply(context, args);          lastRan = Date.now();        }      }, limit - (Date.now() - lastRan));    }  };}

复制代码

可以可以，那么接下来让我门来个基础点的知识

四、手写 promise

小浣熊的答案：

function Promise(fn) {  let state = 'pending'; // pending | fulfilled | rejected  let value = null;  let handlers = [];
  function fulfill(result) {    state = 'fulfilled';    value = result;    handlers.forEach(handle);    handlers = null;  }
  function reject(error) {    state = 'rejected';    value = error;    handlers.forEach(handle);    handlers = null;  }
  function handle(handler) {    if (state === 'pending') {      handlers.push(handler);    } else {      if (state === 'fulfilled' && typeof handler.onFulfilled === 'function') {        handler.onFulfilled(value);      }      if (state === 'rejected' && typeof handler.onRejected === 'function') {        handler.onRejected(value);      }    }  }
  this.then = function(onFulfilled, onRejected) {    return new Promise(function(resolve, reject) {      handle({        onFulfilled: function(value) {          try {            resolve(onFulfilled(value));          } catch (ex) {            reject(ex);          }        },        onRejected: function(error) {          try {            resolve(onRejected(error));          } catch (ex) {            reject(ex);          }        }      });    });  };
  this.catch = function(onRejected) {    return this.then(null, onRejected);  };
  fn(fulfill, reject);}

复制代码

可以看出对于 promise 的重写，小浣熊的功力不一般。OK 我们在来一个基础一点的算法～

五、零钱兑换组合数

小浣熊答：

这个问题可以用动态规划来解决。具体来说，我们可以使用一个数组 dp 来存储金额 n 的所有组合数量。初始时 dp[0] 为 1，因为金额为 0 时只有一种组合（不选任何面额）。然后我们可以遍历数组 dp，每次更新 dp[i] 的值，直到 dp[n] 的值为止。

下面是一个简单的实现：

def change(coins, n):    dp = [0] * (n + 1)    dp[0] = 1    for i in range(1, n + 1):        for coin in coins:            if i - coin >= 0:                dp[i] += dp[i - coin]    return dp[n]

复制代码

在这个实现中，我们首先初始化一个长度为 n+1 的数组 dp，并将 dp[0] 的值设置为 1。然后我们遍历从 1 到 n 的所有整数，对于每个整数 i，我们遍历数组 coins，对于每个面额 coin，如果 i - coin >= 0，我们将 dp[i - coin] 的值加到 dp[i] 上。最后，我们返回 dp[n] 的值，即金额为 n 的所有组合数量。

时间复杂度为 O(n * m)，空间复杂度为 O(n)，其中 n 为金额，m 为面额的数量。

例如，对于面额 coins = [1, 2, 5]，金额 n = 11，组合数量为 6。组合如下：

1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 + 1 = 11
1 + 1 + 1 + 1 + 1 + 1 + 1 + 2 = 11
1 + 1 + 1 + 1 + 1 + 2 + 2 = 11
1 + 1 + 1 + 1 + 2 + 5 = 11
1 + 1 + 2 + 5 = 11
2 + 2 + 5 = 11

综上，😊面试官已经心里有答案了，于是决定把小浣熊纳入自己的团队，并重点培养以增加自己的摸鱼时间，快乐的未来不期而遇是多么令人心旷神怡，感谢小浣熊。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/5fe939dd91e580c78f0be1334】。

landred

关注

你在飞速发展的时候，要知道记录一下 2024-06-27 加入

前端开发从业者，去过大厂，创业过，深耕前端领域，全栈工程师，前端架构师，自媒体博主。

发布

暂无评论

创作场景

小浣熊写代码，让我每天摸鱼时间增加 2h

一、做一个简单的自我介绍

二、说说你的 Vue 的理解，以及 Vue3 的那些优点

三、手写一下防抖和节流

四、手写 promise

五、零钱兑换组合数

landred

评论