❌

普通视图

发现新文章，点击刷新页面。
今天 — 2025年2月22日首页
昨天以前首页

前端面试题

✇掘金 前端
作者 阿芯爱编程
2025年2月20日 21:50

以下是一些前端面试题：

一、HTML/CSS部分

  1. 如何实现一个自适应的图片容器，在不同屏幕尺寸下图片按比例缩放且不失真？
  • 答案：
  • 方法一：使用max - width和height: auto属性。
  • 在CSS中为图片设置max - width: 100%; height: auto;，这样图片会根据其容器的大小按比例缩放，并且不会出现失真的情况。
  • 方法二：使用object - fit属性（适用于现代浏览器）。
  • 如果希望图片填充整个容器并且保持比例，可以设置object - fit: cover;；如果希望图片完整显示在容器内并且可能留白，可以设置object - fit: contain;。
  1. CSS中display: none和visibility: hidden有什么区别？
  • 答案：
  • display: none：
  • 元素完全从页面布局中移除，不占据任何空间，其后的元素会占据该元素原本的空间位置。
  • 例如，当隐藏一个导航菜单时，如果使用display: none，菜单所在的空间将空出，后面的内容会向上移动。
  • visibility: hidden：
  • 元素仍然占据页面布局中的空间，只是不可见。
  • 例如，当隐藏一个装饰性元素时，如果使用visibility: hidden，它所在的空间仍然保留，后面的元素不会移动。
  1. 如何使用CSS实现一个简单的动画效果（如淡入淡出）？
  • 答案：
  • 可以使用CSS的transition属性或者@keyframes规则结合animation属性来实现淡入淡出效果。
  • 使用transition实现淡入淡出（以一个div元素为例）：
  • HTML：
<div class="fade - element"></div>
  • CSS：
.fade - element {  
opacity: 0;  
transition: opacity 1s ease - in - out;  
}  
.fade - element.show {  
opacity: 1;  
}
  • 然后通过JavaScript或其他方式给div元素添加或移除show类来触发淡入淡出效果。
  • 使用@keyframes和animation实现淡入淡出：
  • HTML同上。
  • CSS：
@keyframes fade - in - out {  
0% {  
opacity: 0;  
}  
50% {  
opacity: 1;  
}  
100% {  
opacity: 0;  
}  
}  
.fade - element {  
animation: fade - in - out 2s infinite;  
}

二、JavaScript部分

  1. JavaScript中的this关键字是如何工作的？请举例说明不同情况下this的指向。
  • 答案：
  • 在全局作用域中，this指向全局对象（在浏览器中是window对象）。
  • 例如，在全局脚本中直接定义一个函数function foo() { console.log(this); }，调用foo()时，this指向window。
  • 在函数内部，this的值取决于函数的调用方式。
  • 如果是作为普通函数调用，this指向全局对象（严格模式下为undefined）。
  • 如果是作为对象的方法调用，this指向该对象。
  • 例如：
let obj = {  
name: 'John',  
sayName: function () {  
console.log(this.name);  
}  
};  
obj.sayName(); // this指向obj
  • 在构造函数中，this指向新创建的对象实例。
  • 使用call、apply、bind方法可以显式地设置this的值。
  1. 如何实现一个简单的JavaScript模块模式？请举例说明其优点。
  • 答案：
  • 模块模式的实现：
  • 可以使用立即执行函数表达式（IIFE）来创建模块。
  • 例如：
let module = (function () {  
let privateVariable = 'This is private';  
function privateFunction() {  
console.log(privateVariable);  
}  
return {  
publicMethod: function () {  
privateFunction();  
}  
};  
})();  
module.publicMethod();
  • 优点：
  • 数据封装，将变量和函数封装在模块内部，避免了全局命名空间的污染。
  • 可以定义私有变量和函数，只暴露必要的公共接口，提高代码的安全性和可维护性。
  1. 请解释JavaScript中的异步编程概念，并且说明Promise相对于回调函数的优点。

  • 答案：

  • 异步编程是指在执行耗时操作（如网络请求、文件读取等）时不阻塞后续代码的执行。

  • Promise相对于回调函数的优点：

  • 避免回调地狱（Callback Hell），当有多个嵌套的回调函数时，代码结构会变得非常复杂难读，而Promise可以通过链式调用的方式使代码结构更加清晰。

  • 更好的错误处理机制，Promise可以使用.catch()方法统一处理错误，而回调函数需要在每个回调中单独处理错误。

三、框架相关（以Vue.js为例）

  1. Vue.js中的计算属性（computed properties）和方法（methods）有什么区别？
  • 答案：
  • 计算属性是基于它们的依赖进行缓存的。只有当依赖发生变化时，计算属性才会重新计算。
  • 例如，在一个Vue组件中，如果有一个计算属性fullName依赖于firstName和lastName，当firstName或lastName改变时，fullName才会重新计算。
  • 方法则是在每次组件重新渲染时都会被调用，不管依赖是否改变。
  • 例如，在模板中直接调用一个方法来获取某个值，每次渲染都会执行这个方法。
  1. 如何在Vue.js中实现组件间的数据传递（除了props和$emit之外）？
  • 答案：
  • 使用Vuex进行状态管理。将共享的数据存储在Vuex的store中，组件通过mapState、mapGetters等辅助函数来获取数据，通过mapActions、mapMutations来修改数据。
  • 使用provide和inject（在Vue 3中仍然支持这种方式并且更加灵活），祖先组件可以提供数据，后代组件可以注入这些数据，不需要一层一层地传递。
  1. Vue.js中的v - if和v - show有什么区别？

  • 答案：

  • v - if是“真正”的条件渲染，它会根据表达式的值在DOM中添加或移除元素。如果初始条件为假，则元素不会被渲染到DOM中；当条件变为真时，才会被渲染。

  • v - show只是切换元素的display属性，元素始终存在于DOM中，根据表达式的值在display: none和默认的display值之间切换。

四、性能优化

  1. 如何优化JavaScript的执行效率？
  • 答案：
  • 避免全局查找，在函数内部使用局部变量来缓存全局变量或对象属性的值。
  • 减少DOM操作，尽量将多次DOM操作合并为一次，例如使用DocumentFragment来进行批量DOM更新。
  • 对于循环操作，优化循环条件和循环体，避免在循环内部进行复杂的计算。
  • 使用事件委托来减少事件处理程序的数量，例如将多个子元素的事件处理委托给它们的父元素。
❌
❌