2024整理一些前端面试题库一

以下是一些2024年前端面试题及其答案：

1. HTML、XML、XHTML之间的区别是什么？

• HTML是一种标记语言，用于创建网页，定义页面的结构和内容，如标题、段落、表格、链接、图片等。

• XML（可扩展标记语言）是一种用于编码文档的标记语言，它允许用户定义自己的标记。

• XHTML是HTML的一个更严格、更纯净的版本，它结合了HTML和XML的特点，旨在成为未来的Web标准。

1. 常见的块元素、行内元素以及行内块元素有何不同？

• 块元素：占据其父元素（容器）的整行，其宽度自动填满其父元素宽度，高度由其内容决定。例如，<div>、<p>、<h1>~<h6>、<ol>、<ul>等都是块级元素。

• 行内元素：不会占据其父元素的整行，只占据内容本身的宽度和高度。例如，<span>、<a>、<img>、<input>等都是行内元素。

• 行内块元素：结合了行内元素和块级元素的特点，既可以设置宽度和高度，又不会独占一行。例如，<img>标签默认就是行内块元素。

1. CSS3中的“transition”过渡属性是什么？

• “transition”是CSS3中的一个属性，用于在一定时间范围内平滑地改变一个元素从一种样式变为另一种样式的效果。它允许你规定元素从一种样式逐渐改变为另一种样式所需的时间，以及加速曲线的类型。

1. 定位布局position中的relative、absolute、fixed、sticky有何区别？

• relative：元素相对于其正常位置进行定位。因此，“left:20px”会向元素的左边添加20像素。

• absolute：元素相对于最近的已定位父级（而非正常的父元素）进行定位。如果没有已定位的父级元素，那么它的位置相对于最初的包含块（通常是body）。

• fixed：元素的位置相对于浏览器窗口是固定位置，即使页面滚动，它也不会移动。

• sticky：是相对于用户的滚动位置来定位，基本上，一个sticky元素在用户滚动超过其滚动阈值之前为相对定位，之后为固定定位。

1. 如何使用CSS3画一个0.5px的直线？

• 由于浏览器渲染的像素是整数，直接设置0.5px可能不会得到预期的效果。但可以通过一些技巧实现类似的效果，例如使用transform的scale属性来缩小一个1px的线条，或者使用边框（border）的某些特性来模拟细线效果。

1. new操作符在JavaScript中具体做了什么？

• new操作符在JavaScript中用于创建一个用户自定义的对象类型的实例或具有构造函数的内置对象的实例。它执行以下操作：创建一个空对象；将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；如果函数没有返回其他对象，则返回this。

1. JS数组和对象的遍历方式，以及几种方式的比较。

• JS数组和对象有多种遍历方式，包括for循环、for...in循环、forEach循环、map等。其中，for循环会检查数组长度，性能可能不是最优；for...in循环用于遍历对象的属性，但如果用于数组可能会遍历到数组的原型链上的属性；forEach循环不能用于中断循环或跳过元素；map会返回一个新数组，且可以在回调函数中修改元素值。

1. map与forEach的区别是什么？

• map和forEach都是数组的方法，用于遍历数组元素。主要区别在于map会返回一个新数组，该数组中的元素是通过调用提供的函数在原数组上产生的结果；而forEach只是遍历数组，对数组的每个元素执行一次提供的函数，但不返回任何值。

请注意，面试题的答案可能因面试官和公司的不同而有所差异，以上答案仅作为参考。在准备面试时，建议深入理解相关概念和技术，并查阅最新的前端技术文档和资料，以确保对问题的准确理解和回答。同时，也建议多进行模拟面试和练习，以提高自己的面试技巧和表达能力。