名创优品社招1-3年前端面经

Lieo
3,133 阅读9分钟

主要是做一次面试的复盘，回想一下自己在面试中有哪些做的不足的地方。毕竟题主以前本身也没有经历过这种3面的情况，以前去的都是小公司直接技术面 + HR面了事，第一次经历3面，还是有很大收获的。

面试流程：boss直聘聊 -> 电话邀约面试 -> 一面技术面 -> 二面业务面 -> 三面HR面 -> 电话沟通入职事宜和薪资 -> offer

一面 技术面

  1. 首先当然是自我介绍

    面试官你好，我叫xxx，本科(学历)就读于xxx大学，专业是xxx，从事前端xxx年了。做过的项目有xxx项目...等等，最近的一个项目是xxx项目，运用到了什么技术，负责xxx模块

  2. 有问到最近项目，这里简单介绍一下自己所做过的项目即可(项目概况，用到的技术，负责的部分)

  3. 问掌握以及最近使用的技术栈，期间着重问了有没有使用过 uni-app ，除了用过 uni-app 这个跨端框架之外，还有没有用过其他的跨端框架

    ps：因为我简历上写了有用过 uni-app 开发，所以一开始问了一下是否熟悉 uni-app 。这里令我诧异的地方是，都说大厂是不用 uni-app 这种跨端框架的，因为虽然是标榜跨端，但其实在编译方面会存在一些奇奇怪怪的问题，这个在回答的时候我也有跟一面面试官说明，不太建议用这个技术

  4. 有问到是否开发过app，我以为是原生 Android 或者 ios app, 后来问清楚说的是 h5 app

  5. 让我说一些 ES6 的新特性

    传送门：ECMAScript 6 入门教程

  6. 简单说一下Javascript的 原型链

    传送门：MDN 继承与原型链

    传送门：JavaScript原型系列（三）Function、Object、null等等的关系和鸡蛋问题

  7. 说一下 Array 和 Object 的关系，为什么 typeof [] 的结果是 object

    这里我结合了一下原型链来回答，说所有引用数据类型最终都有一个共同的祖先就是 Object ，Array 是 Object 的一个实例(忘了在哪里看到的了这个)

  8. 因为问到项目的时候我有说小程序项目都是用原生小程序开发的，就顺带问了是否熟悉整个微信开发的流程体系，在小程序开发中是否遇到过什么问题，这里实事求是就好

  9. 问使用过什么 UI 库

  10. 也会问你能不能看看以前做过的项目，有没有上线能不能看的，然后结合看到的项目来提出具体的问题

  11. 有没有遇到什么棘手的问题，怎么解决的

    这个感觉不管是技术面还是HR面都是一定会被问到的问题，也是实事求是就好

  12. 接下来轮到面试高光时刻，反问面试官问题了

    一般到最后面试官都会问你有没有什么想要问的，这里主要问一下自己比较想了解清楚的一些情况，比如公司业务，技术栈，团队人数(前后端，ui，测试，产品)这些在日常工作中比较重要的

后面我以为到这里就结束了就轮到HR面试了，结果还是我太天真了其实并没有

二面 业务面

刚一来其实把我搞懵了，因为我以为轮到HR面了，没想到不是，后面才反应过来这是二面，我一开始也以为二面是技术面，后面从HR那里了解到这是业务面试官

  1. 一开始还是问到了一些技术的东西，挑着简历上面写的东西问，有什么问什么

    ps：这里还是问到了跨端框架 uni-app ，也是再一次让我惊讶了一下，名创优品居然这么重视跨端框架的使用。

  2. 也有重复问到简历上的一些项目，有没有上线的可不可以看看

    这里感觉其实是一个巨坑，假如产品做的不好的话这里真的是很减分。其中给面试官看了一个以前做过的小程序，里面有一个分类列表(电商类小程序)。当时问了我怎么实现的，以及一开始点击的时候，数据没及时回来，导致显示上有些不好的体验，就跟我说了很长时间的这个东西，问了我怎么实现，然后说现在有这个问题我会怎么解决之类

  3. 在看小程序的时候，因为是电商类的小程序，问有没有对按钮做一些防止重复点击的操作

    这里我回答的是一般会在封装请求里面做loading的一个处理，等接口数据回来后再把loading关闭，其实这里就已经可以做到防止重复点击了，然后除此之外也会在按钮里面做防抖节流的一个处理。后面他多问了一句说是不是所有都要这样做，我说为了防止重复提交的话，最好还是全部都做

  4. 出乎我意料之外的是问到了有没有做xss攻击的一个防范

    这里其实答的不是很好，因为本身也很少做这种防范。就说其实用到的第三方请求库 axios 里就有对xss攻击做防范，所以其实不太需要我们来做什么，就是可能会在表单输入那方面做一些字符的转义之类，这块还是没答好

  5. 问上家公司的离职原因

    这个基本也是面试必问的点，就是看是谁来问而已

  6. 最后提到了算法的问题，说在你们前端领域，有经常会用到算法吗？假如现在我给你一个业务场景，微信群发红包，你会怎么来设计这个发红包的算法？

    这里也是出乎意料的，算法真的算得上是一个短板。因为在前端的业务代码里面，我真的很少有用到算法，就说了一下之前做过一个抽奖的活动，里面用到了一个洗牌算法

    还有这个微信群发红包的场景，当时我听到之后心里面想的就是发红包还需要算法的吗？不就是随机金额而已吗？这里面还有涉及到算法吗？但是也不得不硬着头皮答下去，然后就说到要随机一下金额，比如给定一个红包总额(5元)和红包个数(5个)，然后把5个红包的金额给随机出来

    这里越说就越感觉到里面确实是有算法在内，然后就有着一点点被引导的意思在这里，引导我去思考怎么解决这个业务场景，后面越说思路越通透，面试官就说或者你可以写一下伪代码，我当时心里一咯噔，要当场写伪代码就有点难搞，但是也还是不得不硬着头皮🤯写

    但是其实思路已经有了，大概就是在给定的红包总额和红包个数的情况下，循环生产5个随机数出来就可以了，但是这里面有几个点需要注意：1是随机出来的5个数之和必须等于红包总额，而 Math.random() 随机出来的值都是随机的(废话文学)🤣，5次随机值相加可能根本就不会达到红包总额或者远远超过红包总额；2因为Math.random() 的随机性，可能第一次随机的值是4.99元，0.01元为最小金额的情况下那接下来4个红包就根本没法再分下去了

    最后写出来了一点伪代码，没有解决到上述所说的两个问题，我也就实话实说了，指着伪代码讲解思路，最后也实话实说还有这2个问题没解决，然后面试官就说没事，只是要一个思路而已

到这里二面业务面就已经完结了，终于来到了HR面，当时无疑是松了一口气的

三面 HR面

其实到了这里，很多都是HR面的常规问题，但是类似名创优品这种公司，还是会比较在意团队间的契合问题，以及面试者的性格等等各方面因素

  1. 首先还是介绍了一下自己，但我是非常简短的介绍，以至于HR还问我就完了吗这么短的介绍吗？😂

  2. 用3个词描述一下自己

  3. 上两家公司的离职原因

  4. 居住地点与工作地点的通勤考虑

  5. 花了比较多的时间来了解我的性格，提了很多问题也不太记得这里就不一一展开了，重点就是想问问我跟团队中的人会如何相处，团队人员怎么做的时候你会怎么做之类

  6. 薪资问题

  7. 入职时间问题

发红包算法

后面面试结束，回去之后觉得既然当时这个算法已经有了思路，那不如就完善一下

以下贴上代码，经测试，在红包金额为5元红包个数为5的情况下是没有问题的，但是当红包金额过大并且红包个数变多的时候，会莫名其妙的进入死循环，这个看来是个bug😂

but 这只是一个最简单的思路而已，代码如有错误或者有更好的想法也请不吝赐教

// toFixed(2)
function toFixed(num: number): number {
  return num ? Number(num.toFixed(2)) : Number('0.00');
}

// 生成随机金额
function genRandomAmount(money: number): number {
  return toFixed(Math.random() * money);
}

// 生成红包
function dispatchRedpacket(money: number, num: number): number[] {
  let redpacket: number[] = []; // 红包列表
  let cacheMoney: number = 0; // 已经发出去的红包总额
  let cacheNum: number = 0; // 已经领完的红包个数
  let currMoney: number = 0; // 当前红包金额
  for (let index: number = 0; index < num; index++) {
    cacheNum = num - index;
    
    if (index < num - 1) {
      currMoney = genRandomAmount(toFixed(money - cacheMoney)); // 随机得出红包金额

      // 验证金额的合法性，解决2个问题
      while (
        !normalizeMoney(currMoney, cacheNum, toFixed(money - cacheMoney))
      ) {
        currMoney = genRandomAmount(toFixed(money - cacheMoney));
      }
    } else {
      currMoney = toFixed(money - cacheMoney); // 最后一个红包不用随机，直接算出来
    }
    cacheMoney += currMoney;
    redpacket.push(currMoney);
  }
  return redpacket;
}

// 判断是否是合法值
function normalizeMoney(
  currMoney: number,
  num: number,
  money: number
): boolean {
  const remainMoney: number = 0.01 * (num - 1);

  return currMoney > remainMoney && currMoney < money;
}

console.log(dispatchRedpacket(5, 5));

以上

如有错误，请不吝指正

最后

完结撒花🎉

avatar
文章
阅读
粉丝