前端面试题

1、js的数据类型有哪些 

基本数据类型和引用数据类型
基本数据类型包括number string null undefind 布尔类型  es6新增的数据类型symbol
引用数据类型包括 数组  接口 类

2、跨域问题：

协议、域名、端口其中个与url不一致就会出现跨域问题、是因为浏览器的同源策略限制，
解决：服务器设置Access-Control-Allow-Origin响应头后，浏览器就会允许跨域

3、es6箭头函数：

任何可以使用函数表达式的地方，都可以使用箭头函数，并且它的语法比传统的函数表达式更加简洁。
箭头函数没有自己的this，只会继承在自己作用域的上一层this。所以箭头函数中this的指向在它定义时就已经确定了，之后不会改变。
call、apply、bind等方法也不能改变箭头函数中this的指向。
箭头函数没有自己的this，没有prototype属性，所以也就不能用作构造函数，即不可以对箭头函数使用new命令，否则会抛出错误。

4、怎么判断数据类型：

typeof判断基本数据类型
intanceof判断引用数据类型（因丝ten丝of）
Object.prototype.toString.call()  可以判断所有的数据类型

5、数组中常用的方法有哪些

push、pop（删除末尾元素）、shift（删除开头元素）、unshift
reverse、splice、forEach、map、filter、reduce(v数组中的值合并为一个值)

6、得到最大值：arr.max()   sort  循环  reduce

数组去重：new set、循环去重(循环两遍、sort前一个后一个值比较、filter在原始数组中的第一个索引==当前索引值)
vue传值：props父传子  set自定义函数子传父

7、数组中的forEach 和map 的区别？（必会）

forEach 和map 的相同点
相同点 都是循环遍历数组中的每一项
forEach 和map 方法里每次执行匿名函数都支持 3 个参数，参数分别是 item（当前每一项），
index（索引值），arr（原数组）
匿名函数中的 this 都是指向 window 只能遍历数组 都不会改变原数组 区别 map 方法
1.map 方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值
2.map 方法不会对空数组进行检测，map 方法不会改变原始数组。
3.浏览器支持：chrome、Safari1.5+、opera 都支持，IE9+, 若 arr 为空数组，则 map 方法返
回的也是一个空数组。
forEach 方法
1.forEach 方法用来调用数组的每个元素，将元素传给回调函数
2.forEach 对于空数组是不会调用回调函数的。 无论 arr 是不是空数组，forEach 返回的
都是 undefined。这个方法只是将数组中的每一项作为 callback 的参数执行一次

8、mvvm 和 mvc 的区别

mvvm：数据模型-视图-视图-数据模型
mvc：数据模型-视图-控制器
mvc是单向通信，数据与视图必须通过controller来进行承上启下
mvvm与mvc最大的区别就是，在c的基础上加了一层vm，弱化了c的概念，vm存在的目的是为了抽离这个controller中展示的一个业务逻辑，并不是替代
mvvm主要解决mvc中大量的一个dom操作，使得我们这个页面的渲染性能降低，加载速度变慢，影响用户体验
所以如果需要大量操作就使用mvvm会更加便捷，如果更多的是数据变化的话就使用mvc

9、vue2与vue3双向绑定原理不同

vue2是通过Object.definedProperty()的一个get和set来做数据挟持，Object.definedProperty()它会去遍历每一个属性，给它加上get和set方法，从而达到数据双向绑定
vue3是使用ES6的proxy(破儿瑟)代理的方法进行实现
是否支持碎片:
vue2 template必须使用一个根标签，vue3可以没有
API类型不同:
vue2数据放在data 方法放在method(my瑟的)，vue3是使用组合式API，可以将一个功能的所有代码放到一块，便于代码维护更简介
vue3相较于vue2是去除beforeCreate和created，使用steup替代了

10、webpack构建流程：

1、初始化参数：从配置文件和 Shell语句中读取与合并参数，得出最终的参数
2、开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译
3、确定入口：根据配置中的 entry 找出所有的入口文件 
4、编译模块：从入口文件出发，调用所有配置的Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5、完成模块编译：在经过第金步使上oader 翻译完所有模块后，得到了每个模块被翻译后的最終内寮以及它们之间的依赖关系
6、输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会
7、输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统，在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用
口述：
webpack启动后，从entry开始，递归解析entry依赖的所有model，根据model.rules里的配置loader进行相应的转换处理，对model转换后，解析当前model依赖的其他模块，解析的结果是一个一个的chunk，最后webpack会将所有的chunk转换成文件输出的output，在整个构建流程中，webpack会在恰当的时机执行plugin定义的插件，完成plugin的任务
webpack里面主要的配置项:
entry：模块化入口，使得源文件加入到构建流程中
output：配置如何输出最终地方
moudel：配置各种类型的模块的处理规则
pulgin：配置扩展插件的
devServer：实现本地服务：包括http  模块热替换  source  map等服务

’

11、computed和watch的区别

1、computed是计算属性；watch是监听，监听data中的数据变化。
2、computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。
3、computed不支持异步，有异步操作时无法监听数据变化；watch支持异步操作。
4、computed第一次加载时就监听；watch默认第一次加载时不监听。
5、computed中的函数必须调用return；watch不是。
6、使用场景：
computed：一个属性受到多个属性影响，如：购物车商品结算。
watch：一个数据影响多条数据，如：搜索数据。
数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。