前端面试题汇总

文本目录

html &&css

html

css

弹性盒中的缩放机制是怎样的？

1、弹性盒的项目设置flex-grow属性定义项目的放大比例，默认值为0，值越大，放大越厉害，且不支持负值；
2、而flex-shrink属性定义项目的缩小比列，默认值为1，数值越大，缩小越厉害，同样不支持负值；
3、flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。他的默认值为auto，也就是项目的本来大小。

？

html+css

javaScript

组件通信？

1、父组件向子组件传递信息：由于react数据流动是单向的，父组件在调用子组件时，只需要在子组件标签内传递参数，子组件通过props属性接收
2、子组件向父组件传递信息；父组件向子组件传递一个函数，然后通过这个函数的回调，拿到子组件传过来的值
3、兄弟组件之间的传递：父组件作为中间层来实现数据的互通，通过使用父组件传递
4、父组件向后代组件传值：使用context提供的组件通信的一种方式，可以实现数据的共享，Provider组件通过value属性传递给后代组件
5、非关系组件传递数据：将数据进行一个全局的资源管理，从而实现组件间的通信功能，例如redux

说说你对Object.defineProperty()的理解？

Object.defineProperty() 是 JavaScript 中用于定义或修改对象属性的方法。它允许精确地控制属性的特性，包括数据值、可写性、可枚举性和可配置性等。
语法：

Object.defineProperty(obj, prop, descriptor)
var foo = 'bar';

obj：要定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：一个描述符对象，用来定义或修改属性的特性，包括 value（属性的值）、writable（可写性）、enumerable（可枚举性）和 configurable（可配置性）等。

找出数组【1,2,3,4,5,3,2,2,4,2,2,3,1,3,5】中出现次数最多的数，并统计出现多 少次，编写一个函数？

function findMostFrequentNumber(arr) {
const countMap = {};
let maxCount = 0;
let mostFrequentNum;

// 统计每个数字的出现次数
for (let num of arr) {
  countMap[num] = (countMap[num] || 0) + 1;
  if (countMap[num] > maxCount) {
    maxCount = countMap[num];
    mostFrequentNum = num;
  }
}
  return { number: mostFrequentNum, count: maxCount };
}

redux实现原理？

1、单一数据源：Redux应用程序的状态被存储在一个单一的JavaScript对象中，称为store。这个store是只读的，唯一修改状态的方法是派发一个action。
2、Action：Action是一个普通的JavaScript对象，用于描述状态的变化。它必须包含一个type字段，用于标识动作的类型，以及一些其他可选字段，用于传递与动作相关的数据。
3、Reducer：Reducer是纯函数，接收当前的状态和一个action作为参数，然后根据action的类型来更新状态。Reducer返回的是一个新的状态对象，而不是修改原始状态对象。Redux中的所有状态变化都由reducer来处理。
4、Store：Store是应用程序的状态仓库，包含了所有的状态数据。通过Redux提供的createStore()方法可以创建一个store，并将根reducer传递给它。Store提供了几个核心方法，如getState()用于获取当前状态，dispatch()用于派发一个action，subscribe()用于注册状态变化的监听函数。
5、订阅/发布模式：Redux使用订阅/发布模式来通知应用程序中的其他部分，当状态发生变化时。当状态发生变化时，Redux会调用注册的监听函数，以便其他部分可以做出相应的更新。
Redux的工作流程如下：
1、用户通过调用dispatch()方法派发一个action。
2、Store接收到action后，调用根reducer，并传入当前的状态和action。
3、Reducer根据action的类型来更新状态，并返回一个新的状态对象。
4、Store将新的状态存储起来，并通知订阅的监听函数。
5、监听函数接收到状态变化的通知后，执行相应的更新操作，例如重新渲染界面。

什么是闭包，应用场景是什么？

闭包是指在一个函数内部定义的函数，并且该内部函数可以访问外部函数的变量。闭包通常用于在函数外部访问局部变量，或者在函数外部对局部变量进行持久化存储。
闭包的应用场景包括：
封装私有变量：通过闭包可以创建一个函数，该函数可以访问和修改外部函数中的私有变量，从而实现封装和隐藏变量。
延长变量的生命周期：当外部函数执行完毕后，内部函数仍然可以访问外部函数的变量，从而实现对变量的持久化存储。
实现函数的柯里化：通过闭包可以将一个函数转化为多个嵌套函数的形式，每个嵌套函数都接收部分参数，并返回一个新的函数，从而实现函数的柯里化。
实现回调函数：闭包可以用于创建回调函数，将一个函数作为参数传递给另一个函数，并在需要的时候调用该函数。

![] == ![]，![] == []，结果是什么？为什么？

![] == ![] 首先是!的优先级要比 == 高 所以 先执行两边的 ![] 然后单个的[]是true 加上!取反 也就是false了 然后 第一个 ![] == ![] 也就是等于 false == false 最后返回的是true 然后后边的![] == [] 也是因为!优先级高 所以先把左边的变成false == [] 然后又因为 两个值相比较 如果有一方的值是布尔值的话 就会把另一方转成数值 然后 [] 转成数值的话 就是 0 然后因为0 = false 所以最后 也是false == false 最后也返回一个true

为什么for循环比forEach性能高？

1、遍历速度：for循环的遍历速度通常比forEach方法快。这是因为for循环是基于索引的循环，而forEach方法是使用回调函数来遍历数组。在for循环中，可以直接通过索引访问数组元素，而forEach方法需要在每次迭代时调用回调函数。
2、适用性广泛：for循环适用于各种迭代场景，可以对数组进行正向、反向跳跃等多种方式遍历。而foreach方法只能按顺序遍历数组，无法灵活地控制迭代过程。
3、内联优化：在某些JavaScript引擎中，for循环可以进行内联优化，即将循环的代码直接内联到调用处，减少函数调用的开销。而 forEach 方法作为一个高阶函数，无法进行类似的内联优化

vue

React

props和state相同点和不同点？render方法在哪些情况下会执行？

相同点：
1.都是用于储存组件的的数据，用于控制组件的行为和渲染结果。
2。都是可读的，即不能直接修改，而是通过特定的方式进行更新。
不同点：
1.props是从父组件传递给子组件的，而state是组件内部自身管理的。
2.props是只读的，子组件不能直接修改props的值，而state可以通过setState（）方面进行修改。
3。props的值由父组件控制，一旦传递给子组件，即使父组件的props发生变化，子组件的props也不会自动更新。而state是组件内部管理的，当state发生变化时，组件会重新渲染。
4.props主要用于组件之间的数据传递和通信，而state是组件内部状态管理的。
5.props通常是不可变，而state可以是可变的。
render方法在哪些情况下会执行：
1.组件初始化时会执行一次render（）方法，生成初始DOM结构。
2.当组件中state和props发生变化时，会触发重新渲染，即执行render（）方法。
3.当父组件重新渲染时，无论props是否发生变化，子组件中render（）方法也会调用。
4.当调用setState（）方法时，会触发组件的重现渲染，执行render（）方法

shouldComponentUpdate有什么作用？

shouldComponentUpdate（）是react组件的生命周期中的一个方法，他决定了组件是否需要进行重新渲染。该方法的作用是优化组件性能，避免不必要的渲染操作。

说说React中的虚拟dom？在虚拟dom计算的时候diff和key之间有什么关 系？

在React中，虚拟Dom是一种用JavaScript对象表示的轻量级的DOM结构。它是React用来提高性能的关键机制之一。
虚拟DOM的主要思想是将整个Dom树抽象为一个javaScript对象，React通过比较新旧两个虚拟DOM树的差异然后只更新需要改变的部分，从而避免了直接操作真实DOM所带来的性能损耗。
在diff算法中，key属性起到了非常重要的作用。key是用来表示虚拟DOM节点的唯一标识符。当React进行diff算法计算差异时，它会根据每个节点的key属性来判断该节点是否是相同节点。如果新旧虚拟DOM树中的节点具有相同的key，React会认为它们是相同的节点，然后进行进一步的比较。如果节点的key不同，React会认为它们是不同的节点，直接删除旧节点，插入新节点。

react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

getDerivedStateFromProps:这个生命周期钩子函数在组件实例化、接收新的props或者父组件重新渲染时调用。它可以用来根据新的props更新组件的状态，并返回一个新的状态对象。与以前的componentWillReceiveProps不同，getDerivedStateFromProps是一个静态方法，不能访问实例的属性和方法。
getSnapshotBeforeUpdate:这个生命周期钩子函数在实际DOM更新之前被调用，他可以返回一个值作为componentDodUpdate方法的第三个参数传递。通常用于获取组件更新前的一些信息，例如滚动信息，与以前的componentWillUpdate不同，getSnapshotBeforeUpdate是一个静态方法，不能访问实例的属性和方法。

React的props.children使用map函数来遍历会收到异常显示，为什么？应该 如何遍历？

1、当前组件没有子节点数据类型就是undefined，
2、有一个子节点数据类型就是object 。
3、有多个子节点的时候才会是array ,只有在多个节点的时候才可以直接调用map方法，react资深提供了一个react.children.map()方法，可以安全遍历子节点对象。

谈谈你对immutable.js的理解？

1、immutable.js就是react中用来做性能优化的
2、在react中使用immutable可以减少页面的一些不必要的渲染，不需要像react进项深度对比完成渲染
3、immutable可以直接快速进行对比，完成渲染，提升了渲染的效率，降低了性能的消耗。
4、immutable不可改变的，在计算机中，即指一旦创建，就不能在更改的数据。
对immutable对象的任何修改或添加删除操作都会返回一个新的Immutable对象
Immutable实现的原理是Persistent Data Structure（持久化数据结构）：
1、用一种数据结构来保存数据
2、当数据被修改时，会返回一个对象但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费。

redux本来是同步的，为什么它能执行异步代码？实现原理是什么？中间件的 实现原理是什么？

Redux本身是一个同步的状态管理库，但它可以通过中间件实现异步代码的执行。中间件是Redux中的一个概念，用于拦截、处理和增强Redux的action派发过程。
实现异步代码执行的原理如下：
Redux中的异步操作通常涉及到网络请求、定时器等需要等待结果的操作。
在Redux中，通过使用中间件来拦截派发的action，并在需要的时候执行异步操作。
中间件可以在异步操作开始前派发一个表示异步操作开始的action，然后在异步操作完成后派发一个表示异步操作完成的action。
异步操作完成后，可以通过派发一个新的action来更新Redux的状态。
中间件的实现原理如下：
Redux中的中间件是一个函数，它接收Redux store中的dispatch和getState方法作为参数，并返回一个函数，这个返回的函数接收下一个中间件或者最终的dispatch方法作为参数。
在中间件函数中，可以对派发的action进行拦截和处理，也可以执行异步操作。
中间件可以通过调用下一个中间件或者最终的dispatch方法，将处理后的action继续传递下去，形成一个中间件链。
最终的dispatch方法会将最终处理后的action派发给Redux的reducer，更新状态。

redux中同步action与异步action最大的区别是什么

在 Redux 中，同步 action 和异步 action 的最大区别在于它们处理数据流的方式和返回值。
同步 action 是一个简单的 JavaScript 对象，它描述了一个动作的类型和携带的数据。当我们调用一个同步 action 时，它会立即发出并被 Redux store 接收并处理。同步 action 是通过 Redux store 的 dispatch 方法同步触发的，它会立即返回一个描述动作的对象。
异步 action 是一个函数，通常被称为 thunk 函数，它返回一个函数。当我们调用一个异步 action 时，它不会立即发出动作，而是在内部执行一些异步操作，比如发送网络请求或定时器等。这个异步操作完成后，它会再次调用 dispatch 方法来发出一个相应的同步 action。异步 action 可以在内部执行副作用，并根据异步操作的结果来发出一个或多个同步 action。

redux-saga和redux-thunk的区别与使用场景？

区别：
Redux-thunk 是 Redux 官方推荐的中间件，它是一个函数，用于处理异步操作。Thunk action 创建器可以返回一个函数，这个函数可以在内部执行异步操作，并在合适的时候发出同步的 action。Thunk 中间件允许我们在 action 中直接处理异步操作逻辑。
Redux-saga 是一个独立的库，它使用了 ES6 的 generator 函数来处理异步操作。Saga 是一个长时间运行的进程，它可以拦截并响应特定的 action，并在需要时执行相应的异步操作。Saga 提供了一种更强大和灵活的方式来处理复杂的异步流程，如异步请求的顺序、并发、取消等。
使用场景：
Redux-thunk 适用于简单的异步操作，比如发送单个 API 请求并触发相应的同步 action。它比较简单易用，适合于快速开发和处理简单的异步逻辑。
Redux-saga 适用于复杂的异步操作和业务流程。它提供了更高级的控制和组织异步逻辑的能力，例如处理多个并发请求、监听特定的 action 触发异步操作、取消正在进行的异步操作等。Redux-saga 通常在项目中对异步逻辑要求较高或需要处理复杂的业务逻辑时使用。

在使用redux过程中，如何防止定义的action-type的常量重复？

在Redux，防止定义的action type 常量重复的一种常见做法时使用一个单独文件或模块来集中管理这些常量，以确保唯一性。

说说你对@reduxjs/toolkit的理解？和react-redux有什么区别？

1、React-redux是官方react UI绑定层，react允许React组件从redux存储中读取数据，并将操作分派到存储以更新的状态。提供了content，Provider等API，帮助我们连接react和redux，实现的逻辑会更加的严谨高效
2、@reduxjs/tookit是对redux的二次封装，开箱即用的一个高效的redux开发工具，使得创建store，更新store
区别：
1、reduxjs/tookit相对于react-redux来说比较方便，集成了redux-devtools-extension，不需要额外的配置，非常方便
2、reduxjs/tookit集成immutable-js的功能，不需要安装配置使用，提升了开发效率
3、reduxjs/tookit集成了redux-thunk的功能
4、reduxjs/tookit将types、actions、reducers放在一起组成了全新的slices，简化了我们的使用

React render方法的原理，在什么时候会触发？

在React中，render方法是组件的一个生命周期方法，它负责根据组件的状态（state）和属性（props）生成组件的虚拟DOM树，并将其渲染到真实的Dom上
render 方法会在以下情况下被触发：
1、组件初始化：在组件第一次渲染到页面上时，会调用render方法生成虚拟DOM，并将其渲染到真实的DOM上。
2、组件状态更新：在组件状态发生变化时，reeact会自动调用render方法重新生成虚拟DOM，并将其渲染到真实DOM上。这是React的核心特性之一，即声明式编程，通过状态的变化来驱动 UI 的更新。
3、父组件更新：当组件的父组件发生更新时，会导致当前组件也进行重新渲染。这是因为父组件的更新可能影响到当前组件属性或上下文，从而触发当前组件的render方法

谈谈你是如何做移动端适配的？

响应式设计：响应式设计是一种常用的移动端适配方法，它通过使用CSS媒体查询和弹性布局等技术，根据设备的屏幕大小和方向，自动调整页面的布局和样式，以适应不同的屏幕尺寸。
视口设置：视口设置是通过在网页的头部设置meta标签来控制网页在移动设备上的显示方式。常用的视口设置包括设置视口的宽度、缩放比例以及禁用用户缩放等。
REM布局：REM布局是一种相对单位，它根据根元素的字体大小来确定相对大小。通过设置根元素的字体大小，可以实现根据屏幕尺寸自适应调整元素的大小。
Flexbox布局：Flexbox布局是一种弹性布局模型，它可以方便地实现移动端的自适应布局。通过设置容器的flex属性和子元素的flex属性，可以实现灵活的布局方式。
CSS媒体查询：CSS媒体查询是一种根据设备的特性来动态应用不同的样式的方法。通过在CSS中使用@media规则和不同的媒体查询条件，可以实现根据屏幕尺寸、设备类型等因素来适配不同的样式。

umi

TypeScript

ts中抽象类的理解？

在 TypeScript 中，抽象类（Abstract Class）是一个不能被实例化的类，它被设计成用作其他类的基类。抽象类可以包含抽象方法和非抽象方法，并且可以提供一些通用的功能和行为。抽象类通过 abstract 关键字进行定义。
抽象类的主要目的是通过继承来共享通用行为，并且规定子类必须实现特定的方法。它提供了一个约定，规范子类的结构和行为。

下面是一些关于抽象类的重要特点和用法：
1、不能被实例化：抽象类不能直接实例化，只能被其他类继承。
2、包含抽象方法：抽象类可以包含抽象方法，这些方法没有具体的实现，3、只有方法的声明。抽象方法使用 abstract 关键字进行修饰。
4、提供共享行为：抽象类可以包含非抽象方法以及属性和构造函数等，这些都可以被子类继承和使用。抽象类的目的是为其子类提供一些通用的行为和功能。
5、强制子类实现方法：抽象类中的抽象方法必须在子类中被实现，否则子类也必须声明为抽象类。

移动端

移动端1像素的解决方案？

1、小数：0.5px，相信浏览器肯定是会慢慢支持的；目前而言，如果能用的话，可以hack一下；
2、阴影，border-img的方案不建议使用
3、背景图片和缩放可以在项目中配合使用，如单个线条使用缩放，四条框用背景图片模拟，额，如果要圆角的话，无能无力了
4、建议采用transform和伪类

弹性盒中的缩放机制是怎样的？

1、弹性盒的项目设置flex-grow属性定义项目的放大比例，默认值为0，值越大，放大越厉害，且不支持负值；
2、而flex-shrink属性定义项目的缩小比列，默认值为1，数值越大，缩小越厉害，同样不支持负值；
3、flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。他的默认值为auto，也就是项目的本来大小。

其他

CDN的特点及意义？

CDN是一种分布式的网络架构，它通过在全球各地部署服务节点，将内容缓存到离用户最近的节点上，从而提供更快的内容传输和更好的用户体验。
CDN的特点和意义：
1、加速内容传输：CDN可以将内容复制到离用户最近的节点上，使用户可以从最佳的服务器节点获取内容。这种靠近用户的传输方式可以减少网络延迟和带宽消耗，提供更快的加载速度，特别是对于大型文件和媒体内容。
2、节约带宽成本：CDN可以通过在全球各地分布服务器节点，将流量分散到不同的节点上，从而减少源服务器的负载和带宽压力。同时，CDN还提供了智能的缓存和压缩技术，可以减少数据传输的大小，进一步节约带宽成本。
3、提高可靠性和稳定性：CDN 通过多个服务器节点的冗余部署，提高了内容的可靠性和稳定性。如果某个节点故障或网络拥塞，CDN 可以自动切换到其他可用节点，确保内容的可访问性和稳定性。
4、支持全球分发：CDN 的全球分布式架构使得内容可以快速传输到全球各地的用户，无论用户所在的地理位置如何，都可以获得相近的加载速度和用户体验。这对于全球化的网站和应用程序尤为重要。
5、抵御恶意攻击：CDN 可以通过分布式架构和缓存技术，抵御分布式拒绝服务攻击（DDoS）等恶意攻击。CDN 的多个节点可以分担流量，同时缓存技术可以过滤掉恶意请求，保护源服务器的安全和稳定性。

三级标题

四级标题

五级标题

六级标题