常见前端面试题及答案（下）

 

2017-02-15  默语 JavaScript

 

转自：http://www.cnblogs.com/syfwhu/p/4434132.html

69.你如何从浏览器的URL中获取查询字符串参数。

如下函数把获取一个key的参数。

1 function parseQueryString ( name ){

     name = name.replace(/[\[]/,"\\\[");

     var regexS = "[\\?&]"+name+"=([^&#]*)";

     var regex = new RegExp( regexS );

     var results = regex.exec( window.location.href );

 

     if(results == null) {

         return "";

     } else {

    return results[1];

    }

}

70.请解释一下JavaScript的同源策略。

在客户端编程语言中，如javascript和 ActionScript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操做另一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不一样的域呢？当两个域具备相同的协议, 相同的端口，相同的host，那么咱们就能够认为它们是相同的域。同源策略还应该对一些特殊状况作处理，好比限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是经过file协议打开的，若是脚本能经过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前IE8还有这样的隐患。

71.请描述一下JavaScript的继承模式。

关于继承请看文章JavaScript之对象的继承。

72.如何实现下列代码：[1,2,3,4,5].duplicator();//[1,2,3,4,5,1,2,3,4,5]。

73.描述一种JavaScript中实现memoization(避免重复运算)的策略。

74.什么是三元表达式？“三元”表示什么意思？

三元表达式：? :。三元–三个操做对象。

在表达式boolean-exp ? value0 : value1 中，若是“布尔表达式”的结果为true，就计算“value0”，并且这个计算结果也就是操做符最终产生的值。若是“布尔表达式”的结果为false，就计算“value1”，一样，它的结果也就成为了操做符最终产生的值。

75.JavaScript里函数参数arguments是数组吗？

在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，经过使用下标就能够访问相应的参数。

arguments虽然有一些数组的性质，但其并不是真正的数组，只是一个类数组对象。其并无数组的不少方法，不能像真正的数组那样调用.jion(),.concat(),.pop()等方法。

76.什么是”use strict”;?使用它的好处和坏处分别是什么？

在代码中出现表达式-“use strict”; 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。

好处：

• 消除Javascript语法的一些不合理、不严谨之处，减小一些怪异行为;

• 消除代码运行的一些不安全之处，保证代码运行的安全；

• 提升编译器效率，增长运行速度；

• 为将来新版本的Javascript作好铺垫。 
  坏处：

一样的代码，在”严格模式”中，可能会有不同的运行结果；一些在”正常模式”下能够运行的语句，在”严格模式”下将不能运行。

77.解释”chaining”。

jQuery方法连接。直到如今，咱们都是一次写一条jQuery语句（一条接着另外一条）。不过，有一种名为连接（chaining）的技术，容许咱们在相同的元素上运行多条jQuery命令，一条接着另外一条。

提示：这样的话，浏览器就没必要屡次查找相同的元素。

如需连接一个动做，您只需简单地把该动做追加到以前的动做上。

78.解释”deferreds”。

开发网站的过程当中，咱们常常遇到某些耗时很长的javascript操做。其中，既有异步的操做（好比ajax读取服务器数据），也有同步的操做（好比遍历一个大型数组），它们都不是当即能获得结果的。

一般的作法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

可是，在回调函数方面，jQuery的功能很是弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是”延迟”，因此deferred对象的含义就是”延迟”到将来某个点再执行。

79.你知道哪些针对jQuery的优化方法？

• 1.老是从ID选择器开始继承在jQuery中最快的选择器是ID选择器，由于它直接来自于JavaScript的getElementById()方法。

例若有一段HTML代码：

 <div id="content">

     <form method="post"action="#">

         <h2>交通讯号灯</h2>

         <ul id="traffic_light">

             <li>

                 <input type="radio"class="on"name="light"value="red"/>红色

             </li>

             <li>

                 <input type="radio"class="off"name="light"value="yellow"/>黄色

            </li>

            <li>

                <input type="radio"class="off"name="light"value="green"/>绿色

            </li>

        </ul>

        <input class="button"id="traffic_button"type="submit"value="Go"/>

    </form>

</div>

好比须要选择红绿单选框，那么可使用一个tag name来限制(修饰)class，以下所示：var active_light=(“input.on”);当然也可以结合就近的ID，如下所示：varactivelight=(“input.on”);固然也能够结合就近的ID，以下所示：varactivelight=(“#traffic_light input.on”); 若是采用下面的选择器，那么效率是低效的。var traffic_button=(“#content.button”);由于button已经有ID了，咱们能够直接使用ID选择器。以下所示：var traffic_button=(“#content.button”);由于button已经有ID了，咱们能够直接使用ID选择器。以下所示：var traffic_button=(“#traffic_button”);固然这只是对于单一的元素来说。若是你须要选择多个元素，这必然会涉及到DOM遍历和循环，为了提升性能，建议从最近的ID开始继承。以下所示：var traffic_lights=$(“#traffic_light input”);

• 2.在class前使用tag(标签名)在jQuery中第二快的选择器是tag(标签)选择器(好比：$(“head”))。

跟ID选择器累时，由于它来自原生的getElementsByTagName()方法。继续看刚才那段HTML代码：

在使用tag来修饰class的时候，咱们须要注意如下几点：（1）不要使用tag来修饰ID，以下所示：var content=(“div#content”);这样一来，选择器会先遍历全部的div元素，而后匹配#content。（好像jQuery从1.3.1开始改变了选择器核心后，不存在这个问题了。暂时没法考证。）（2）不要多此一举的使用ID来修饰ID，以下所示：var traffic_light=(“div#content”);这样一来，选择器会先遍历全部的div元素，而后匹配#content。（好像jQuery从1.3.1开始改变了选择器核心后，不存在这个问题了。暂时没法考证。）（2）不要多此一举的使用ID来修饰ID，以下所示：var traffic_light=(“#content#traffic_light”);

• 3.将jQuery对象缓存起来把jQuery对象缓存起来就是要告诉咱们要养成将jQuery对象缓存进变量的习惯。

下面是一个jQuery新手写的一段代码：

$("#traffic_light input.on").bind("click",function(){});

$("#traffic_light input.on").css("border","1px dashed yellow");

$("#traffic_light input.on").css("background-color","orange");

$("#traffic_light input.on").fadeIn("slow");

但切记不要这么作。咱们应该先将对象缓存进一个变量而后再操做，以下所示：

记住，永远不要让相同的选择器在你的代码里出现屡次.注：（1）为了区分普通的JavaScript对象和jQuery对象，能够在变量首字母前加上$符号。（2）上面代码可使用jQuery的链式操做加以改善。以下所示：

var $active_light = $("#traffic_light input.on");

 

$active_light.bind("click",function(){})

.css("border","1px dashed yellow")

.css("background-color","orange")

.fadeIn("slow");

• 4.若是你打算在其余函数中使用jQuery对象，那么你必须把它们缓存到全局环境中。

以下代码所示：

 // 在全局范围定义一个对象(例如:window对象)

 window.$my = {

     head:$("head"),

     trafficLight:$("#trafficLight"),

     trafficButton:$("#trafficButton")

 };

 

 function doSomething(){

     // 如今你能够引用存储的结果并操做它们

    var script=document.createElement("script");

    $my.head.append(script);

 

    // 当你在函数内部操做是,能够继续将查询存入全局对象中去.

    $my.coolResults=$("#some_ul li");

    $my.otherResults=$("#some_table td");

 

    // 将全局函数做为一个普通的jquery对象去使用.

    $my.otherResults.css("border-color","red");

    $my.trafficLight.css("border-color","green");

}

// 你也能够在其余函数中使用它.

这里的基本思想是在内存中创建你确实想要的东西，而后更新DOM。这并非一个jQuery最佳实践，但必须进行有效的JavaScript操做。直接的DOM操做速度很慢。例如，你想动态的建立一组列表元素，千万不要这样作,以下所示：对直接的DOM操做进行限制。

var top_100_list = [];// 假设这里是100个独一无二的字符串

var $mylist = $("#mylist");// jQuery选择到<ul>元素

 

for(var i = 0,l = top_100_list.length;i<l;i++) {

    $mylist.append("<li>" + top_100_list[i] + "</li>");

}

咱们应该将整套元素字符串在插入进dom中以前先所有建立好，以下所示：

$("#entryform input").bind("focus",function() {

    $(this).addClass("selected");

}).bind("blur",function(){

    $(this).removeClass("selected");

});

• 5.冒泡除非在特殊状况下,不然每个js事件(例如:click,mouseover等.)都会冒泡到父级节点。

当咱们须要给多个元素调用同个函数时这点会颇有用。代替这种效率不好的多元素事件监听的方法就是,你只需向它们的父节点绑定一次。好比,咱们要为一个拥有不少输入框的表单绑定这样的行为:当输入框被选中时为它添加一个class传统的作法是，直接选中input，而后绑定focus等，以下所示：

$("#entryform").bind("focus",function(e) {

    var $cell = $(e.target); // e.target捕捉到触发的目标元素

    $cell.addClass("selected");

}).bind("blur",function(e) {

    var $cell = $(e.target);

    $cell.removeClass("selected");

});

固然上面代码能帮咱们完成相应的任务，但若是你要寻求更高效的方法，请使用以下代码：

经过在父级监听获取焦点和失去焦点的事件，对目标元素进行操做。在上面代码中，父级元素扮演了一个调度员的角色,它能够基于目标元素绑定事件。若是你发现你给不少元素绑定了同一个事件监听,那么如今的你确定知道哪里作错了。

• 6.推迟到$(window).load。

jQuery对于开发者来讲有一个很诱人的东西,能够把任何东西挂到(document).ready下。尽管(document).ready下。尽管(document).rady确实颇有用，它能够在页面渲染时，其它元素还没下载完成就执行。若是你发现你的页面一直是载入中的状态，颇有可能就是(document).ready函数引起的。你可以通过将jQuery函数绑定到(document).ready函数引发的。你能够经过将jQuery函数绑定到(window).load事件的方法来减小页面载入时的cpu使用率。它会在全部的html(包括iframe)被下载完成后执行。一些特效的功能，例如拖放,视觉特效和动画,预载入隐藏图像等等，都是适合这种技术的场合。

• 7.压缩JavaScript。

在线压缩地址:http://dean.edwards.name/packer/压缩以前，请保证你的代码的规范性，不然可能失败，致使Js错误。

• 8.尽可能使用ID代替Class。

  前面性能优化已经说过，ID选择器的速度是最快的。因此在HTML代码中，能使用ID的尽可能使用ID来代替class。看下面的一个例子：

 // 建立一个list

 var $myList = $('#myList');

 var myListItems = '<ul>';

 

 for(var i = 0; i < 1000; i ++) {

     myListItems += '<li class = "listItem'+i+'">This is a list item</li>';

     // 这里使用的是class

 }

 

myListItems += '</ul>';

$myList.html(myListItems);

// 选择每个li

 

for(var i = 0; i<1000; i++) {

    var selectedItem = $('.listItem' + i);

}

在上段代码中，选择每一个li总共只用了61毫秒，相比class的方式，将近快了100倍。 在代码最后，选择每一个li的过程当中，总共用了5066毫秒，超过5秒了。接着咱们作一个对比，用ID代替class：

• 9.给选择器一个上下文。

jQuery选择器中有一个这样的选择器，它能指定上下文。jQuery(expression,context);经过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提升效率。普通方式：(‘.myDiv′)改进方式：(‘.myDiv′)改进方式：(‘.myDiv’,$(“#listItem”))。

• 10.慎用.live()方法（应该说尽可能不要使用）。

这是jQuery1.3.1版本以后增长的方法，这个方法的功能就是为新增的DOM元素动态绑定事件。但对于效率来讲，这个方法比较占用资源。因此请尽可能不要使用它。例若有这么一段代码:

 <script type="text/javascript">

     $(function(){

 

         $("p").click(function(){

             alert($(this).text());

         });

 

         $("button").click(function(){

             $("<p>this is second p</p>").appendTo("body");

        });

    })

</script>

<body>

    <p>this is first p</p>

    <button>add</button>

</body>

运行后，你会发现新增的p元素，并没用被绑定click事件。你能够改为.live(“click”)方式解决此问题，代码以下：

 $(function() {

     $("p").live("click",function() {

         // 改为live方式

         alert($(this).text());

     });

 

     $("button").click(function() {

         $("<p>this is second p</p>").appendTo("body");

     });

})

但我并不建议你们这么作，我想用另外一种方式去解决这个问题，代码以下：

 $(function() {

     $("p").click(function() {

         alert($(this).text());

     });

 

     $("button").click(function() {

         $("<p>this is second p</p>").click(function() {

             // 为新增的元素从新绑定一次

             alert($(this).text());

        }).appendTo("body");

    });

})

虽然我把绑定事件从新写了一次，代码多了点，但这种方式的效率明显高于live()方式，特别是在频繁的DOM操做中，这点很是明显。

80.请解释.end()的用途。

在官方的API上是这样描述end()方法的：“回到最近的一个”破坏性”操做以前。即，将匹配的元素列表变为前一次的状态。”；看样子好像是找到最后一次操做的元素的上一元素，在以下的例子中：html代码：

复制代码代码以下:

<div>测试内容1</div><div>测试内容2</div>

jQuery代码：

复制代码代码以下:

$('<p>新增内容</p>').appendTo('div').addClass('c1').end().addClass('c2');

复制代码代码以下:

<div>测试内容1

    <p class="c1 c2">新增内容</p>

</div>

<div>测试内容2

    <p class="c1">新增内容</p>

</div>

这里我就有一点不太明白了，怎么只有第一个

标签有两个样式，end()方法后返回的是什么,在火狐里添加了监控，获得以下结果1.$(‘新增内容‘).appendTo(‘div’)返回的是：[p,p]对象数组，即新增后的两个p标签；

2.$(‘新增内容‘).appendTo(‘div’).addClass(‘c1’)返回的是：[p.c1,p.c1]对象数组，即添加了c1类样式后的p对象数组；

3.$(‘新增内容‘).appendTo(‘div’).addClass(‘c1’).end()返回的是[p.c1],是第1个中的,在2操做中，最后“破坏”的是第2个中的,因此他的前一次操做的对象是第1个中的,返回的就是它;

4.$(‘新增内容‘).appendTo(‘div’).addClass(‘c1’).end().addClass(‘c2’)返回的仍然是第1个中的;如今算是有点明白了，关键是要搞清楚最后一次操做的元素的上一元素是什么。

81.你如何给一个事件处理函数命名空间，为何要这样作？

任何做为type参数的字符串都是合法的；若是一个字符串不是原生的JavaScript事件名，那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发，但能够经过使用.trigger()或者.triggerHandler()在其余代码中手动触发。若是type参数的字符串中包含一个点(.)字符，那么这个事件就看作是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来讲，若是执行.bind(‘click.name’,handler)，那么字符串中的click是事件类型，而字符串name就是命名空间。命名空间容许咱们取消绑定或者触发一些特定类型的事件，而不用触发别的事件。参考unbind()来获取更多信息。

jQuery的bind/unbind方法应该说使用很简单，并且大多数时候可能并不会用到，取而代之的是直接用click/keydown之类的事件名风格的方法来作事件绑定操做。

但假设以下状况：须要在运行时根据用户交互的结果进行不一样click事件处理逻辑的绑定，于是理论上会无数次对某一个事件进行bind/unbind操做。但又但愿unbind的时候只把本身绑上去的处理逻辑给释放掉而不是全部其余地方有可能的额外的同一事件绑定逻辑。这时候若是直接用.click()/.bind(‘click’)加上.unbind(‘click’)来进行重复绑定的话，被unbind掉的将是全部绑定在元素上的click处理逻辑，潜在会影响到该元素其余第三方的行为。

固然若是在bind的时候是显示定义了function变量的话，能够在unbind的时候提供function做为第二个参数来指定只unbind其中一个处理逻辑，但实际应用中极可能会碰到各类进行匿名函数绑定的状况。对于这种问题，jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添加.something来区分本身这部分行为逻辑范围。

好比用.bind(‘click.myCustomRoutine’,function(){…});一样是把匿名函数绑定到click事件（你能够用本身的命名空间屡次绑定不一样的行为方法上去），当unbind的时候用.unbind(‘click.myCustomRoutine’)便可释放全部绑定到.myCustomRoutine命名空间的click事件，而不会解除其余经过.bind(‘click’)或另外的命名空间所绑定的事件行为。同时，使用命令空间还可让你一次性unbind全部此命名空间下的自定义事件绑定，经过.unbind(‘.myCustomRoutine’)便可。要注意的是，jQuery的命名空间并不支持多级空间。

由于在jQuery里面，若是用.unbind(‘click.myCustomRoutine.myCustomSubone’)，解除的是命名空间分别为myCustomRoutine和myCustomSubone的两个并列命名空间下的全部click事件，而不是”myCustomRoutine下的myCustomSubone子空间”。

82.请说出你能够传递给jQuery方法的四种不一样值。

选择器（字符串），HTML（字符串），回调函数，HTML元素，对象，数组，元素数组，jQuery对象等。

83.什么是效果队列？

jQuery中有个动画队列的机制。当咱们对一个对象添加屡次动画效果时后添加的动做就会被放入这个动画队列中，等前面的动画完成后再开始执行。但是用户的操做每每都比动画快，若是用户对一个对象频繁操做时不处理动画队列就会形成队列堆积，影响到效果。jQuery中有stop这个方法能够中止当前执行的动画，而且它有两个布尔参数，默认值都为false。第一个参数为true时会清空动画队列，第二个参数为true时会瞬间完成掉当前动画。因此，咱们常用obj.stop(true,true)来中止动画。可是这还不够！正如jQuery文档中的说法，即便第二个参数为true，也仅仅是把当前在执行的动画跳转到完成状态。这时第一个参数若是也为true，后面的队列就会被清空。若是一个效果须要多个动画同时处理，咱们仅完成其中的一个而把后面的队列丢弃了，这就会出现意料以外的结果。

84.请指出.get()，[]，eq()的区别。

eq:返回是一个jquery对象做用是将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0，而集合长度变成1。

get:是一个html对象数组做用是取得其中一个匹配的元素。num表示取得第几个匹配的元素。

85.请指出和和.fn的区别，或者说出$.fn的用途。

Jquery为开发插件提供了两个方法，分别是：

$.extend(obj);

$.fn.extend(obj);

• 1.那么这两个分别是什么意思？ 
  $.extend(obj);是为了扩展jquery自己，为类添加新的方法。

$.fn.extend(obj);给JQUERY对象添加方法。

• 2..fn中的fn是什么意思，其实是prototype，即.fn中的fn是什么意思，实际上是prototype，即.fn=$.prototype; 
  具体用法请看下面的例子：

$.extend({

 

    add:function(a, b) {

        return a+b;

    }

})

 

$.add(5,8); // return 13

注意没有，这边的调用直接调用，前面不用任何对象。直接$.+方法名

$.fn.extend(obj)；对prototype进行扩展，为jquery类添加成员函数，jquery类的实例可使用这个成员函数。

 $.fn.extend({

 

     clickwhile:function(){

 

         $(this).click(function(){

             alert($(this).val())

         })

     }

 })

 

$('input').clickwhile(); // 当点击输入框会弹出该对象的Value值

注意调用时候前面是有对象的。即$(‘input’)这么个东西。