2017前端面试之基本问

小鲸鱼mm
469 阅读6分钟
最近正在找前端开发工作，在各大公司中遇到了以下的面试题，和大家分享一下：
先说下我的简历上写的技能：
熟悉移动端开发，并熟练使用vue.js,es6,jquery,ajax,javascript,html5+css3,webpack打包,MVC或MVVM的模块化开发，微信小程序，微信二次开发，Photoshop切图，h5混合开发（懂得不多，第一次发，写的不好的地方多谅解，多批评，谢谢）

所以遇到以下各式问题：
1.vue中v-show和v-if的区别？
  • v-show:条件不满足时会自动设置为display:none，还是会出现在dom中;
  • v-if:条件不满足时将不会有这个html标签生成，不会出现在dom中;
2.单页面应用了解吗，自己觉得单页面应该的概念？
  • 单页是指在浏览器中运行的应用，使用期间页面无刷新，整个webapp就一个html文件，所有数据交由ajax完成。
3.vue的双向绑定？
  1. v-model使用的时候是双向绑定，但是vue是单向数据流，v-model只是语法糖。
  2. 举个例子：

  • <input v-model="data.name"/>
<!--上面的双向绑定 在实际运行中会被转换成下行代码：-->
<input :value="data.name" v-on:input="data.name = $event.target.value"/>
4.es6和es5的区别是什么？
  • 1.let 和 var
            es5只有全局作用域和函数作用域
            es6则新增了块级作用域，let命令只在代码块内有效
  • 2.继承
            es5通过原型链继承
            es6有类的概念，更像java的面向对象（封装、继承、多态）
  • 3.es6有新的api
           箭头函数：箭头函数内部没有constructor方法，也没有prototype，所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this，而非执行时。如果要改变箭头指向可以用.bind(this)
  • Promise：是处理异步操作的对象，使用了 Promise对象之后可以用一种链式调用的方式来组织代码
  • ……
5.jsonp的原理？
  • 利用script标签的异步加载特性实现给服务端传一个回调函数，服务器返回一个传递过去的回调函数名称的js代码
6.如何封装一个公用的方法，比如jquery中ajax步骤说明？
  • 问到这种实际的问题，一般事先都没有准备都是当时直接发挥，可以现在脑子里理下思路：
  • 先定义一个公共方法，在方法里面传调接口的数据，地址，成功函数，失败函数等等
7.如何将数组排序？数字和字母是如何排序的？（笔试题经常有）
  • 1.数组有原生的方法sort()排序，sort排序是先数字后字母排序。
  • 2.冒泡排序(来个稍微复杂点的，真实面试题)：
冒泡排序原理：依次比较相邻的两个值，如果后面的比前面的小，则将小的元素排到前面。依照这个规则进行多次并且递减的迭代，直到顺序正确。
  • 题目:根据data中的id进行排序

      var data = [{'id':1,'name':'小鲤鱼'},{'id':5,'name':'李四'},{'id':4,'name':'王五'},{'id':2,'name':'赵六'},{'id':3,'name':'绿茶'}];
      for(var i =0;i<data.length-1;i++){
        for(var j = i+1;j<data.length;j++){
          if(data[i].id>data[j].id){
            var temp = data[i];
            data[i] = data[j];
            data[j] = temp;
          }
        }
      }
8.数组去重（笔试题）

    var arr = [1,2,8,5,3,6,4,1,5,9,3,7];
    var newArr = [];
    var json = {};
    for(var i = 0; i < arr.length; i++){
      if(!json[arr[i]]){
        newArr.push(arr[i]);
        json[arr[i]] = 1;
      }
    }
9.如何只获取对象中的key

var obj = {'id':1,'name':'小老鼠','sex':'boy','age':21};
for(var key in obj){if(obj.hasOwnProperty(key)){console.log(key);}}
10.引用值和原始值有哪些？
  • 原始值：string,undefined,null,number,boolean
  • 引用值：array,object,function
11.简述一下h5的新特性
  • 1.新的Doctype：尽管使用<!DOCTYPE html>，即使浏览器不懂这句话也会按照标准模式去渲染
  • 2.input表单元素类型：date,email
  • 3.html语义化:用正确的标签包含正确的内容，好处是结构良好便于阅读，提高搜索率seo
  • 4.webstorage:localstorage和sessionstorage
  • 5.新增api:地图、拖放，音频
  • 6.web worker:是运行在浏览器后台的js程序。不影响主程序的运行，是另开的一个js线程，可以用这个线程执行复杂的数据操作，然后把操作结果通过postMessage传递给主线程。
12.分别说出localstorage和sessionstorage，cookie的区别和内存及生命周期
  • localstorage：持久话存储在客户端，只要用户不主动删除，就不会消失；存储大小是5M;
  • sessionstorage：存储在客户端，关闭会话，存储的数据则消失；存储大小是5M;
  • cookie:存储在浏览器端；存储大小是4096个字节
13.行内样式如何转换为块级元素？
  • 1.外层包一个div
  • 2.反过来则是用display:inline;
14.两个div左边为200px;右边自动填充宽度

<div id="conent" style="display:-webkit-box;">
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    <style>  
      #conent {width:100%;height:300px;}
      .left {width:100px;}
      .right {width:100%;}
    </style>

15.em和rem的区别

  • rem: 取决于根元素字体的大小，根元素字体大小乘以你的rem值；
  • em: em值乘以使用em单位的元素的字体大小；
16.页面的性能优化
  • 1.减少http请求次数
  • 2.减少对dom进行操作
  • 3.代码不冗余，减少重复代码
  • 4.使用语义化标签
  • 5.js代码压缩等
17.cmd、amd区别
  • cmd: 延时执行
  • amd: 加载前执行
18.闭包的概念是什么？
  • 定义: 当一个内部函数被其外部函数之外的变量引用时，就形成了闭包。
  • 特性: 函数嵌套函数，函数内部可以引用外部的参数和变量，参数和变量不会被垃圾回收机制回收。
  • 使用场景: 当需要在模块中定义一些变量，并希望这些变量一直保存在内存中但又不会被污染全局变量时，可以利用闭包解决。
  • 缺点:常驻内存，会增大内存使用，使用不当很容易造成内存泄露。

除了这些还会问你一些用过哪些开源框架，自己会写插件吗，webpack如何打包的，是否懂一种后端语言,还会问你一些简历上的项目等等,还是会因人而异的，希望大家都面试成功哦^_^。




avatar
文章
阅读
粉丝