总结
前端资料汇总
-
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
-
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
-
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
-
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！ 喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！
1.3、属性值是 Boolean
'name|1': boolean
生成一个随机值，真 假 概率都是一半。
//使用
'isLike|1': true
生成 isLike 的值可能为 true 、false。概率是一样的。
'name|min-max': value
随机生成一个布尔值，
值为 value 的概率是 min / (min + max)，
值为 !value 的概率是 max / (min + max)。
//使用
'like|1-5': true
生成 true 的 概率为 1/6 。生成 false 的概率为 5/6
1.4、属性值是对象 Object
生成一个指定属性个数的对象。
'obj|num': object
从属性值 object 中，随机选取 num 个属性。
//使用
'obj|2': {
a: '1',
b: '2',
c: '3'
}
运行结果可能为：
{a: "3", b: "2"}
{c: "3", b: "2"}
{a: "3", c: "2"}
生成一个属性个数随机的对象。
'obj|min-max': object
从 object 中 随机选取 min 到 max 个属性，生成一个对象。
//使用
'obj|1-2': {
a: '1',
b: '2',
c: '3'
}
运行结果可能为：
{a: "3"}
{b: "3"}
{c: "3"}
{a: "3", b: "2"}
{c: "3", b: "2"}
{a: "3", c: "2"}
1.5、属性值是数组 Array
取数组中某个元素作为结果。
'arr|1':array
从属性值 array 中随机选取 1 个元素作为结果返回
//使用
'arr|1':[1,2,3]
运行结果为：1、2、3 三种结果
生成新数组。
'arr|min-max': array
通过重复 array 的元素生成新数组，重复次数 min 到 max 。
//使用
'arr|1-2': [ 1,2,3 ]
运行结果为：[ 1,2,3 ] 或 [ 1,2,3,1,2,3 ]
'arr|num': array
通过重复 array 的元素生成新数组，重复次数 num 次 。
//使用
'arr|2': [ 1,2,3 ]
运行结果为： [ 1,2,3,1,2,3 ]
1.6、属性值是函数 Function
'name':function
function 返回值作为最终的属性值。
//使用
'name': ()=>{
return 'web learn'
}
运行结果为 web learn
在数据占位符中，属性值是函数有重要的意义。待会会重点解释。
1.7、属性值是正则 RegExp
'name': regexp
根据正则表达式 regexp 反向生成可以匹配的字符串。用于生成自定义格式的字符串
//使用
'reg': /[a-zA-Z0-9]2/
生成大小写字母和数字任意组成的长度为 2 的字符串
'reg':/\d{5,10}/
生成任意的 5 到 10 位的数字字符串
二、数据占位符定义规范
===========
数据占位符只是在属性字符串中占个位置，并不会出现在最终的属性值中。
使用格式：
@占位符
@占位符(参数 [, 参数])
//使用
'name': "@name",
生成英文名，如：Edward Rodriguez
//带有参数
'first':"@name(middle)",
生成带有中间名的英文名 。如：Ruth Paul Robinson
'name': "@cname",
生成中文名
注意：
-
用 @ 来标识后边的字符串是标识符。
-
占位符引用的都是 mock.Random 中的方法。
-
如果需要扩展自定义占位符，可使用 Mock.Random.extend()。
-
占位符也可以引用 “数据模板” 中的内容。
-
占位符优先引用数据模板中的属性。
-
支持相对和绝对路径。
Mock.mock('@string("number", 5)')
生成一个五位数的字符串
Mock.mock('@color')
生成随机的颜色
//等同于
Random.color()
三、使用举例
======
创建一个 api 接口，返回一个随机生成的数组：
export default [
{
url: "/api/list",
method: "post",
response: ({ url, body }) => {
// body 是post方法时传入的数据
// url 是请求接口，get方法时，也包含传递的参数
return {
code: 200,
message: "ok",
//生成一个数组
// 长度介于 10 到 20 之间
'list|10-20': [{
name:'@cname' //生成中文名
}]
};
}
}
]
占位符引用的都是 Mock.random 内的方法，所以我们可以把上述代码更改为：
'list|10-20': [{
name:Random.cname() //生成中文名
}]
此时我们再查阅的时候，就发现生成的数组内，名字都是一模一样的。如果我们想生成不一样的姓名，该如何解决呢？
解决办法：把属性值更改为函数，将函数的返回值作为最终结果。
'list|10-20': [{
判断
回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。
第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。
第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。
前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！
