前端面试题及答案.docx
前端面试题及答案
题目1：以下哪个方法可以用来检测一个变量是否是数组？
A.`typeof`
B.`instanceof`
C.`Array.isArray`
D.`Ototype.toString.call`
答案：
C.`Array.isArray`
解析：
`typeof`只能检测基本数据类型，对于数组返回`object`。
`instanceof`可以检测数组，但存在跨帧问题。
`Array.isArray`是ES5新增的方法，专门用于检测数组。
`Ototype.toString.call`也可以检测数组，但不如`Array.isArray`直观。
填空题
题目2：在JavaScript中，用来获取当前时间的时间戳的方法是_______。
答案：
`Date.now()`
解析：
`Date.now()`方法返回自1970年1月1日00:00:00UTC以来经过的毫秒数。
判断题
题目3：在CSS中，`position:absolute;`的元素相对于其最近的具有非`static`定位的祖先元素定位。
答案：
正确
解析：
`position:absolute;`的元素会相对于其最近的具有非`static`（如`relative`,`absolute`,`fixed`,`sticky`）定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是`viewport`）定位。
解答题
题目4：请解释事件冒泡和事件捕获的区别，并给出一个示例代码。
答案：
事件冒泡和事件捕获的区别：
事件冒泡：事件从最具体的元素（触发事件的元素）开始，逐级向上传播到较为不具体的元素（如`document`）。
事件捕获：事件从最不具体的元素（如`document`）开始，逐级向下传播到最具体的元素（触发事件的元素）。
示例代码：
```javascript
document.addEventListener(DOMContentLoaded,()={
constparent=document.getElementById(parent);
constchild=document.getElementById(child);
parent.addEventListener(click,(e)={
console.log(Parentclicked);
},false);//默认为冒泡阶段
child.addEventListener(click,(e)={
console.log(Childclicked);
},true);//捕获阶段
child.addEventListener(click,(e)={
console.log(Childclickedagain);
},false);//冒泡阶段
});
//HTML结构
//divid=parent
//divid=childClickme/div
///div
```
解析：
在这个示例中，当点击`child`元素时，输出顺序将是：
1.`Childclicked`（捕获阶段）
2.`Childclickedagain`（冒泡阶段）
3.`Parentclicked`（冒泡阶段）
选择题
题目5：以下哪个CSS属性可以用来实现元素的垂直居中？
A.`margin:auto;`
B.`verticalalign:middle;`
C.`display:flex;alignitems:center;`
D.`lineheight:100%;`
答案：
C.`display:flex;alignitems:center;`
解析：
`margin:auto;`只能在水平方向上居中块级元素。
`verticalalign:middle;`主要用于行内元素和表格单元格。
`display:flex;alignitems:center;`是现代CSS布局中常用的垂直居中方法。
`lineheight:100%;`主要用于文本的垂直居中，不适用于块级元素的垂直居中。
填空题
题目6：在React中，用来创建组件的方式主要有两种，分别是_______和_______。
答案：
`函数组件`和`类组件`
解析：
函数组件：使用JavaScript函数定义的组件，简洁且易于理解。
类组件：使用ES6类定义的组件，提供了更多的特性和生命周期方法。
判断题
题目7：在HTML5中，`arti