当前位置：首页 > 网站源码 > 正文内容

web前端面试题及答案2021（web前端开发面试题2021）

网站源码2年前 (2023-02-14)493

本篇文章给大家谈谈web前端面试题及答案2021，以及web前端开发面试题2021对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、前端面试项目会给图片吗
2、Web 前端面试
3、Web前端企业面试题

前端面试项目会给图片吗

全部

资讯

视频

文档

图片

一文分析前端面试中的图片懒加载问题，快来看看吧~

最近整理了一些前端高频面试题，分享给大家，如有问题欢迎留言指正，面试专栏我会长期更新，欢迎大家点赞、收藏，感谢！1.什么是_DOCTYPE_，有何作用？Doctype 是HTML5的文档声明，通过它可以...

百家号2022-11-28

前端实习生去面试需要什么作品-芝士回答

3.证明对新技术探索能力的，github里边应该有几个现有热门技术的项目。表示在寻找新技术解决方案的路上，一直保持着一颗敬畏之心，一颗虔诚的心，时刻保持学习或了解新事物的态度或激情。上个成...

芝士回答2021-03-25

初级前端面试需要带什么作品？芝士回答

我建议最后去找电商项目，电商项目中的前端特效要求的比较高，如果电商的可以消化，那么面试就不再是问题了；2、对于已经工作了一段时间的前端开发工程师来说，最好的就是将自己在工作中做过的...

芝士回答2021-01-09

其他人还搜了

前端面试项目素材

前端面试项目描述

面试介绍电商网站前端项目

前端面试问项目遇到的问题

前端面试开源项目

前端面试官要看上线项目怎么办

前端工作面试注意事项

作为一名HTML5前端工程师，为了工作，为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项：第一：注意自己的仪容仪表面试之前，一定要再次从头到脚地将自己的仪容仪表检查...

芝士回答

初级前端面试需要带什么作品？

回答:26浏览:24万+赞同:34

[最佳答案]千言万语浓缩成了一行URL。

知乎2016-03-27

【前端+面试问题|前端+面试技巧】看准网

面试的前端开发·北京面试未通过阿里影业一面面试过程很愉快，面试官交流起来很舒服，下面的图片里是我记录的面试中的问题并附上答案，仅供参考。贡献于 2022-05-20 3 匿名用户面试的前端...

看准网2022-05-20

前端应届生面试经验_韩哥、最强操盘手的博客-CSDN博客_前端应届生

2 年之内的小伙伴，大家酌情阅读~(更新：最后的面试题只是自己总结的一些偏基础的知识~刚毕业的小伙伴看着也不要有什么压力，不是代表初级前端必须掌握的技能，只是总结出前端面试中比较常见的...

CSDN技术社区2021-11-18

前端面试（1）—准备_乐夫天命兮的博客-CSDN博客_前端面试准备

每轮面试在一小时左右。概念：职位描述：注重的是工作职责。任职要求：要求的是工作能力。通常描述得很细致。PS：前端的知识庞大，不可能所有的内容都准备好，但是要向“任职要求”靠拢。分析...

CSDN技术社区

【前端开发/web前端设计面试|前端开发/web前端设计面试技巧】看准网

面试过程很愉快，面试官交流起来很舒服，下面的图片里是我记录的面试中的问题并附上答案，仅供参考。有用（3）|评论（0）|你还记得你曾经的面试情景吗？分享一条你的面试经历吧，...

看准网2022-06-11

web前端开发面试流程是怎样的？百度知道

回答:2

首先投简历，等待面试通知。第一次面试填资料，做测试题；等一面通过之后接着二面，二面一般是技术面试，有些公司是通过之后直接进行3面有些是改天再进行3面，3面一般就是项目经理或总经理问你一-些各种各样的问题，如果3面都过了，基本上就是面试成功了。但是不同公司的面试流程也不相同。...

百度知道2022-06-10

相关搜索

前端面试项目

前端面试题库

前端面试自我介绍

前端面试视频教程

前端面试题目

面试图片

前端性能优化面试

前端面试宝典

快速搞定前端面试

前端面试问项目中遇到的难题

11-20条

【截图】常见前端面试题_mus_木司的博客-CSDN博客

3.一道面向对象面试题 4.EventLoop 同步异步、宏任务微任务 5.使下面输出1 var a={ toString=function*(){ yield 1;yield 2;yield 3;} } a.toString 会转换，规则：对象=字符串对象.toString ...

CSDN技术社区2020-06-02

前端面试

前端面试自我介绍背景：1 面试官在你自我介绍的时候，才有时间看你的简历。人太多没时间看，看了也记不住。2 你在自我介绍中，他在想问你什么问题。3 了解你语言表达能力，自信气场，仪表形态。...

前端面试作品-芝士回答

芝士回答2021-01-09

web前端经典面试题_约德尔蒙的博客-CSDN博客_前端面试题

阅读:8w+

web前端面试题其他问题 1、请谈谈你对性能优化的认识？网页内容减少http请求次数 80%的响应时间花在下载网页内容(images,stylesheets,javascripts,scripts,flash等)。减少请求次数是缩短响应...

CSDN技术社区

前端面试-项目流程_前端小兔子的博客-CSDN博客_前端面试流程

1、项目流程（1）项目分多人、多角色参与（2）项目分多阶段（3）项目需要计划和执行 2、项目角色（1）PM 产品经理（2）UE 视觉设计师（3）FE 前端开发（4）RD 后端开发（5）CRD 移动端...

CSDN技术社区2020-03-18

关于前端面试的十问十答（并附知识点思维导图）知乎

6.29 双越老师在慕课网直播讲解了关于前端面试的一些技巧和经验，以下是同学的一些问题反馈和老师的解答 1、问题描述: 老师你好，我是计算机专业大二在校生，想了解前端需要重点掌握哪些算法呢...

知乎2019-07-04

Web前端初学者（应届生）面试攻略-知了乐了-博客园

前端技术日新月异，面试也有了不同的要求，各种框架层出不穷，到了你们那一年前端发展到了什么地步没有人知道，牢记法则，以不变应万变，绝对ok。明确一点，自己想去那种公司，大公司注重基础，...

博客园2018-02-26

前端面试（三）简书

前端面试（三）一、图片整合用background-position来实现背景图片的定位技术，又称为css精灵图。用法：将一些小图片有规则的合成一张图片，即多张图片合为一张整图，再使用background-...

简书2019-10-20

前端面试要求-洺剑残虹-博客园

前端面试所遇到的技术点： HTML的问题 (1)行标签和块级标签分别有哪些？(2)常见HTML5的标签有哪些？(3)怎么页面结构会比较好？(4)如何减少HTTP请求和优化？减少请求的资源，将多个CSS资源打包到...

博客园2018-09-08

前端工程师面试汇总_尊哥的博客-CSDN博客_前端工程师面试

一、前端基础 1、HTTP,HTML,浏览器说一下http和https tcp三次握手，一句话概括 TCP和UDP的区别 WebSocket的实现和应用一个图片url访问后直接下载怎样实现？说一下web Quality（无障碍）几个很...

CSDN技术社区2020-01-28

相关搜索

前端面试项目

前端面试如何介绍自己的项目

前端面试

web前端面试

js前端面试

前端面试问题

2019前端面试

前端面试题库

前端电话面试

前端面试自我介绍

21-30条

前端面试-百度贴吧

小伙伴们，有很多小伙伴刚学完前端，想找一份好一点的公司去应聘，但是公司的面试又成了一大难题，今天我整理了一些关于web前端面试的试题，帮助大家可以更好的完成面试，早日找到工作。由于...

百度贴吧2020-01-25

前端面试流程_百度文库

前端面试流程 By漆黑小T 前面5个题，有两个答不出来就可以pass 遇到面试者反问，以时间有限为由，让其自行百度，面试印象减分 1、css问题,水平、垂直居中的写法，请至少写出4种？水平居中行内...

百度文库

前端面试技巧-百度经验

前端面试技巧,马上就要进入前端面试的朋友们，对于前端面试的技巧还是比较模糊的，那么前端面试技巧都有哪些呢？

百度经验2019-12-03

前端面试到底要做到哪些？知乎

准备面试的时候，可以按照以下几个模块来准备：无论前端技术栈日新月异，我们都得要扎实基础，脚踏实地，切记不可投机取巧、眼高手低。2.1 JavaScript 基础 JavaScript 基础非常重要，相比于...

知乎2021-07-29

常见的前端开发面试题(附答案)DreamTraveler-博客园

2.谈谈你对前端性能优化的理解 a.请求数量：合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域 b.请求带宽：开启GZip，精简JavaScript，移除重复脚本，图像优化，将icon做成字体 c.缓存...

博客园2020-04-28

前端面试流程-漆黑小T-博客园

博客园2021-01-27

前端面试流程图-CSDN

csdn已为您找到关于前端面试流程图相关内容，包含前端面试流程图相关文档代码介绍、相关教程视频课程，以及相关前端面试流程图问答内容。为您解决当下相关问题，如果想了解更详细前端面试流程图...

CSDN技术社区2021-06-10

前端面试篇，应届生面试时被问项目经验不用慌，按这个步骤回答成功率高达95%_码民的飘柔的博客-CSDN博客

为了让大家在收到一家公司前端面试邀请之后，准备得更加充足，这里准备了一些高频和基础的前端面试题，希望可以帮助大家更加顺利完成求职，得到自己满意的offer。最全前端面试真题汇总 CSS面试...

CSDN技术社区2021-05-14

关于前端面试的注意事项-简书

前端现在越来越多人，那么面试的时候要注意哪些问题呢？1.简历一定要写的完善，多一些数据性的东西，项目业绩啊，项目效果之类的一定要写的好一点，这样面试官看到才能感觉到真实。2.简历上的...

简书2020-05-06

常见的前端开发面试题(附答案)

百家号2019-02-01

相关搜索

前端面试项目

前端面试如何介绍自己的项目

前端面试

web前端面试

js前端面试

前端面试问题

2019前端面试

前端面试题库

前端电话面试

前端面试自我介绍

31-40条

常见前端面试题及答案_冷小鱼的博客-CSDN博客_前端面试题

本文是在GitHub上看到一个大牛总结的前端常见面试题，很多问题问的都很好，很经典、很有代表性。上面没有答案，我就整理了一下，从网上找了一些相关问题的答案。里面有一部分问题的答案我也没有...

CSDN技术社区2019-02-15

前端工作面试问题-前端开发博客

这段事件一直在整理有关前端的面试题目，整理这也题目，不只是为了能够学习应付即将到来的面试，更是为了补补基础知识。日常项目开发进度太快了，很多属性或者方法用了就忘，这样会造成另外一个...

m.caibaojian.com2017-04-06

前端面试之前要准备的那些事-祈澈姑娘-博客园

现在前端虽火但工作不好找，因为一些外力因素所导致，北上广这些大城市的招聘都是三年的工作经验起的。关于怎么写工作经验和工作项目，后续的文章里面会有更多的干货和经验。问题四，简历上常见...

博客园2017-10-26

如何面试前端工程师?

评论:1

近来几个月，一直在努力寻找前端战友，未果，一路的招聘经历下来，心生不少感慨，一直都很小心翼翼前端面试项目会给图片吗前端面试项目会给图片吗

全部

资讯

视频

文档

图片

一文分析前端面试中的图片懒加载问题，快来看看吧~

百家号2022-11-28

前端实习生去面试需要什么作品-芝士回答

芝士回答2021-03-25

初级前端面试需要带什么作品？芝士回答

芝士回答2021-01-09

其他人还搜了

前端面试项目素材

前端面试项目描述

面试介绍电商网站前端项目

前端面试问项目遇到的问题

前端面试开源项目

前端面试官要看上线项目怎么办

前端工作面试注意事项

芝士回答

初级前端面试需要带什么作品？

回答:26浏览:24万+赞同:34

[最佳答案]千言万语浓缩成了一行URL。

知乎2016-03-27

【前端+面试问题|前端+面试技巧】看准网

看准网2022-05-20

前端应届生面试经验_韩哥、最强操盘手的博客-CSDN博客_前端应届生

CSDN技术社区2021-11-18

前端面试（1）—准备_乐夫天命兮的博客-CSDN博客_前端面试准备

CSDN技术社区

【前端开发/web前端设计面试|前端开发/web前端设计面试技巧】看准网

看准网2022-06-11

web前端开发面试流程是怎样的？百度知道

回答:2

百度知道2022-06-10

相关搜索

前端面试项目

前端面试题库

前端面试自我介绍

前端面试视频教程

前端面试题目

面试图片

前端性能优化面试

前端面试宝典

快速搞定前端面试

前端面试问项目中遇到的难题

11-20条

【截图】常见前端面试题_mus_木司的博客-CSDN博客

CSDN技术社区2020-06-02

前端面试

前端面试作品-芝士回答

芝士回答2021-01-09

web前端经典面试题_约德尔蒙的博客-CSDN博客_前端面试题

阅读:8w+

CSDN技术社区

前端面试-项目流程_前端小兔子的博客-CSDN博客_前端面试流程

CSDN技术社区2020-03-18

关于前端面试的十问十答（并附知识点思维导图）知乎

知乎2019-07-04

Web前端初学者（应届生）面试攻略-知了乐了-博客园

博客园2018-02-26

前端面试（三）简书

简书2019-10-20

前端面试要求-洺剑残虹-博客园

博客园2018-09-08

前端工程师面试汇总_尊哥的博客-CSDN博客_前端工程师面试

CSDN技术社区2020-01-28

相关搜索

前端面试项目

前端面试如何介绍自己的项目

前端面试

web前端面试

js前端面试

前端面试问题

2019前端面试

前端面试题库

前端电话面试

前端面试自我介绍

21-30条

前端面试-百度贴吧

百度贴吧2020-01-25

前端面试流程_百度文库

百度文库

前端面试技巧-百度经验

前端面试技巧,马上就要进入前端面试的朋友们，对于前端面试的技巧还是比较模糊的，那么前端面试技巧都有哪些呢？

百度经验2019-12-03

前端面试到底要做到哪些？知乎

知乎2021-07-29

常见的前端开发面试题(附答案)DreamTraveler-博客园

博客园2020-04-28

前端面试流程-漆黑小T-博客园

博客园2021-01-27

前端面试流程图-CSDN

CSDN技术社区2021-06-10

前端面试篇，应届生面试时被问项目经验不用慌，按这个步骤回答成功率高达95%_码民的飘柔的博客-CSDN博客

CSDN技术社区2021-05-14

关于前端面试的注意事项-简书

简书2020-05-06

常见的前端开发面试题(附答案)

百家号2019-02-01

相关搜索

前端面试项目

前端面试如何介绍自己的项目

前端面试

web前端面试

js前端面试

前端面试问题

2019前端面试

前端面试题库

前端电话面试

前端面试自我介绍

31-40条

常见前端面试题及答案_冷小鱼的博客-CSDN博客_前端面试题

CSDN技术社区2019-02-15

前端工作面试问题-前端开发博客

m.caibaojian.com2017-04-06

前端面试之前要准备的那些事-祈澈姑娘-博客园

博客园2017-10-26

如何面试前端工程师?

评论:1

近来几个月，一直在努力寻找前端战友，未果，一路的招聘经历下来，心生不少感慨，一直都很小心翼翼前端面试项目会给图片吗

Web 前端面试

博客园整理了一下，有好的面试题欢迎大家发在评论区哟

1. 闭包

2. 数组去重

3. 原型和原型链

4. call,apply,bind三者的区别？

5. 请介绍常见的 HTTP 状态码(至少五个)

6. 深浅拷贝

7. 实现(5).add(3).minus(2)输出6

8. null和undefined区别

9. MVC和MVVC?

10. Vue生命周期

11. Vue数据双向绑定原理

12. Vue组件传参

13. 说说各浏览器存在的兼容问题

14. router和route

15. active-class属于Vue哪一个modules,有什么作用

16. v-if和v-show

17. computed和watch有什么区别

18.Vue 组件中 data 为什么必须是函数

19. vue中子组件调用父组件的方法

20. vue中 keep-alive 组件的作用

21. vue中如何编写可复用的组件？

22. Vue 如何去除url中的 #

23. Vue 中 key 的作用

24. Vue 中怎么自定义指令

25. Vue 中怎么自定义过滤器

26. NextTick 是做什么的

27. Vue 组件 data 为什么必须是函数

28. 计算属性computed 和事件 methods 有什么区别

29. scoped（死够扑的）

30. vue如何获取dom?

31. promise

32. vue常用指令有哪些

33.vue-loader是什么?使用和用途？

34.css样式局部化，如何让css只在当前组件起作用?scss和stytus样式穿透

闭包指有权访问另一个函数中变量的函数，

MDN:

B站视频： ;seid=18157596230752413126

都是用来改变this指向的

call和apply都是function原型上的方法，每一个函数作为function的实例都可以调用这两个方法，而这两个方法都是用来改变this指向的

一般情况下this指向其调用者（）

fun.call(thisArg,arg1,ary2,...)

主要作用可以实现继承

调用函数，改变this指向

继承

fun.apply(thisArg,[argsArray])

作用：调用函数，改变函数内部this指向

参数必须是数组

apply主要应用于借助数学对象等

bind()方法不会调用函数，但可以改变函数内部this指向

fun.bind(thisArg,arg1,arg2,...)

thisArg:在fun函数运行时指定的this值

arg1，arg2:传递的其他参数

返回由指定的this值和初始化参数改造的原函数拷贝

call的性能要比apply好一些，尤其当传递参数超过3个，后期开发可多用call

时间测试

状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五种可能取值:

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。

阮一峰：

MVC 是后端中的概念

MVVC中是前端概念

最终实现V和M数据的同步，因此开发者只需关注业务逻辑，不需要手动操作Dom，mvvm是vue的核心

这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。

active-class 属于vue-router的样式方法

当routerlink标签被点击时将会应用这个样式

使用有两种方法

routerLink标签内使用

在使用时会有一个Bug

首页的active会一直被应用

解决办法

为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：

在router-link中写入exact

在路由js文件,配置active-class

还可以不用exact这种方法去解决，例如

首页

路由中加入重定向

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景

computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

watch

watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作

无缓存性，页面重新渲染时值不变化也会执行

小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

去这里看一下blog.csdn.net

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #，可以使用 vue-router 的另一种模式 history

new Router({

mode: 'history',

routes: [ ]

})

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面

具体参考官方API

参考官方文档-自定义指令

过滤器也同样接受全局注册和局部注册

具体可参考官方文档深入响应式原理

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

让css只在当前组件中起作用

Web前端企业面试题

答：

一、display和visibility的相同与不同点

1、相同点：display和visibility都有讲元素隐藏的意思

2、不同点：display是元素隐藏，隐藏的元素不占文档流

而visibility隐藏的元素仍然占文档流

二、display和visibility的属性值

1、display

2、visibility

答：

在开发过程中经常需要循环遍历数组或者对象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他们的异同点

for循环

其实除了这三种方法以外还有一种最原始的遍历，自Javascript诞生起就一直用的就是for循环，它用来遍历数组

for循环中可以使用return、break等来中断循环

结果：

forEach

对数组的每一个元素执行一次提供的函数（不能使用return、break等中断循环），不改变原数组，无返回值undefined。

输出结果：

for…in

循环遍历的值都是数据结构的键值

总结一句: for in也可以循环数组但是特别适合遍历对象

结果：

for…of

它是ES6中新增加的语法，用来循环获取一对键值对中的值

循环一个数组

循环一个普通对象（报错）

答：

px：像素（Pixel）,相对长度单位。像素px是相对于显示器屏幕分辨率而言的。--即分辨率不同的机型当前对应的距离可能发生变化。(1Inches=xPx)。

所以相对于同一机型来说是一个绝对的长度单位。

em：是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

以其父级元素为基准来变化长度。所以其算法不是一个固定的值。

rem：是CSS3新增的一个相对单位（root em，根em）。

那么其好用在用可以直接设置HTML的font-size，然后在其子类都是以这个大小为基准变化的值。

在移动设备上，我们常常设置

此方式的目的是为了将当前屏幕(PC)分辨率的px转化成手机端的px，让px在手机上能够兼容此方式。

因此，此时看见的12px与PC端的12px无异。但是，如果不写着个meta的话，那么，浏览器会一直以PC的视图来决定手机端的px的大小，让视图看起来变小了很多。

那么，响应式页面则经常配合媒体查询media 来设置不同分辨率下手机的各种不同的配置机构，然后根据父级来变化所有的相对长度。

基础篇

1.shift

// 删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefined

2.unshift

// 将参数添加到原数组开头，并返回数组的长度

//注：此方法在ie6.0下

// 测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠

// 一般需要用返回值时可用splice代替

3.pop

// 删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefined

4.push

// 将参数添加到原数组末尾，并返回数组的长度

5.concat

// 返回一个新数组，是将参数添加到原数组中构成的

6.splice

7.reverse

8.sort(orderfunction)

9.slice(start,end)

10.join(separator)

11.indexOf

12.lastIndexOf

13. Array.isArray()

14. Array.toString()

进阶篇

1.forEach

是最为常用的情景，它至于遍历，可以在获取当前数据项的前提下，对数据进行修改。它没有返回值。理解起来也是最容易的。

2.map

map的本意就是映射，也就是将一个值从一种形式映射到另一种形式，比如将key映射到value。它的每一次遍历都会有一个返回值。这些返回值组合成最终的结果数组。事实就是如此

forEach和map对比

相同点

1）都是循环遍历数组中的每一项；

2）forEach()和map()匿名函数的参数相同，参数分别是item（当前每一项）、index（索引值）、arr（原数组）；

3）this都是指向调用方法的数组；

4) 只能遍历数组；

不相同点

1）map()创建了新数组，不改变原数组；forEach()可以改变原数组。

2）遇到空缺的时候map()虽然会跳过，但保留空缺；forEach()遍历时跳过空缺，不保留空缺。

3）map()按照原始数组元素顺序依次处理元素；forEach()遍历数组的每个元素，将元素传给回调函数。

3.filter

它致力于从已有的数组中筛选出符合一定条件的数据项，最后的返回值是所有符合条件的数据项构成的数组。它不会修改原来的数组。记住，它的立足点就是筛选。也仅仅是筛选。还有一点需要注意：每一次遍历都会有一个返回值，它的类型是布尔类型。返回值只有是true，当前遍历项才会被筛选中。不要试图在filter中去修改原始数组。

理解: 就是在一堆数据里面去筛选你需要的数据或者剔除你不需要的数据

4.find()

返回通过测试的数组的第一个元素的值,

理解:假如你去一个一群人的地方去找人你说我找xxb 他要是在那里就找到不在那里就是undefined

在第一次调用 callback 函数时会确定元素的索引范围，因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到。

语法

array.find(function(value, index, arr),thisValue)

value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值

返回值：返回符合测试条件的第一个数组元素的值，如果没有符合条件的则返回undefined。

扩展: findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。自己try吧

5.every

理解: 这个就像上课了老师说昨天布置的作业只要有一个人没有写完今天就不讲课然后挨个检查当检查到有一个没有写完的时候就不检查了返回不讲课了(false)

6.some

理解: 相当于在一个数组里面找你想要的那个数找到了就返回true 找不到就返回false

7.reduce

它这个方法是接收一个函数作为累加器,将数组中的值(从左向右)开始合并,最总为一个值然后返回出来,callback

他可以传四个参数:

1,previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue)

2,currentValue:数组中当前被处理的元素

3,index:不啰嗦,自己顾名思义去吧

4,array:返回调用reduce的数组

彩蛋: 这里附上前几天某某人比较喜欢的切割字符串的方法

substring() 和 substr()

相同点：如果只是写一个参数，两者的作用都一样：都是是截取字符串从当前下标以后直到字符串最后的字符串片段。

不同点：第二个参数

substr(startIndex, lenth) // 第二个参数是截取字符串的长度（从起始点截取某个长度的字符串）；

substring(startIndex, endIndex) // 第二个参数是截取字符串最终的下标（截取2个位置之间的字符串,‘含头不含尾'）。

1：在使用vue框架的过程中，我们经常需要给一些数据做一些初始化处理，这时候我们常用的就是在created与mounted选项中作出处理。

首先来看下官方解释，官方解释说created是在实例创建完成后呗立即调用。在这一步，实例已完成以下配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

这话的意思我觉得重点在于说挂架阶段还没开始，什么叫还没开始挂载，也就是说，模板还没有被渲染成html，也就是这时候通过id什么的去查找页面元素是找不到的。下面看下实例来证明。

所以，一般creadted钩子函数主要是用来初始化数据。

2：mounted钩子函数一般是用来向后端发起请求拿到数据以后做一些业务处理。官方解释如下：

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

这意思是该钩子函数是在挂在完成以后也就是模板渲染完成以后才会被调用。下面看实例

下面是结果

nihao

取到了值，这说明这时候vue模板已经渲染完毕。因此，Dom操作一般是在mounted钩子函数中进行的

computed:{} 计算属性，什么是计算属性呢，我个人理解就是对数据进行一定的操作，可以包含逻辑处理操作，对计算属性中的数据进行监控。计算属性是基于它的以来进行更新的，只有在相关依赖发生改变时侧能更新变化，以函数的形式返回结果。然后可以像绑定普通属性一样在模板中绑定计算属性。

总结：

通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。

methods:{}中的方法都需要主动去触发，比如点击click之类的

而created(){}、mounted(){}、里面的代码都是自动去执行的，即vue生命周期到了哪一步就直接去执行对应钩子函数里面的代码了，无需手动去执行

created中主要放初始化获取数据之类，mounted()中挂载到具体的DOM节点

mounted 是生命周期钩子，vue的生命周期中一个实例的mounted只会运行一次。mounted在vue的渲染模板挂载到$el元素上才会调用，很显然你export的时候el都么有自然不会运行mounted钩子函数了。

所有的方法都应该在methods里定义，然后在created或者mounted里使用this调用方法，用这种方式实现初始化

6、Vue中组件之间的传参方式有哪些方式？

Vue 组件传参的八种方式总结

Vue 组件的使用不管是在平常工作还是在面试面试中，都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的

一、props 传参

子组件定义 props 有三种方式:

// 第一种数组方式

// 第二种对象方式

// 第三种对象嵌套对象方式

第三种对象默认支持 4 种属性，并且都是非必填的。可以随意使用

父组件传参的俩种方式

第一种静态属性传参

注意：

1、在不定义 props 类型的情况下 props 接受到的均为 String。

2、当 props 属性指定为 Boolean 时，并且只有属性 key 没有值 value 时接受到的是 true

第二种动态属性传参

注意：

1、需要区分非简写形式传入的值是对象，则会对应 props 中多个值

2、会保留传入值的类型

3、如果是表达式则获取到的是表达式的计算结果

二、attrs 和listeners

$attrs

$attrs 会获取到 props 中未定义的属性（class 和 style 属性除外）,支持响应式。常用的场景有俩种：

组件嵌套组件时可以使用 $attrs 来支持过多的属性支持。比如 elementUI 的 table 组件。支持的属性十几个，而平常封装的时候用的最多的也就一俩个。

属性默认是添加在父组件上的，有时候想把多余的属性添加在子组件上（可以结合 inheritAttrs: false 属性，让父属性不接受多余的属性）

$listeners 定义的事件都在子组件的根元素上，有时候想加到其他元素上。就可以使用 $listerners。它包含了父组件中的事件监听器(除了带有 .native 修饰符的监听器)

三、$emit 通知

这里有一道考题: for 循环的时候如何拿到子组件的传值和 for 中循环的值

答案有俩种，一是 $event, 二是闭包。只是需要注意 $event 只能获取到第一个值

四、v-model

这个其实是一种通过 emit，on 的组合方式。优点再于同步值方便,写法优雅。下面三种写法其实是一个意思

五、插槽

六、$refs, $root, $parent, $children

$root 获取根组件

$parent 获取父组件

$children 获取子组件(所有的子组件，不保证顺序)

$refs 组件获取组件实例，元素获取元素

七、project / inject

注意：注入的值是非响应的

八、Vuex

这个相当于单独维护的一组数据，就不过多的说了。

watch，computed和methods的关系

1.watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。

2.对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数

watch和computed各自处理的数据关系场景不同

1. watch 擅长处理的场景：一个数据影响多个数据

2. computed 擅长处理的场景：一个数据受多个数据影响

watch用法监听下记haiZeiTuan_Name的值，会改变其他所有的值

结果：this.suoLong会变为 '橡胶海贼团索隆',以此类推

computed用法监听下记firstName，secName，thirdName的值，会改变luFei_Name的值

methods和computed的区别例子

注意两次点击computed返回的时间是相同的！！

1.两次点击methods返回的时间是不同的

2.注意两次点击computed返回的时间是相同的

【注意】为什么两次点击computed返回的时间是相同的呢？new Date()不是依赖型数据（不是放在data等对象下的实例数据），所以computed只提供了缓存的值，而没有重新计算

只有符合：1.存在依赖型数据 2.依赖型数据发生改变这两个条件 ,computed才会重新计算。

参考：

答：

1、Promise

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的

2、async await

async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。

两者的主要用法、语法就不赘述了，感兴趣的同学可以自行查阅 es6中文文档

两者的区别

1、Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。

2、async await与Promise一样，是非阻塞的。

3、async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。

简单来看，这两者除了语法糖不一样外，他们解决的问题、达到的效果是大同小异的，我们可以在不同的应用场景，根据自己的喜好来选择使用。