面试相关list

1、纯函数？
如果函数的调用参数相同，则永远返回相同的结果。它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。

1. 数组排序比较
   看以下数组，在各种排序操作后都下输出什么？

const arr1 = [‘a’, ‘b’, ‘c’];
const arr2 = [‘b’, ‘c’, ‘a’];

console.log(
arr1.sort() === arr1,
arr2.sort() == arr2,
arr1.sort() === arr2.sort()
);
答案和解析
答案： true, true, false

这里有几个概念在起作用。首先，array 的 sort 方法对原始数组进行排序，并返回对该数组的引用。这意味着当你调用 arr2.sort() 时，arr2 数组内的对象将会被排序。

当你比较对象时，数组的排序顺序并不重要。由于 arr1.sort() 和 arr1 指向内存中的同一对象，因此第一个相等测试返回 true。第二个比较也是如此：arr2.sort() 和 arr2 指向内存中的同一对象。

在第三个测试中，arr1.sort() 和 arr2.sort() 的排序顺序相同；但是，它们指向内存中的不同对象。因此，第三个测试的评估结果为 false。

2. set 的对象

把下面的 Set 对象转成一个新的数组，最后输出什么？

const mySet = new Set([{ a: 1 }, { a: 1 }]);
const result = […mySet];
console.log(result);
答案和解析
答案： [{a: 1}, {a: 1}]

尽管 Set 对象确实会删除重复项，但是我们用 Set 创建的两个值是对内存中不同对象的引用，尽管它们有相同的键值对。这与 { a: 1 } === { a: 1 } 的结果为 false 的原因相同。

如果集合是用对象变量创建的，例如 obj = {a: 1}，new Set([obj，obj]) 将会只有一个元素，因为数组中的两个元素都引用了内存中的同一对象。

3.那你知道Vue3.x响应式数据原理吗？

(还好我有看，这个难不倒我)

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

（很简单啊）

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理，

这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

面试官抬起了头。心里暗想

4.hash路由和history路由实现原理说一下

location.hash的值实际就是URL中#后面的东西。

history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()。

5、vuex是什么？怎么使用？哪种功能场景使用它？

只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。
在main.js引入store，注入。新建了一个目录store，…… export 。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
1.png

state
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations定义的方法动态修改Vuex 的 store 中的状态或数据。
getters
类似vue的计算属性，主要用来过滤一些数据。
action
actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

const store = new Vuex.Store({ //store实例
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit(‘increment’)
}
}
})
modules
项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

const moduleA = {
state: { … },
mutations: { … },
actions: { … },
getters: { … }
}
const moduleB = {
state: { … },
mutations: { … },
actions: { … }
}

const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})

**

6、虚拟 DOM 实现原理？

**
虚拟 DOM 的实现原理主要包括以下 3 部分：
①用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
②diff 算法 — 比较两棵虚拟 DOM 树的差异；
③pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

7.css只在当前组件起作用

答：在style标签中写入scoped即可 例如：

8.v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

9.route 和 router的区别

route 是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

10.vue.js的两个核心是什么？

答：数据驱动、组件系统

11.vue几种常用的指令

答：v-for 、 v-if 、v-bind、v-on、v-show、v-else

12.vue常用的修饰符？

答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用

13. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

浏览器 内核
IE trident内核
Firefox（火狐） gecko内核
Safari webkit内核
Opera 以前是presto内核，现已改用Google Chrome的Blink内核
Chrome Blink内核 （基于webkit, Google与Opera Software共同开发）
**

14.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些

**地方会有缓存处理？
dns缓存，cdn缓存，浏览器缓存，服务器缓存。

**

15.rgba()和opacity的透明效果有什么不同？

**
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

**

16.BFC是什么?

**
BFC（块级格式化上下文），一个创建了新的BFC的盒子是独立布局的，盒子内元素的布局不会影响盒子外面的元素。
在同一个BFC中的两个相邻的盒子在垂直方向发生margin重叠的问题
BFC是指浏览器中创建了一个独立的渲染区域，该区域内所有元素的布局不会影响到区域外元素的布局，这个渲染区域只对块级元素起作用

**

17.html常见兼容性问题？

**
双边距BUG float引起的 使用display
3像素问题 使用float引起的 使用dislpay:inline -3px
超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
Ie z-index问题 给父级添加position:relative
Png 透明 使用js代码 改
Min-height 最小高度 ！Important 解决’
select 在ie6下遮盖 使用iframe嵌套
为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
IE5-8不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE 8*/}12345
IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

**

18. 块级元素有哪些?行内元素有哪些?常见的空元素有哪些？

**
块级元素有：
address - 地址
blockquote- 块引用
center - 举中对齐块
dir - 目录列表
div- 常用块级容易，也是 css layout 的主要标签
dl - 定义列表
fieldset- form 控制组
form - 交互表单
h1 - 大标题
h2- 副标题
h3 - 3 级标题
h4- 4 级标题
h5 - 5 级标题
h6- 6 级标题
hr - 水平分隔线
isindex - input prompt
menu- 菜单列表
noframes- frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容)
noscript - 可选脚本内容（对于不支持 script 的浏览器显示此内容）
ol- 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表

行内元素有：
a - 锚点
abbr - 缩写
acronym - 首字
b- 粗体 (不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码 (在引用源码的时候需要)
dfn- 定义字段
em - 强调
font - 字体设定 (不推荐)
i- 斜体
img- 图片
input- 输入框
kbd - 定义键盘文本
label- 表格标签
q - 短引用
s- 中划线 (不推荐)
samp - 定义范例计算机代码
select- 项目选择
small - 小字体文本
span- 常用内联容器，定义文本内区块
strike - 中划线
strong- 粗体强调
sub - 下标
sup - 上标
textarea- 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量

常见的空元素有：

---

可变元素：
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet - java applet
button - 按钮
del- 删除文本
iframe - inline frame
ins - 插入的文本
map - 图片区块(map)
object- object对象
script- 客户端脚本

常见的空元素：

---

鲜为人知的是：

**

19. 列出一些单元测试框架

**
下面是一些最流行的JS单元测试框架:

Unit.js
Jasmine
Karma
Chai
AVA
Mocha
JSUnit
QUnit
Jest

20.面试的时候被问到elementui皮肤的原理

之前好像做过动态皮肤的更换设置。但是吧，忘了。。。哎，后期看源码和资料大概了解了，现在记录一下吧

它主要是通过更改一个主颜色color-primary 然后通过她自己设置的一些换色模块引用这里不同的mix(color1,color2,xx%) class 实现主题色的更改。

tips：scss mix( $color1, $color2, $weight )

Mix 函数是将两种颜色根据一定的比例混合在一起，生成另一种颜色。其使用语法如下：

mix( $color1, $color2, $weight )

$color-1 和 $color-2 指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。

$weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%。

21.伪类 伪元素

22.history.pushState，history.replaceState，popstate区别

history.pushState：是H5的方法，用于向history.state中添加url信息

history.replaceState：是H5的方法，用于向history.state中替换url信息

popstate：是H5的事件，用于监听go和back事件，history.pushState()或history.replaceState()不会触发popstate事件
参考文献：
https://blog.csdn.net/weixin_34112900/article/details/93747803