图森未来前端 coding 一面凉经

3月31号投递简历，4月8号面试，面试体验挺好，也许是自己太菜了，一时之间没想到思路

一面 17:00 1小时

1.自我介绍：看视频学习，学习的过程，个人对原生 JS 和 webpack 方面有一段
2.前端大概学习了多久？
3.有系统的学习？
4.你简历上的项目的挺多的，挑几个讲一下
5.微信小程序（实现的过程中重复的内容，进行将常用的东西封装起来，组件的复用性，减少冗余代码）
6.你相当于是通过这个项目去学习Vue，是吗？（小程序的语法跟Vue 语法差不多，学习原生小程序）
7.Vue 中的父子组件传参，如何实现？（`props` 和 `$emit`、EventBus、Vuex，之后查了一下，还可以 `$parent` 和 `$children`）
8.你是说数据量大的时候，你会倾向于使用 Vuex？（多个组件中使用的共同数据，进行状态管理)
9.你再介绍一下你感觉比较有内容的项目 webpack 搭建自用脚手架（学习官网相关的内容，实现模拟 loader - 实现过程、 plugin ，可以自己去配置 webpack）
10.你是看了官网上那个 loader是吗？你对于 loader 具体的细节清楚吗？loader 在哪一步被触发，然后去做一些东西（这个之前没了解到，webpack 生命周期，在特定的生命周期进行一些处理）
11.讲一下 loader 和 plugin 的区别（loader 和 plugin 的含义和细节，举例子说明自己使用到的，遇到的问题/痛点，babel-loader， clean-webpack-plugin ，html-webpack-plugin）
12.loader 的模块输入是什么？输出是什么？（比如 sass-loader，输入 scss 代码，输出：css 代码，这就是 loader 完成的工作，这个那时候没想到，之后查了一下，将 .scss 文件编译成 CSS，默认使用 Node Sass，补充一下执行顺序）
13.上面这块说的比较含糊，但是我理解你的意思，你应该也是看了 webpack 官网的一些文章
14.你再讲一下你其他的项目（实现常用组件，熟悉 Vue 相关的基础知识，涉及到挺多知识点的，按钮和图标，实现的过程，有 Vue 的生命周期有了一定的了解）
15.对哪个生命周期有了更不一样的认识？（mounted，beforeCreate，created，发送 ajax 请求数据，在哪个阶段才是比较好，条理不是很清晰）
然后下一部分就是 coding 面试，然后就感觉要凉凉

题1：多个数组求差集
示例：
输出的元素有且只能存在于输入的某一个数组中

输入：[1, 2, 3] [2,3,4] [1,3,5]
输出：[4,5]
输入：[1, 3] [1 2] -> [2, 3]
输出：[2, 3]

面试官会问你，是否理解了这道题问你什么，然后让你讲一下思路，思路清晰之后再写代码，然后根据你写出来的代码说出一下不足之处/忽略点吧，面试官好耐心，让我理解清楚思路
我一开始的想法：通过合并数组，然后通过map 对象计算数组中的个数，然后再来一个循环判断个数是否为1，面试官说这种方法，这样感觉偏麻烦，可以不用计数吗？能不能用数组的高级方法让这个代码写个更简洁。
面试官提供的思路：1. 合并数组 2. 筛选出最终结果
你需要转换一下思路，我并不需要知道多少次，数组有重复项，说明第一项和最后一项的位置不一样的。还有可能有坑，比如 [1,1,1] [2] => [1,2]，这个程序不够**健壮**。输入的形式可以由你来定。

不优雅的代码

function fn(){
    // 1. 合并数组 2. 筛选出最终结果
    let arr = [];
    for(let i = 0; i < arguments.length;i++){
        let temp = Array.from(new Set(arguments[i]));
        arr = arr.concat(temp);
    }
    // arr.filter(item => )
    let result = [];
    for(let i = 0; i < arr.length;i++){
        if(arr.indexOf(arr[i]) === arr.lastIndexOf(arr[i])){
            // arr[i] 假设为1 左边：0 右边： 6
            result.push(arr[i]);
        }
    }
    return result;
}

优雅的代码

function fn(){
    let arr  = [];
    let args = Array.from(arguments);
    args.forEach(item => arr.push(...(Array.from(new Set(item)))));
    
    arr = arr.filter(item => {
        return arr.indexOf(item) === arr.lastIndexOf(item);
    })
    return arr;
}
console.log(fn([1, 2, 3], [2,3,4], [1,3,5]))
console.log(fn([1, 1, 1], [2]))
console.log(fn([1, 3], [1, 2]))

面试官补充：用 reduce 和 forEach 更简洁一点

题2：相信大家都用过`Element.querySelector(selector)`或者`document.querySelector(selector)` 来查找DOM元素，那么如何实现一个这样的一个函数，这个函数接受两个参数，分别为selector和element（默认为body），找到element所有子元素中满足selector的第一个元素。

时间不太够，这道题就讲一下思路。
我的思路：children+ 循环
面试官说，把面试官出题的考点给想到，漏了很关键的一部，是需要用到递归去实现
之后去实现一下，和参考一下别的人代码，理解一下思路
html 代码

<div id="a">
    <div id="b">
        <div class="test"></div>
    </div>
</div>

js 代码，细节点：使用 classList

function matchSelector(selector, element) {
    if (Array.prototype.includes.call(element.classList, selector.slice(1))) return true;
    return false;
}
function querySelector(selector, element) {
    if (element === null) return null;
    const children = element.children;
    let res = null;
    for (let child of children) {
        if (matchSelector(selector, child)) return child;
        res = querySelector(selector, child);
        if (res !== null) return res;
    }
    return null;
}

console.log(querySelector('.test', document.body));

面试官补充：这道题，你说的时候没有用到递归，可能是有漏洞的

反问环节

1.今天我那里表现不是那么好，还可以改进的（多 coding，尽可能用更好的实现，让代码更加优雅，代码健壮性）
2.这面考察的是前端 coding 能力（考察工程中用到的），下一面的话，计算机基础相关的吧
3.问一下公司的前端负责的内容
4.大概多久知道有没有下一轮。

图森未来 前端 coding 一面凉经

一面 17:00 1小时

反问环节

反思总结

全站热榜

创作者周榜

图森未来前端 coding 一面凉经