前端面试高频50题，嘎嘎香

1. HTML相关问题

1. 什么是Doctype？有什么作用？

Doctype（文档类型声明）是一种标准通告，它告诉浏览器当前文档的类型及版本。它的作用是使浏览器以正确的模式（标准模式或兼容模式）渲染页面内容。

<!DOCTYPE html>

2. HTML5有哪些新特性？

HTML5增加了一些新的语义元素（如 <article>、<section>、<header>、<footer>），新的表单控件（如 <date>、<email>、<url>），新的API（如本地存储、音视频支持、Canvas绘图）。

3. 行内元素和块级元素的区别？

行内元素（inline element）不占据整个宽度，仅占据自身的内容宽度；而块级元素（block element）占据其父容器的整个宽度。行内元素不能包含块级元素，但块级元素可以包含行内元素。

4. 如何在HTML中嵌入SVG？

可以使用 <svg> 标签直接嵌入SVG代码，或者使用 <img> 标签引用外部SVG文件。

<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

5. HTML5中的自定义数据属性是什么？

自定义数据属性可以使用 data- 前缀在HTML元素上定义，这些属性可以通过JavaScript轻松访问。

<div data-user-id="12345">User Info</div>

2. CSS相关问题

6. CSS选择器有哪些？请举例说明。

常见的CSS选择器包括：

元素选择器：div
类选择器：.className
ID选择器：#idName
属性选择器：[type="text"]
伪类选择器：:hover
伪元素选择器：::before

7. CSS的盒模型是什么？

CSS的盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。这些属性共同决定了元素的总大小和布局。

.box {width: 100px;padding: 10px;border: 5px solid black;margin: 20px;
}

8. 如何实现一个水平居中的div？

可以使用 margin: auto 或者使用 flexbox。

.center {width: 200px;margin: 0 auto;
}

9. 什么是Flexbox布局？它有哪些优点？

Flexbox是一种用于一维布局的CSS布局模式，它使得盒子在容器中可以根据可用空间动态排列和调整大小。优点包括：便捷的水平和垂直对齐、简单的元素排序、适应不同屏幕尺寸等。

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

10. 如何使用CSS实现响应式设计？

可以使用媒体查询（media queries）来针对不同屏幕尺寸应用不同的样式。

@media (max-width: 600px) {.responsive {font-size: 14px;}
}

3. JavaScript相关问题

11. JavaScript的数据类型有哪些？

JavaScript的基本数据类型包括：undefined、null、boolean、number、string、symbol 和 object。

12. 如何判断一个变量的类型？

可以使用 typeof 运算符和 instanceof 运算符。

typeof 42; // "number"
typeof "hello"; // "string"
[] instanceof Array; // true

13. 什么是闭包（closure）？

闭包是指一个函数可以记住并访问其词法作用域，即使这个函数在其词法作用域之外执行。闭包使得函数拥有私有变量。

function outerFunction() {let outerVariable = 'I am outside!';function innerFunction() {console.log(outerVariable);}return innerFunction;
}
const closureFunction = outerFunction();
closureFunction(); // 输出 "I am outside!"

14. JavaScript中的事件循环（Event Loop）是什么？

事件循环是JavaScript处理异步操作的机制。它不断检查调用堆栈和消息队列，如果调用堆栈为空，就将消息队列中的第一个任务推入调用堆栈执行。

15. 什么是Promise？如何使用？

Promise 是一种用于处理异步操作的对象。它有三种状态：pending、fulfilled 和 rejected。可以通过 then 和 catch 方法链式调用。

const promise = new Promise((resolve, reject) => {if (success) {resolve('Success');} else {reject('Error');}
});
promise.then(result => console.log(result)).catch(error => console.log(error));

16. 如何实现深拷贝一个对象？

可以使用递归函数或者第三方库如 lodash 来实现深拷贝。

function deepClone(obj) {if (obj === null || typeof obj !== 'object') {return obj;}const clone = Array.isArray(obj) ? [] : {};for (let key in obj) {clone[key] = deepClone(obj[key]);}return clone;
}

17. 什么是this关键字？它在不同场景下的值分别是什么？

this 是一个特殊的关键字，它的值取决于函数的调用方式。在全局环境中，它指向 window 对象；在方法调用中，它指向调用该方法的对象；在构造函数中，它指向新创建的实例对象。

18. JavaScript中的作用域链（Scope Chain）是什么？

作用域链是指在函数执行时，沿着函数声明的位置向上查找变量的过程。每个函数都会形成一个新的作用域，当前作用域没有找到的变量，会沿着作用域链依次向上查找。

19. 如何实现继承？

可以使用 class 语法和 extends 关键字，或者通过构造函数和 prototype 实现继承。

class Parent {constructor(name) {this.name = name;}sayName() {console.log(this.name);}
}class Child extends Parent {constructor(name, age) {super(name);this.age = age;}
}const child = new Child('John', 25);
child.sayName(); // 输出 "John"

20. JavaScript中的原型链（Prototype Chain）是什么？

原型链是指对象的原型对象的链条。当访问对象的属性时，如果属性不存在于对象本身，会沿着原型链向上查找，直到找到属性或达到原型链的顶端（null）。

4. Vue.js相关问题

21. 什么是Vue的双向绑定？

Vue的双向绑定是指数据模型和视图之间的同步更新。通过 v-model 指令，表单输入元素可以与数据进行双向绑定。

22. Vue组件的生命周期有哪些？

Vue组件的生命周期分为四个阶段：创建、挂载、更新和销毁。常用的钩子函数包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。

23. Vue中的计算属性（computed）和侦听属性（watch）有什么区别？

计算属性用于基于其他属性的值计算新值，并且具有缓存特性。侦听属性用于观察和响应数据变化，但不会缓存值。

computed: {fullName() {return `${this.firstName} ${this.lastName}`;}
}
watch: {firstName(newVal, oldVal) {console.log(`firstName changed from ${oldVal} to ${newVal}`);}
}

24. Vue中的指令有哪些？请举例说明。

常用的Vue指令包括：

v-if: 条件渲染
v-for: 列表渲染
v-bind: 动态绑定属性
v-on: 事件绑定
v-model: 双向绑定

Vue中的v-for指令中使用key有什么作用？
key 属性用于在 v-for 循环中为每个节点提供唯一标识，帮助Vue更高效地更新和复用节点，避免不必要的重渲染。

26. 如何在Vue中实现父子组件通信？

可以通过 props 向子组件传递数据，通过 $emit 向父组件发送事件。

// 父组件
<template><child-component :message="parentMessage" @child-event="handleEvent"></child-component>
</template>
<script>
export default {data() {return {parentMessage: 'Hello from parent'};},methods: {handleEvent(data) {console.log('Received event from child:', data);}}
};
</script>// 子组件
<template><div><p>{{ message }}</p><button @click="sendEvent">Send Event</button></div>
</template>
<script>
export default {props: ['message'],methods: {sendEvent() {this.$emit('child-event', 'Hello from child');}}
};
</script>

27. Vue中如何使用插槽（slots）？

插槽用于在组件模板中嵌入父组件的内容。

// 父组件
<template><child-component><template v-slot:header><h1>Header Content</h1></template><p>Main Content</p></child-component>
</template>// 子组件
<template><div><header><slot name="header"></slot></header><main><slot></slot></main></div>
</template>

28. Vue中的动态组件是什么？

动态组件是指根据条件动态加载和渲染不同的组件。可以使用 component 组件和 :is 属性实现动态组件。

<template><component :is="currentComponent"></component>
</template>
<script>
export default {data() {return {currentComponent: 'componentA'};},components: {componentA,componentB}
};
</script>

29. Vue中的混入（mixins）是什么？

混入是指将可复用的代码片段分离出来，在多个组件中共享。混入对象可以包含任意组件选项，混入时会与组件自身的选项合并。

const myMixin = {created() {console.log('Mixin hook called');}
};export default {mixins: [myMixin],created() {console.log('Component hook called');}
};

30. Vue Router的基本使用方法是什么？

Vue Router 是 Vue.js 的官方路由管理器，用于创建SPA（单页应用）。基本使用包括定义路由、创建路由实例并挂载到Vue实例。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';Vue.use(VueRouter);const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
];const router = new VueRouter({routes
});new Vue({el: '#app',router,render: h => h(App)
});

5. React相关问题

31. React的生命周期有哪些阶段？

React组件的生命周期分为挂载、更新和卸载三个阶段。主要的生命周期方法包括 componentDidMount、componentDidUpdate、componentWillUnmount。

32. 什么是React Hooks？举例说明如何使用useState和useEffect。

React Hooks是React 16.8引入的一种全新API，允许在函数组件中使用state和其他React特性。

import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

33. React中的虚拟DOM（Virtual DOM）是什么？

虚拟DOM是React中的一种轻量级的JavaScript对象表示，它与真实DOM保持同步。在状态变化时，React会先更新虚拟DOM，再通过diff算法找到最小的变更并更新真实DOM。

34. 如何在React中实现组件通信？

可以通过props在父子组件之间传递数据和回调函数，或者使用Context在深层嵌套组件中传递数据。

35. React中高阶组件（Higher-Order Component, HOC）是什么？

高阶组件是一个函数，它接受一个组件并返回一个新的组件。HOC通常用于组件逻辑的复用。

function withLogging(WrappedComponent) {return class extends React.Component {componentDidMount() {console.log('Component mounted');}render() {return <WrappedComponent {...this.props} />;}};
}

36. 什么是React中的Context API？

Context API用于在组件树中传递数据，而无需通过props逐层传递。它包括React.createContext、Provider和Consumer。

const MyContext = React.createContext();function Parent() {return (<MyContext.Provider value="Hello from context"><Child /></MyContext.Provider>);
}function Child() {return (<MyContext.Consumer>{value => <p>{value}</p>}</MyContext.Consumer>);
}

37. React中的Ref是什么？如何使用？

Ref用于访问DOM节点或React实例。可以通过React.createRef创建Ref，并在组件中通过ref属性使用。

class MyComponent extends React.Component {constructor(props) {super(props);this.myRef = React.createRef();}componentDidMount() {this.myRef.current.focus();}render() {return <input ref={this.myRef} />;}
}

38. React中的Fragment是什么？它有什么作用？

Fragment允许将多个子元素分组，而不在DOM中添加额外的节点。可以使用<React.Fragment>或<>语法。

function MyComponent() {return (<><p>First paragraph</p><p>Second paragraph</p></>);
}

39. React中的Portals是什么？如何使用？

Portals用于将子节点渲染到父组件以外的DOM节点中。可以使用ReactDOM.createPortal方法。

ReactDOM.createPortal(<div>Portal Content</div>,document.getElementById('portal-root')
);

40. 如何在React中处理异步请求？

可以使用useEffect钩子（在函数组件中）或componentDidMount生命周期方法（在类组件中）来处理异步请求。

useEffect(() => {async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();setData(data);}fetchData();
}, []);