primise

最新推荐文章于 2023-01-28 18:14:10 发布

qq_42962195

最新推荐文章于 2023-01-28 18:14:10 发布

阅读量949

点赞数 1

文章标签： promise

本文链接：https://blog.csdn.net/qq_42962195/article/details/103454526

版权

1.primise

（1）promise出现的原因
当我们需要发送多个异步请求并且每个请求之间需要相互依赖那这时我们只能以嵌套方式来解决形成 “回调地狱”
请求1(function(请求结果1){
请求2(function(请求结果2){
请求3(function(请求结果3){
请求4(function(请求结果4){
请求5(function(请求结果5){
请求6(function(请求结果3){
…
})
})
})
})
})
回调地狱带来的负面作用有以下几点：
代码臃肿。
可读性差。
耦合度过高，可维护性差。
代码复用性差。
容易滋生 bug。
只能在回调里处理异常。
（2）什么是Promise
Promise 是异步编程的一种解决方案
new Promise(请求1)
.then(请求2(请求结果1))
.then(请求3(请求结果2))
.then(请求4(请求结果3))
.then(请求5(请求结果4))
.catch(处理异常(异常信息))
（3）Promise使用
Promise 是一个构造函数， new Promise 返回一个 promise对象接收一个excutor执行函数作为参数, excutor有两个函数类型形参resolve reject
const promise = new Promise((resolve, reject) => {
// 异步处理
// 处理结束后、调用resolve 或 reject
});

1.性能优化(至少5条)

	   （1）减少 HTTP 的请求数量可以很大程度上对网站性能进行优化
	   （2）浏览器在加载 HTML 内容时，是将 HTML 内容从上至下依次解析，解析到 link 或者 script 标签就会加载 href 或者 src 对应链接内容，为了第一时间展示页面给用户，就需要将 CSS 提前加载，不要受 JS 加载影响。一般情况下都是 CSS 在头部，JS 在底部。
	    （3）减少 Reflow，如果需要在 DOM 操作时添加样式，尽量使用 增加 class 属性，而不是通过 style 操作样式。
	    （4）减少 DOM 操作
	    （5）采用 lazyLoad,使用懒加载
	    （6）资源合并与压缩

2.纯前端怎么解决跨域(应该是前端解决跨域是没意义的，没意思的那就说说web安全)

[https://segmentfault.com/a/1190000011145364?utm_source=tag-newest](https://segmentfault.com/a/1190000011145364?utm_source=tag-newest)
(1)我们可以通过动态创建script，再请求一个带参网址实现跨域通信。
2.）jquery ajax：

	$.ajax({
	    url: 'http://www.domain2.com:8080/login',
	    type: 'get',
	    dataType: 'jsonp',  // 请求方式为jsonp
	    jsonpCallback: "handleCallback",    // 自定义回调函数名
	    data: {}
	});
	3.）vue.js：
	
	this.$http.jsonp('http://www.domain2.com:8080/login', {
	    params: {},
	    jsonp: 'handleCallback'
	}).then((res) => {
	    console.log(res); 
	})

sql注入
、XSS 跨脚本攻击，XSS攻击方式是往Web页面插入恶意的 JavaScript 代码，
CSRF（Cross-site request forgery）是跨站请求伪造。，CSRF是通过伪装来自受信任用户，在受信任的网站进行请求，盗取信息。其实就是攻击者盗用了受害者的身份，以受害者的名义向网站发送恶意请求。

3.js存储方式cookie/sessionStorage/localStorage/indexedDB区别用法

https://blog.csdn.net/qq_29132907/article/details/80389398

4.浏览器从加载到渲染的过程，比如输入一个网址到显示页面的过程(三次握手和四次挥手)，

https://blog.csdn.net/weixin_43322208/article/details/89457720
总体来说分为以下几个过程:

DNS解析
TCP连接（三次握手）
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束

三次握手
第一次握手：建立连接时，客户端发送syn包（syn=x）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。

第二次握手：服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（syn=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；

第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=y+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

四次挥手
当数据传送完毕，需要断开 TCP连接，此时发起 TCP 四次挥手。
1、第一次挥手：由浏览器发起，发送给服务器，我请求报文发送完了，你准备关闭吧；
2、第二次挥手：由服务器发起，告诉浏览器，我接收完请求报文，我准备关闭，你也准备吧；
3、第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完毕，你准备关闭吧；
4、第四次挥手：由浏览器发起，告诉服务器，我响应报文接收完毕，我准备关闭，你也准备吧；

5.rem的## 标题原理

https://www.cnblogs.com/leaf930814/p/9059340.html

1.数组的api以及indexOf/includes/filter/has/some/Map/Set/之前的区别

https://blog.csdn.net/qq_36773704/article/details/88954808

2.ES6/7/8

https://juejin.im/post/5b9cb3336fb9a05d290ee47e
es6:
类
模块化
箭头函数
函数参数默认值
模板字符串
解构赋值
延展操作符
对象属性简写
Promise
Let与Const
es7:
includes()
指数操作符
es8:
async/await
Object.values()
Object.entries()
String padding
函数参数列表结尾允许逗号
Object.getOwnPropertyDescriptors()

3.常见的设计模式有哪些？分别怎么实现，

		JS设计模式一：工厂模式
		jS设计模式二：单例模式
		JS设计模式三：模块模式
		JS设计模式四：代理模式
		JS设计模式五：职责链模式
		JS设计模式六：策略模式
		JS设计模式七：发布-订阅模式

4.父组件可以监听到子组件的生命周期吗？

					比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：
			// Parent.vue
			<Child @mounted="doSomething"/>
			    
			// Child.vue
			mounted() {
			  this.$emit("mounted");
			}
			复制代码以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：
			//  Parent.vue
			<Child @hook:mounted="doSomething" ></Child>
			
			doSomething() {
			   console.log('父组件监听到 mounted 钩子函数 ...');
			},
			    
			//  Child.vue
			mounted(){
			   console.log('子组件触发 mounted 钩子函数 ...');
			},

5.组件中 data 为什么是一个函数？

	因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

6.Vue 组件间通信有哪几种方式？

（1）props / $emit 适用父子组件通信（2）ref 与 $parent / $c h i l d r e n 适用父子组件通信（ 3 ） E v e n t B u s （$ emit / $o n ）适用于父子、隔代、兄弟组件通信（ 4 ）$ attrs/$listeners 适用于隔代组件通信（5）provide / inject 适用于隔代组件通信（6）Vuex 适用于父子、隔代、兄弟组件通信，

7.使用过 Vue SSR 吗？说说 SSR？

SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染

8.vue-router 中常用的 hash 和 history 路由模式实现原理吗？

      （1）hash 模式的实现原理
	早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 '#search'：
	https://www.word.com#search
	复制代码hash  路由模式的实现主要是基于下面几个特性：
	
	URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；
	hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；
	可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用  JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；
	我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。
	
	（2）history 模式的实现原理
	HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：
	window.history.pushState(null, null, path);
	window.history.replaceState(null, null, path);
	复制代码history 路由模式的实现主要基于存在下面几个特性：
	
	pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；
	我们可以使用 popstate  事件来监听 url 的变化，从而对页面进行跳转（渲染）；
	history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

9.Vue 框架怎么实现对象和数组的监听？

如果只是监听数组列表项的增减，直接对数组进行监听就好了
watch:{
data (newVal,oldVal) {

}
}
如果是要对数组列表项的内容是否发生改变做监听，需要加上一个deep:true
data: {
handler(newVal, oldVal) {
console.log(‘深度监听’, newVal, oldVal)
},
deep: true
}

10.Proxy 与 Object.defineProperty 优劣对比

https://blog.csdn.net/sinat_17775997/article/details/84233822
Proxy 的优势如下:
Proxy 可以直接监听对象而非属性；
Proxy 可以直接监听数组的变化；
Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；
Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

16.Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？

受现代 JavaScript 的限制，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性

作者：我是你的超级英雄
链接：https://juejin.im/post/5d59f2a451882549be53b170
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
在 vue 中是无法检测到根据索引值修改的数据变动的
你可以这样做
// 第一个参数是要修改的数据, 第二个值是修改当前数组的哪一个字段,第三个是要修改为什么值
// 要修改的数据: 根据索引值你可以拿到数组中的第 index条数据: this.iptDatas[index]
// 前数组的哪一个字段: showAlert// 修改为 true
this.$set(this.iptDatas[index], showAlert, true)

17.虚拟 DOM 的优缺点？

https://blog.csdn.net/Charlene_lx/article/details/89677905
缺点:
-首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
优点:
-虚拟DOM具有批处理和高效的Diff算法,最终表现在DOM上的修改只是变更的部分，可以保证非常高效的渲染,优化性能.
优点：

保证性能下限：框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；
无需手动操作 DOM：我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；
跨平台：虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点:

无法进行极致优化：虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

18.虚拟 DOM 实现原理？

 虚拟DOM (虚拟DOM就是真实的JS对象，操作内存中的JS对象比操作真实的DOM速度要快)

真实DOM的浏览器渲染引擎工作流程大致分为5步：创建DOM树–创建stylerules–创建render树–布局–绘制
js操作真实DOM的代价：
举一个例子：在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验

虚拟DOM就是为了解决浏览器性能问题而被设计出来的
如前，若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。
实现虚拟DOM：将一个真实的DOM对象用js来模拟DOM节点来实现虚拟DOM
1.将真实DOM用JS对象来表示
2.将得到的JS对象映射成真实的DOM
3.用Diff算法将所有的更新反应到虚拟DOM上
4.深度遍历DOM将Diff的内容更新进去

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；
diff 算法 — 比较两棵虚拟 DOM 树的差异；
pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

19.Vue 中的 key 有什么作用？

key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速

20.对于即将到来的 vue3.0 特性你有什么了解的吗？https://blog.csdn.net/weixin_33834628/article/details/88004643

https://blog.csdn.net/xllily_11/article/details/88548616

1.柯里化函数实现，

https://blog.csdn.net/weixin_34087503/article/details/91385135
函数柯里化，是可以用来慢慢凑齐参数，延迟函数的执行。（先分期交钱，后交货！）
柯里化(currying)就是将使用多个参数的函数转换成一系列使用部分参数的函数的技术。

2.什么是BFC？BFC的布局规则是什么？如何创建BFC？

1，什么是BFC？

1）BFC(Block formatting context)直译为“块级格式化上下文”。BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
2）可以理解成：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素（里面怎么布局都不会影响外部），BFC仍属于文档中的普通流
3）不是所有的元素，模式都能产生BFC 。w3c规范：display属性为block, list-item ,table的元素，会产生BFC。
2，BFC的原理是什么？
1）内部的Box会在垂直方向，一个接一个地放置。
2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3）每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4）BFC的区域不会与float box重叠。
5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6）计算BFC的高度时，浮动元素也参与计算
3，如何创建BFC?
1）根元素
2）float属性不为none
3）position不为static和relative
4）overflow不为visible
5）display为inline-block, table-cell, table-caption, flex, inline-flex

3.let、const、var 的区别有哪些？

  [https://blog.csdn.net/qq_43004614/article/details/90697463](https://blog.csdn.net/qq_43004614/article/details/90697463)
var是ES5提出的，let和const是ES6提出的。
var允许重复声明变量。let和const在同一作用域不允许重复声明变量。

var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。
let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，
var不存在块级作用域。let和const存在块级作用域。
var和let可以修改声明的变量。
const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

4.请实现一个 flattenDeep 函数，把嵌套的数组扁平化，

  [https://blog.csdn.net/Zhangxiaorui_9/article/details/98506427](https://blog.csdn.net/Zhangxiaorui_9/article/details/98506427)
   const arr = [1, 2, [3, 4, [5, 6]]]
  console.log(arr.flat(3));

5. JSONP 的原理是什么？

https://blog.csdn.net/hansexploration/article/details/80314948

6. 原型及原型链的理解

https://www.jb51.net/article/105637.htm
在js中，原型也是一个对象，原型的作用就是实现对象的继承
js中所有的对象都存在一个——proto_属性，_
（1）原型
在JavaScript中，原型也是一个对象，原型的作用，则是实现对象的继承。
在js的所有函数对象中，都存在一个属性prototype，该属性对应当前对象的原型。
而所有的JavaScript对象，都存在一个_proto_属性，_proto_属性指向实例对象的构造函数的原型
var p = new Person();
console.log(p._proto === Person.prototype)//true
从上面代码可以看出，p是实例对象，Person是p的构造函数，可以看出来p的_proto_属性指向构造函数Person的原型。
（2）原型链

除开Object的prototype的原型是null以外，所有的对象和原型都有自己的原型，对象的原型指向原型对象。

在层级多的关系中，多个原型层层相连则构成了原型链。

在查找一个对象的属性时，倘若在当前对象找不到该属性，则会沿着原型链一直往上查找，知道找到为止，如果到了原型链顶端，还没找到，则返回undefined。

7. 路由导航钩子（导航守卫）

（1）全局前置守卫     router.beforeEach 
（2）全局后置钩子     router.afterEach
（2）在配置路由时在路由中写钩子函数（路由独享的守卫），进入路由beforeEnter钩子函数
（3）组件内的守卫（   beforeRouteEnter，beforeRouteLeave，beforeRouteUpdate ） 
   beforeEnter函数有三个参数，to是去往哪个界面，from是从哪个界面过来，
   next相当于开关是否允许跳转到去的页面

8. Canvas/SVG/WebGL的区别和优劣

（1）canvas
绘制2D位图。
Echarts是基于Canvas技术的可视化工具，底层封装了原生的JavaScript的绘图 API。
canvas里面绘制的图形不能被引擎抓取，canvas中我们绘制图形通常是通过javascript来实现。
（2）svg
绘制2D矢量图。
svg里面的图形可以被引擎抓取，支持事件的绑定，svg更多的是通过标签来实现。
（3）webgl
用3D画位图的api。

9. 实现账号免登录5分钟内，5分钟后过期

https://www.jb51.net/article/146656.htm

10. 事件冒泡、事件捕获的区别

事件传递定义了元素事件触发的顺序。如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 “click” 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发，然后再触发

元素的点击事件。
https://blog.csdn.net/zxhj963/article/details/80906967

11. 什么是垃圾回收

Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。

JS中最常见的垃圾回收方式是标记清除。

工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。

工作流程：

垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。

去掉环境中的变量以及被环境中的变量引用的变量的标记。

再被加上标记的会被视为准备删除的变量。

垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。

12. AJAX的流程是什么？

第1步：创建XMLHttpRequest对象，也就是创建一个异步调用对象。

第2步：创建一个新的HTTP请求，并指定该HTTP请求的方法、URL以及验证信息。

第3步：设置响应HTTP状态变化的函数。

第4步：发送HTTP请求。

第5步：获取异步调用返回的数据。

第6步：使用javascript和DOM实现局部刷新。

复制代码
var xhr;
if (window.XMLHttpRequest) { // 标准浏览器
xhr = new XMLHttpRequest();
}else { // IE浏览器
xhr = ActiveXObject(‘Microsoft.XMLHTTP’);
}

xhr.open(‘get’,‘api/ajax.php’,true); // 创建HTTP连接

xhr.oreadystatechange = function () { // 响应HTTP状态变化
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
}
}
}

xhr.send(); // 向服务器发送请求

13. 浅谈一下如何避免用户多次点击造成的多次请求(说出多种解决方法)

14. 实现Lazyman

15. 二叉查找树，快速排序的原理

16. 什么是 Event Loop，为什么需要 Event Loop？以及浏览器 Event Loop

https://juejin.im/post/5df631afe51d45581269a7b5

17. 箭头函数和普通函数的区别！什么时候不使用箭头函数? 说出三个或更多的例子

https://www.jianshu.com/p/422f7c033f36
普通函数和箭头函数的区别：
1. 箭头函数没有prototype(原型)，所以箭头函数本身没有this
2. 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this。
3. 不能直接修改箭头函数的this指向
4. 箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)
箭头函数的注意事项及不适用场景
1. 定义字面量方法,this的意外指向。
因为箭头函数的简洁
const obj = {
array: [1, 2, 3],
sum: () => {
// 根据上文学到的：外层没有普通函数this会指向全局对象
return this.array.push(‘全局对象下没有array，这里会报错’); // 找不到push方法
}
};
obj.sum();
2.回调函数的动态this
下文是一个修改dom文本的操作，因为this指向错误，导致修改失败：
const button = document.getElementById(‘myButton’);
button.addEventListener(‘click’, () => {
this.innerHTML = ‘Clicked button’; // this又指向了全局
});
相信你也知道了，改成普通函数就成了。
文章内容小结：
普通函数和箭头函数的区别：
箭头函数没有prototype(原型)，所以箭头函数本身没有this
箭头函数的this在定义的时候继承自外层第一个普通函数的this。
如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)
箭头函数本身的this指向不能改变，但可以修改它要继承的对象的this。
箭头函数的this指向全局，使用arguments会报未声明的错误。
箭头函数的this指向普通函数时,它的argumens继承于该普通函数
使用new调用箭头函数会报错，因为箭头函数没有constructor
箭头函数不支持new.target
箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
箭头函数相对于普通函数语法更简洁优雅
箭头函数的注意事项及不适用场景
箭头函数的注意事项：

箭头函数一条语句返回对象字面量，需要加括号
箭头函数在参数和箭头之间不能换行
箭头函数的解析顺序相对||靠前
不适用场景：箭头函数的this意外指向和代码的可读性。

18. JS 的提升

19. 解释一下 Object.freeze() 和 const 的区别

const和Object.freeze()完全不同。
const的行为像 let。它们唯一的区别是， const定义了一个无法重新分配的变量。通过 const声明的变量是具有块级作用域的，而不是像 var声明的变量具有函数作用域。
Object.freeze()接受一个对象作为参数，并返回一个相同的不可变的对象。这就意味着我们不能添加，删除或更改对象的任何属性。当具有嵌套属性的对象时， Object.freeze() 并不能完全冻结对象。

20. 前端安全相关(怎么防范)

https://www.cnblogs.com/curationFE/p/front_security.html
一、XSS攻击
XSS是一种经常出现在web应用中的计算机安全漏洞，它允许恶意web用户将代码植入到提供给其它用户使用的页面中。比如这些代码包括HTML代码和客户端脚本。
XSS攻击的危害包括：
1、盗取各类用户帐号，如机器登录帐号、用户网银帐号、各类管理员帐号
2、控制企业数据，包括读取、篡改、添加、删除企业敏感数据的能力
3、盗窃企业重要的具有商业价值的资料
4、非法转账
5、强制发送电子邮件
6、网站挂马
7、控制受害者机器向其它网站发起攻击
解决办法：目前来讲，最简单的办法防治办法，还是将前端输出数据都进行转义最为稳妥，虽然显示出来是有标签的，但是实际上，标签的左右尖括号(><)，均被转义为html字符实体，所以，便不会被当做标签来解析的，但是实际显示的时候，这两个尖括号，还是可以正常展示的。
　二、 CSRF攻击
　CSRF(Cross-site request forgery跨站请求伪造
　你在访问黑客的网站的时候，进行的操作，会被操作到其他网站上
　解决办法：1、要合理使用post与get
三、网络劫持攻击
很多的时候，我们的网站不是直接就访问到我们的服务器上的，中间会经过很多层代理，如果在某一个环节，数据被中间代理层的劫持者所截获，他们就能获取到使用你网站的用户的密码等保密数据。比如，我们的用户经常会在各种饭馆里面，连一些奇奇怪怪的wifi，如果这个wifi是黑客所建立的热点wifi，那么黑客就可以结果该用户收发的所有数据。这里，建议站长们网站都使用https进行加密。这样，就算网站的数据能被拿到，黑客也无法解开。
四、控制台注入代码

21. typeof 与 instanceof 区别

     typeof与instanceof是我们经常用到来判断一个变量的类型
     typeof的返回值是个字符串，返回的字符串表达了程序员想要输出的变量类型
		然而typeof返回的结果通常情况下一般都是以下6个：
		number
		string
		boolean
		object
		function
		undefind
		当然他们都是字符串类型
		 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。这就需要用到instanceof来检测某个对象是不是另一个对象的实例**

var a=new Array();
alert(a instanceof Array); // true，
同时 alert(a instanceof Object) //也会返回 true;
这是因为 Array 是 object 的子类。

instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。
例如：

function Foo(){}
Foo.prototype = new Aoo();//JavaScript 原型继承
var foo = new Foo();
console.log(foo instanceof Foo)//true
console.log(foo instanceof Aoo)//true

22. Vue的 nextTick 原理

https://blog.csdn.net/chenzeze0707/article/details/90083725
可以在DOM更新完毕之后执行一个回调
在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中，因为created()钩子函数执行的时候DOM并未进行任何渲染，而此时进行DOM操作是徒劳的，所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。

23. Vue 项目性能优化

1.对路由组件进行懒加载
2.图片或组件懒加载
3.合理使用vue的指令：
3.1. v-if 和 v-show ：
v-if 是懒加载，当状态为true时才会加载，并且为 false 时不会占用布局空间；
v-show 是无论状态是 true 或者是 false，都会进行渲染，并对布局占据空间对于在项目中，需要频繁调用，不需要权限的显示隐藏，可以选择使用 v-show，可以减少系统的切换开销。
4.为item设置唯一key值：
5代码包优化屏蔽SourceMap vue-cli脚手架在上线配置文件会自动设置允许 sourceMap 打包，这方便我们再开发阶段进行调试

qq_42962195

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
primise

1.primise（1）promise出现的原因当我们需要发送多个异步请求并且每个请求之间需要相互依赖那这时我们只能以嵌套方式来解决形成 “回调地狱”请求1(function(请求结果1){请求2(function(请求结果2){请求3(function(请求结果3){请求4(function(请求结果4){请求5(function(请求结果5){请求6(function...
复制链接

扫一扫