记录自己社招前端面试的一些问题

这两天总共面试了7家公司，昨天拿到了外包offer，当天面完，晚上6点左右就通知我了，我也可能会拒绝，但毕竟现在经济不景气，找份工作不容易。决定的事情就没什么好后悔的了，接下来好好加油吧。
记录一下我觉得回答不上来和卡壳的地方，都是很基础的。

一：
Q：在webpack中对与babel的配置有什么需要注意的地方？提示（babel版本）,最新babel版本是多少？
A：Babel主要对ES6/ES7/JSX进行编译，安***abel7.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可以监听前进和后退操作
#社招##前端工程师##面经#