前端面试题

最新推荐文章于 2024-09-01 02:07:48 发布

每天工作十小时

最新推荐文章于 2024-09-01 02:07:48 发布

阅读量1.3k

点赞数 17

文章标签：前端

本文链接：https://blog.csdn.net/gs333333333/article/details/140729539

版权

理论知识比较枯燥~

css3的新特性有哪些？

CSS3（Cascading Style Sheets 3）引入了许多新特性，以增强网页设计的灵活性和功能。

选择器的增强：CSS3引入了众多新的选择器，如通用兄弟选择器（~）、属性选择器（[attr]）、伪类选择器（:nth-child）、伪元素选择器（::before和::after）等。这些选择器提供更多的精确控制和灵活性。
盒子模型：CSS3引入了box-sizing属性，允许开发者控制盒子模型的计算方式，包括content-box和border-box。
圆角边框：使用border-radius属性，可以轻松创建圆角边框，而不再需要使用背景图片或其他技巧。
阴影效果：引入了box-shadow属性，可以为元素添加投影效果。
渐变：CSS3支持线性渐变（linear-gradient）和径向渐变（radial-gradient），使背景颜色和图片渐变变得更加容易。
媒体查询：媒体查询允许根据不同的设备、屏幕尺寸和特性来应用不同的CSS样式，从而实现响应式设计。
动画和过渡：CSS3引入了@keyframes规则和transition属性，用于创建动画和过渡效果，而不需要JavaScript。
2D和3D转换：CSS3支持二维和三维的元素变换，包括旋转、缩放、移动和透视

9. 多重背景图片：可以为元素添加多个背景图像，通过逗号分隔它们

数组常用的方法以及作用？

1.concat(): 连接两个或更多的数组，并返回结果新数组

2.every(): 检测数值元素的每个元素是否都符合条件

3.filter(): 返回符合条件的数组元素，即过滤掉不符合条件的元素

4.forEach(): 遍历数组中的每个元素并执行回调函数

5.indexOf(): 返回数组中第一个指定元素的索引位置

6.join(): 将所有元素连接成一个字符串

7.lastIndexOf(): 返回数组中最后一个指定元素的索引位置

8.map(): 遍历数组并对每个元素进行操作，最后返回操作后得到的新数组

9.pop(): 删除并返回数组的最后一个元素

10.push(): 向数组末尾添加一个或多个元素

11.reduce(): 对数组中的所有元素执行指定的操作，并将其结果累加到一个单独的值中

12.reverse(): 反转数组中元素的顺序

13.sort(): 对数组中的元素进行排序

14.shift(): 删除并返回数组的第一个元素

15.slice(): 从数组中获取指定范围内的元素

for in 循环和for of 循环的区别？

for...in循环：
- 用于遍历对象的可枚举属性，通常用于遍历对象的键名。
- 不仅遍历对象自身的属性，还会遍历继承的属性，包括原型链上的属性。
- 返回的是属性名（键名）。
- 适用于遍历普通对象和数组，但通常不建议用于数组遍历，因为它会遍历数组的所有属性，包括数组原型上的方法和属性
for...of循环：
- 用于遍历可迭代对象的值，通常用于遍历数组、字符串、Map、Set等。
- 仅遍历对象自身的属性，不包括继承的属性。
- 返回的是值本身，而不是属性名。
- 适用于遍历可迭代对象。

JS中判断数据类型的方法？

1.typeof 操作符：可以返回一个字符串，用于表明所操作数的类型。

2.instanceof 操作符：可以判断一个对象是否属于某个类（或其子类）。

3.Object.prototype.toString().call() 方法：可以返回一个表示调用它的对象所属类的字符串。

4.constructor 属性：可以返回对创建该对象的数组函数的引用。

5.Array.isArray() 方法：可以判断一个值是否为数组。

说说你对Object.definedProperty的理解？

定义属性：可以使用 Object.defineProperty() 来创建一个新的属性，或者修改一个已存在的属性。通过这个方法，可以指定属性的各种特性，如可写性、可枚举性、可配置性等。
实现数据劫持：利用 Object.defineProperty() 的特性，可以实现对对象属性的访问进行拦截和自定义行为，这在一些框架（如 Vue.js）中常用于实现响应式系统。

说说你对react的理解，有哪些特性？

1. 组件化：

React是基于组件的库，它鼓励将用户界面分解成多个小组件，每个组件都有自己的状态和生命周期方法。这种组件化的方式使得代码更易于维护和重用。

2. 虚拟DOM：

React使用虚拟DOM来提高性能。它会在内存中维护一个虚拟的DOM树，并将实际DOM的更新操作最小化，从而减少了重排和重绘的开销，提高了性能。

3. 单向数据流：

React采用了单向数据流的模型，使得数据在应用中的流动更可控。数据从父组件传递给子组件，子组件通过回调函数通知父组件进行状态更新。这有助于构建可预测和易于调试的应用。

4. JSX语法：

React使用JSX（JavaScript XML）语法，允许在JavaScript中编写类似HTML的标记，使UI代码更直观和易读。

5. 组件生命周期：

React组件具有生命周期方法，允许开发者在组件不同的生命周期阶段执行操作，如组件挂载、更新、卸载等。这有助于处理数据加载、订阅事件、执行清理操作等任务。

6. 声明式编程：

React采用声明式编程风格，开发人员只需要描述UI应该如何呈现，而不需要关心底层DOM操作。React会自动处理UI的渲染和更新。

7. 组件复用：

React鼓励组件复用，你可以轻松地创建通用组件，然后在应用的不同部分重复使用它们。

8. 生态系统：

React拥有庞大的生态系统，有众多第三方库和工具，如React Router用于路由管理、Redux用于状态管理、Material-UI用于UI设计等，这些库可以扩展React的功能。

9. 社区支持：

React有一个活跃的社区，提供了大量教程、文档和社区插件，帮助开发人员更容易地学习和使用React。

React的这些特性使其成为一个强大的工具，适用于构建现代、高性能、可维护和可扩展的Web应用程序。它在前端开发中广泛应用，被许多公司和开发者所采用。

说说react中setState的执行机制

在React中，setState 是用于更新组件状态（state）的方法，但它并不立即执行状态的更新，而是触发一系列后续操作，遵循以下执行机制：

setState 调用：当你调用 this.setState(newState, callback) 来更新组件的状态时，React 将新的状态对象 newState 存储在队列中，但不会立即进行状态更新。
状态更新合并：React 会将多个 setState 调用中的状态更新合并成一个单一的状态更新操作，以提高性能。
触发调和过程：React会使用合并后的状态来触发“调和过程”（Reconciliation）。在调和过程中，React会比较新旧状态，计算出需要更新的部分。
生成虚拟DOM：React将新状态映射到虚拟DOM树（Virtual DOM），并与之前的虚拟DOM树进行比较，找出差异。
计算差异：React使用虚拟DOM比较算法来计算新旧虚拟DOM之间的差异。这一过程通常被称为“协调”（Reconciliation）。
更新实际DOM：React将差异应用于实际DOM，只更新需要更改的部分，从而减少浏览器的重排和重绘。
生命周期钩子：如果提供了 setState 的回调函数 callback，React会在状态更新后调用它。通常，callback 用于在状态更新完成后执行一些额外的操作，例如处理动画或获取更新后的DOM节点。

调和阶段setState都做了什么？

在React中，setState 是用来更新组件的状态（state）的方法之一。当调用 setState 时，React 将触发组件的重新渲染，以反映新的状态。React会将新的状态与旧的状态合并，而不是完全替换它。

通常，setState 调用会在组件的更新阶段之后触发，但不会立即生效。React会将多个 setState 调用合并成一个更新，以提高性能。

React 的组件更新过程大致如下：

组件接收到新的 props 或调用了 setState。
React 会计划进行一次更新。
React 在下一个“调和阶段”中比较虚拟DOM树的差异，以找出需要更新的部分。
React 更新真实DOM以反映新的虚拟DOM。
组件的生命周期方法被调用（例如，componentDidUpdate）。

说说redux的工作流程？

Redux是一种用于管理JavaScript应用程序状态的库。它的工作流程可以总结为以下几个步骤：

创建 Store：首先，需要创建一个 Redux Store，用于存储应用的状态。可以使用 createStore 函数来创建 Store，并传入一个 Reducer 函数作为参数。
定义Reducers：Reducer 是一个纯函数，用于根据动作（Action）来更新状态。每个 Reducer 对应一个状态字段，它接受两个参数：当前状态和动作。根据动作的类型和数据，Reducer 返回新的状态。
发送 Actions：Actions 是用于描述状态更改的对象，它包含一个类型（type）和一个数据（payload）。可以通过调用 store.dispatch 方法来发送 Actions。
更新 State：当发送一个 Action 时，Store 会调用相应的 Reducer，并将当前状态和动作作为参数传递给 Reducer。Reducer 返回的新状态将被更新到 Store 中。
使用 State：可以通过访问 store.getState() 方法来获取当前的应用状态。
监听 State 更新：可以使用 store.subscribe() 方法来监听 State 的更新。当 State 发生变化时，会触发回调函数。
使用 Middleware：Middleware 是一种中间件机制，可以在 A6ctions 被发送之前和之后进行额外的操作，例如日志记录、异步操作等。

React合成事件的原理，有什么好处和优势？

React合成事件是React框架提供的一种事件处理机制，用于处理DOM事件。合成事件是一种在原生浏览器事件系统之上构建的抽象，它有以下原理、好处和优势：

原理:

事件委托：React利用事件委托的原理，将所有事件监听器挂载到顶层容器（通常是document）上，而不是每个元素上。这样可以减少DOM元素上的事件监听器数量，提高性能。
事件池：React使用事件池来管理事件对象，这意味着事件对象在事件处理函数执行完毕后会被重用，而不是立即销毁。这减少了垃圾回收的压力，提高了性能

好处和优势:

性能优化：React合成事件的事件委托和事件池机制有助于减少内存和性能开销。通过减少事件监听器数量和减少垃圾回收，提高了应用程序的性能。
跨浏览器兼容性：React合成事件屏蔽了不同浏览器之间的差异，使开发者不必担心浏览器兼容性问题。React会处理不同浏览器的事件差异，以确保一致的行为。
性能监测和调试：React提供了开发者工具，可以用于监测和调试合成事件。你可以查看事件的详细信息，包括事件类型、事件目标和事件处理函数，以便更容易调试和分析应用程序的行为。

为什么react元素有一个$$type属性？

React元素通常是用`React.createElement()`或JSX语法创建的，它们是描述虚拟DOM树的轻量对象。React元素对象中的`$$type`属性是内部React实现的一个私有属性，用于标识元素的类型。这个属性的名称以`$$`开头，表明它是一个私有属性，不应该被应用程序代码直接访问或修改。

React使用$$type属性来表示元素的类型，通常是一个字符串，表示HTML元素的标签名（如div、p等）或React组件的类型（如自定义组件）。这有助于React在虚拟DOM的比较过程中快速确定元素的类型，以便进行高效的更新和渲染。

应用程序代码通常不需要访问或使用$$type属性，因为它是React内部的实现细节。开发者应该专注于使用React提供的公共API来创建、更新和渲染元素，而不必担心$$type属性。

在React的官方文档中，$$type属性是私有的，并没有被正式记录在文档中，因此不建议开发者在自己的应用程序代码中使用它。如果你需要获取元素的类型，可以使用type属性或element.type来访问。