爱前端

前端面试题目总结(三)

既推掉了上一个工作机会后,我又开始了面试的漫漫征途,将这几天面试的题目做以总结,也算是对已有知识的一个总结归纳。

近期的面试总结下来,大部分公司对前端技术的面试不外乎以下几点:

  • 1、对html+css基础知识的考察,这里有一点值得注意的是,我们在平常的工作当中基本上是用到哪个属性就写哪个属性,但面试的时候,面试官通常喜欢问你,每一个属性有哪些值,这些值之间区别是什么,这就要看你平常的归纳总结能力如何了。
  • 2、对切图、代码的版本控制等前端开发工具的使用。
  • 3、对原生js的考察,数据类型,以及各数据类型的基本方法,区别分别是什么,这就要求我们多多查看js基础方面的书籍《Javascript高级程序设计》就非常不错,建议这本书还是要仔细通读一下的。
  • 4、对jquery的考察,有能力可以研究下jquery的源码,包括jquery实现的原理,和原生js的区别等等。
  • 5、对现在市面上比较流行的框架的了解与掌握,如:react、angularjs、bootstrap、amazeui等以及前端自动化部署工具等的使用,如:grunt、百度的Fis等。
  • 6、手机端开发经验,现在手机端的开发实在是太火热了,随便一个公司都会有所涉及,即便是没有做过大型项目,还是要自己动手练一练的,哪怕是仿照一些你觉得还不错的设计来写一些例子,最近我也在看手机端开发的书籍,推荐给大家《移动web设计》,一本webApp开发入门级的书,很不错。
  • 7、除了以上涉及到的其他方面知识,根据不同岗位的需求来,例如:linux方面的知识、php方面的知识、对性能优化的认识、对界面设计的理解等等··· ···

下面还是列举近期面试的题目来一一说明

一、如何实现高度很小的容器,如:1px

在高级浏览器里面是没有问题的,在IE6里面有问题,添加overflow: hidden; 属性即可解决这一问题

代码如下:

.demo{
    width: 100px;
    heuhgt: 1px;
    background: red;
    overflow: hidden;
}

二、高级浏览器用 display: inline-block 来定义行内块状元素,IE 6如何实现

在IE6、IE7中不识别display:inline-block属性,加不加display:inline-block;对于它们完全没有任何影响。添加 zoom: 1; 属性即可解决.

加了个 zoom: 1 来触发 haslayout; zoom 的值设置为除了 auto 外的任何值都会触发 haslayout,之所以经常用 zoom: 1; 是因为 zoom 这个属性本身是 ie 的缩放属性,设置为其他值会导致元素在 ie 下变形,设置为1既是保持原形不缩放。

li {
    display: inline-block;        /* firefox等标准浏览器识别*/
    *display: inline;              /* 只有ie6和ie7识别*/
    zoom: 1;                       /* 触发ie6和ie7下的haslayout */
    width: 80px;  
    height: 20px;  
    margin: 10px;  
    padding: 10px;  
    text-align: center;  
    background: #cfc;  
}

注意书写顺序,display: inline 一定要写在 display: inline-block 后面,IE6是识别inline-block的,但并不是我们想要的效果,虽然display:inline-block对ie6,7中的元素表现没有任何直接影响,但是它会触发inline元素的haslayout。

三、用javascript编码实现截取字符串"abcdefg"的"efg"

这个题目相对比较开放,有好几种解决方案,列出一些我想到的

'abcdefg'.substr(4)

'abcdefg'.substring(4)

'abcdefg'.slice(4)

'abcdefg'.replace('abcd','')

  • substr 方法:返回一个从指定位置开始的指定长度的子字符串。stringvar.substr(start [, length ])

    索引值从0开始,索引值的当前那一位也要取,如果 length 为 0 或负数,将返回一个空字符串。如果没有指定该参数,则子字符串将延续到 stringvar 的最后。

  • substring 方法:返回位于 String 对象中指定位置的子字符串。strVariable.substring(start, end)

    索引值从0开始,如果 start 或 end 为 NaN 或者负数,那么将其替换为0

  • slice() 方法:返回一个新的字符串片段,可接收两个参数,第一个参数为开始位置,第二个参数为结束位置的位置。有以下几点需要注意:

    • 不包括结束位置的字符串
    • 如果第一个参数大于第二个参数,则返回空字符串
    • 参数为复数,且复数的绝对值小于字符串长度,则从后往前截取字符串,(-1对应最后一位)
    • 参数为负数,且负数的绝对值大于字符串长度,则从字符串开始位置截取
  • replace()方法:将字符串中的一个子字符串进行替换,返回新的字符串,有两个参数,第一个参数可以是一个字符串的值,也可以是一个正则的对象,第二个参数是替换的内容的字符串。

这里罗列了这四种截取字符串的方法,使用方法非常相似,可以根据具体需要进行选择。

四、编写一个javascript函数parseQueryString,它的用途是把URL参数解析为一个对象,如:var url = 'http://witmax.cn/index.php?key0=0&key1=1&key2=2'

这题目算是比较经典了,面试过程中遇到过两次,题目主要是考察对正则匹配、字符串拆分、数组转换等内容的考察,代码如下:

function parseQueryString(url){
    var ob = {};
    var str = url.substring(url.indexOf('?') + 1);
    var arr = str.split('&');
    console.log(arr);
    var len = arr.length;    
    for(var i = 0;i < len;i ++){
        var item = arr[i];
        var sub = item.slice(0,item.indexOf('='));
        ob[sub] = item.slice(item.indexOf('=') + 1);
    }
    return ob;
}

五、使用css控制三个div,实现如下布局

代码需实现的图片

这个也算是比较经典的题目了,实现方法有很多,下面列出我知道的

简单起见,下面是html布局,每种方式都是一样的。

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
  • 方案一:
div{
    background: #000;
}
.box1{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
}
.box2{
    position: absolute;
    width: 100px;
    height: 110px;
    left: 60px;
    top: 0;
}
.box3{
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0;
    top: 60px;
}

方案一是我第一个想出来的写法,利用定位来实现三个div的布局。

方案二:

div{
    background: #000;
}
.box1{
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 10px;    
}
.box2{
    width: 100px;
    height: 110px;
    float: left;
}
.box3{
    width: 50px;
    height: 50px;
    float: left;
    position: absolute;
    left: 0;
    top: 60px;
}

第二种方案结合了浮动和绝对定位来实现。

目前想到的就这俩种,如果你有好的实现方法,欢迎你到微博或微信里面告诉我。

六、form中的input可以设置readonly和disabled,请问这两种属性有什么区别

Readonly和Disabled是用在表单中的两个属性,它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别,总结如下:

  • Readonly只针对input(text / password)和textarea有效,而disabled对于所有的表单元素都有效,包括select, radio, checkbox, button等。
  • 但是表单元素在使用了disabled后,当我们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly,但是submit button却是可以使用的)。

两项属性由于差异的存在,使用的场景也有所不同

  • 在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,此时应该将它的属性设置为readonly。
  • 我们常常在用户按了提交按钮后,利用javascript将提交按钮disabled掉,这样可以防止网络条件比较差的环境下,用户反复点提交按钮导致数据冗余地存入数据库。

七、js中的三种弹出式消息提醒(警告窗口、确认窗口、信息输入窗口)的命令是什么?

  • 警告窗口:alert('这里是警告窗口的内容')
  • 确认窗口:confirm('你确定要进行这个操作么?')
  • 信息输入窗口:prompt('输入信息')

八、请简述下ajax技术,同步和异步有何区别?

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。

普通的B/S模式就是同步,而AJAX技术就是异步,当然XMLHttpReques有同步的选项。

同步:提交请求->等待服务器处理->处理完毕返回。这个期间客户端浏览器不能干任何事。 异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕。

九、描述一下 call 和 apply 的区别

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.

  • 在JavaScript中,代码总是有一个上下文对象,代码处理该对象之内. 上下文对象是通过this变量来体现的, 这个this变量永远指向当前代码所处的对象中.
  • call, apply作用就是借用别人的方法来调用,就像调用自己的一样.
  • call, apply方法区别是,从第二个参数起, call方法参数将依次传递给借用的方法作参数, 而apply直接将这些参数放到一个数组中再传递, 最后借用方法的参数列表是一样的.

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3)