2026全栈面试题（原创）（更新至第52题）# 1. 实现一个sleep函数每一秒console.log一次 ```ja

1. 实现一个sleep函数一秒后console.log一次

<html>
    <head>
        <title>HELLO</title>
    </head>
    <body>
        <h1>HELLO</h1>
        
        <script>
            const sleep = async (seconds) => new Promise((resolve) => setTimeout(resolve, seconds * 1000))
            const hello = async () => {
              await sleep(2)
              console.log(1)
            }
            hello()
        </script>
        
        <h5>HELLO</h5>
    </body>
</html>

2. 写出下列内容打印的顺序

<html>
    <head>
        <title>HELLO</title>
    </head>
    <body>
        <h1>HELLO</h1>
        
        <script>
            console.log(1);
            setTimeout(() => {
                console.log(2);
            }, 1000);
            console.log(3);
            Promise.resolve().then(() => {
                console.log(4);
            })
            console.log(5);
        </script>
        
        <h5>HELLO</h5>
    </body>
</html>

3. 写出下列内容打印的顺序

<html>
    <head>
        <title>HELLO</title>
    </head>
    <body>
        <h1>HELLO</h1>
        
        <script>
            console.log(1);

            setTimeout(() => {
                console.log(2);
                Promise.resolve().then(() => {
                    console.log(3);
                });
            }, 0);

            setTimeout(() => {
                console.log(4);
            }, 1000);

            let timer = setInterval(() => {
                console.log(5);
                clearInterval(timer);
            }, 0);

            requestAnimationFrame(() => {
                console.log(6);
            });

            document.addEventListener('click', () => {
                console.log(7);
            });
            
            Promise.resolve().then(() => {
                console.log(8);
                queueMicrotask(() => {
                    console.log(9);
                });
            });

            Promise.reject('test').catch(() => {
                console.log(10);
            }).finally(() => {
                console.log(11);
            });

            queueMicrotask(() => {
                console.log(12);
            });
            
            const observer = new MutationObserver(() => {
                console.log(13);
            });
            observer.observe(document.body, { childList: true });

            async function asyncFn() {
                console.log(14);
                await Promise.resolve();
                console.log(15);
            }
            asyncFn();
            console.log(16);
        </script>
        
        <h5>HELLO</h5>
    </body>
</html>

4. 以下y和x分别输出什么

const y = (() => {
    let x = 1
    return x
})()

setTimeout(() => console.log(3), 1000)
Promise.resolve().then(() => console.log(4))
console.log(x)
console.log(y)

5. 以下y和x分别输出什么

const y = (() => {
    let x = 1
    return x
})()

console.log(x)
console.log(y)
setTimeout(() => console.log(3), 1000)
Promise.resolve().then(() => console.log(4))

6. 以下y和x分别输出什么

const y = (() => {
    let x = 1
    return x
})()

setTimeout(() => {
  console.log(3)
  Promise.resolve().then(() => console.log(6))
}, 1000)
setTimeout(() => console.log(5), 1000)
Promise.resolve().then(() => {
  console.log(4)
  setTimeout(() => {
    console.log(7)
    Promise.resolve().then(() => console.log(8))
  }, 1000)
})
console.log(x)
console.log(y)

7. 一行代码实现sum(2)(3)(4)(5)方法

8. 请实现el-input组件，支持v-model属性

<el-input v-model="input" />

<template>
  <input
    class="el-input__inner"
    :value="modelValue"
    @input="handleInput"
  />
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
})

const emit = defineEmits(['update:model-value'])

const handleInput = (e) => {
  const newValue = e.target.value
  emit('update:model-value', newValue)
}
</script>

<style scoped>
</style>

9. Vue3项目如何实现图片懒加载

www.npmjs.com/package/vue…

10. pm2如何开机自启动

pm2 start index.js
pm2 save
pm2 startup
systemctl start pm2-root
systemctl status pm2-root

11. 浏览器禁用JS后如何给提示

<noscript>
  <div>
      <h2>⚠️ 检测到您的浏览器已禁用JavaScript</h2>
      <p>本网站部分功能需要启用JavaScript才能正常使用，否则将无法浏览完整内容、完成交互操作</p>
      <p>✅ 开启指引：浏览器设置 → 隐私与安全 → 开启JavaScript功能，刷新页面即可恢复正常</p>
  </div>
</noscript>

12. 以下代码进来会加载几张图，为什么

<html>
    <head>
    </head>
    <body>
        <div>
            <img src="https://placeholder.im/300x2000/cccccc" loading="lazy">
        </div>
        <div>
            <img src="https://placeholder.im/300x2001/cccccc" loading="lazy">
        </div>
    </body>
</html>

13.less如何定义和运用变量

@width: 100px;
@height: @width + 100px;

#header {
  width: @width;
  height: @height;
}

14. 以下内容打印什么，为什么

(function x(){
   console.log(x)
})()
x = 1

15. 以下内容打印什么，为什么

(function hello(){
   console.log(x)
})()
x = 1

16. Less如何定义混入

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hello {
  .flex-center();
  color: red;
}

17. @hello: 1 + 2px - 3cm; 在less中，hello的结果是什么，为什么

-110.38582677px

18. sass和scss的关系是什么

1. 两者语法不同，sass用的是缩减的语法，scss用的是css的语法
2. scss是sass预处理器的首选语法，是3.0版本的语法

19. ts如何为字符串变量设置类型

const hello: string = "world"
console.log(hello)

20. ts如何为对象变量设置类型

const hello: { a: number, b: number } = { a: 1, b: 2 }
console.log(hello)

21. ts如何为函数参数设置类型

const hello = (world: number) => {}
console.log(hello(2))

22. ts如何为函数返回值设置类型

const hello = (): number => 1
console.log(hello())

23. ts如何为数组变量设置类型

const hello: [string, number] = ["hello", 1]
console.log(hello)

24. ts如何为二维数组变量设置类型

type helloType = [string, number]
const hello: helloType[] = [["hello", 1], ["world", 2]]
console.log(hello)

25. ts如何为三维数组变量设置类型

type helloType = [string, number]
const hello: helloType[][] = [
    [
        ["hello", 0],
        ["world", 1]
    ],
    [
        ["hello2", 0],
        ["world2", 1]
    ]
]

26. ts如何配置泛型


interface helloInterface<T> {
    status: number,
    data: T,
    msg: string
}

interface worldInterface {
    a: number
}

const hello: helloInterface<worldInterface> = {
    status: 0,
    data: {
        a: 1
    },
    msg: ''
}

27. ts如何使用或者

interface helloInterface {
    status: number,
    data: [] | {},
    msg: string
}

const hello: helloInterface = {
    status: 0,
    data: {
        a: 1
    },
    msg: ''
}

28. 如何水平和垂直居中

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

29. 文字如何水平居中

.text {
  text-align: center;
}

30. 文字如何垂直居中

.text {
  line-height: 100px;
}

31. ts如何定义数组内有对象

interface helloInterface {
    status: number,
    data: {
        a: number
    }[],
    msg: string
}

const hello: helloInterface = {
    status: 0,
    data: [
        {
            a: 1
        }
    ],
    msg: ''
}

32. ts如何设置对象的可选

interface helloInterface {
  id: number;
  name?: string;
}

const hello: helloInterface = {
    id: 1,
    name: '',
}

33. 以下代码输出什么

function b() {
  console.log(this.a);
}
const obj = {
  a: 1,
  b: b
}
const a = "HELLO WORLD";
setTimeout(obj.b, 1000);

34. 以下代码输出什么

function b() {
  console.log(this.a);
}
var obj = {
  a: 1,
  b: b
}
var a = "HELLO WORLD";
setTimeout(obj.b, 1000);

35. linux命令题：mkdir ... 是什么意思

在当前目录创建名称为..的隐藏目录

36. linux如何设置可以防止文件被删除

chattr +i hello

37. 以下两种不同位置的transition写法有什么区别吗

<html>
<head>
<style>
p {
  color: red;
  text-align: center;
  transition: color 10s;
}
p:hover {
  color: blue;
}
</style>
</head>

<body>
<p>Hello World!</p>
</body>
</html>

<html>
<head>
<style>
p {
  color: red;
  text-align: center;
}
p:hover {
  color: blue;
  transition: color 10s;
}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

38. 以下内容的输出结果是什么？

let i = 0
let x = ++i + 1
let y = i++ + 1
let z = ++i + 1
let a = i++ + 1

39. js如何判断是否是空对象？

40. python如何定义函数？


def hello():
  return 'hello'
hello()

41. 以下内容输出什么？

hello = { hello: 'hello' };
hello = (hello) => {
  hello = { hello: '' }
}
hello(hello);
console.log(hello.hello)

42. python如何定义变量、列表、元组，如何遍历列表？

# 定义变量
a = 1;
# 定义列表
b = [1,2,3,4,5]
# 定义元组
c = (1,2,3,4,5)
# 遍历列表
for x in b:
  print(x)

43. python如何使用map高阶函数？

def hello(a):
  return a * a

r = map(hello, [1,2,3,4,5])
print(list(r))

44. 数据库隔离级别有哪些？分别可能产生哪些问题？产生的问题的概念是怎样的？

数据库隔离级别分为读未提交，读已提交，可重复读，串行化。读未提交隔离级别下可出现脏读，幻读，不可重复读；读已提交隔离级别下可出现幻读，不可重复读；可重复读隔离级别下，可通过临键锁解决幻读；串行化隔离级别下不会有上诉问题的产生，但是并发极低，通常不使用。mysql innodb默认级别是可重复读。  
  
脏读是指读取到了另一个事务未提交的数据，一旦另一个事务回滚，读取到的未提交的数据就变成了脏数据。  
  
幻读是指一个事务两次读取多行的行数中间另一个事务提交了被影响事务查询行范围内新增了行，导致两次读取的行数不一致。  
  
不可重复读是指一个事务两次读取同一行的中间另一个事务提交了被影响事务查询行内修改了行，导致两次读取的行数据不一致。

45. react父组件传给子组件的方式

// 用props
const Hello = (props) => {
  return <div>{props.msg}</div>
}

const App = () => {
  const hello = 'hello'
  return <Hello msg={hello} />
}

46. react子组件传父组件

// 用回调函数
const Hello = (props) => {
  return <div onClick={() => props.onSetMsg('111')}>hello</div>
}

const App = () => {
  const [msg, setMsg] = useState('')
  return <Hello onSetMsg={(m) => setMsg(m)} />
}

47. vue3父组件传子组件


// 用props

// 父组件
<template>
  <Child :msg="msg" />
</template>

<script setup>
import { ref } from 'vue';
import Child from './child.vue';
const msg = ref("message");
</script>

// 子组件
<template>
  <div>{{ msg }}</div>
</template>

<script setup>
defineProps(['msg']);
</script>

48. vue3子组件传父组件


// 用emit

// 父组件
<template>
  <Child @info="getInfo" />
</template>

<script setup>
const getInfo = (i) => {
  console.log(i);
};
</script>

// 子组件
<template>
  <div @click="sendInfo">hello</div>
</template>

<script setup>
const emit = defineEmits(['info']);
const sendInfo = () => {
  emit('info', 'world');
};
</script>

49. mysql如何防止超卖？

UPDATE table SET stock = stock - 1 WHERE id = X AND stock > 0;

50. redis常用命令有哪些？

set hello world
get hello world
set hello2 world2 ex 60
mset hello3 world3 hello4 world4
mget hello3 hello4

51. 什么是数据库的原子性？

原子性（Atomicity）保证一个操作要么完全执行成功，要么完全不执行。不会出现“执行到一半”的状态。就像原子不可分割一样。

52. redis实现分布式锁

SET lock_key unique_lock_value NX EX 10