2020-11-23 10:08 已编辑前端工程师

关注

面试考题

1. 关于身份证号，以下正确的正则表达式为（）

A.isIDCard=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;

B.isIDCard=/^[1-9]\d{7}((9\d)|(1[0-2]))(([0|1|2]\d)|3[9-1])\d{3}$/;

C.isIDCard=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$/;

D.isIDCard=/^[1-9]\d{5}[1-9]\d{3}((9\d)|(1[9-2]))(([0|1|2]\d)|3[9-1])\d{4}$/;
答案及解析：
正确答案是 A

A选项是15位身份证号码：

 ^开头  [1-9] 第一位1-9中的一个  
 \d{7}七位数字（前六位省市县地区+二位年份） 
 ((0\d)|(1[0-2])) 月份 
 (([0|1|2]\d)|3[0-1]) 日期 
 \d{3}  三位数字（三位的校验位。（第十五位奇数代表男，偶数代表女），15位身份证不含X） 
 $结尾

2. ["1", "2", "3"].map(parseInt)得到什么？

答案是：[1, NaN, NaN]
原因：

map函数传递参数的定义
parseInt函数针对于radix这个参数的理解
二进制当中没有"3"这个数码
详解：
标准定义下，map方***传递3个参数
arr.map(function(item, index, arr){
.....
});
这个时候，题目中的问题就转化为下面的函数求解

var arr = ["1","2","3"];
arr.map((value,index,array) => parseInt(value,index));
//parseInt(string,radix)
parseInt的官方定义
parseInt(string, radix);
string: 需要转化的字符，如果不是字符串会被转换，忽视空格符。
radix：数字2-36之前的整型。默认使用10，表示十进制。这个参数的意义是指把前面的字符看作是多少进制的数字，所谓的基数。
如下所示：

// 将'123'看作5进制数，返回十进制数38 => 15^2 + 25^1 + 3*5^0 = 38
parseInt('123', 5)

需要注意的是，如果radix在2-36之外会返回NaN。

在没有指定基数，或者基数为 0 的情况下，JavaScript 作如下处理：

如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制).
如果字符串 string 以"0"开头, 基数是8（八进制）或者10（十进制），那么具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10，但是并不是所有的浏览器都遵循这个规定。因此，永远都要明确给出radix参数的值。
如果字符串 string 以其它任何值开头，则基数是10 (十进制)。

因为parseInt只接收2个参数，因此map的callback函数就只传递(item, index)这两个值给parseInt。

那么上面的函数就可以分解为求解下面这三个函数的值，并返回结果

parseInt('1', 0); // 1 (parseInt的处理方式，这个地方item没有以"0x"或者"0X"开始，8和10这个基数由实现环境来定，ES5规定使用10来作为基数，因此这个0相当于传递了10)
parseInt('2', 1); // NaN (因为parseInt的定义，超出了radix的界限)
parseInt('3', 2); // NaN (虽然没有超出界限，但是二进制里面没有3，因此返回NaN)

这道题的三个考点：

map函数传递参数的定义，此处本身map函数是有3个参数可以传递的
parseInt函数针对于radix这个参数的理解，针对于0，2-36以外界限的定义
二进制当中没有"3"这个数码

CSS篇

3.怎么让chrome支持小于12px的文字？

解析：
chrome私有属性：-webkit-text-size-adjust:none;
-webkit-transform:scale(0.8);
行内元素设置:-webkit-transform:scale(0.8);display:inline-block

4.浮动会导致页面的非正常显示，以下几种清除浮动的方法，哪个是不推荐使用的？

A.在浮动元素末尾添加一个空的标签例如

B.通过设置父元素overflow值为hidden；

C.父元素也设置浮动

D.给父元素添加clearfix类

正确答案是 C

解析：
A选项中，通过添加空标签，是W3C推荐的，但会增加多余标签，一般不采用（非不推荐）。
B方法的话，如果子元素中有使用了绝对定位，在页面上显示是在父元素外面，一般就没法使用B方法了。
C选项中父元素也添加浮动，则使整体浮动影响布局，不推荐。
D选项是给浮动元素的容器添加clearfix class类，然后给这个class添加一个:after伪元素，实现元素之后添加一个看不见的块元素清理浮动。

5.下面有关css选择器的说法错误的是？

A..intro --- 选择 class="intro" 的所有元素。
B.#firstname --- 选择 id="firstname" 的元素。
C.div>p --- 选择所有元素
D.p --- 选择所有元素

正确答案是 C

C是错误的 div>p 选择的是所有父元素为div的p元素，如果一个p元素的父元素不是div，那么这个p元素是不会被选择的

6.实现翻书的效果可以使用css3里的什么方法

A.rotateY
B.translateY
C.scaleY
D.perspective(n)

正确答案：A

A、rotateY：定义沿 Y 轴的 3D 旋转，可实现翻书的效果
B、translateY：沿着 Y 轴移动元素
C、scaleY：定义 2D 缩放转换时，改变元素的高度；定义 3D 缩放转换时，通过给定一个 Y 轴的值
D、perspective(n)：改变3D元素是怎样查看透视图（注：只影响 3D 转换元素）

7.CSS 样式， Border-radius 属性作用是什么？

A.创建圆形边角
B.创建方形边角
C.控制表的间距
D.创建彩色边角

正确答案是 A

置一个正方形的div，border-radius的值设为width的一半，就是个圆啦

8.请你说说em与rem的区别？

em与rem的重要区别：它们计算的规则一个是依赖父元素另一个是依赖根元素计算。
rem是CSS3新增的一个相对单位（root em，根em），相对于根元素(即html元素)font-size计算值的倍数
只相对于根元素的大小
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。
作用：利用rem可以实现简单的响应式布局，可以利用html元素中字体的大小与屏幕间的比值设置font-size的值实现当屏幕分辨率变化时让元素也变化，
以前的天猫tmall就使用这种办法
em
文本相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认16px)。(相对父元素的字体大小倍数)
em（font size of the element）是指相对于父元素的字体大小的单位。它与rem之间其实很相似，区别在相对的是HTML元素的字体大，默认16px

9.根据规范，以下 HTML 和 CSS 代码解析后， container.clientWidth 的值是:

<style>
#container {
   width: 200px;
   height: 200px;
   padding: 20px;
   margin: 20px;
   border: solide 10px black;
}
</style>
<div id="container">
    content
</div>

A.200
B.240
C.280
D.300

正确答案是 B

le.clientWidth = 宽度 + padding ;Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。
ele.offsetWidth = 宽度 + padding + border
ele.scrollTop = 被卷去的上侧距离
ele.scrollHeight = 自身实际的高度（不包括边框）

10.元素竖向的百分比设定是相对于容器的高度吗？

解析：

相对于父容器的宽度

11.如何实现input框可以显示，但是无法输入？

css方面可以使用两个属性
1 disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，
2 readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改。
js方法，可以判读输入，进行相应的文本处理（不常用）

11.css优先级问题。比如当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值？

总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

CSS有一套优先级的定义。
不同级别
1 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2 作为style属性写在元素内的样式
3 id选择器
4 类选择器
5 标签选择器
6 通配符选择器
7 浏览器自定义或继承

12.px、em 和rem的优缺点以及区别?

px特点：
1.IE无法调整那些使用px作为单位的字体大小；
2.国外大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3.Firefox能够调整px和em,rem，但是96%以上的中国网民使用IE浏览器（或内核）。
px像素（Pixel）。相对长度单位。像素px是相对于显示屏幕分辨率而言的。（引自CSS2.0手册）
em是相对长度单位。相对于当前对象内文本的字体尺寸。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。（引自CSS2.0手册）
任意浏览器的默认字体高都是16px。所有未经调整的浏览器豆腐额：1em=16px。那么10px=0.625px。
为了简化font-size的换算，需要在css的body选择器中声明font-size=62.5%，这就使em值变为16px*62.5%=10px，这样10px=1em，也就是说只需要将原来的px数值除以10，然后换上em作为单位就可以了。

em特点：
1.em的值并不是固定的
2.em会继承父级元素的字体大小。
所以我们在写CSS的时候如果body选择器中声明font-size=62.5%，然后将原来的px数值除以10，然后换上em作为单位；
重新计算那些用em为单位的数值，避免字体大小重复声明。
也就是避免1.2*1.2=1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em，因为此em非彼em，它因继承#content的字体高变为了1em=12px。

rem特点：
rem是CSS3新增的一个相对单位（root em 根em），这个单位引起了广泛的关注。
这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
这个单位可谓集相对大小和绝对大小的有点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

13.css属性overflow属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制?

正确答案是 A

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

14.position的absolute与fixed共同点与不同点?

共同点：
1.改变行内元素的呈现方式，display被置为block；
2.让元素脱离普通流，不占据空间；
3.默认会覆盖到非定位元素上；
不同点：
absolute的”根元素“是可以设置的，而fixed的”根元素“固定为浏览器窗口。当你滚动网页，fixed元素与浏览器窗口之间的距离是不变的。

15.CSS中 link 和@import 的区别是？

link链入的方式：
<link rel="stylesheet" type="text/css" href="index.css">
@import导入的方式：
<style type="text/css">   
 @import url('index.css');   
</style>

优先级：嵌入样式 > 内部样式表 > 导入样式表（链入样式表）
导入的方式与链入的方式很相似，但实际上它相当于存在内部样式表中，虽然如此，它的优先级还是低于内部样式表的，而它与链入样式表的优先级的高低取决于所处位置的先后，谁定义在后面，谁的优先级就高。
注意：导入外部样式表时，它所处的位置必须在样式表的顶部，即在其他样式的最前面。
不同处：
（1）：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
（2）：link引用CSS时，在页面载入时同时加载；@import需要等页面完全载入后才加载。
（3）：link是XHTML标签，没有兼容问题；对于@import，低版本的浏览器是不支持的。
（4）：link支持使用javascript控制DOM去改变样式；而@import不支持。
（5）：@import可以在CSS文件中再次引入其他样式表。

16.display:none 和 visibility:hidden有什么区别？

display:none和visibility:hidden的区别是：
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

17.display设置为inline-block时，li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

解析：
行框的排列会受到中间空白（回车空格等等）的影响，这些空白也会被应用样式，占据空间，所以会有间隔。
解决：设置ul的font-size为0，缺陷是必须重新在li中去设置字体大小。

18.box-sizing常用的属性有哪些？分别有什么作用？

解析：
常用属性有：box-sizing: content-box/border-box/inherit；

标准盒模型 box-sizing: content-box
    content-box:
    width = content width;
    height = content height

IE盒模型 box-sizing: border-box
    border-box:
    width = border + padding + content width
    heigth = border + padding + content heigth

inherit：规定应从父元素继承box-sizing属性的值。

19.js异步机制及其原理？

（1）js的工作机制：
当线程中没有执行任何同步代码的前提下才会执行异步代码，setTimeout是异步代码，所以setTimeout只能等js空闲才会执行，但如果在其之前存在死循环，死循环是永远不会空闲的，所以setTimeout也永远不会执行。
即使setTimeout为0，他也是等js引擎的代码执行完之后才会插入到js引擎线程的最后执行。
（2）js是如何处理异步操作的？
js 引擎执行异步代码而不用等待，是因有为有消息队列和事件循环。
· 消息队列：消息队列是一个先进先出的队列，它里面存放着各种消息。
· 事件循环：事件循环是指主线程重复从消息队列中取消息、执行的过程。

20.for in 与for of的区别

//for in 是ES5标准，遍历key(更适合遍历对象)
//for of 是ES6标准，遍历value（更适合遍历数组），它不适合遍历普通对象，需通过搭配Object.keys()使用
//1.遍历数组通常用for of
//ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。

Array.prototype.method=function(){
　　console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="数组";
for (var value of myArray) {
  console.log(value);
}

//2.for in遍历数组的毛病:index索引为字符串型数字，不能直接进行几何运算;遍历顺序有可能不是按照实际数组的内部顺序;使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性,所以for in更适合遍历对象，不要使用for in。遍历数组,ES6中的for of更胜一筹。
//3.for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。
//4.遍历对象 通常用for in来遍历对象的键名
Object.prototype.method=function(){
　　console.log(this);
}
var myObject={
　　a:1,
　　b:2,
　　c:3
}
for (var key in myObject) {
  console.log(key);
}