前端面试题19道

1.为什么组件中的data为什么是一个函数
如果是对象的话每次同个组件被复用后，会创建多个实例，但是函数的话每个函数独有相应的作用域，多次复用互不干扰

2.同源策略：域名、协议、端口相同
跨域解决：1.jsonp：（动态创建script标签通过src属性达成解决，src属性是没有跨域限制的）只能解决get请求
2.cors：通过在服务器上设置cors允许其他服务器的请求
3.接口代理：通过代理服务器配置来实现，在vue中可以在vue.config.js中配置poxy文件

3.v-for中的key的作用：主要为了高效的更新虚拟DOM，在做对比时没有key的话，从第一个一一比较如果有不同的的从不同的那个数据以后全部重新渲染，有key的话从第一个一一比较如果有不同的的从不同的从最后的一行元素进行对比只会重新渲染那个不同的数据

4. 谈谈this的理解：1.在全局下默认指向window 2.函数中的this，会通过调用这个函数所在的作用域的this的指向会不同 3.在实例化对象的this.会指向new实例化的对象 4.箭头函数是没有this指向的，this会指向到箭头函数上一层作用域

 

6.前端性能优化：1.资源的合并与压缩
2.图片拼接和压缩
3.前端自动化的构造实现压缩与合并
4.懒加载
5.预加载：资源使用前提前请求，资源在使用时从缓存中加载
6.浏览器存储
7.缓存策略：缓存、DNS缓存、CDN部署与缓存

7.Vue和react的区别：1.vue是双向数据绑定，react是单向数据流
2.Vue是通过一种拓展的HTML语法（template）进行渲染，React 是通过JSX渲染模板
3.vueX和Redux区别

在 Vuex 中，$store?被直接注入到了组件实例中，因此可以比较灵活的使用：

使用?dispatch?和?commit?提交更新

通过?mapState?或者直接通过?this.$store?来读取数据

在 Redux 中，我们每一个组件都需要显示的用?connect?把需要的?props?和?dispatch?连接起来。

另外 Vuex 更加灵活一些，组件中既可以?dispatch?action 也可以?commit?updates，
而 Redux 中只能进行?dispatch，并不能直接调用 reducer 进行修改。

从实现原理上来说，最大的区别是两点：

Redux 使用的是不可变数据，而Vuex的数据是可变的。
Redux每次都是用新的state替换旧的state，而Vuex是直接修改

Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，
而Vuex其实和Vue的原理一样，是通过?getter/setter来比较的（如果看Vuex源码会知道，其实他内部直接创建一个Vue实例用来跟踪数据变化

8.ES6新特性：1.let const:let 表示申明变量。const 表示申明常量。块级作用域与函数作用域。任何一对花括号（｛和｝）中的语句集都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域
2.模板字符串``：可以使用反引号``来进行字符拼接。${}
3.解构：可以使用{}来对数组和对象进行解构。
4.函数的参数默认值：函数传参可以有默认值
5. ...：展开语法：迭代器 (Iterator)是按照一定的顺序对一个或多个容 器 中的元素行进遍历的一种机制
6.箭头函数：不需要 function 关键字来创建函数，省略 return 关键字，this始终指向函数申明时所在作用域下的this值
7.for of:for of遍历的是键值对中的值,for in遍历的是键值对中的键
8.class类：ES6的class不是新的对象继承模型，它只是原型链的语法糖表现形式。
9.导入improt ，导出export default
10.promise：解决了回调函数的回调地狱
<script>
new Promise((resolve,reject) => {
setTimeout(function() {
resolve('成功了！')
},1000)
// reject("失败了，wuwu")
}).then(data => {
console.log(data)
}).catch(err => {
console.log(err)
})
</script>
11.async/await
12.Symbol：新的数据类型
13.Set集合：去重

9.HTML语义化：通过使用包含语义的标签(如h1-h6)恰当地表示文档结构

10.为什么需要语义化：1.去掉样式后页面呈现清晰的结构
2.便于团队项目的可持续运作及维护

11.简述一下你对HTML语义化的理解？
1.用正确的标签做正确的事情。

2.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

3.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

12.面向对象编程的特点

抽象：抓住核心问题

封装：只能通过对象来访问方法

继承：从已有对象上继承出新的对象

多态：多对象的不同形态
13.对象的组成

属性：对象下面的变量叫做对象的属性

方法：对象下面的函数叫做对象的方法

14.闭包的原理：函数执行后返回结果是一个内部函数，并被外部变量所引用，如果内部函数持有被执行函数作用域的变量。即形成了闭包
5.闭包：外层函数包裹内层函数和变量，调用外层函数获得内层函数对象，外层函数作用域无法释放，被内层函数引用无法被销毁才形成的闭包。 保护变量不被全局污染 解决闭包：将变量赋值为null

15.闭包的优点：
1、可以从内部函数访问外部函数的作用域中的变量，且访问到的变量长期驻扎在内存中，可供之后使用。

2、避免变量污染全局。

16.闭包的缺点：
1、对内存消耗有负面影响，因内部函数保存了对外部变量的引用，导致无法被垃圾回收，增大内存使用量，所以使用不当会导致内存泄漏。

17。应用场景
1、模块封装，为了防止变量污染全局

18.原型链：在当前的实例化对象中，查找属性，查找到了返回，没有查找到的话，他就会一层一层的往上找先找obj. __proto__，再找到obj构造函数的prototype并且查找上面的属性和方法，找到后返回，最后还是没有找到object.prototype.__proto__ ===null的话就结束了查找

19.MVC和MVVM设计模式：
MVC：简单来说就是，数据、视图、逻辑进行分层，实现解耦。

MVVM：是Model-View-ViewMode模式的简称。由模型(Model)、视图(View)、视图模型(ViewModel)三部分组成，比MVC更加释放控制器臃肿，将一部分逻辑(耗时，公共方法，网络请求等)和数据的处理等操作从控制器里面搬运到ViewModel中。

MVVM的特点：

低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。可重用性。可以把一些视图的逻辑放在ViewModel里面，让很多View重用这段视图逻辑。独立开发。开发人员可以专注与业务逻辑和数据的开发(ViewModel)。设计人员可以专注于界面(View)的设计。

MVVM另一个重要特性，双向绑定数据