前端学习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>