【美团金融】前端实习面经（一二三面）

美团一面

时间：2020/03/22 17:00 50 分钟
形式：牛客网面试间

js 中的数据类型
- 基本类型和引用类型的区别
判断类型的方法
bind、call、apply 的区别
闭包的应用，以及可能出现的问题？

给了三段代码，问输出结果

console.log(a);   // undefined
var a = 10;

fn('zc')      // TypeError: fn is not a function
var fn = function(name){
console.log(name)
}

let a = {
   name: "zc",
   say: function(){
       console.log("HI，" + this.name)
      }
};
a.say() // HI，zc
let fn = a.say
fn(); // HI，undefined

css 样式的优先级
写一下垂直居中布局（flex 布局、table 布局、绝对布局、margin：0 auto）
- margin：0 auto的限制：当父元素的布局方式为 static/relative 且宽高已知
输入 url，浏览器发生什么
浏览器缓存机制（强缓存，协商缓存）
了解 virtual dom 吗?
知道 React Native 加载 bundle 的机制吗？（不会）

要实现 RN 的脚本热更新，我们要搞明白 RN 是如何去加载脚本的。在编写业务逻辑的时候，我们会有许多个 js 文件，打包的时候 RN 会将这些个 js 文件打包成一个叫 index.android.bundle(ios 的是 index.ios.bundle)的文件，所有的 js 代码(包括 rn 源代码、第三方库、业务逻辑的代码)都在这一个文件里，启动 App 时会第一时间加载 bundle 文件，所以脚本热更新要做的事情就是替换掉这个 bundle 文件。
输入 setState 后发生什么?
了解 pureComponents 吗？
智力题（一盘蚊香烧完 60 分钟，你有两盘蚊香，怎么计算出 45 分钟？）
答：有蚊香 A、B 先同时点燃 A 的两端以及 B 的一端,当 A 烧完时,B 烧了一般时间过了 30 分钟,此时在点燃 B 的另一端,当 B 烧完时,时间又过了 15 分钟。
算法题
- 求二叉树最大深度
  - 递归（有没有迭代的算法呢）
  - 迭代（我想到中序遍历，用 queue 做）
- 数组去重
  - set（空间复杂度高）
  - 两层循环（时间复杂度高）
  - 排序后比较相邻两个（ok，写个快排吧）
- 手写快排

求二叉树最大深度

最开始写了个递归的方法：

var maxDepth = function(root) {
 if(!root) return 0;
 let left = maxDepth(root.left);
 let right = maxDepth(root.right);
 return Math.max(left, right) + 1;
};

面试官让我写一个迭代的方法：

我根据层序遍历的思路写了一个（

var maxDepth = function(root) {
  if(!root) return 0;
  let res = 0;

  const q = [];
  q.push(root)
  while(q.length !== 0){
      const currentLevelSize = q.length;
      for(let i = 0; i < currentLevelSize; i++){
          const node = q.shift();
          if(node.left) q.push(node.left);
          if(node.right) q.push(node.right);
      }
      res++;
  }
  return res;
};

判断数组中是否有重复的个数

我先写了个 set 去重

function isRepeated(arr){
  return arr.length == [...new Set(arr)].length ? false : true;
}

面试官说空间复杂度太高，我就讲了两层循环的思路：

function isRepeated(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
      if (arr[j] === arr[i]) return true;
    }
  }
  return false;
}

面试官说时间复杂度高

于是我说了先排序，再比较相邻的两个：

function isRepeated(arr) {
  arr.sort((a, b) => a - b);
  for(let i = 1; i < arr.length; i++){
    if(arr[i] == arr[i-1]) return true;
  }
  return false;
}

然后面试官说：既然说到排序，你不妨写个快排吧！

美团二面

时间：2020/03/30 11:00 75 分钟
形式：牛客网面试间

前一个小时都在问项目（根据我的项目发散，提需求场景，问怎么实现。）
我简历上写的三个项目都详细问了，以万能计算器App为例：
- 开发的背景？
- 有考虑浮点数运算怎么处理吗？
- 用户异常输入怎么处理？
- 除了计算时抛出错误，计算器有在用户输入时做限制吗？
- 汇率转换：
  - 汇率转换的接口数据是从哪里拿的？
  - 不同国家的金钱表示符不一样，怎么处理？
  - 不同国家的数字表示法不一样，怎么处理？
  - 你觉得JS会在不同国家的数字表示法做处理吗？
  - 你一般通过什么途径了解JS的API？
  - 如何考虑做i18n？
写一道真实场景题：
- 进入页面后，调用 KNB （getDeviceInfo，getUserInfo，getRiskInfo等），获取到一堆数据
- 点击按钮后，出现loading动画
  - 只有获取到 KNB 的数据以后，才能够发送fetchData请求
  - 获取到fetchData的数据后，再结束loading动画

我React相对熟悉点，就用React写了：

function App(){
    const [data, setData] = useState({});
    const [loading, setLoading] = useState(false);
    let Promise = null;

    useEffect(()=>{
        Promise = Promise.all([//...])
        Promise.then((res) => {
            setData(res)
            Promise = null;
        })
    }, [])

    const fetchData = async () => {
        setLoading(true);
        if(Promise !== null) await Promise;
        fetch('').then(res => {
            console.log(res)
            setLoading(false);
        })
    }

    return (<div>
             {loading ? <div className='loading-animation' /> : null}
             <button onClick={fetchData}></button>
            </div>)
}