前端面试题(持续更新~~)

文章目录


一、基础

1.数组常用的方法

1、concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

2、find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined 。

语法: 数组名.find(function (item,index,arr) {})

item : 这个表示的是数组中的每一项

index : 这个表示的是每一项对应的索引

arr : 这个表示的是原数组

3、findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。

4、includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true, 否则返回 false。

5、indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。 (通常用它判断数组中有没有这个元素)。lastIndexOf 用法与其一致,区别:前者从左开始检查,后者从右开始检查。

语法一: 数组名.indexOf( 要查询的数据)

语法二: 数组名.indexOf( 要查询的数据, 开始索引)

6、join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串。 如果数组只有一个项目,那么将返回该项目而不使用分隔符。

语法: 数组名.join(' 连接符')

7、push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。

语法: 数组名.push( 数据)

8、pop() 方法从数组中删除最后一个元素,并返回该元素的值。此方法更改数组的长度。

9、shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。

10、unshift() 方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)。

11、splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内 容。此方法会改变原数组。 由被删除的元素组成的一个数组。如果只删除了一个元素,则返回只包含一个元素的数组。如果没有删 除元素,则返回空数组。

截取数组,返回截取出来的数据,语法一:数组名.splice(开始索引,多少个)

删除并插入数据,返回截取出来的数据,语法二: 数组名.splice(开始索引,多少个,你要插入的数据)

12、slice() ,截取数组的一部分数据

语法: 数组名.slice( 开始索引, 结束索引)

13、reverse() 方法将数组中元素的位置颠倒,并返回该数组。该方法会改变原数组。

14、sort() 方法用原地算法对数组的元素进行排序,并返回数组。默认排序顺序是在将元素转换为字 符串,然后比较它们的 UTF-16 代码单元值序列时构建的。

语法一: 数组名.sort()会排序 会按照位排序

语法二: 数组名.sort(function (a,b) {return a-b}) 会正序排列

语法三: 数组名.sort(function (a,b) {return b-a}) 会倒序排列

ES6新增的方法

1、forEach() 用来循环遍历的 for

语法: 数组名.forEach(function (item,index,arr) {})

2、map()映射数组的

语法: 数组名.map(function (item,index,arr) {})

3、filter()过滤数组

语法: 数组名.filter(function (item,index,arr) {})

4、every()判断数组是不是满足所有条件

语法: 数组名.every(function (item,index,arr) {})

5、some()数组中有没有满足条件的

语法: 数组名.some(function (item,index,arr) {})

6、reduce()叠加后的效果

语法: 数组名.reduce(function (prev,item,index,arr) {},初始值)

prev :一开始就是初始值 当第一次有了结果以后;这个值就是第一次的结果

2、数组有哪几种循环方式?分别有什么作用?

1、every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔 值。

2、filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

注意: filter() 不会对空数组进行检测。

注意: filter() 不会改变原始数组。

3、forEach() 方法对数组的每个元素执行一次提供的函数。

4、some() 方法测试是否至少有一个元素可以通过被提供的函数方法。该方法返回一个 Boolean 类型 的值。

3、字符串常用的方法

1、获取字符串长度

2、获取字符串指定位置的值

1】charAt() 方法从一个字符串中返回指定位置(索引)的字符。

2】charCodeAt()方法获取的是指定位置字符的Unicode值。

3、检索字符串是否包含特定序列

3】indexOf(),查找某个字符,有则返回第一次匹配到的位置,否则返回-1。

语法:string.indexOf(searchvalue,fromindex)

4】lastIndexOf(),查找某个字符,有则返回最后一次匹配到的位置,否则返回-1。

5】includes() 方法用于判断一个字符串是否包含在另一个字符串中,根据情况返回 true 或 false。

6】startsWith():该方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true,否则 false。

7】endsWith():该方法用来判断当前字符串是否是以指定的子字符串结尾。如果传入的子字符串在搜索字符串的末尾则返回 true,否则将返回 false。

4、连接多个字符串

8】concat() 方法将一个或多个字符串与原字符串连接合并,形成一个新的字符串并返回。

5、字符串分割成数组

9】split() 方法用于把一个字符串分割成字符串数组。该方法不会改变原始字符串。

语法:string.split(separator,limit)

separator:必需。字符串或正则表达式,从该参数指定的地方分割 string。

limit:可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

如果把空字符串用作 separator,那么字符串中的每个字符之间都会被分割。

其实在将字符串分割成数组时,可以同时拆分多个分割符,使用正则表达式即可实现。

6、 截取字符串

substr()、substring()和 slice() 方法都可以用来截取字符串。

10】slice() 方法提取某个字符串的一部分,并返回一个新的字符串,且不会改动原字符串。

语法:string.slice(start,end)

start:必须。 要截取的片断的起始下标,第一个字符位置为 0。如果为负数,则从尾部开始截取。

end:可选。 要截取的片段结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。

11】 substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。

语法:string.substr(start,length)

start 必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。

length:可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。

12】substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法:string.substring(from, to)

7】字符串大小写转换

13】toLowerCase():该方法用于把字符串转换为小写。

14】toUpperCase():该方法用于把字符串转换为大写。

8、字符串模式匹配

15】replace()方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

语法:string.replace(searchvalue, newvalue)

16】match():该方法用于在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

17】search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。

9、移除字符串收尾空白符

18】trim() 方法会从一个字符串的两端删除空白字符。

trimStart()、trimEnd()与trim()一致

10、重复一个字符串

19】repeat(n) 方法返回一个新字符串,表示将原字符串重复n次。

11、补齐字符串长度

20】padStart()和padEnd()方法用于补齐字符串的长度。如果某个字符串不够指定长度,会在头部或尾部补全。

(1)padStart()

padStart()用于头部补全。该方法有两个参数,其中第一个参数是一个数字,表示字符串补齐之后的长度;第二个参数是用来补全的字符串。​

如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。

如果省略第二个参数,默认使用空格补全长度。

padStart()的常见用途是为数值补全指定位数,如将一位数字补齐为三位数字,1------>001

(2)padEnd()

padEnd()用于尾部补全。该方法也是接收两个参数,第一个参数是字符串补全生效的最大长度,第二个参数是用来补全的字符串。

二、Vue

1.vue 双向数据绑定的原理

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

具体步骤

第一步: 需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和getter 这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化。

第二步: compile 解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。

第三步: Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁,主要做的事情是:

1、在自身实例化时往属性订阅器(dep)里面添加自己

2、自身必须有一个 update() 方法

3、待属性变动 dep.notice() 通知时,能调用自身的 update() 方法,并触发 Compile 中绑定的回调,则功成身退。

第四步:MVVM 作为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,通过 Observer 来监听自己的 model 数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据 model 变更的双向绑定效果。

2.vue 的生命周期

vue 实例从创建到销毁的过程就是生命周期。也就是从开始创建、初始化数据、编译模板、挂在 dom -> 渲染、更新 -> 渲染、准备销毁、销毁等一系列过程,vue 的生命周期常见的主要分为4 大阶段 ,8 大钩子函数,另外三个生命周期函数不常用:

keep-alive 主要用于保留组件状态或避免重新渲染。

activated只有在 keep-alive 组件激活时调用。

deactivated只有在 keep-alive 组件停用时调用。

errorCapured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false, 以阻止该错误继续向上传播。
一、创建前 / 后,在beforeCreate生命周期函数执行的时候,data 和 method 还没有初始化;在created 生命周期函数执行的时候,data 和 method 已经初始化完成。

二、渲染前/后,在beforeMount 生命周期函数执行的时候,已经编译好了模版字符串、但还没有真正渲染到页面中去;在mounted 生命周期函数执行的时候,已经渲染完,可以看到页面。

三、数据更新前/后,在beforeUpdate生命周期函数执行的时候,已经可以拿到最新的数据,但还没渲染到视图中去。在updated生命周期函数执行的时候,已经把更新后的数据渲染到视图中去了。

四、销毁前/后,在beforeDestroy 生命周期函数执行的时候,实例进入准备销毁的阶段、此时 data 、methods 、指令等还是可用状态;在destroyed生命周期函数执行的时候,实例已经完成销毁、此时 data 、methods 、指令等都不可用。

3.v-if 和 v-show区别

v-if,确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建, 操作的实际上是 dom 元素的创建或销毁。

v-show,基于 CSS 进行切换, 它操作的是display:none/block属性。

一般来说, v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好; 如果在运行时条件很少改变,则使用 v-if 较好。

3、ES

1.async await含义及作用

async await 是es7里面的新语法、它的作用就是 async 用于申明一个 function 是异步的,而 await 用 于等待一个异步方法执行完成。它可以很好的替代promise 中的 then。

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。当函数执行的时候,一旦遇 到 await 就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

1、什么是 MVVM、MVC模型?

MVC: MVC 即 model-view-controller(模型-视图-控制器)是项目的一种分层架构思想,它把复杂的业务逻辑,

抽离为职能单一的小模块,每个模块看似相互独立,其实又各自有相互依赖关系。它的好处是:

保证了模块的智能单一性,方便程序的开发、维护、耦合度低。
MVVM:MVVM 即 Model-View-ViewModel,(模型-视图-控制器)它是一种双向数据绑定的模式, 用 viewModel 来建立起 model 数据层和 view 视图层的连接,数据改变会影响视图,视图改变会影响数据

相关推荐
花花鱼4 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09338 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
激流丶14 分钟前
【Kafka 实战】如何解决Kafka Topic数量过多带来的性能问题?
java·大数据·kafka·topic
Themberfue18 分钟前
Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized
java·开发语言·线程·多线程·synchronized·
EricWang135829 分钟前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning29 分钟前
React.lazy() 懒加载
前端·react.js·前端框架
时差95333 分钟前
【面试题】Hive 查询:如何查找用户连续三天登录的记录
大数据·数据库·hive·sql·面试·database
让学习成为一种生活方式35 分钟前
R包下载太慢安装中止的解决策略-R语言003
java·数据库·r语言
web行路人39 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
晨曦_子画40 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin