面试--部分知识点

1、数组的遍历方法
1.for循环
使用临时变量，将长度缓存起来，避免重复获取数组长度，当数组较大时优化效果才会比较明显。
2.foreach循环
遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE
3.map循环
有返回值，可以return出来
map的回调函数中支持return返回值；return的是啥，相当于把数组中的这一项变为啥（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；
4.forof遍历
可以正确响应break、continue和return语句
5.filter遍历
不会改变原始数组,返回新数组
6.every遍历
every()是对数组中的每一项运行给定函数，如果该函数对每一项返回true,则返回true。
7.some遍历
some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。
8.reduce
reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。

2、同源访问策略
同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。
同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

3、jquery中封装插件的函数:
jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：

如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
如果多个对象具有相同的属性，则后者会覆盖前者的属性值。
语法：
$.extend( target [, object1 ] [, objectN ] )
//指示是否深度合并
$.extend( [deep ], target, object1 [, objectN ] )

4、JS模块化规范

• 模块化
  框架 规范 区别
  • require.js AMD 异步 前端
  • sea.js CMD 异步 前端
  • nodejs CommonJS 同步 后端
• ECMAScript2015 ESModule 同步 前端
  5、什么是中间件？
  中间件是一个封装了某些处理数据功能的函数，在request或response调用之前执行，从本质上来说，一个Express应用其实就是在调用各种中间件

一次完整的HTTP事务是怎样的一个过程？
（1）首先是对网址域名的解析，通过url路径的访问，进行网页数据的读取
（2）发起TCP的3次握手
（3）建立TCP连接后发起http请求
（4）服务器端响应http请求，浏览器得到html代码
（5）浏览器解析html代码，并请求html代码中的资源
（6）浏览器对页面进行渲染呈现给用户

简述 ajax 的过程。

1. 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
3. 设置响应 HTTP 请求状态变化的函数
4. 发送 HTTP 请求
5. 获取异步调用返回的数据
6. 使用 JavaScript 和 DOM 实现局部刷新

在JS中有哪些会被隐式转换为false？
Undefined、null、关键字false、NaN、零、空字符串

jQuery框架选择器
* 基本选择器
- #id
- .class
- 标签
- 并集选择器 $(“div,p,.box1”)
- 通配符 *

* 层级选择器
  - 所有的后代节点  $("#demoID   div")
  - 直接的后代节点  $("#demoID > div")
  - 下一个兄弟节点  $("#demoID + div")
  - 后面所有兄弟    $("#demoID ~ div")

* 筛选选择器
  - 第一个    :first
  - 最后一个  :last
  - 指定索引  :eq(index)
  - 奇数索引  :odd
  - 偶数索引  :even
  - 大于索引  :gt(index)
  - 小于索引  :lt(index)
  - 排除特定  :not(条件)

* 属性选择器
  - [属性名]        ex  $("a[href]")
  - [属性名='值']   ex  $("a[href='http://www.baidu.com']")
  - [属性名!='值']
  - [属性名^='值']
  - [属性名$='值']
  - [属性名*='值']
  - [属性名1][属性名2]

* 父子关系选择器
  - parent()
  - parents()
  - parentsUntil()
  - children()
  - siblings()
  - next()
  - nextAll()
  - nextUntil()
  - prev()
  - prevAll()
  - prevUntil()
  - eq(index)

说一下常见的数据结构有哪些？
栈：可以把栈想象成一列垂直堆放的书。为了拿到中间的书，你需要移除放置在这上面的所有书。这就是LIFO（后进先出）的工作原理。
队列：与栈相似，队列是另一种顺序存储元素的线性数据结构。栈与队列的最大差别在于栈是LIFO（后进先出），而队列是FIFO，即先进先出。一个完美的队列现实例子：售票亭排队队伍。如果有新人加入，他需要到队尾去排队，而非队首——排在前面的人会先拿到票，然后离开队伍。
链表
集合：对应 JavaScript 中的 Set
字典：对应 JavaScript 中的 Map
哈希表：一种特殊的字典，可以用来存储加密数据
二叉树：DOM TREE / HTML TREE / CSS TREE
图：是一种非线性的数据结构，图在实际生活中有很多例子，比如交通运输网，地铁网络，社交网络，计算机中的状态执行（自动机）等等都可以抽象成图结构。

1、对BFC的理解：
BFC全称为Block Formatting Context，即“块级格式化上下文”，它是页面中相对独立的一块渲染区域，它决定了内部的子元素如何进行摆放和定位，以及区域内部元素和区域外部元素之间的相互作用关系。BFC在页面上是一个封闭的区域，如同“结界”一般。即便是内部的浮动元素也无法脱离该区域。该区域内部的子元素无法影响区域外部，同时也不受外部影响。
BFC的常见用途有三个：闭合浮动、阻止margin重叠、自适应流体布局。

2、Ajax的git 和post请求有什么区别？
（1）GET请求将参数在URL后进行传递，POST请求则是作为HTTP消息的实体内容发送给Web服务器。
（2）GET方式对传输的数据大小有限制，通常不能大于2KB，而POST方式传递的数据量要比GET大很多，理论上不受限制。
（3）GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，如账号密码等，安全性低。

3、 Javascript如何实现继承？
（1）原型链继承：父类新增原型方法/原型属性，子类都能访问到，但是会有共享问题
（2）构造函数继承：解决了原型链继承中，子类实例共享父类引用属性的问题；
创建子类实例时，可以向父类传递参数；可以实现多继承（call多个父类对象）；但无法复用，影响性能，所以多用组合继承。
（3）组合继承：可以继承实例属性/方法，也可以继承原型属性/方法；
既是子类的实例，也是父类的实例；不存在引用属性共享问题；可传参；函数可复用；

14. 你遇到过比较难的技术问题是？你是如何解决的？
    后端接口的问题。跟后端人员沟通，制定方案。

15. Js面相对象是怎么理解的？
    把对数据的操作方法封装在一起，通过一个简单的外部接口与外界发生关系。
    使用面向对象方式可以提高复用性。

16. Javascript创建对象的几种方式？
    1.new object；
    2.字面量创建；
    3.工厂模式；
    4.构造函数；
    5.object.create；

es6新特性？
箭头函数，解构赋值，模板字符串，导入导出模块，class，promise等；

This的指向？
普通函数调用，指向window；
构造函数调用，指向实例；
事件方法中，指向调用方法的元素；
补充：1.箭头函数没有this，箭头函数里this秉持就近原则，指向离他最近的this；
2.bind、call、apply的第一个参数可以绑定this；

原型链的理解？
例如实例对象有原型对象，而原型对象也有原型对象，基于这种关系，会形成一条限链，
实例对象可以访问和继承在这条限链上的对象的属性和方法，这种链就是原型链；

Vue的响应式原理什么？
当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖，在属性被访问和修改时通知变化。 每个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新.

请描述一下 cookies，sessionStorage 和 localStorage 的区别
相同点：都存在浏览器客户端
不同点：
1、存储大小不同
cookie数据大小不能超过4k，sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
2、有效时间
localStorage 存储持久的数据，浏览器关闭后数据也不会丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后会自动删除
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3、数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

vue-router是什么？它的用途有哪些
答：vue用来写路由一个插件，
二、用途：
单页面
即 第一次进入页面的时候会请求一个html文件，刷新清除一下。切换到其他组件，此时路径也相应变化，但是并没有新的html文件请求，页面内容也变化了。
原理是：JS会感知到url的变化，通过这一点，可以用js动态的将当前页面的内容清除掉，然后将下一个页面的内容挂载到当前页面上，这个时候的路由不是后端来做了，而是前端来做，判断页面到底是显示哪个组件，清除不需要的，显示需要的组件。这种过程就是单页应用，每次跳转的时候不需要再请求html文件了。
多页面
即 每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用。
原理是：传统的页面应用，是用一些超链接来实现页面切换和跳转的
其实刚才单页面应用跳转原理即 vue-router实现原理