2019年7-8月份前端面试题

摘要：站点接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是无辜的受害者发送的请求。函数内部语句返回的值，会成为方法回调函数的参数。

记录我最近面试缺漏的知识点

css

1.bootstrap如何实现手机PC端自适应

媒体查询

2.flex布局

父容器：（记得常用属性）
display:flex
flex-direction： row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
justify-content: flex-start | flex-end | center | space-between | space-around
align-items: flex-start | flex-end | center | baseline | stretch

3. 多行文本与单行文本的省略

单行：width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 
多行：1. width:100px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 
line-clamp属性是为了控制文本显示多少行。说明：必须定义display属性才可以对box进行划分。 box-orient 属性指定一个box子元素是否应按水平或垂直排列。        
2. :afert在最后加个背景图然后加上省略号   
3.插件

js:

1.$和dom对象转化

通过$符号 $(document)

2.jq链式调用原理

 return 实现链式调用 （可研读jq源码）

3.$this 和 this区别

 $(this)表示的是用jquery封装候的当前对象
 this表示的是javascript提供的当前对象

4.websocket基于什么协议

  TCP

5.TCP和HTTP区别

 TCP传输层协议 HTTP应用层协议 

6.canvas和svg区别

 Canvas 能以.png .jpg格式保存图像，依赖分辨率，不支持事件处理器，适合图像密集型的游戏（被频繁重绘）
 Svg 是矢量图像，不依赖分辨率，支持事件处理器，适合大型渲染应用程序，不适合游戏应用

7.xss、csrf攻击

XSS(Cross-Site Scripting，跨站脚本攻击)是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取 cookie，session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。
XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，利用这些信息冒充用户向网站发起攻击者定义的请求。

Xss解决方案：代码严谨 加验证 编码

 CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
 典型的CSRF攻击流程：
 受害者登录A站点，并保留了登录凭证（Cookie）。
 攻击者诱导受害者访问了站点B。
 站点B向站点A发送了一个请求，浏览器会默认携带站点A的Cookie信息。
 站点A接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是无辜的受害者发送的请求。
 站点A以受害者的名义执行了站点B的请求。
 攻击完成，攻击者在受害者不知情的情况下，冒充受害者完成了攻击。

Csrf解决方案：

添加验证码(体验不好)

判断请求的来源：检测Referer(并不安全，Referer可以被更改)

使用Token(主流)

Samesite Cookie属性

8.cookie和session区别 cookie如何实现session （需要依靠后台） 同源策略 可以跨域吗

9.解决跨域的方法

jsonp、cors、iframe 

10.css3新特性

新增了选择器，伪类，样式属性

11.如何实现一个音频播放 资源不被窃取

使用flash

12.如何实现发微博还剩多少字 汉字英文 表情

正则验证转化Unicode

13.如何实现长连接

websocket  、 http keep-alive

14.原型链 、prototype是什么 可以实现继承吗

每个对象都有一个__proto__属性指向构造函数的prototype原型，在找一个对象的属性或方法时，在本身上找不到就去原型上找，直到undefined。  
new Pet (实例)--（__proto__） ---->Pet.prototype
prototype主要来实现继承（原型继承）

15.实现继承的几种方式

16.原型继承与new构造继承的优缺点

原型继承：
  核心： 将父类的实例作为子类的原型
  缺点： 父类新增原型方法/原型属性，子类都能访问到，父类一变其它的都变了
构造继承：
 核心：复制父类的实例属性给子类
 缺点： 方法都在构造函数中定义， 只能继承父类的实例属性和方法，不能继承原型属性/方法，无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

17.如何做缓存 浏览器如何实现缓存

1.localstorage
2.vue keep-alive
对cache-control、etag、expires、last-modified的理解 使用

18.对window.proformance的理解

19.对Event-loop的理解

执行线程，macro-task(宏任务)：包括整体代码script，setTimeout，setInterval，micro-task(微任务)：Promise，process.nextTick

先执行微任务再执行宏任务

20. 数组去重 数组扁平化

21.字符串拼接方法

1.“+” 
2.以数组作为中介用 join 连接字符串  
3.es6:模板字符串 `` 

22.闭包、垃圾回收的几种方式

23.对node.js、npm有什么了解

es6

1.遍历器（iterator）

2.Generator yield

 generator（生成器）是ES6标准引入的新的数据类型。一个generator看上去像一个函数，但可以返回多次。
 generator和函数不同的是，generator由function*定义（注意多出的*号），并且，除了return语句，还可以用yield返回多次。
 generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。

3.async await

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
async函数内部return语句返回的值，会成为then方法回调函数的参数。
async内的代码是同步的

4.promise 状态改变 里面内容的同步异步

Promise 构造函数是同步执行的，promise.then 中的函数是异步执行的。

5.promise 和 async关系

6.箭头函数和普通函数的区别

① 箭头函数是匿名函数，不能作为构造函数，不能使用new
② 箭头函数不绑定arguments,用rest参数替代
③ 箭头函数不绑定this,会捕获其所在上下文的this值作为自己的this,任何方法（call,apply,bind）都改变不了其this指向
④箭头函数没有原型属性
⑤箭头函数不能当做Generator函数，不能使用yield关键字

7.filter reduce过滤器

filter : array.filter(callback [,that]);
对于回调，可以指定数组元素的值“value”，数组元素的数字索引“index”以及存储数组元素的数组对象“arrayObj”。
对于每个数组元素，callbak返回true的元素将生成为新数组，callcak未返回true的元素将被跳过，并且不包含在新数组中。
var data = [1, 4, 7, 12, 21];var result = data.filter(function(value) {return value % 2 === 1;});console.log(result);

reduce普通用法: 数组求和，求乘积 var sum = arr.reduce((x,y)=>x+y)； var mul = arr.reduce((x,y)=>x*y)
高级用法 ：（1）计算数组中每个元素出现的次数
（2）数组去重
（3）将二维数组转化为一维
（3）将多维数组转化为一维（数组扁平化）
（4）、对象里的属性求和

8. Object.assign()

Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。
Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。
注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。
如果只有一个参数，Object.assign会直接返回该参数。
如果该参数不是对象，则会先转成对象，然后返回。
由于undefined和null无法转成对象，所以如果它们作为参数，就会报错。undefined和null不在首参数，就不会报错。
Object.assign拷贝的属性是有限制的，只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性（enumerable: false）。

vue

1.对vue实例的了解

 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：
 1.2.在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
 1.3.可以扩展 Vue 构造器，从而用预定义选项创建可复用的组件构造器var MyConponent = Vue.extends({})
 1.4.所有的 Vue.js 组件其实都是被扩展的 Vue 实例

2.vue的双向数据绑定 数据劫持defineProperty

 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

3.发布-订阅者模式 对Observer Compile Watcher的理解

4.slot插槽

插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。

没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了！

 slot属性对应的内容都会和组件中name一一对应。没有名字的，就是默认插槽！！

作用域槽：在组件上的属性，可以在组件元素内使用。slot上面的属性（slot-scope）和值组成的键值对。可以把组件上的属性/值，在组件元素上使用
5.nextTick函数

6.vuex

 一个 Vuex 应用的核心是 store（仓库，一个容器），store包含着你的应用中大部分的状态 (state)。

适用于：中大型单页应用，你可能会考虑如何把组件的共享状态抽取出来，以一个全局单例模式管理，不管在哪个组件，都能获取状态/触发行为，解决问题如下：
① 多个视图使用于同一状态：
传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力
② 不同视图需要变更同一状态：
采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝，通常会导致无法维护的代码

7.vueRouter

ps:以上均为近期遇到我知识疏漏的面试题，其他一些基础类型知识点也是要掌握的。答案有参考官方文档，自己看过的文章，有我自己总结的，如有错误，请严厉指正。