###
武汉小米外包公司
前端面试题中手写代码要求或示例
在
前端开发领域，手写代码是衡量开发者基础能力的重要方式。以下是一些可能出现在
武汉小米外包公司
前端面试中的手写代码示例或要求，结合了常见的
前端面试题和引用内容[^2]。
#### 1. **最长公共前缀**
长公共前缀问题是经典的算法题目，通常需要编写一个函数来找到多个字符串的最长公共前缀。
```javascript
function longestCommonPrefix
(strs
) {
if
(strs.length === 0
) return '';
let prefix = strs[0];
for
(let i = 1; i < strs.length; i++
) {
while
(strs[i].indexOf
(prefix
) !== 0
) {
prefix = prefix.slice
(0, -1
);
if
(prefix === ''
) return '';
}
}
return prefix;
}
```
这段代码通过逐步缩短前缀的方式找到所有字符串的最长公共部分[^1]。
#### 2. **this 指向问题**
在 JavaScript 中，`this` 的指向是一个常考知识点。以下是一个类似的例子：
```javascript
class Person {
constructor
(name
) {
this.name = 'Jerry';
}
getName
() {
return {
name: 'Tom',
logName
() {
console.log
(this.name
);
}
};
}
}
const p = new Person
();
p.getName
().logName
(); // 输出 'Tom'
```
在此示例中，`this` 的值取决于 `logName` 方法被调用的上下文。由于 `logName` 是在一个对象字面量中定义的，因此它的 `this` 指向该对象，而不是 `Person` 实例。
#### 3. **交通信号灯交替亮灯**
使用回调函数实现红绿黄灯交替亮灯的功能，这是一道考察异步编程能力的题目。
```javascript
const task =
(timer, light, callback
) => {
setTimeout
(() => {
if
(light === 'red'
) {
console.log
('Red light'
);
} else if
(light === 'green'
) {
console.log
('Green light'
);
} else if
(light === 'yellow'
) {
console.log
('Yellow light'
);
}
callback
();
}, timer
);
};
task
(3000, 'red',
() => {
task
(2000, 'green',
() => {
task
(1000, 'yellow', Function.prototype
);
}
);
}
);
```
上述代码展示了如何通过嵌套回调实现灯的顺序点亮[^3]。
#### 4. **手写 Webpack 插件**
手写 Webpack 插件是高级
前端工程师的常见
面试题之一。以下是一个简单的插件示例：
```javascript
class MyPlugin {
apply
(compiler
) {
compiler.hooks.emit.tap
('MyPlugin',
(compilation
) => {
console.log
('Webpack emit hook triggered'
);
}
);
}
}
module.exports = MyPlugin;
```
该插件通过监听 Webpack 的生命周期钩子，在打包过程中执行自定义逻辑[^4]。
#### 5. **垂直居中布局**
垂直居中是
前端开发中的基本技能，以下是使用 CSS Flexbox 实现的示例：
```html
<div class="parent">
<div class="children"></div>
</div>
```
```css
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.children {
width: 100px;
height: 100px;
background-color: red;
}
```
以上代码通过 Flexbox 实现了子元素在父容器中的水平和垂直居中[^1]。
---
###
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
5513
