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

这两天总共面试了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可以监听前进和后退操作
#社招##前端工程师##面经#
全部评论
感谢分享面经!欢迎参加过社招的牛友发社招面经拿京东卡!~ -------------------- 活动:社招面经征集|参加过社招的牛友,来发面经吧,拿京东卡
1 回复
分享
发布于 2019-12-02 14:15
外包就慎重一下吧,能不去就不去
点赞 回复
分享
发布于 2019-12-02 12:19
秋招专场
校招火热招聘中
官网直投
社招哇
点赞 回复
分享
发布于 2019-12-02 12:26
大厂外包吧...山大学校还行呀
点赞 回复
分享
发布于 2019-12-03 12:22
啥外包?何必去外包。。。你记的这些是你答不上来的吗?
点赞 回复
分享
发布于 2020-01-13 12:18

相关推荐

点赞 评论 收藏
转发
4 20 评论
分享
牛客网
牛客企业服务