前端面试笔试学习知识笔记总结

ゝ一纸荒年。 2024-04-07 14:07 55阅读 0赞

>  有兴趣的朋友可以查看博主自己的[前端工程师面试题总结附加分项][Link 1]；

**基础自省：**

*  [前端基础学习——带你全面掌握HTML语言][HTML]
 *  [前端基础学习——你必须掌握的CSS的知识][CSS]
 *  [前端基础学习——带你夯实JavaScript基础][JavaScript]
 *  [前端基础学习——JavaScript之BOM模型与DOM模型][JavaScript_BOM_DOM]

> 更多基础请直接前往[前端学习专栏][Link 2]进行查看；

--------------------

**目录**

1. innerHTML和innerText的区别、split(',')的应用

2. 正则表达式、dom事件

3. Array函数应用

4. Math函数应用、onclick事件的操作

5. map与forEach的区别

6. 箭头函数与普通函数的区别?

7. 如何解决跨域？

8. 严格模式的限制

9. ES6新增

10. attribute 和 property 的区别是什么?

11. let和const 的区别是什么?

12. 内存泄漏

13. script 引入方式?

14. 数组(array)方法

15. JavaScript 深浅拷贝?

16. 说说异步编程的实现方式?

17. 说说面向对象编程思想?

18. 项目性能优化的方法

19. 什么是单线程，和异步的关系？

20. 说说负载均衡？

21. 作用域链？

22. 什么是原型、原型链、继承？

23. JS垃圾回收机制是怎样的？

24. 逐进增强和优雅降级

25. Map 相关的函数与属性：

26. vue优点：

27. Vue中组件传递信息

28. v-show和v-if指令的共同点和不同点？

29. scoped可以限制CSS只在当前组件中起作用

30. 的作用是什么？

31. 如何获取dom？

32. 说出几种vue当中的指令和它的用法？

33. vue-loader是什么？它的用途是什么？

34. 为什么用key？

35. axios及安装？

36. 请说出vue.cli项目中src目录每个文件夹和文件的用法

37. 分别简述computed和watch的使用场景

38. $nextTick的使用

39. vue组件中data为什么必须是一个函数？

40. 渐进式框架的理解

41. vue在双向数据绑定是如何实现的？

42. 单方面应用和多页面应用区别及缺点

43. Vue项目中为什么要在列表组件中写key，其作用是什么？

44. javascript中常见的全局函数有：

--------------------

#### 1. innerHTML和innerText的区别、split(',')的应用 ####

来源：[前端笔试练习题——JS1 直角三角形、JS2 文件扩展名][JS1 _JS2]

> innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
> 
> innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
> 
> **也就是说，innerText可以用来填写扩充标签内的文字**
> 
> **innerHTML可以用来拼接标签**

> split(',')分割字符串，返回分割的字符串数组。
> 
> 文件扩展名为最后一个字符串，可以直接pop出来；

#### 2. 正则表达式、dom事件 ####

来源：[前端笔试练习题——JS3 分隔符、JS4 单向绑定][JS3 _JS4]

正则表达式：[javaScript正则表达式详解][javaScript]

>  *  \\d：查找数字；
>  *  ?=：紧跟着；
>  *  \\d\{3\}：匹配3个数字；
>  *  /g：全局匹配；

>  *  dom事件里的函数的this指向触发者，即input标签；
>  *  注意：这里不能使用箭头函数，因为箭头函数没有this指针，箭头函数的this是根据执行上下文确定的，即这里的this指向window，会报错；
>  *  input的内容应该用innertext提取，而span的内容应该用innerHTML提取；

#### 3. Array函数应用 ####

来源：[前端笔试练习题——JS5 创建数组、JS6 判断版本][JS5 _JS6]

>  *  通过new Array函数构造实例的时候带入参数，可以生成该参数长度的空数组
>  *  通过Array.fill函数可以将数组的每一项都改编为参数值

> parseInt和Number都可以将字符串转换为数字类型；

#### 4. Math函数应用、onclick事件的操作 ####

来源：[前端笔试练习题——JS7 无重复数组、JS8 数组排序][JS7 _JS8]

>  *  Math.random()：返回0~1之间的随机值；
>  *  indexOf(str,index)：检索字符串的位置并返回；(index是检索开始的地方)

>  *  onclick 事件会在元素被点击时发生。就是帮我们实现点击某个元素想要执行某个操作的需求。
>  *  在html代码中设置button按键，然后在Script代码中有对应的onclick函数进行响应；

#### 5. map与forEach的区别 ####

>  *  forEach 方法，是最基本的方法，就是遍历与循环，默认有 3 个传参：分别是遍历的数组内容 item、数组索引 index、和当前遍历数组 Array
>  *  map 方法，基本用法与 forEach 一致，但是不同的是，它会返回一个新的数组，所以 callback需要有 return 值，如果没有，会返回 undefined

#### 6. 箭头函数与普通函数的区别? ####

>  *  函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象；
>  *  不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误；
>  *  不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 Rest 参数代替；
>  *  不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数；

#### 7. 如何解决跨域？ ####

>  *  jsonp跨域；
>  *  document.domain+iframe跨域；
>  *  nodejs中间件代理跨域；
>  *  后端在头部信息里面设置安全域名；

#### 8. 严格模式的限制 ####

>  *  变量必须声明后再使用；
>  *  函数的参数不能有同名属性，否则报错；
>  *  不能使用 with 语句；
>  *  禁止 this 指向全局对象；

#### 9. ES6新增 ####

>  *  新增模板字符串；
>  *  箭头函数；
>  *  for-of（用来遍历数据—例如数组中的值）；
>  *  ES6 将 Promise 对象纳入规范，提供了原生的 Promise 对象；
>  *  增加了 let 和 const 命令，用来声明变量；
>  *  还有就是引入 module 模块的概念；

#### 10. attribute 和 property 的区别是什么? ####

>  *  attribute 是 dom 元素在文档中作为 html 标签拥有的属性
>  *  property 就是 dom 元素在 js 中作为对象拥有的属性。
>  *  对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的
>  *  但是对于自定义的属性来说，他们是不同步的

#### 11. let和const 的区别是什么? ####

>  *  let 命令不存在变量提升，如果在 let 前使用，会导致报错；
>  *  如果块区中存在 let 和 const 命令，就会形成封闭作用域；
>  *  不允许重复声明；
>  *  const定义的是常量，不能修改，但是如果定义的是对象，可以修改对象内部的数据；

#### 12. 内存泄漏 ####

>  *  定义：程序中己动态分配的堆内存由于某种原因程序未释放或无法释放引发的各种问题。
>  *  js中可能出现的内存泄漏情况：结果：变慢，崩溃，延迟大等
>  *  js中可能出现的内存泄漏原因：
> 
> 1.  全局变量
> 2.  dom 清空时，还存在引用
> 3.  定时器未清除
> 4.  子元素存在引起的内存泄露

#### 13. script 引入方式? ####

>  *  html 静态 <script> 引入；
>  *  js 动态插入 <script>；
>  *  <script defer> : 异步加载，元素解析完成后执行；
>  *  <script async> : 异步加载，但执行时会阻塞元素渲染；

#### 14. 数组(array)方法 ####

>  *  map : 遍历数组，返回回调返回值组成的新数组
>  *  forEach : 无法 break ，可以用 try/catch 中 throw new Error 来停止
>  *  filter : 过滤
>  *  some : 有一项返回 true ，则整体为 true
>  *  every : 有一项返回 false ，则整体为 false
>  *  join : 通过指定连接符生成字符串
>  *  push / pop : 末尾推入和弹出，改变原数组， 返回推入/弹出项
>  *  unshift / shift : 头部推入和弹出，改变原数组，返回操作项
>  *  sort(fn) / reverse : 排序与反转，改变原数组
>  *  concat : 连接数组，不影响原数组， 浅拷贝
>  *  slice(start, end) : 返回截断后的新数组，不改变原数组
>  *  splice(start,number,value…): 返回删除元素组成的数组，value 为插入项，改变原数组
>  *  indexOf / lastIndexOf(value, fromIndex) : 查找数组项，返回对应的下标
>  *  reduce / reduceRight(fn(prev, cur) ，defaultPrev) : 两两执行，prev 为上次化简函数的return 值，cur 为当前值(从第二项开始)

#### 15. JavaScript 深浅拷贝? ####

>  *  浅拷贝：Object.assign
>  *  深拷贝：可以通过 JSON.parse(JSON.stringify(object)) 来解决

#### 16. 说说异步编程的实现方式? ####

>  *  回调函数
> 
> 1.  优点：简单、容易理解
> 2.  缺点：不利于维护、代码耦合高
> 
>  *  事件监听
> 
> 1.  优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数
> 2.  缺点：事件驱动型，流程不够清晰
> 
>  *  发布/订阅(观察者模式)
> 
> 1.  类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者
> 
>  *  Promise 对象
> 
> 1.  优点：可以利用 then 方法，进行链式写法；可以书写错误时的回调函数
> 2.  缺点：编写和理解，相对比较难
> 
>  *  Generator 函数
> 
> 1.  优点：函数体内外的数据交换、错误处理机制
> 2.  缺点：流程管理不方便
> 
>  *  async 函数
> 
> 1.  优点：内置执行器、更好的语义、更广的适用性、返回的是 Promise、结构清晰
> 2.  缺点：错误处理机制

#### 17. 说说面向对象编程思想? ####

> 基本思想是使用对象，类，继承，封装等基本概念来进行程序设计。  
> 优点：
> 
>  *  易维护
>  *  易扩展
>  *  开发工作的重用性、继承性高，降低重复工作量。
>  *  缩短了开发周期

#### 18. 项目性能优化的方法 ####

>  *  减少 HTTP 请求数；
>  *  减少 DNS 查询；
>  *  使用 CDN；
>  *  避免重定向；
>  *  图片懒加载；
>  *  减少 DOM 元素数量；
>  *  减少 DOM 操作；
>  *  使用外部 JavaScript 和 CSS；
>  *  压缩 JavaScript、CSS、字体、图片等；
>  *  优化 CSS Sprite；
>  *  使用 iconfont；
>  *  多域名分发划分内容到不同域名；
>  *  尽量减少 iframe 使用；
>  *  避免图片 src 为空；
>  *  把样式表放在 link 中；
>  *  把 JavaScript 放在页面底部；

#### 19. 什么是单线程，和异步的关系？ ####

>  *  单线程 ：只有一个线程，只能做一件事
>  *  原因 ： 避免 DOM 渲染的冲突
> 
> 1.  浏览器需要渲染 DOM
> 2.  JS 可以修改 DOM 结构
> 3.  JS 执行的时候，浏览器 DOM 渲染会暂停
> 4.  两段 JS 也不能同时执行（都修改 DOM 就冲突了）
> 5.  webworker 支持多线程，但是不能访问 DOM
> 
>  *  解决方案 ：异步

#### 20. 说说负载均衡？ ####

>  *  单台服务器共同协作，不让其中某一台或几台超额工作，发挥服务器的最大作用
>  *  http 重定向负载均衡：调度者根据策略选择服务器以 302 响应请求，缺点只有第一次有效果，后续操作维持在该服务器 dns 负载均衡：解析域名时，访问多个 ip 服务器中的一个（可监控性较弱）原因 - 避免 DOM 渲染的冲突
>  *  反向代理负载均衡：访问统一的服务器，由服务器进行调度访问实际的某个服务器，对统一的服务器要求大，性能受到 服务器群的数量

#### 21. 作用域链？ ####

> 作用域链可以理解为一组对象列表，包含 父级和自身的变量对象，因此我们便能通过作用域链访问到父级里声明的变量或者函数

#### 22. 什么是原型、原型链、继承？ ####

>  *  所有的函数都有prototype属性（原型）
>  *  所有的对象都有\_\_proto\_\_属性
>  *  在Javascript中，每个函数都有一个原型属性prototype指向自身的原型，而由这个函数创建的对象也有一个proto属性指向这个原型，而函数的原型是一个对象，所以这个对象也会有一个proto指向自己的原型，这样逐层深入直到Object对象的原型，这样就形成了原型链。

#### 23. JS垃圾回收机制是怎样的？ ####

*  概述

> js的垃圾回收机制是为了防止内存泄漏（已经不需要的某一块内存还一直存在着），垃圾回收机制就是不停歇的寻找这些不再使用的变量，并且释放掉它所指向的内存。  
> 在JS中，JS的执行环境会负责管理代码执行过程中使用的内存。

*  变量的生命周期

> 当一个变量的生命周期结束之后，它所指向的内存就会被释放。js有两种变量，局部变量和全局变量，局部变量是在他当前的函数中产生作用，当该函数结束之后，该变量内存会被释放，全局变量的话会一直存在，直到浏览器关闭为止。

*  js垃圾回收方式

> 有两种方式： 标记清除、引用计数
> 
>  *  标记清除：大部分浏览器使用这种垃圾回收，当变量进入执行环境(声明变量）的时候，垃圾回收器将该变量进行了标记，当该变量离开环境的时候，将其再度标记，随之进行删除。
>  *  引用计数：这种方式常常会引起内存的泄露，主要存在于低版本的浏览器。它的机制就是跟踪某一个值得引用次数，当声明一个变量并且将一个引用类型赋值给变量得时候引用次数加1，当这个变量指向其他一个时引用次数减1，当为0时出发回收机制进行回收。

#### 24. 逐进增强和优雅降级 ####

>  *  逐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高版本浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
>  *  优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

#### 25. Map 相关的函数与属性： ####

>  *  Map 对象保存键值对，并且能够记住键的原始插入顺序。
>  *  任何值(对象或者原始值) 都可以作为一个键或一个值。
>  *  Map 是 ES6 中引入的一种新的数据结构，可以参考 [ES6 Map 与 Set][ES6 Map _ Set]。

>  *  map.clear() – 移除 Map 对象的所有键/值对 。
>  *  map.set() – 设置键值对，返回该 Map 对象。
>  *  map.get() – 返回键对应的值，如果不存在，则返回 undefined。
>  *  map.has() – 返回一个布尔值，用于判断 Map 中是否包含键对应的值。
>  *  map.delete() – 删除 Map 中的元素，删除成功返回 true，失败返回 false。
>  *  map.size – 返回 Map 对象键/值对的数量。
>  *  map.keys() - 返回一个 Iterator 对象， 包含了 Map 对象中每个元素的键 。
>  *  map.values() – 返回一个新的Iterator对象，包含了Map对象中每个元素的值 。

--------------------

#### 26. vue优点： ####

>  *  轻量级；
>  *  速度快；
>  *  简单易学；
>  *  低耦合；
>  *  可重用性；
>  *  独立开发；
>  *  文档齐全，且文档为中文文档；

#### 27. Vue中组件传递信息 ####

>  *  vue父组件向子组件传递数据：props；
>  *  子组件向父组件传递事件：$emit；

#### 28. v-show和v-if指令的共同点和不同点？ ####

>  *  相同点：都可以控制dom元素的显示和隐藏；
>  *  不同点：
> 
> 1.  v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
> 2.  v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做
> 3.  v-if有很高的切换开销，是直接将dom元素从页面删除，再次切换需要重新渲染页面，适用于条件不太容易改变的时候
> 4.  v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
> 5.  v-show有很高的初始渲染开销，适用于非常频繁地切换

#### 29. scoped可以限制CSS只在当前组件中起作用 ####

#### 30. <keep-alive></keep-alive>的作用是什么？ ####

> 主要是用于需要频繁切换的组件时进行缓存，不需要重新渲染页面；

#### 31. 如何获取dom？ ####

> 给dom元素加ref='redname'，然后通过this.$refs.refname进行获取dom元素；

#### 32. 说出几种vue当中的指令和它的用法？ ####

>  *  v-model：v-model 默认会利用名为 value 的 prop 和名为 input 的事件，实现双向数据绑定；
>  *  v-on：
> 
> 1.  v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法；
> 2.  v-on指令可以简写为：@；
> 3.  v-on可以监听对个方法，如：v-on="onclink,onbure"；
> 
>  *  v-text：更新元素的innerText；
>  *  v-html：更新元素的innerHTML；
>  *  v-once：执行一次性地插值，当数据改变时，插值处的内容不会更新；
>  *  v-for：能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容；
>  *  v-if：当v-if的值为false时，网页中将不会对此元素进行渲染；
>  *  v-show：
> 
> 1.  v-show也是根据条件展示元素的指令；
> 2.  带有 v-show 的元素始终会被渲染并保留在 DOM 中；
> 3.  v-show 是简单地切换元素的 CSS 属性 display ；

#### 33. vue-loader是什么？它的用途是什么？ ####

>  *  vue文件的一个加载器，将template/js/style转换为js模块；
>  *  用途：js可以写es6，style样式；

#### 34. 为什么用key？ ####

> 给每一个dom元素加上key作为唯一标识，diff算法可以正确的识别这个结点，使页面渲染更迅速；

#### 35. axios及安装？ ####

>  *  vue项目中使用Ajax时需要axios插件；
>  *  下载方式cnpm install axios --save；

#### 36. 请说出vue.cli项目中src目录每个文件夹和文件的用法 ####

>  *  components存放组件；
>  *  app.vue主页面入口；
>  *  index.js主文件入口；
>  *  ass存放静态资源文件；

#### 37. 分别简述computed和watch的使用场景 ####

>  *  所有需要用到计算的都应该使用计算属性。多条数据影响一条数据时使用计算属性，使用场景购物车；
>  *  如果是一条数据更改，影响多条数据时，使用watch，使用场景搜索框；

#### 38. $nextTick的使用 ####

> 在data()中的修改后，页面无法获取data修改后的数据，使用$nextTick时，当data中的数据修改后，可以实时的渲染页面；

#### 39. vue组件中data为什么必须是一个函数？ ####

>  *  因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象；
>  *  组件中的data协程一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，他们值负责各自维护数据，不会造成混乱。二单纯的协程对象形式，就是所有组件实例共用一个data，这样改一个全部都会改变；

#### 40. 渐进式框架的理解 ####

>  *  主张最少；
>  *  可以根据不同的需求选择不同的层级；

#### 41. vue在双向数据绑定是如何实现的？ ####

>  *  vue双向数据绑定是通过数据劫持、组合、发布订阅模式的方式来实现的。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
>  *  核心：关于vue双向数据绑定，其核心是Object.defineProperty()方法；

#### 42. 单方面应用和多页面应用区别及缺点 ####

>  *  单页面应用(SPA)，通俗的说就是指只有一个主页面的应用，浏览器一开始就加载所有的js、html、css。所有的页面内容都包含在这个主页面中。但在写的时候，还是分开写，然后再加护的时候有路由器程序动态载入，单页面的页面跳转，仅刷新局部资源。多用于pc端；
>  *  多页面(MPA)：就是一个应用中有多个页面，页面跳转时是整夜刷新；
>  *  单页面的优点：用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点SPA对服务器压力较小；前后端分离，页面效果会比较酷炫；
>  *  单页面缺点：
> 
> 1.  不利于seo；
> 2.  导航不可用，如果一定要导航需要执行实现前进、后退；
> 3.  初次加载时耗时多；
> 4.  页面复杂度提升很多；

#### 43. Vue项目中为什么要在列表组件中写key，其作用是什么？ ####

> key是给每一个vnode的唯一id，可以依靠key，更准确，更快的拿到oldVnode中对应的vnode节点；
> 
>  *  更准确：因为带key就不熟就地复用了，在sameNode函数a.key === b.key对比中可以避免就地复用的情况。所以会更准确；
>  *  更快：利用key的唯一性生成map对象来获取对应节点，比遍历方式更快；

#### 44. javascript中常见的全局函数有： ####

> 1.  escape()函数，对字符串进行编码；
> 2.  isNaN()函数，检查一个参数是否是非数字值；
> 3.  Number()函数，把对象的值转换为数字；
> 4.  String()函数，把对象的值转换为字符串；
> 5.  encodeURI()函数，把字符串作为URI进行编码；
> 6.  decodeURI()函数，解码某个编码的URL；
> 7.  decodeURIComponent()函数，解码一个编码的URI组件；
> 8.  encodeURIComponent()函数，把字符串编码为URI组件；
> 9.  eval()函数，计算字符串，并执行其代码；
> 10. isFinite()函数，检查参数是否是无穷大；
> 11. parseFloat()函数，解析字符串，返回浮点数；
> 12. parseInt()函数，解析字符串，返回整数；
> 13. unescape()函数，对escape()编码的字符串进行解码；

[Link 1]: https://blog.csdn.net/weixin_53919192/article/details/126696842?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126696842%22%2C%22source%22%3A%22weixin_53919192%22%7D
[HTML]: https://blog.csdn.net/weixin_53919192/article/details/125594197
[CSS]: https://blog.csdn.net/weixin_53919192/article/details/125611018
[JavaScript]: https://blog.csdn.net/weixin_53919192/article/details/125619799
[JavaScript_BOM_DOM]: https://blog.csdn.net/weixin_53919192/article/details/125649804
[Link 2]: https://blog.csdn.net/weixin_53919192/category_11897910.html?spm=1001.2014.3001.5482
[JS1 _JS2]: https://blog.csdn.net/weixin_53919192/article/details/126680394?spm=1001.2014.3001.5501
[JS3 _JS4]: https://blog.csdn.net/weixin_53919192/article/details/126684401?spm=1001.2014.3001.5501
[javaScript]: https://blog.csdn.net/weixin_53919192/article/details/126672031?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126672031%22%2C%22source%22%3A%22weixin_53919192%22%7D
[JS5 _JS6]: https://blog.csdn.net/weixin_53919192/article/details/126693603?spm=1001.2014.3001.5501
[JS7 _JS8]: https://blog.csdn.net/weixin_53919192/article/details/126693985?spm=1001.2014.3001.5501
[ES6 Map _ Set]: https://www.runoob.com/w3cnote/es6-map-set.html