前端学习31 相关面试题
1.手撕版本号排序
// 版本号排序
function compareV(a,b){
const Sorta = a.split('.').map(Number);
const Sortb = b.split('.').map(Number);
const maxLength = a.length > b.length ? a.length : b.length;
for(let i=0;i<maxLength;i++){
const numA = a[i] || 0;
const numB = b[i] || 0;
if(numA < numB) return -1;
if(numA > numB) return 1;
}
return 0;
}
const versions = ["1.2.0", "1.11.0", "1.2.1", "1.2", "1.2.0.0", "1.10"];
versions.sort(compareVersion);
2.BFC
开启BFC的方法：
- overflow: hidden/auto/scroll 最常用的清除浮动方法
- display: flow-root 现代 CSS 推荐方式
- float 本身会触发 BFC
- position: absolute/fixed 常用于定位时隔离布局
- display: inline-block/table
其中position:relative 不会开启BFC。
BFC 的本质是隔离内部浮动不影响外部布局，触发 BFC 的父元素可以包裹浮动子元素，从而清除浮动带来的高度塌陷问题。
BFC还可以解决margin合并问题。
在垂直方向上，块级元素的 margin 可能发生合并，BFC 可以有效阻止这种合并行为。特别是在父子元素和兄弟元素之间，通过触发 BFC（如设置 overflow: hidden 或 display: flow-root），可以避免布局错乱和多余间距。
注意：这时候会涉及脱离文档流的问题。BFC（Block Formatting Context）不会脱离文档流。
BFC 是一种布局机制，它不会让元素本身脱离文档流，而是让其“内部”的布局独立于外部元素影响
文档流
元素可以通过设置 float、position: absolute/fixed、display: none 来脱离文档流。
其中 position:relative 不会脱离文档流因为它仍保留原来的位置，只是视觉上偏移。
3.nextTick
在 Vue 3 中，数据更新是异步的，修改响应式数据后，视图不会立即更新到真实 DOM。nextTick 用于在下次 DOM 更新循环结束后执行回调，确保获取到最新的 DOM 状态。常见用法是在修改数据后调用 nextTick，在回调中访问或操作已更新的 DOM 元素。这样可以避免访问到旧的 DOM 内容，保证操作时机正确。
<template>
<div>
<p ref="text">{{ message }}</p>
<button @click="changeMessage">修改内容</button>
</div>
</template>
<script setup>
import { ref, nextTick } from 'vue'
const message = ref('初始内容')
const text = ref(null)
function changeMessage() {
message.value = '更新后的内容'
// 立即打印，DOM 还没更新
console.log(text.value.textContent) // 还是“初始内容”
// 使用 nextTick，确保 DOM 更新后访问
nextTick(() => {
console.log(text.value.textContent) // 这里是“更新后的内容”
})
}
</script>
美团HR面2292人在聊