2021-06-24

前端常见面试一

怎么判断一个值是不是数组

• 数组自带方法 Array.isArray(arr);//返回true或false
• 判断该变量的构造函数是否为Array（arr.constructor == Array）
• 通过Object.prototype.toString
• 通过instanceof判断 （arr instanceof Array）

怎么吧字符串类型数字转换成Number

• 转换函数 parseInt（）强制转换成整数
• parseFloat（）解析成一个字符串，并返回一个浮点数
• 强制转换Number（）
• 利用js变量弱类型转换

前端安全(浏览器安全)

• XSS
  基本概念：XSS，也称跨域脚本攻击，英文名 Cross-site scripting
  如何攻击：向页面注入恶意的标签或 js 代码来攻击网站。
  如何防御：让恶意插入的标签或js代码不可执行，如转义输入输出的内容
• CSRF
  基本概念：CSRF，也称跨站请求伪造，英文名 Cross-site request forgery
  如何攻击：利用用户的登录态发起恶意请求。
  如何防御：
  Get 请求不对数据进行修改
  不让第三方网站访问到用户 Cookie
  阻止第三方网站请求接口
  请求时附带验证信息，比如验证码或者 token

VUE2和VUE3的区别

• 重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势：可直接监听数组类型的数据变化，监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升；可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行；直接实现对象属性的新增/删除

ES6的新特新，各自说明他们的作用

• const和let变量
  const和let 是块级作作用域，不会发生变量提升，var要发生变量提升，let声明的变量可以重新赋值，但是不能再同一作用域内重新声明；const声明的变量必须赋值初始化，但是不能在同一作用域重新赋值，且不能再修改，如果是复合类型数据可修改该；

• 模板字面量
  模板字面量有到引号（``）里面可以包含${expression}表示占位符；

• 解构
  可以解构从数组和对象提取值并赋给独特的变量

• 对象字面量简写
  使用和所分配的变量名称相同的名称初始化对象时如果属性名称和所分配的变量名称一样，那么就可以从对象属性中删掉这些重复的变量名称

• for…of循环

• 展开运算符（…）

• 剩余参数（…）

• 箭头函数

• this的指向

• 默认参数函数

• class类
  javascript中类其实只是function，方法之间不能使用，不用逗号区分属性和方法
  静态方法：在关键字前加 static
  关键字class带来其他基于类的语言的很多思想,但是没有向javascript中 添加此功能
  javascript类实际上还是原型继承
  创建javascript类的新实例时必须使用new关键字

• super 和 extends

配置过webpack吗？怎么配的？说说对loader的了解？

• 有哪些常见的loader？他们解决什么问题？
  file-loader：把文件输出到一个文件夹中，在代码中通过相对URL去引用输出文件
  url-loader：和file-loader相似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中区
  source-map-loader：加载额外的Source Map文件，以便断点测试
  image-loader：加载并且压图片文件
  babel-loader：把Es6转成Es5
  css-loader：加载加载css，支持模块化、压缩、文件导入等特性
  style-loader：把css代码注入javaScript中，通过DOM操作去加载CSS
  eslint-loader：ESLint检查javaScript代码

• 有哪些常见的Plugin？他们解决什么问题？
  define-plugin：定义环境变量
  commons-chunk-plugin：提取公共代码
  uglifyjs-weback-plugin：通过UglifyES压缩ES6代码

• loader和plugin的不同
  不同的作用
  loader用作加载器，webpack将一切文件视为模块，但是webpack原生只能解析js文件，如果想将其他文件也打包，就需要用到loader。所以loader的作用是让webpack拥有了加载和解析非js文件的能力。
  plugin意为插件。Plugin可以扩展wepack的功能，让wepack具有更多的灵活性。在wepack运行的生命周期会广播出许多事件，Plugin可以监听这些事件，在合适的时机通过webpack提供的api改变输出结果。
  不同的用法
  Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。 类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）
  Plugin在plugins中单独配置。 类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入

  webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全
  Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

  初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
  开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
  确定入口：根据配置中的 entry 找出所有的入口文件；
  编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
  完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
  输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
  输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
  在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

性能优化做了那些处理？

• 优化DOM
  删除不必要的代码和注释等，压缩代码减少压缩时间

• 优化CSS
  尽量用公共样式，避免使用calc计算属性
  尽量不使用内联

• 优化JS
  使用async异步解析等
  尽量使用预加载，DNS预解析

• 事件委托
  大量减少内存占用，减少时间注册，新增元素实现动态绑定事件

• 渲染后 防抖节流

同时请求多个接口，拿到所有返回数据在做处理，你会怎么做？

• 使用promise 再用promiseAll 拿到返回的所有数据，或者用async awite

promise all 和asyce awite 哪个处理更快？

promise all 更快 awite 要等上一个结果返回才会进行下一步，promise那个那个更快返回那个，可以说是他们在同时一起执行

同源策略

• 所谓同源是指"协议+域名+端口"三者相同

怎么解决跨域？

uniapp

请求接口的时候怎么配置请求头的“Content-Type”；

• Content-Type 的作用是让服务器端对 post 请求中请求体 entity body 中的数据进行解码，获取到对应的数据格式。

怎么理解MVVM和MVC

class有哪些特性

强调文本 强调文本

加粗文本 加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

• 项目

  • 项目
    | | |
    |–|--|
    | | |

    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	'Isn't this fun?'	‘Isn’t this fun?’
Quotes	"Isn't this fun?"	“Isn’t this fun?”
Dashes	-- is en-dash, --- is em-dash	– is en-dash, — is em-dash

创建一个自定义列表

Markdown

Text-to- HTML conversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。¹

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma (n)=(n-1)!\forall n\in \mathbb{N}$ 是通过欧拉积分

$$\Gamma (z)={\int }_0^{\infty }{t}^{z-1}{e}^{-t}dt.$$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

• 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

• 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

• 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. 注脚的解释 ↩︎