记一次前端面试体会（一）（2019-11）

前言：

今天是本人在职的最后一天，回顾过去的一周的时间，为了寻找一份工作，面试了也有两天多的时间，平均每天三场面试，几乎整天时间都是占满的，刚开始出去找工作其实也没抱太多希望，毕竟在公司快两年，很少关注面试和外面的求职环境，刚出去找工作，也是抱着一种热手和增加经验的态度。

这两天总共面试了7家公司，昨天拿到了外包offer，当天面完，晚上6点左右就通知我了，不过大家都对外包不是怎么感兴趣，因为没去过外包，我也不太清楚具体的原因，我也可能会拒绝，但心里还是有那么一丝犹豫，毕竟现在经济不景气，找份工作不容易。但决定的事情就没什么好后悔的了，接下来好好加油吧。

好了，不啰嗦了，就记录一下我觉得回答不上来和卡壳的地方，都是很基础的，只怪自己学艺不精，所以让大家不要见笑了。

面试题一：

Q：在webpack中对与babel的配置有什么需要注意的地方？提示（babel版本）,最新babel版本是多少？

A：Babel主要对ES6/ES7/JSX进行编译，安装babel7.x和babel-loader8.0，之后所有安装的babel插件都需7.x，版本7.x（@babel/）和6.x版本在插件名上还是有所差别；babel最新版本为7.x

面试题二：

Q：如何监控一个对象的变化？列出你所知道的所有方法，包括vue

A：

    1.vue中：

      -.computed通过自定义get和set；

      -.通过wtach去监听一个对象

    2.通过ES5中的defineProperty（target， key， {}）进行数据劫持，监听getter和setter

    3.通过proxy代理，new Proxy（target， handler），其中handler内可以进行自定义get（target，key， receiver）和set（target，key，value， receiver）操作

    4.通过古老的方法，在对象的原型__proto__下去进行监听变化，内部提供了getPrototypeOf， setProperty等读写操作，操作实例对象（读写），监听__proto__属性上的变化

面试三：

Q：一段字符从后台动态返回，长度不确定，要求显示一行就居中，两行就左对齐，三行就结尾显示'...'

A：提示可以使用多个标签，可以使用div>span*3, 可以外部div设置text-align：center，span自己设置text-align：left，多行文字超出显示：

display: -webkit-box;

over-flow: hidden;

text-overflow: ellipisis;

-webkit-line-clamp: 3

面试题四：

Q：在平时工作中，对图片是怎么处理的，比如不同的屏幕大小，在不知道屏幕高度的情况下，如何让图片完整居中显示？

A：可以通过宽度自适应，计算图片的高宽比率，然后设置padding百分比（padding和margin的百分比都是根据父盒子宽度来计算的），例如padding-bottom：130%

面试题五：

Q：vue中使用element-ui进行组件二次封装，自己封装的组件是如何使用原生组件的方法和属性的？

A：通过$listeners何以获取父组件内监听子组件的所有时间 ，$attrs可以获取所有父组件传到子组件上的属性，同时还可以通过v-bind="$attrs"和v-on="$listeners"继续传递和监听，子组件（自己封装）下继续引用子组件（原生组件）

面试题六：

Q：使用正则截取html中的img的src，使用正则匹配空格，使用正则匹配手机号（18和19）

A：

  1.img的src：

    const imgReg = /<img.*?(?:>|\/>)/gi  //匹配img标签，

    const srcReg = /src= [\'\"]?([^\'\"]*)[\'\"]?/i;  //匹配所有的src

    let arr = htmlStr.match(imgReg);

    for (let i = 0; i < arr.length; i++) {

    let src = arr[i].match(srcReg);

    //获取图片地址

      console.log('图片地址'+(i+1)+'：'+src[1]);

    }

  2.正则匹配空格和手机号

    空格： str.replace(/\s+/g,"")；

    手机号：var regPhone = /^(1[8|9]\d{1}[*|\d]{4}\d{4})$/

    空格分隔手机号：

    var number = '13898794564' //手机号 这里必须写成字符串格式

    var test = /^(\d{3})(\d{1,4})(\d{1,4})$/  //这里是3个表达式，第一个表达 式(\d{3})匹配的是3个数字，第二三都 是1-4个数字

    number.replace( test ,  '$1 $2 $3' );//这个$1表示的是第一个表达式匹配到的字符，中间直接用空格分割

面试题七：

    Q：输出一个5-10的随机数？，求一组数中大于5的数，求一组数中的最大数

    A：

    输出5-10随机数：

    function RandomNum(Min, Max){

    var Range = Max - Min;

    var Rand = Math.random(); 

    var num = Min + Math.round(Rand * Range);

    return num;

  }

  RandomNum(5,10);

  求一组数中大于5的数：

    let arr = [11, 3, 5, 1, 2, 14,56]

    arr.filter((item) => item >= 5)

  求一组数中的最大数：

  1.原生循环比较；

  2.Math.max.apply(null, arr)

面试题八：

  Q: Ajax对象readyState的5中状态代表的含义？

  A：

      0：初始化，XMLHttpRequest对象还没有完成初始化

      1：载入，XMLHttpRequest对象开始发送请求

      2：载入完成，XMLHttpRequest对象的请求发送完成

      3：解析，XMLHttpRequest对象开始读取服务器的响应

      4：完成，XMLHttpRequest对象读取服务器响应结束

面试题九：

  Q: 一般网页都有页面切换动画，前进和后退不同，这个是怎么做到的（怎么监听前进后退操作）？

  A：pushState和replaceState为H5新增的history放法，window.onpopstate可以监听前进和后退操作

好了，今天的总结就到这里吧，文中有许多不准确和错别字的地方，也希望大家多多包含和指正，也可另寻优秀的解决方案，只是给大家一个参考。

面试的过程其实也是一个学习的过程，见识不同公司的一个工作环境和氛围，了解面试官和自己同行业的技术人员，同时面试也是一件辛苦的事情，不同的面试地点，跨度很大，都要自己去提前做好准备工作，总之，好好努力吧，居安思危，注重内功修炼，在失败和挫折中越战越勇，希望过年前能找到一份自己满意的工作。