2024年前端面试题汇总_2024前端面试题(2020前端面试题目及答案)

2024年前端面试题汇总_2024前端面试题样式的调整会引起重绘,比如字体颜色、背景色调整等Dom的变动会引起重排,比如定位改动、元素宽高调整
避免循环插入dom,比如table的行。可以js循环

样式调整会导致重绘,例如调整字体颜色和背景颜色。 Dom 更改会导致回流,例如重新定位或调整元素的宽度或高度。

避免循环DOM,例如表行。您可以在js 循环中生成多个DOM 并一次将它们全部插入。

2、html5有哪些新特性?

本地存储(例如localStorage、sessionStorage、页眉、页脚、导航和其他语义标记)阐明了代码结构,并允许您在主线程之外创建单独的线程并与主线程交互。具有拖放功能的线程。

三:CSS

1、如何实现一个宽度不固定的上下左右居中的弹框?

方法一:流行音乐{

宽度: 300 像素;

高度: 300 像素;

位置:是固定的。

左: 0;

右: 0;

顶部: 0;

底部: 0;

margin: 自动;

border: 1px 纯红色;

}

方法二:

.chartLengend { //父元素

宽度: 60 像素;

高度: 40 像素;

相对位置:

.line { //子元素

宽度: 100%;

高度: 3 像素;

背景颜色:#DEA182;

绝对位置:

排名前: 50%;

剩余: 50%;

转化:转化(-50%,-50%);

边框半径: 2px;

}

}

2、伪类和伪元素区别?

伪类主要用于弥补常规CSS 选择器的缺点。如果没有,您将必须创建一个额外的类,因此它称为伪类。

.class: 最后一个子项{}

.class: 第一个子项{}

a: 链接{color:green;}

a: 访问了{color:green;}

a:hover {color:red;}

a: 活动{color: 黄色;}

伪元素基本上创建内容为:before :after 的虚拟元素。它被称为元素是因为它对应于另一个元素/节点。

//:before 用于在元素之前插入一些内容。

//:after 用于在元素后面插入一些内容。

CSS

p: 前{

content:\’请阅读此内容:\’;

}

html:

p我住在达克斯堡/p

页面显示:

读这个: 我住在达克斯堡

F12 检查dom。

在前

读这个: 我住在达克斯堡

四:Vue

1、单页面应用是什么?优缺点?如何弥补缺点

单页通过路由修改入口DOM内容。整个应用程序中只有一个HTML 页面。

SPA的优点:用户体验好,不换页面就不白屏。

SPA的缺点:初始屏幕加载速度慢,无助于SEO

SPA通过压缩和延迟加载路由减少初始屏幕缓慢,并通过SSR服务器端渲染解决SEO问题。

2、组件及通信方式有哪些?

2.1. 什么是组件?

组件是命名的、可重用的Vue 实例。在这种情况下。该组件可用作新的Vue 创建的Vue 根实例中的自定义元素。

组件声明

//定义一个名为button-counter的新组件

Vue.component(\’按钮计数器\’, {

data: 函数() {

返回{

计数: 0

}

},

template: \’button v-on:click=\’count++\’您已点击了{{ count }} 次。 /按钮\’

})

使用组件(将组件视为自定义元素)

div id=\’组件演示\’

按钮计数器/按钮计数器

/div

组件介绍

新Vue({ el: \’#components-demo\’ })

2.2. 将值从父级传递给子级

Props 是一些可以在组件上注册的自定义属性。当一个值传递给prop 属性时,该值就成为该组件实例的属性。要将标题传递给博客文章组件,您可以使用props 选项将其包含在该组件接受的道具列表中。

在组件内声明props

Vue.component(\’博客文章\’, {

props: [\’标题\’],

template: \’h3{{ 标题}}/h3\’

})

在父组件中调用此方法为prop 赋值并将其传递给组件。

blog-post title=\’我的Vue 之旅\’/blog-post

2.3. 父组件监听子组件事件。

它实际上是通过在父组件中声明一个方法并将其绑定到子组件来完成的。以子组件中内部触发方法的形式,将参数传递给父组件,效果是子组件将值传递给父组件。如下

在父组件中声明该方法并将其绑定到子组件。

模板

折线图v-on:getQuotaVal=\’getQuotaVal\’/lineChart

/模板

脚本

方法:{

//该事件用于监控折线图的子组件并从子组件中检索指标数据。

getQuotaVal:函数(obj){

this.lineDateType=obj.lineDateType; //这样父组件就可以获取子组件的obj数据。

}

},

/剧本

子组件触发方式

that.val={};

that.$emit(\’getQuotaVal\’,that.val); //发送子组件数据。

2.4. 兄弟组件之间的交互

兄弟组件之间可以通过三种方式进行交互:

使用EventBus通过公共父组件传递Vuex

1. 传递一个公共父组件

例如,兄弟组件A 和B 有一个共同的父组件P。当A想要向B发送数据时,首先向P发送消息(this.$emit),P接收该消息(该方法接收P与A绑定的方法)。然后P 向B 发送消息(P 更改B 组件的自定义属性的值),B 接收数据(接收Props 变量)。

2.使用EventBus、vue.$bus.on和Emit方法。

—— 初始化全局定义后,您可以将eventBus 绑定到vue 实例的原型或直接绑定到window 对象。

//main.js

Vue.prototype.$EventBus=new Vue();

触发事件

this.$EventBus.$emit(\’事件名称\’, param1,param2,)

监听事件

this.$EventBus.$on(\’事件名称\’, (param1,param2,)={

//需要执行的代码

})

删除监听事件

为了避免在侦听时重复触发事件,通常应该在页面被销毁时删除事件侦听器。或者,在开发过程中,热更新可能会导致事件多次绑定到监听器,此时您也应该删除事件监听器。

this.$EventBus.$off(\’事件名称\’);

3.通过Vuex进行交互

例如,对于兄弟组件A 和B,A 是发送者。

然后A 更改Vuex 状态变量(this.$store.commit(‘set’,{name:xx}))。

组件B 结合使用计算和监视(this.$store.state.name) 来监视名称更改。

3、v-if和v-show区别?

v-if 控制Dom是否存在,v-show控制样式

4、vuex是什么?使用步骤大概说下

Vuex 是一个状态管理工具,可以集中所有组件的状态数据。集中组件管理。

例如,组件A、B 和C 需要交互变量的名称和性别。您可以将姓名和性别放入Vuex 状态属性中。

A限制组件通过commit方法触发mutation中的函数来改变组件的状态。组件B和C使用compute和watch来监视数据的变化和操作(接收数据)。

下面是一个负载组件的示例。负载组件与布线区域处于同一级别。

在加载组件中,根据加载的数据来控制DOM 的显示或隐藏。

模板

div class=\’封面\’ v-show=\’加载中\’

格负载/格

/div

/模板

脚本

从“././store”导入商店

默认导出{

name: \’正在加载\’,

计算出:{

加载中(){

返回Store.state.Loading。

}

}

}

/剧本

Vuex 集中管理状态并创建一个名为store.js 的js 文件。

从“vuex”导入Vuex。

Vue.use(Vuex);

默认new Vuex.Store({

州: {

//加载组件

正在加载:假,

},

突变: {

//加载组件

ChangeLoading:函数(状态,值){

状态.加载=值;

}

},

});

对于需要与加载组件交互的组件,可以直接操作Vuex状态。

从“././store”导入商店

Store.commit(\’ChangeLoading\’,true);

5、vuex中 mutation和action的区别和使用?

变异用于执行简单的同步操作,例如直接更改状态值。操作用于执行更复杂的异步操作,例如启动API 请求或批量异步操作,并且可以触发在异步操作完成后更改状态的突变。

突变用于改变状态内的状态,并且执行突变实现同步状态改变。它只能执行同步操作,通常用于处理简单的状态更改。通过组件的commit() 方法触发突变执行。它接收一个参数state,即当前状态对象,并传递一个可选的有效负载参数作为有效负载。直接用突变作为原子操作修改状态值。

Actions用于执行异步操作,可以包含任意异步操作逻辑(发起API请求、异步数据处理等)。它可用于处理复杂的业务逻辑和流程控制。使用组件的dispatch()方法触发操作的执行。接收参数context,一个与store 实例具有相同方法和属性的上下文对象。您可以使用上下文来调用其他操作、突变等。通过commit方法触发mutation来改变状态值,实现同步状态改变。

6、vue watch和computed区别?

计算出的

计算属性本质上是变量。从其他变量计算或赋值的特殊变量。它依赖于其他变量的变化,不需要像常规变量那样直接赋值或修改。

手表用于监视某些变量,并在观察到的值发生变化时执行相关操作。

与compute的区别在于compute是一个变量,而watch用于监视变量。计算监视其组成变量的变化并更改其自身的变量。 Watch 只是监视特定变量的变化并触发事件。虽然计算方法的主体只能返回其组成变量,但手表可以执行任何操作。

数据(){

返回{

《第一》:2

}

},

时钟:{

开始(){

console.log(this.first)

}

},

7、Vue的虚拟Dom是什么?谈一谈对vue diff算法的认识?key的作用?

8、谈谈对vue的双向绑定原理的理解?

双向绑定主要意味着当您更改数据时,您不必操作DOM,视图会自动更新。当视图被操作时,绑定的数据也会改变。 Vue数据的双向绑定是通过结合订阅者和发布者的数据劫持来实现的。使用Object.defineProperty(),当数据发生变化时,会向订阅者发布一条消息,并触发相应的方法。打回来。

数据=视图

当Vue初始化一个实例时,它使用Object.defineProperty方法为所有数据添加setter函数并监视数据的变化。当数据发生变化时,生成一棵新的虚拟DOM树,与旧的虚拟DOM进行比较,并根据比较结果检测并更新需要更新的节点。

视图=数据

视图发生变化后,触发oninput 等监视器并修改绑定方法中的数据相对容易。

9、vue首屏优化怎么做?

使用轻量级组件(例如vue-chartvue-cli 的echart)来实现与打包压缩和gzip 访问的后台集成。如果日志资源过大,则延迟加载路由并配置删除日志。采用CDN模式部署。本地打包。

10、vue2的缺陷是什么?如何解决vue2.0数组中某一项改变,页面不改变的情况?

缺点:如果数据是直接添加属性的对象,并且数据是带有数组项下标的数组,则页面无法触发更新。

原因:Vue 在实例初始化期间执行属性的getter/setter 转换,因此该属性必须存在于数据对象中,Vue 才能对其进行反应式转换。对于数组,作者通过重写push/pop/shift/unshift/splice/reverse/sort方法实现了相应的数据绑定,其他操作是可以触发页面刷新的。

解决方案:可以将对象传递给Vue。

s

e

t

j

,

k

e

y

,

v

e

,传递给组件

t

H

s

set(obj,key,value) 并将其传递给组件。

使用set(obj,key,value) 组件通过this.set(obj,key,value) 添加,您可以通过更改vue 属性来相应地更新视图。数组也可以通过Vue.$set(obj,key,value) 或作者重写的方法来操作。

11、异步操作放在created还是mouted?

如果您需要在初始化期间渲染一些数据,例如选择下拉框的下拉内容,请请求安装。好处如下

ssr不支持beforeMount和mounted钩子函数,使页面初始化更快,减少用户延迟,提高一致性。

12、vue-router的钩子函数(生命周期)有哪些?

根保护可以全局设置,也可以在单独的路由配置中设置。

在Vue Router中,根守卫可以分为以下类型:

全局前卫:

router.beforeEach(to, from, next):在触发路由导航之前调用。可用于全局权限验证、导航控制等。 全局解析守卫:

router.beforeResolve(to, from, next):在确认导航之前调用。也就是说,它在beforeEach 之后、渲染路由组件之前调用。在确认导航之前仅调用一次。 全局钩子后:

router.afterEach(to, from):在每个路线的导航完成后调用。导航成功与否并不重要。 每条路线的守卫:

beforeEnter(to, from, next):用于拦截单个路由配置中的特定路由。 组件导航守卫:

beforeRouteEnter(to, from, next):在进入路由之前和实例化组件之前调用。 beforeRouteUpdate(to, from, next):当当前路由发生变化但组件被重用时调用。 beforeRouteLeave(to, from, next):在路由离开之前以及导航离开组件对应的路由时调用。

13、页面如何跳转?如何跨页面传参数?

路由器链路标签跳转路由可以通过传递参数进行跳转,如下图。如下

这个。$router.push({

路径: \’/url\’,

查询: {

par: 帕里多

}

})

接受参数

var parid=this.$route.query.par;

14、vue子组件的生命周期?子元素在什么时候挂载?

Parent: beforeCreate 首先初始化父元素。父元素开始安装dom,并且在tpl 中发现子组件。开始挂载数据。 孩子:创造了。 子元素数据已安装。 Children: beforeMount 子元素开始挂载dom。 Parent:挂载子元素dom结束的挂载。 父级:更新开始之前。类似于dom事件流。 子级:beforeUpdate 子级:已更新父级:已更新父级:beforeDestory 子级:beforeDestory 子级:已销毁父级:已销毁

一旦父元素安装了DOM,子元素就开始加载。子元素加载dom后,父元素完成dom的挂载。后者类似于DOM 事件流。

15、vue的import和node的require区别?

JS 支持两种模块化方式:commonjs 和ES6。

commonjs是nodejs用来同步加载模块的。为了避免延迟,ES6 异步导入加载模块。

较新版本的Nodejs 也支持使用导入,但必须将文件后缀更改为.mjs 或将package.json 中的type 字段设置为module。

17、vuex如何解决数据丢失?

Vuex保存的状态是保存在内存中的,当页面刷新或跳转到时状态会被重置。为了避免数据丢失,您可以考虑使用持久存储(例如localStorage 或sessionStorage)来保存状态并在页面加载时从持久存储恢复状态。

18、爷爷组件跟孙子组件如何交互?

Provide 和Inject 可以将父组件传递给所有后代组件

在Vue 3 中,提供和注入是响应式的,但在Vue 2 中它们不是。

1)Vue 3的响应能力

在Vue 3 中,使用提供和注入提供的数据是反应性的。这意味着如果提供的数据发生变化,所有依赖于该数据的组件都将自动更新。这种反应性是通过Vue 3 的反应系统实现的。

2) Vue 2 无响应

在Vue 2中,provide和inject提供的数据不是响应式的。这意味着如果提供的数据发生变化,依赖于该数据的组件将不会自动更新。这是因为Vue 2 提供和注入是基于原型链而不是反应式系统实现的。

19、说说vue的生命周期?

Vue 生命周期是Vue 实例从创建到销毁的一系列过程。每个进程都有对应的钩子函数:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、beforeDestroy(之前)、destroyed(销毁后)。

使用keepalive时,有两个钩子函数:激活和去激活。如果一个组件被包装在keepalive中,那么当切换文件时该组件不会被破坏,并且停用的钩子函数将被执行。当组件被激活时,会执行活动的钩子函数。

20.

data为什么是一个函数?

为保证组件的可重用性和独立性。如果直接使用一个对象作为data,则不同的组件将共享同一个data对象,如果某个组件修改了data,则会影响到其他组件,导致数据混乱。所以data必须是一个函数,每个组件实例都有自己的独立的data数据。这样每次创建组件都会返回一个新的data对象就避免了组件间共享问题。

21.vue中常见指令

v-textv-htmlv-modelv-bindv-onv-forv-if v-elsev-showv-slot

22.vue常用修饰符

.prevent:阻止默认事件.stop:阻止冒泡事件.self:只在自己本身触发.once:只触发一次.capture:捕获模式.lazy:懒加载模式.trim:去除首尾空格.number:格式化为数字类型

五:ES6

1、箭头函数与es5函数区别?

箭头函数的this指向是固定的,普通的this指向是可变的
let a = {
name: \’sunq\’,
fn:function(action){
console.log(this.name + \’ love \’ + action);
}
}
let b = {name:\’sunLi\’}
// 正常的this指向调用他的对象
a.fn(\’basketball\’); // sunq love basketball
// 改变this指向
a.fn.apply(b,[\’football\’]); // sunLi love football
// 如果将a对象的fn函数改成箭头函数,this.name会是undefined
// 箭头函数的this指向不会改变,且总是指向函数定义生效时所在的对象。

不可以当作构造函数,不可以对箭头函数使用new命令,否则会抛出一个错误。
var Person = function(name){
this.name = name;
}
let sunq = new Person(\’sq\’); // {name: \’sq\’}
var Person = (name) => {
this.name = name;
}
let sunq = new Person(\’sq\’); // 报错 Person is not a constructor

无arguments对象不可以使用yield命令,因此箭头函数不能用作 Generator 函数。

2、ES6提供的解决异步交互的新方法?区别?

Promise、Genarate、async\\await

3、宏任务和微任务有哪些?执行顺序?
4、先并行请求2个接口后,再请求第3个接口,如何处理?

使用Promise.all()方法,将两个promise传入all方法,拿到异步结果再请求第三个

明明知道的语法,面试官一问我偏偏就是跟实际场景联系不到一块,

5、js的数据类型

string number null undefined boolean object bigInt symbol

6、说几个ES6新增的数组的方法  详情

map 实例方法,类似于forEach,但是返回新数组

find和findIndex  实例方法,传入一个匿名函数,ruturn出符合条件的项或下标

… 拓展运算符 基本功能是将一个数组转为用逗号分隔的参数序列

7、for in和for of的区别

for in适合遍历对象,遍历数组拿到的是下标for of适合遍历数组,遍历数组直接拿到数组的项。for of只能遍历具备iterator接口的类型。
8、多个数据请求,如何顺序执行?

使用promise的then方法,或者写多个promise,async中使用await顺序执行。

9、proxy的理解,与defineProperty的区别?

proxy直接给所有属性设置拦截,defineProperty只给指定的设置proxy拦截后要用Proxy实例调用,defineProperty可以直接使用原对象
// es6的proxy
let obj = {name:1,sex:2}
let p = new Proxy(obj,{
get:(value,key)=>{
return \’sq的\’+obj[key]
}
});
p.name // sq的1
p.sex // sq的2
// es5的代理
let newObj = {name:1,sex:2}
Object.defineProperty(newObj,\’name\’,{
get:function(val){ //defineProperty中get函数没有入参
return \’sq的\’ + val
}
})
newObj.name // sq的undefined
newObj.sex // 2

10、谈谈promise的原理?

六:ElementUI

1、如果需要修改样式怎么做?

再写一个样式表引入,!important覆盖样式穿透
2、如何通过继承扩展 element-ui 组件的功能?

通过继承扩展 element-ui 组件的功能_elementui扩展组件_在厕所喝茶的博客-CSDN博客

七:Jquery

1、如何获取同一个cl下,最后一个li?

$(\”#id\”).children().eq(3).remove();
// 获取多个class中的某一个
$(\”.className\”).eq(n).attr(\”class\”) // 可行
$(\”.className\”)[n].attr(\”class\”) // 不可行

2、window.load和$(document).ready()的区别?执行先后顺序?

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。通常简写为$()
总结:ready事件在load事件加载之前完成。

3、如何绑定一个点击事件?

// 方式一
$(\”#id\”).on(\’click\’,function(){});
// 方式二
$(\”#id\”).click(function(){});
// 方式三
$(\”#id\”).bind(\”click\”,function(){});

4、Jquery常用动画?

八:Git的使用

1、常用哪些语句?

pull、commit、push、reset、merge、log、branch、stash

stash如何使用?

git stash -m ‘xxx’git stash pop

2、版本回退语句?soft和hard区别?

git reset –soft 版本号

git reset –hard 版本号

soft会退后,代码改动在本地还保存的有。hard会删除本地改动,彻底抹去该版本的痕迹。详情

3、合并分支注意事项?

将自己分支合到目标分支前,最好先将目标分支合到自己分支上处理完冲突,再将自己的分支合回目标分支。

4、如何进行分支管理?

九:敏捷开发

1、什么是敏捷开发?

个人理解,敏捷开发就是把一个大需求拆为多个独立的小需求。每个小需求可独立开发、测试、上线,循序渐进的完成整个系统。每个版本的周期可能比较短,比如2周,或者4周。

比如某公司需要开发维护一个巨大的平台,可能把平台外包给多个公司干。如果用如上方法,并行开发,可显著缩减工期。

如果想要保证每个版本又快又顺利的上线,需要有完善的角色支持和流程规范。

2、敏捷开发的好处?

个人理解,当团队稍大,工期很紧时,如何有条不紊的保证版本质量就需要一套有效的流程了。

比如一个团队同时收到3个需求,每个需求分发给多个前后端开发。作为版本负责人或者项目负责人,如何把控每个人的代码质量、完成进度、过程留痕、风险规避,其实是有难度的。

一个需求如果经过,需求澄清、方案设计、设计评审、需求传递、版本排期/评审、开发划分、版本开发、测试用例评审、内部测试、代码评审、灰度试用&测试、版本发布、业务验收等完整的流程,可以有效地降低犯错的几率。也方便后期的查找责任人,总结各环节的问题,提升团队的工作效率,使交付越来越平稳。

十:开源项目

1、个人博客

部分公司面试要求中有写,维护有开源项目且具有50个star者优先。

我业余时间有开发维护一个具备管理后台/用户端/服务端的个人网站:sunq’s blog

该个人网站的页面UI/功能设计,用户端/管理后台/服务端代码开发,SEO解决/首屏优化,服务器部署维护等,都由本人独立完成。目前github收获210个star

面试过程中无话可说时,可以拿出来聊聊,缓解尴尬。在面试过程中还真起了点作用,有部分面试官现场看了网站效果,评价网站整体风格简洁唯美。觉得我有独立学习的能力和摸索尝试的习惯,知识面较宽,得到过一些鼓励。

博客的代码全部开源:源码Github地址​​​​

十一:计算机网络

1、http和https的区别?

HTTP 明文传输,数据都是未加密的,安全性较差,HTTPS(SSL+HTTP) 数据传输过程是加密的,安全性较好。使用 HTTPS 协议需要到 CA(Certificate Authority,数字证书认证机构) 申请证书,一般免费证书较少,因而需要一定费用。证书颁发机构如:Symantec、Comodo、GoDaddy 和 GlobalSign 等。HTTP 页面响应速度比 HTTPS 快,主要是因为 HTTP 使用 TCP 三次握手建立连接,客户端和服务器需要交换 3 个包,而 HTTPS除了 TCP 的三个包,还要加上 ssl 握手需要的 9 个包,所以一共是 12 个包。http 和 https 使用的是完全不同的连接方式,用的端口也不一样,前者是 80,后者是 443。HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议,所以,要比较 HTTPS 比 HTTP 要更耗费服务器资源。

2、常见状态码

200:成功返回304:网页未更改有缓存,未重新请求404:请求资源不在500:服务器内部错误503:服务器超时

3、tcp与udp的区别?

TCP面向连接(如打电话要先拨号建立连接)提供可靠的服务,UDP是无连接的,即发送数据之前不需要建立连接,UDP尽最大努力交付,即不保证可靠交付。UDP具有较好的实时性,工作效率比TCP高,适用于对高速传输和实时性有较高的通信或广播通信。每一条TCP连接只能是一对一的,UDP支持一对一,一对多,多对一和多对多的交互通信。UDP分组首部开销小,TCP首部开销20字节,UDP的首部开销小,只有8个字节。TCP面向字节流,实际上是TCP把数据看成一连串无结构的字节流,UDP是面向报文的一次交付一个完整的报文,报文不可分割,报文是UDP数据报处理的最小单位。UDP适合一次性传输较小数据的网络应用,如DNS,SNMP等。

十二:webpack

1、dependencies和devDependencies区别

安装时 –save -dev会放在devDependencies中,–save放在dependencies

devDependencies中安装的是开发环境使用的包,比如eslint、vue-cli-serve;

dependencies中安装的是生产和开发环境下都需要使用的包,比如vue、element、vant等

devDependencies中的依赖模块,在生产环境下不会被打入包内

2、使用过哪些loader?
3、webpack具备哪些功能?

十三:页面优化

数据结构与算法

这一块在笔试、面试的代码题中考核较多,其中常考的数据结构主要有:数组、链表、队列、栈、Set、Map、哈希表等,不同数据结构有不同的方法以及储存原理,这些算是技术岗的必备知识。算法部分主要分为两大块,排序算法与一些其他算法题。

排序算法根据考频高低主要有:快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种,这类考核点要么是算法的时间、空间复杂度、稳定度,要么是直接手写代码,故在理解算法原理的同时,对JS语言版的排序算法代码也要加强记忆。

二叉树层序遍历B 树的特性,B 树和 B+树的区别尾递归如何写一个大数阶乘?递归的方法会出现什么问题?把多维数组变成一维数组的方法知道的排序算法 说一下冒泡快排的原理Heap 排序方法的原理?复杂度?几种常见的排序算法,手写数组的去重,尽可能写出多个方法如果有一个大的数组,都是整型,怎么找出最大的前 10 个数知道数据结构里面的常见的数据结构找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2合并两个有序数组给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)

MP等。

十二:webpack

1、dependencies和devDependencies区别

安装时 –save -dev会放在devDependencies中,–save放在dependencies

devDependencies中安装的是开发环境使用的包,比如eslint、vue-cli-serve;

dependencies中安装的是生产和开发环境下都需要使用的包,比如vue、element、vant等

devDependencies中的依赖模块,在生产环境下不会被打入包内

2、使用过哪些loader?
3、webpack具备哪些功能?

十三:页面优化

数据结构与算法

这一块在笔试、面试的代码题中考核较多,其中常考的数据结构主要有:数组、链表、队列、栈、Set、Map、哈希表等,不同数据结构有不同的方法以及储存原理,这些算是技术岗的必备知识。算法部分主要分为两大块,排序算法与一些其他算法题。

排序算法根据考频高低主要有:快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种,这类考核点要么是算法的时间、空间复杂度、稳定度,要么是直接手写代码,故在理解算法原理的同时,对JS语言版的排序算法代码也要加强记忆。

二叉树层序遍历B 树的特性,B 树和 B+树的区别尾递归如何写一个大数阶乘?递归的方法会出现什么问题?把多维数组变成一维数组的方法知道的排序算法 说一下冒泡快排的原理Heap 排序方法的原理?复杂度?几种常见的排序算法,手写数组的去重,尽可能写出多个方法如果有一个大的数组,都是整型,怎么找出最大的前 10 个数知道数据结构里面的常见的数据结构找出数组中第 k 大的数组出现多少次,比如数组【1,2, 4,4,3,5】第二大的数字是 4,出现两次,所以返回 2合并两个有序数组给一个数,去一个已经排好序的数组中寻找这个数的位 置(通过快速查找,二分查找)
[外链图片转存中…(img-fjpFcz75-1719207597713)]

#以上关于2024年前端面试题汇总_2024前端面试题的相关内容来源网络仅供参考,相关信息请以官方公告为准!

原创文章,作者:CSDN,如若转载,请注明出处:https://www.sudun.com/ask/91996.html

Like (0)
CSDN的头像CSDN
Previous 2024年6月24日
Next 2024年6月24日

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注