途虎养车前端秋招面经

⭐一面

自我介绍，项目介绍，我把项目功能大致说了一下，说了说其中的优化亮点
看你也有学java，为什么选择前端（前端学得更久，更熟悉一些）

编程题Ⅰ：数据分组

[
  {name:"apple", price:"100"},
  {name:"apple", price:"200"},
  {name:"watermelon", price:"300"}
]

分组后：

{
  apple: [
    {name:"apple", price:"100"},
    {name:"apple", price:"200"},
  ],
  watermelon: [
    {name:"watermelon", price:"300"}
  ]
}

解：

function group(objArr, groupBy) {
  const result = {}
  for(let i of objArr) {
    const groupKey = groupBy(i)
    if(result[groupKey]) {
      result[groupKey].push(i)
    }else {
      result[groupKey] = [i]
    }
  }
  return result
}

//test
const objArr = [
  {
    name:"小明",
    age:18,
    address:"上海"
  },{
    name:"小红",
    age:18,
    address:"北京"
  },{
    name:"小王",
    age:20,
    address:"上海"
  },{
    name:"小芳",
    age:19,
    address:"北京"
  },{
    name:"小绿",
    age:18,
    address:"上海"
  },{
    name:"小张",
    age:19,
    address:"上海"
  },
]

console.log(group(objArr, item => `${item.age}-${item.address}`))

这个答案面试官一开始还没看出来，正说让我再好好看看题，就ac了

然后问了我一下用reduce做有思路吗，我回答给reduce起始值传入一个空对象，每次遍历时查看空对象中是否存在cur.name，不存在的话创建一个数组[cur]，将acc[cur.name] = [cur]，如果存在的话直接acc[cur.name].push(cur)，最后返回的就是答案

编程题Ⅱ：我做复杂了，只过了一个用例，面试官说就到这里吧

字符串权重差值最小

“100 200 110”
三个数字三位分别相加，权重分别为1 2 2
相减最小为2-2
输出：[2, 1, 200], [2, 2, 110] 分别为：[权重, 下标, 原始数字]

结束之后我自己又做了一遍：

function accMinMinus(str) {
  const strArr = str.split(" ")
  const sortedArr = strArr.map((item, index) => {
    let sum = item.split("").map(Number).reduce((acc, cur) => acc + cur, 0)
    return [sum, index, parseInt(item)]
  }).sort((a, b) => a[0] - b[0])
  
  let minSum = Number.MAX_SAFE_INTEGER, result
  sortedArr.reduce((acc, cur) => {
    const diff = Math.abs(acc[0] - cur[0])
    if(diff < minSum) {
      minSum = diff
      result = [acc, cur]
    }
    return cur
  })
  return result
}

//test
const str = "100 200 110"
console.log(accMinMinus(str));

反问：面试周期（2+hr 一周结束，面完一天内给反馈）

⭐二面

自我介绍，介绍学过的技术栈，以及在学习流程中的体会（具体怎么问的记不太清了，但大概是这个意思，我就从最开始原生js、jQuery开发到MVVM框架的组件化开发的变化和体验说了一下）
分享你的三个案例，主要要点有：
1. 项目中遇到的困难以及解决（说了项目中的首屏加载优化和长文章加载的优化）
2. 团队协作开发中遇到的问题，为提升团队开发效率做过哪些措施（这个真没有过，随便带过了）
3. 学习中遇到的困难及克服（说了以前补英语的故事）
除了刚刚提到的优化，项目还有哪些技术难度（无，都是偏展示的逻辑，把重心放在了优化上，注重体验感）
项目之后会考虑如何进行改进和优化？（回答考虑之后用SSR或PWA，后来才知道面试官是想考察我对这种业务场景和技术选型方面的理解，说我的项目可能更偏向展示，可以考虑做成部分静态，使用SSR可能对整体速度上的优化并不是很大）
提了一下电商项目，说是不是偏展示的，业务逻辑并不复杂（√，我顺便提到了其中的图片懒加载）
电商项目里是不是做了瀑布流（没有，我在上一个项目中用到了，是用grid布局分5px为一行，根据图片高度计算占据几行来实现的）
传统网站、后端、跨端、图形化这些哪方面更有兴趣（说不上来，感觉都有兴趣，选一个确实不好选，面试官说没事就是随口问问）
学习方式、学习路径（学新技术会去找一些视频，了解大概全貌，再去文档书籍细看，学习路径会根据思维导图，看哪方面有欠缺就先补充，然后再根据需要进行新技术的学习）
有哪些压力大的时候（高中学英语再次搬出来，又问除了这个呢？我回答准备秋招这段时间压力也蛮大的）
在vue2和vue3亲自使用的时候会感觉有什么不同（有点偏八股但又不能完全答八股，结合自己的使用就是组合式API、多个根节点、生命周期、打包后体积变小，再顺便见机带了一下响应式实现的变化以及diff算法的不同）
说说对前端中图片的理解，就关于图片的知识都可以说（这个问法没见过，答得比较凌乱，说了webpack打包转base64嵌入css、又提到了icon图标、还有要考虑不同物理像素比的情况，尤其是移动端）
反问（技术栈：vue。面试的部门业务：还没有定部门途虎主要做电商项目 tob会比toc多一些。公司的c端是用低代码生成的还是定制化呢：一些优惠页面会用低代码生成，牺牲掉一些定制化。评价：这次面试主要考察知识广度和思维能力，评价还不错，提了一个建议让我专注学一个框架，不用再学react，学的是思想）