前端程序员面试分类模拟题8

前端程序员面试分类模拟题8简答题1.

排序算法包含诸多术语，例如稳定性、内排序、时间复杂度等，请列举出你所知的术语并加以说明。正确答案：术语如下所列。

(1)稳定性：如果a原本在b前面，而a（江南博哥）=b，排序之后a仍然在b的前面。

(2)不稳定性：如果a原本在b的前面，而a=b，排序之后a可能会出现在b的后面。

(3)内排序：所有排序操作都在内存中完成。

(4)外排序：由于数据太大，因此把数据放在磁盘中，而排序通过磁盘和内存的数据传输才能进行。

(5)时间复杂度：一个算法执行所耗费的时间。

(6)空间复杂度：运行完一个程序所需内存的大小。[考点]排序算法

2.

假设某人有100,000现金，每经过一次路口需要进行一次交费。交费规则为当现金大于50,000时每次需要交现金的5%，当现金小于或等于50,000时每次交5,000。请写一程序计算此人可以经过多少次路口。正确答案：初始条件为某人拥有的总现金为100,000，初始经过路口的次数为0，当金额低于5,000时，不能再过路口。所以可以通过循环来求次数，当现金大于50,000时，剩余金额为：总金额×(1-5%)，当现金小于50,000时，剩余金额为：总金额-5000，依次循环累加过路口的次数，直到不符合条件退出循环。实现代码为：

varsum,num;

for(sum=100000,num=0;sum＞=5000;){

if(sum＞=50000){

sum=0.95*sum;

}else{

sum=sum-5000;

}

num++;

}

console,log(num);

//23[考点]经典算法题

3.

用jQuery的多种方式获取选择框中选中项的value属性值。

＜selectid="name"＞

＜optionvalue="1"＞strick＜/option＞

＜optionvalue="2"＞jane＜/option＞

＜optionvalue="3"＞freedom＜/option＞

＜optionvalue="4"＞kevin＜/option＞

＜/select＞正确答案：有3种获取方式，第一种是直接调用val()方法；第二种是使用选择器:selected;第三种是借助Select元素的selectedIndex属性查找选中项，再读取它的value属性，具体如下所示。

$("#name").val();

//第一种

$("#name").find("option:selected").val();

//第二种

varindex=$("#name").get(0).selectedIndex;

//第三种

$("#name").find("option:eq("+index+")").val();[考点]jQuery

4.

请简要介绍Windows内存管理的机制。正确答案：内存管理是指软件运行时对计算机内存资源进行分配和使用的技术，其最主要目的是高效、快速地分配，并且在适当的时候释放和回收内存资源。

在讲解Windows内存管理前，首先介绍几个基本的概念，它们是物理内存、虚拟内存。

物理内存：即插在主板上的内存条。它是固定的，内存条的容量多大，物理内存就有多大(集成显卡系统除外)。但是需要注意的是，如果运行很多程序或者程序本身很大，就会导致占用大量的物理内存，甚至导致物理内存被消耗殆尽。

虚拟内存：考虑到代码必须在物理内存中才能被运行，而现在的操作系统中运行着非常多的应用程序，内存中不一定能够完全放下，所以，引出了虚拟内存的概念。虚拟内存指在硬盘上划分一块页面文件，充当内存使用，而这块内存却不是实实在在存在的。当程序运行时，有一部分资源还没有用上或者同时打开几个程序却只操作其中一个程序时，系统没必要将程序所有的资源都塞在物理内存中，于是，系统将这些暂时不用的资源放在虚拟内存上，等到需要时再调出来使用，并把那些不常用的程序片断放入虚拟内存，当需要用到它的时候再载入物理内存中。

除了以上提及的这些内容是内存管理所需要做的事情以外，内存管理还有另外一件事需要做，即计算程序片段在主存中的物理位置，以便CPU调度。对于Windows系统而言，其内存管理主要包括页式存储管理、段式存储管理和段页式存储管理等。以下将分别对其进行讲解。

页式存储管理：用户程序的地址空间被划分成若干固定大小的区域，称为“页”，相应地，内存空间分成若干个物理块，页和块的大小相等。可将用户程序的任一页放在内存的任一块中，实现了离散分配。进程空间也被静态地划分为若干个等长的区域，每个区域称为一个逻辑页面，其长度与页框的长度相等。当进程运行时，需要将它的各个逻辑页面保存到存储空间的物理页框中，即需要确定逻辑页面与页框的对应关系。进程的逻辑页面是连续的，但是页框页面却不一定是连续的。允许一个进程占用内存空间中多个连续的区域，而这些区域的长度相等，因而采用静态等长存储分配的方法，不会产生碎片。

段式存储管理：将用户程序地址空间分成若干个大小不等的段，每段可以定义一组相对完整的逻辑信息。存储分配时，以段为单位，段与段在内存中可以不相邻，也实现了离散分配。

段页式存储管理：分页系统能有效地提高内存的利用率，而分段系统能反映程序的逻辑结构，便于段的共享与保护，将分页与分段两种存储方式结合起来，就形成了段页式存储管理方式。在段页式存储管理系统中，作业的地址空间首先被分成若干个逻辑分段，每段都有自己的段号，然后再将每段分成若干个大小相等的页。对于主存空间也分成大小相等的页，主存的分配以页为单位。段页式存储管理系统中，作业的地址结构包含三部分的内容：段号、页号、页内位移量。程序员按照分段系统的地址结构将地址分为段号与段内位移量，地址变换机构将段内位移量分解为页号和页内位移量。为实现段页式存储管理，系统应为每个进程设置一个段表，包括每段的段号、该段的页表始址和页表长度。每个段有自己的页表，记录段中每一页的页号和存放在主存中的物理块号。[考点]内存管理

5.

用canvas元素画一个蓝底白字的矩形按钮，如下图所示。

按钮正确答案：在HTML文档中先定义一个canvas元素，并且将画布的宽和高分别设置为200px和100px，再用脚本绘制按钮，具体如以下代码所示。

＜canvasid="btnCanvas"width="200"height="100"＞

＜p＞这是一个按钮,用于启动游戏＜/p＞

＜/canvas＞

＜script＞

varcanvas=document.getElementById("btnCanvas"),

ctx=canvas.getContext("2d");

ctx.fillStyle="#007ab9";

//矩形背景色

ctx.fillRect(0,0,canvas.width,canvas.height);

//绘制矩形

ctx.font="40pxserif";

//字体设置

ctx.fillStyle="#FFF";

//字体颜色

ctx.fillText("游戏开始",20,60);

//绘制文本

＜/script＞[考点]多媒体和绘图

6.

创建一个＜dd＞元素，设置该元素的内容为4，并插入到id属性为“third”的＜dd＞元素之前。要求不能使用第三方类库，只能用DOM方法实现。

＜dlid="numbers"＞

＜dd＞1＜/dd＞

＜dd＞2＜/dd＞

＜ddid="third"＞3＜/dd＞

＜/dl＞正确答案：创建HTML元素可以通过Document对象的createElement()方法实现。查找指定id属性的元素可以通过Document对象的getElementById()方法实现。设置元素的内容可以通过定义Element对象的innerHTML属性实现。在指定元素之前插入元素可以通过Node对象的insertBefore()方法实现，insertBefore()能接收两个参数，第一个参数是要插入的节点，第二个参数是指定的子节点。具体的实现过程如下所示。

vardd=document.createElement("dd"),

dl=document.getElementById("numbers"),

third=document.getElementById("third");

dd.innerHTML=4;

dl.insertBefore(dd,third);[考点]BOM和DOM

7.

请说下你对CSS中行高(line-height)的理解。正确答案：行高(line-height)是指两行文本基线之间的垂直距离。基线(baseline)是西方文字排版中的概念，指的是字母排列的基准线。汉字中不存在基线，当汉字与字母混排时，汉字的下端沿并不在基线上，而是会被调整到基线的下边一点。下图中的两条横线就是基线。

基线

line-height属性主要影响的是行内元素而不是块级元素，如果给块级元素设置行高，那么受影响的将会是行内内容。[考点]CSS属性文本和字体

8.

如何用jQuery来创建插件?正确答案：当创建一个jQuery插件时，本质上是在扩展jQuery类库。开发jQuery插件很简单，只要在$.fn(jQuery对象的原型)上分配一个插件名，再指向一个新的函数，就能成功创建一个新的jQuery插件。但通常还会再做一个操作，就是用即时函数(IIFE)把jQuery映射成美元符号($)。这样既能避免$与其它JavaScript类库发生冲突，也能隔离插件中的变量，防止它们污染其他作用域，具体写法如下所示。

(function($){

$.fn.customPlugin=function(){

};

})(jQuery);

//调用插件

$("#container").customPlugin();[考点]jQuery

9.

封装一个isInteger()函数，用于检测传入的值是否为整数。正确答案：整数是指没有小数的数，包括正整数、负整数和零。在JavaScript中有3个特殊的数值：NaN，Infinity和-Infinity。isInteger()函数不仅要能识别出小数，还要能识别出这3个特殊的数值。下面是一个满足条件的isInteger()函数。

functionisInteger(value){

returntypeofvalue==="number"&&isFinite(value)&&value%1===0;

}

其中，typeof运算符能够检测出变量的数据类型；全局函数isFinite()能够判断一个数字是否是有限数字；百分号(%)用于取得余数，如果不是整数，那么取得的余数不会是0。[考点]数据类型

10.

元素的布尔属性disabled和readonly有什么区别?正确答案：可参考下表中的对比。表中第三列的元素操作是指读取、写入等操作，第五列中的Tab导航是指能否用Tab键定位到该元素。disabled和readonly的对比属性元素外观元素操作获取焦点Tab导航表单提交元素支持disabled修改否否否没有发送数据input、textarea、option、select和button等元素readonly维持是是是会发送数据input和textarea[考点]HTML元素表单和表格

11.

绝对定位(absolute)和浮动(float)有哪些异同?正确答案：绝对定位和浮动都会使元素脱离正常流，改变元素盒类型，将元素变为块级元素，同时都能创建BFC。两者的不同点包括对包含块的定义、对兄弟元素的影响、可摆放的位置以及能否设置z-index的值，如下表所列。绝对定位和浮动的对比不同点绝对定位浮动包含块离它最近的position属性不为static的祖先元素的内容区域离它最近的块级祖先元素的内容区域兄弟元素的影响原先所占的空间会被删除，不会影响兄弟元素影响兄弟元素的位置或样式摆放位置可摆放在任意位置不能超出包含块的内容区域，并且向上浮动也会受限制z-index可设为任意的整数或auto无法设置z-index属性，默认的值为0[考点]CSS属性浮动和定位

12.

语义化有哪些优势?正确答案：语义化有着巨大的优势，这里简要概括为3条，如下所列：

(1)良好的语义使得HTML文档结构清晰、布局合理、主体突出、可读性更强，便于开发者更快速地理解代码的意图。

(2)促进无障碍访问，降低信息污染，帮助残障人士的辅助设备(如屏幕阅读器等)识别元素含义，做出正确反馈。

(3)改善搜索引擎优化(SEO)。经过语义化的HTML能提供丰富的上下文信息和内容的含义，让爬虫更容易分析内容、区分类型以及对内容进行索引。[考点]HTML5

13.

用过calc()函数吗?它是什么?有什么作用?正确答案：calc()是CSS的一个函数，只有一个数学表达式参数，此函数可处理加减乘除等数学运算，并且在表达式中可混用不同的单位，如以下代码所示。

div{

width:calc(50%-2px);

}

在用百分比做自适应布局的时候，如果要进行计算会比较困难，例如为了让两个有边框的元素排列在一行，需要准确地算出各个元素的宽度，而宽度都是百分数，边框却是像素值。单位不同，很难得出结果，但有了calc()函数后，结果值就能手到擒来，下图是这个例子的效果示意图。

calc()函数的使用效果[考点]值和单位

14.

请简单描述一下你对JavaScript的理解。正确答案：JavaScript是一种通过解释执行的高级编程语言，同时也是一门动态、弱类型的直译脚本语言，适合面向对象(基于原型)和函数式的编程风格。JavaScript主要运行在一个内置JavaScript解释器的客户端中(例如Web浏览器)，能够处理复杂的计算，操控文档的内容、样式和行为。能在客户端完成的操作(例如输入验证、日期计算等)尽量都由JavaScript完成，这样就能减少与服务器的通信，降低服务器的负载。完整的JavaScript由3部分组成：ECMAScript、DOM和BOM。[考点]基本语法

15.

下面代码中的图像是否会被延迟下载?为什么?

＜linkrel="stylesheet"href="css/style.css"type="text/css"/＞

＜script＞

setTimeout(function(){

console.log(123);

},3000);

＜/script＞

＜imgsrc="img/lake.png"/＞正确答案：会。将内联脚本(把JavaScript代码放置在＜script＞和＜/script＞标签之间)放在外部样式表之后，会延迟资源下载，只有当样式表下载完成并且内联脚本执行完毕时，后续资源(例如代码中的图像)才能开始下载。这是因为内联脚本可能含有依赖于样式表中CSS规则的代码。[考点]HTML元素元数据

16.

有没有用过JavaScript的单元测试工具?正确答案：有。单元测试常常会被开发人员所忽略，主要是因为大家还没了解到单元测试所带来的好处，所以才会认为写单元测试是画蛇添足。但事实上单元测试有诸多好处，例如可以获得一次底层回归测试、降低缺陷修复成本、促成更好的设计等。目前常用的JavaScript测试框架有Jasmine、QUnit、Mocha、jsTestDriver等。其中Jasmine最为流行，它既可以在浏览器中运行，也可以在Node环境中运行，自带断言和测试替身，无须依赖其他库。不过它没有测试执行器，所以需要第三方的支持，例如Karma。[考点]软件测试

17.

段页式存储管理方案的特点是什么?正确答案：页式存储分配是把作业分成相等大小的页，段式存储管理是把一个程序分成若干个段(segment)进行存储，每个段都是一个逻辑实体(logicalentity)。段页式存储管理是基本分段存储管理方式和基本分页存储管理方式的结合，兼有段式和页式管理的优点，即先将用户程序分成若干个段，再把每个段分成若干个页，并为每一个段赋予一个段名，页间不要求连续(能动态连接)，用分段方法分配管理作业，用分页方法分配管理内存。它的特点是空间浪费小、存储共享容易、存储保护容易及能动态连接。

段页式管理采用二维地址空间，例如段号(S)、页号(P)和页内单元号(D)。系统建两张表格，每一作业一张段表，每一段建立一张页表，段表指出该段的页表在内存中的位置，地址变换机构类似页式机制，只是前面增加一项段号。所以，存储共享容易、存储保护容易。[考点]内存管理

18.

用纯CSS实现一个三角形。正确答案：先将元素(如div)的宽高设为0，边框的宽度设为50px，4个部分的边框可拼成一个正方形。然后将其他3部分的颜色设为透明，剩下的部分就是一个三角形，代码如下所示。

div{

width:0;

height:0;

border:50pxsolidtransparent;

border-top-color:gray;

}[考点]CSS属性边框和背景

19.

数字签名和加密的区别是什么?正确答案：数字签名使用发送方的密钥对，发送方使用自己的私有密钥进行加密，而接收方只需要发送方的公开密钥就可以解密，是一种一对多的关系，只要持有发送方公开密钥的人都可以验证数字签名的正确性。

加密是一种以密码方式发送信息的方法，指的是如下过程：发送方利用接收方的公钥对要发送的明文进行加密，接收方利用自己的私钥进行解密，其中公钥和私钥是相对的，任何一个作为公钥，则另一个就为私钥。所以，加密使用的是接收方的密钥对，这是一种多对一的关系，任何知道接收方公开密钥的人都可以向接收方发送加密信息，只有唯一拥有接收方私有密钥的人才能对信息解密。

另外，数字签名采用的是非对称密钥加密算法，它能保证发送信息的完整性、身份认证和不可否认性，而数字加密采用的是