前端实习面试题解析：数组方法、清除浮动与元素类型

"这篇分享主要涵盖了前端实习生面试中常见的HTML、CSS、Vue相关的知识点，包括数组操作方法、纯函数和无副作用函数的概念，以及清除浮动的几种方式，同时还对比了行内元素和块级元素的区别。" 在前端开发中，理解和掌握数组方法是至关重要的。以下是一些常见的数组方法及其作用： 1. `push()`：向数组末尾添加一个或多个元素，并返回新长度。例如，`arr.push('element')`。 2. `pop()`：删除并返回数组的最后一个元素。例如，`let last = arr.pop()`。 3. `shift()`：删除并返回数组的第一个元素。例如，`let first = arr.shift()`。 4. `unshift()`：在数组开头添加元素并返回新长度。例如，`arr.unshift('newElement')`。 5. `slice()`：提取数组的一部分创建新数组，不改变原数组。例如，`let subArray = arr.slice(startIndex, endIndex)`。 6. `splice()`：在数组中添加/删除元素，可以指定位置和数量。例如，`arr.splice(index, deleteCount, item1, ..., itemX)`。 7. `reverse()`：反转数组元素的顺序。例如，`arr.reverse()`。 8. `sort()`：默认按字母顺序排序数组，可自定义比较函数。例如，`arr.sort((a, b) => a - b)`。 9. `concat()`：合并两个或多个数组。例如，`let combined = arr1.concat(arr2)`。 10. `forEach()`：遍历数组，对每个元素执行回调函数。例如，`arr.forEach(item => console.log(item))`。 11. `map()`：创建一个新数组，其结果是调用数组每个元素上的函数后的值。例如，`let mapped = arr.map(item => item * 2)`。 12. `fill()`：用特定值填充数组的所有或部分元素。例如，`arr.fill(0)`。 13. `includes()`：检查数组中是否存在指定元素，返回布尔值。例如，`if (arr.includes('element')) { ... }`。 14. `join()`：将数组元素连接成字符串。例如，`let str = arr.join(',')`。 15. `indexOf()`：返回指定元素的索引，找不到则返回-1。例如，`let index = arr.indexOf('element')`。 16. `lastIndexOf()`：从右侧开始找指定元素的索引。例如，`let lastIndex = arr.lastIndexOf('element')`。 17. `every()`：如果数组所有元素都满足条件，返回`true`，否则`false`。例如，`let allValid = arr.every(item => item > 0)`。 18. `some()`：数组中至少有一个元素满足条件，返回`true`，否则`false`。例如，`let hasPositive = arr.some(item => item > 0)`。 19. `filter()`：根据测试函数过滤数组元素，返回新数组。例如，`let filtered = arr.filter(item => item % 2 === 0)`。 20. `find()`：找到第一个满足条件的元素并返回其值，找不到则返回`undefined`。例如，`let found = arr.find(item => item > 10)`。 21. `findIndex()`：找到第一个满足条件的元素的索引，找不到则返回-1。例如，`let index = arr.findIndex(item => item > 10)`。 22. `reduce()`：累加器函数，将数组元素累计到单一值。例如，`let sum = arr.reduce((total, current) => total + current)`。 在布局方面，了解如何清除浮动至关重要，防止父元素因浮动子元素而高度塌陷： 1. 额外标签法：在浮动元素后添加一个不浮动的空元素，如`<div class="clear"></div>`，并设置CSS样式`clear:both`。 2. 父元素`overflow`属性：设置父元素的`overflow`为`hidden`，这将自动创建新的BFC（块格式化上下文），从而清除浮动。 3. 使用`:after`伪元素：在父元素CSS中添加`::after`选择器，内容设为空，`display:block`，并清除浮动，如`content:""; clear:both; display:block;`。 4. 双伪元素法：同时使用`:before`和`:after`，两者都清除浮动，通常用于兼容老版本浏览器。 理解行内元素和块级元素的差异也是前端基础的重要部分： 1. 行内元素（如`<span>`, `<a>`）：它们在同一行内排列，不会占据整行，可以设置宽度、高度，但通常无效。 2. 块级元素（如`<div>`, `<p>`）：独占一行，可以设置宽度、高度，且内部可以包含行内元素和块级元素。 这些基础知识对于前端实习生来说是基础且实用的，有助于理解和解决实际项目中的问题。