阅读 1324

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

主要是做一次面试的复盘,回想一下自己在面试中有哪些做的不足的地方。毕竟题主以前本身也没有经历过这种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));

复制代码

以上

如有错误,请不吝指正

最后

完结撒花🎉

文章分类
前端
文章标签