前端程序员面试分类真题9

前端程序员面试分类真题9一、单项选择题1.

以下可以作为变量名使用的是______A.9nameB.$strick9C.pwstrickD.delete正确答案：B[考点]基本语法[解（江南博哥）析]JavaScript中的变量是一个标识符，标识符不能以数字(0～9)开头，只能以字母(例如大写的A～Z或小写的a～z)、下画线(_)或美元符号($)开头，并且后续的字符中不能有空格，根据这条规则选项A和选项C是不合法的标识符。选项D是一个有特殊含义的关键字，也不能作为标识符使用。

2.

执行下面的代码后，变量y的结果为______

varz=1,y=z=typeofy;

console.log(y);A."undefined"B."number"C.nullD.1正确答案：A[考点]基本语法[解析]typeof运算符比等号运算符优先级要高，由此可知，先执行typeof运算符。而此时y变量还未定义，所以计算结果为“undefined”。由于等号运算符的结合性是从右往左，因此“undefined”会先赋给z变量，再赋给y变量。

3.

以下单词不能作为JavaScript关键字的是______A.deleteB.voidC.privateD.break正确答案：C[考点]基本语法[解析]选项C是一个保留字，选项A和选项B是两个用于运算符的关键字，选项D是一个用于跳转语句的关键字。

4.

String对象的方法不包括______A.map()B.concat()C.indexOf()D.replace()正确答案：A[考点]数据类型[解析]选项A中的map()是Array对象的方法，能用回调函数的结果(即返回值)组成一个新数组；选项B中的concat()能将一个或多个字符串连接，组成一个新字符串；选项C中的indexOf()能返回给定值在字符串中首次出现的位置，如果未找到，那么返回-1；选项D中的replace()能替换匹配正则表达式的子串。

5.

在下面的表达式中，能返回false的是______A.1=trueB.""==falseC.null==undefinedD.false==null正确答案：D[考点]数据类型[解析]相等运算符(==)允许在比较中进行类型转换。选项D中的左操作数是布尔值，右操作数是null，左操作数会调用Number()函数转换成数字，最终表达式变为0=null，而数字和null是不相等的，所以返回false。

6.

以下选项中，能被encodeURIComponent()函数编码的是______A.*B.～C.$D.-正确答案：C[考点]对象[解析]encodeURIComponent()函数用于编码URL中的某一段，只有9个字符不会被编码(!f()*-._～)。除了选项C之外，其他3个字符都不能被编码。

7.

下面是一段JSON格式的数据，符合JSON规范的属性是______

"age":010,

"height":1.,

"name":'pingwen',

"weight":20

}A.ageB.heightC.nameD.weight正确答案：D[考点]对象[解析]数字和字符串需要遵守一定的规范，才能应用到JSON中。数字中不能有前导零，并且不能省略浮点数整数部分和小数部分中的零，选项A和选项B中的属性违反了这几条限制。字符串必须用双引号包裹，可以是任意数量的Unicode字符，不能包含双引号(")、反斜线(\)和大部分的转义字符(例如\n、\t或\b等)，选项C中的属性违反了双引号的限制。

8.

能正确匹配正则表达式/^\d+\*[n\w]*[\w]{1}$/的是______A.123*A1B.123*$$C.123*AAD.123*$A正确答案：D[考点]日期和正则表达式[解析]首先字符串必须是以\d(数字)开头，之后跟随一个星号字符(*)，再添加零或多个非\W的字符，最后以一个\W(字母、数字或下画线)结尾，因此，只有选项D才符合匹配要求。

9.

下列选项不是Array对象(即数组)的方法的是______A.push()B.shift()C.split()D.join()正确答案：C[考点]数组[解析]选项C中的split()方法属于String和RegExp对象，能将字符串分割为数组；选项A中的push()能在数组尾部插入一个或多个元素；选项B中的shift()能在数组头部移除一个元素；选项D中的join()能用指定的分隔符将数组中的元素衔接在一起，组成一个字符串。

10.

下面创建数组的选项中，错误的是______A.vararr[]=newArray()B.vararr=newArray(10)C.vararr=[1,,3]D.vararr=newArray(1,2,3)正确答案：A[考点]数组[解析]数组有两种创建方式：构造函数和字面量。选项B中的参数是一个数字，能返回指定长度的数组；选项C创建了一个稀疏数组；选项D传入了3个参数，返回包含这些参数的数组。

11.

执行下面的代码，在控制台分别输出______

vara=1;

//全局变量

varfunc=(function(){

vara=2;

returnfunction(){

a++;

console.log(a);

};

})();

func();

func();A.2和2B.NaN和NaNC.2和3D.3和4正确答案：D[考点]函数[解析]在上面的代码中，首先为func变量赋值，执行即时函数会返回一个匿名函数。该匿名函数中的a变量引用的是函数作用域中的a变量，而不是全局作用域中的a变量。这是因为此处创建了一个闭包，闭包能记住函数声明时所处的作用域。由此可知，调用两次func()函数，得到的结果为3和4。

12.

闭包的特性不包括______A.降低内存的使用量B.变量不会被垃圾回收C.访问其他作用域中的变量D.保存变量的引用正确答案：A[考点]函数[解析]由于闭包保存了变量的引用，所以可以访问其他作用域中的变量，并且这些变量不会被垃圾回收，但这样就增加了内存的使用量。由此可知，选项A中的描述并不是闭包的特性。

二、填空题1.

在CSS中组合使用3个内容属性______、______和______，能够在元素前面自动插入递增的序号。正确答案：counter-reset、counter-increment、content[考点]选择器和层叠[解析]通过counter-reset属性能为计数器设置名称，并初始化计数器；通过counter-increment属性能设置计数器的增量；在content属性中应用counter()或counters()函数，能将最终的计数显示在页面上。

删除修改

2.

在表格中，两个相邻的单元格有一条边框会共用，当一边的border-style设为hidden，另一边的border-style设为yellow时(代码如下所示)，最终的border-style属性值为______。

＜tr＞

＜tdstyle="border-right-style:hidden"＞＜/td＞

＜tdstyle="border-right-style:yellow"＞＜/td＞

＜/tr＞正确答案：hidden[考点]CSS属性边框和背景[解析]将边框的外观(border-style)设为hidden表示隐藏边框，当应用于表格单元格的时候，hidden的优先级比较高。

3.

在表格中，两个相邻的单元格有一条边框会共用，当一边的border-style设为none，另一边的border-style设为yellow时(代码如下所示)，最终的border-style属性值为______。

＜tr＞

＜tdstyle="border-right-style:none"＞＜/td＞

＜tdstyle="border-right-style:yellow"＞＜/td＞

＜/tr＞正确答案：yellow[考点]CSS属性边框和背景[解析]将边框的外观(border-style)设为none表示无边框，当应用于表格单元格的时候，none的优先级比较低。

4.

如果要用JavaScript中的setTimeout()函数来实现动画，那么执行函数的时间间隔设为______ms会比较合理。正确答案：16.7[考点]CSS3属性变形、过度和动画[解析]屏幕一般情况下频率为60Hz，也就是每秒刷新60次，合理的时间间隔就是16.7ms，计算过程如下所示。

1000/60=16.7ms

5.

将ul元素的默认样式设成无，可以改变______、______和______属性。正确答案：margm、padding、list-style-type[考点]布局[解析]浏览器中的ul元素虽然默认包含外边距、内边距和列表外观，但是各个浏览器的默认值还不同，为了保持浏览器的一致性，统一元素的初始外观，经常会重置这3个CSS属性。

6.

如果要设置伸缩容器中子元素的显示顺序，可以用______属性实现。正确答案：order[考点]布局[解析]伸缩盒(FlexibleBox)是CSS3引入的一种全新布局模式，用它可以轻松解决移动端屏幕尺寸带来的布局问题。它能让普通容器(通常是块级元素)变为伸缩容器，使其有能力改变子元素的尺寸、顺序和对齐方式。元素会按照HTML文档中的位置排列，位置在前的先显示，位置在后的后显示。order属性能够改变元素的显示顺序，它的值是一个数字，越小越靠前。

7.

如果伸缩容器的宽度为300px，并且容器中有三个子元素，这三个子元素的flex-basis属性值分别为50px、80px、100px(代码如下所示)，那么这三个子元素的真实宽度分别是______px、______px和______px。注意，得到的结果保留两位小数，最后一位四舍五入。

section:nth-child(1){

flex:1150px;

}

section:nth-child(2){

flex:2280px;

}

section:nth-child(3){

flex:33100px;

}正确答案：67、103.33、135[考点]布局[解析]伸缩容器的剩余空间为70px，这个值是通过(300-50-80-100)计算而来的。从上面代码中可知三个子元素的flex-grow属性值总和为6，下面是计算子元素最终宽度的公式。

最终宽度=flex-grow/flex-grow总和×剩余空间+flex-basis

把各个值代入到公式中，得到三个结果：61.67、103.33和135(具体计算过程如下所列)，加起来正好是300，等于容器的宽度。

(1)子元素1=1/6×70+50=61.67。

(2)子元素2=2/6×70+80=103.33。

(3)子元素3=3/6×70+100=135。

8.

如果伸缩容器的宽度为300px，并且容器中有三个子元素，它们的flex-basis属性值分别为100px、130px、150px(代码如下所示)，那么这三个子元素的真实宽度分别是______pX、______px和______px。注意，得到的结果保留两位小数，最后一位四舍五入。

section:nth-child(1){

flex:11100px;

}

section:nth-child(2){

flex:22130px;

}

section:nth-child(3){

flex:33150px;

}正确答案：12、104.32、105.56[考点]布局[解析]伸缩容器的溢出空间为80px，这个值是通过(100+130+150-300)计算而来的。根据三个子元素的flex-shrink属性，计算出收缩总和为810px，这个值是通过(1×100+2×130+3×150)计算而来的，下面是计算子元素最终宽度的公式。

最终宽度=flex-basis-(flex-shrink×flex-basis)/收缩总和×溢出空间

把各个值代入到公式中，得到三个结果：90.12、104,32和105.56(具体计算过程如下所列)，加起来正好是300，等于容器的宽度。

(1)子元素1=100-(1×100/810)×80=90.12。

(2)子元素2=130-(2×130/810)×80=104.32。

(3)子元素3=150-(3×150/810)×80=105.56。

三、简答题1.

CSS预处理器有哪些优缺点?正确答案：CSS预处理器的优点如下所列：

(1)用变量存储多次引用的信息(如颜色值、字体、边距等)，只需修改一个地方，就能让所有引用之处都随之改变。

(2)新语法中的混合(mixin)能够重用一段样式代码，可用混合将自动截取的或列表中的小箭头样式组织在一起，需要这段代码的选择器只需简单引入即可。

(3)内置丰富的函数，可处理颜色、字符串、数字和选择器等，也可自定义函数，适应特定需求。

(4)可像JavaScript那样通过使用数学运算(如加减乘除等)，条件判断和循环，几句代码，就可描述一大段CSS样式。

(5)选择器可嵌套选择器，沿着嵌套的选择器链向上组合形成最终的选择器。嵌套的形式模拟出了HTML的层级结构，同时形成了命名空间，选择器之间的关系更明显，增强了文件的可读性。

(6)导入规则可让各部分代码保持独立，便于模块化管理，各个导入的文件最终被编译生成一个CSS文件。

CSS预处理器的缺点如下所列：

(1)通过编译生成CSS文件，降低了对CSS文件的控制力，如果书写不当，那么编译出的CSS文件将会大而复杂。

(2)调试难度增加。在浏览器中调试的是编译后的CSS文件，并不是编译前的源码。

(3)带来了一定的学习成本。新人需要学习预处理器的语法规则，虽然内容不多，但要达到融会贯通，还是需要一定的锤炼。[考点]预处理器和框架

2.

Sass和SCSS有哪些区别?正确答案：Sass和SCSS主要有如下4个方面的区别：

(1)Sass表示旧语法，SCSS表示新语法。

(2)新语法的文件后缀是.scss，而旧语法的文件后缀是.sass。

(3)新语法中选择器的内容用大括号包裹，而旧语法使用缩进。

(4)新语法用分号(;)分隔语句，而旧语法用换行符。[考点]预处理器和框架

3.

有没有想过制作一套自己的UI库?如果要制作UI库需要考虑哪些方面?正确答案：想过。一套经历过沉淀的UI库，有助于快速搭建页面，并且在兼容性、功能性等各方面都有保障。虽然现在市面上有很多精心雕琢的开源UI库，但可能某些方面不符合实际需求，而且要熟练驾驭第三方UI库，肯定需要一个过程，在这过程中必然会花费一定的时间与精力。如果是自己开发的UI库，那么就能以最小的代价调整成符合实际需求的UI库。开发UI库的过程也是学习和实践的过程，UI库要做到小而全，自然会涉及很多平时不常用或不知道如何使用的概念，将这些概念纳入到UI库中，然后在应用UI库的时候，肯定会遇到各种问题，解决这些问题，不但有助于提升自己对概念的理解，还能激发创造力。

用Sass可以写出短小精悍的UI库，并且Sass有个导入功能(使用@import关键字)，非常适合模块化开发，其用法如下所示。

@import"../grid",

"../button";

UI库可以简单地分为基础组件和UI组件两部分，其中，基础组件相当于通用零件，它放在任何地方都能用，例如网格系统、字体排版等；UI组件相当于专用零件，它应用于特定领域，完成特定功能，例如表单控件、表格等。UI库的组件根据实际情况，可多可少，Sass的导入功能使得组件可以按需加载，不但能提高代码重用率，还能降低耦合度。[考点]预处理器和框架

4.

什么是前端框