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

 

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’)这么个东西。