# Javascript篇
# 1. 介绍js的基本数据类型
Undefined、Null、Boolean、Number、String、Symbol
# 2. 介绍js有哪些内置对象？
注意
Object 是 JavaScript 中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number 和 String
其他对象：Function、Arguments、Math、Date、RegExp、Error
# 3. JavaScript原型、原型链? 有什么特点？
原型
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去__proto__里找这个属性，这个__proto__又会有自己的__proto__，于是就这样一直找下去，直到检索到Object.prototype(Object.prototype.__proto__ === null)，也就是我们平时所说的原型链的概念。
- 关系：
instance.constructor.prototype = instance.__proto__ - 特点：
JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。
# 4. JavaScript有几种类型的值？你能画一下他们的内存图吗？
- 栈：原始数据类型（Undefined，Null，Boolean，Number、String、Symbol）
- 堆：引用数据类型（对象、数组和函数）
# 两种类型的存储位置不同
- 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储；
- 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中，将会影响程序运行的性能；引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体
# 5，JavaScript继承的几种实现方式？
- 原型链继承
- 构造函数继承，使用call和apply两个方法的特性可以实现，改变方法中的this
- 组合式继承
- 寄生组合继承
# 6. javascript创建对象的几种方式？
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。
- 对象字面量的方式
person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};
- 用function来模拟无参的构造函数
function Person(){}
var person=new Person();//定义一个function，如果使用new"实例化",该function可以看作是一个Class
person.name=“Mark";
person.age="25";
person.work=function(){
alert(person.name+" hello...");
}
person.work();
- 用function来模拟参构造函数来实现（用this关键字定义构造的上下文属性）
function Pet(name,age,hobby){
this.name=name;//this作用域：当前对象
this.age=age;
this.hobby=hobby;
this.eat=function(){
alert("我叫"+this.name+",我喜欢"+this.hobby+",是个程序员");
}
}
var maidou =new Pet("麦兜",25,"coding");//实例化、创建对象
maidou.eat();//调用eat方法
- 用工厂方式来创建（内置对象）
var wcDog =new Object();
wcDog.name="旺财";
wcDog.age=3;
wcDog.work=function(){
alert("我是"+wcDog.name+",汪汪汪......");
}
wcDog.work();
- 用原型方式来创建
function Dog(){}
Dog.prototype.name="旺财";
Dog.prototype.eat=function(){
alert(this.name+"是个吃货");
}
var wangcai =new Dog();
wangcai.eat();
- 用混合方式来创建
function Car(name,price){
this.name=name;
this.price=price;
}
Car.prototype.sell=function(){
alert("我是"+this.name+"，我现在卖"+this.price+"万元");
}
var camry =new Car("凯美瑞",27);
camry.sell();
# 7. Javascript作用链域?
首先在js中有作用域的概念，值得就是一个变量的活动范围，分为全局作用域和局部作用域，全局作用域指的是window，局部作用域指的是每一个函数内部，在作用域中查找一个变量首先在自己当前作用域查找找不到向上级查找，逐层向上找到window为止，找不到就会抛出一个错误，这个查找的过程就叫作用域链，作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。作用域链有一个需要要注意的问题就是变量提升，当一个变量的使用在定义之前的时候就会得到一个undefined值，在es6中则不会出现这个问题，es6不允许在定义之前使用
# 8. 谈谈This对象的理解。
this分为几个不同的使用场景，在function中this指的的是window，如果是实用new 调用的话this指的是当前的实例化对象，在事件调用函数中this指的调用事件的window特殊的是在IE中的attachEvent中的this总是指向全局对象Window；，在定时器中this指的是window，在es6中有一个箭头函数，在箭头函数中this永远指向的是父级对象
# 9. 什么是window对象? 什么是document对象?
window:它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口
document:代表整个HTML 文档,可用来访问页面中的所有元素
Window 对象表示当前浏览器的窗口，是JavaScript的顶级对象。我们创建的所有对象、函数、变量都是 Window 对象的成员。
Window对象的方法和属性是在全局范围内有效的。
Document对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）
Document对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问
Document对象是Window对象的一部分，可通过 window.document 属性对其进行访问
# 10. null，undefined 的区别？
null 表示一个对象被定义了，值为“空值”；
undefined 表示不存在这个值。
typeof undefined //"undefined"
undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined；
例如变量被声明了，但没有赋值时，就等于undefined
typeof null //"object"
null : 是一个对象(空对象, 没有任何属性和方法)； 例如作为函数的参数，表示该函数的参数不是对象； 注意： 在验证null时，一定要使用 === ，因为 == 无法分别 null 和 undefined undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
- 1）变量被声明了，但没有赋值时，就等于undefined。
- 2） 调用函数时，应该提供的参数没有提供，该参数等于undefined。
- 3）对象没有赋值的属性，该属性的值为undefined。
- 4）函数没有返回值时，默认返回undefined。
null表示"没有对象"，即该处不应该有值。典型用法是：
- 1） 作为函数的参数，表示该函数的参数不是对象。
- 2） 作为对象原型链的终点。
# 11. 事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
- 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
- 事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件；
- ev.stopPropagation();（旧ie的方法 ev.cancelBubble = true;）
# 12. 什么是闭包（closure），为什么要用它？
闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。
闭包的特性：
1，函数内再嵌套函数
2，内部函数可以引用外层的参数和变量
3，参数和变量不会被垃圾回收机制回收
# 闭包的使用场景
- 常见的闭包的使用场景就是模块化，用来做模块内部的实现通过接口的扩展供其他模块使用
- 借助闭包的暂时性死区特性存储变量，比如防抖和截流
- 突破作用域链的限制，外层作用域可以访问内层作用域
# 13. javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？
use strict是一种ECMAscript 5 添加的（严格）运行模式,这种模式使得 Javascript 在更严格的条件下运行。
使JS编码更加规范化的模式,消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为。
默认支持的糟糕特性都会被禁用，比如不能用with，也不能在意外的情况下给全局变量赋值;
全局变量的显示声明,函数必须声明在顶层，不允许在非函数代码块内声明函数,arguments.callee也不允许使用；
消除代码运行的一些不安全之处，保证代码运行的安全,限制函数中的arguments修改，严格模式下的eval函数的行为和非严格模式的也不相同;
提高编译器效率，增加运行速度；
为未来新版本的Javascript标准化做铺垫。
# 14. 如何判断一个对象是否属于某个类？
1，使用instanceof if(a instanceof Person){ alert('yes’); }
# 15. Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
hasOwnProperty
javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。
使用方法：
object.hasOwnProperty(proName)
其中参数object是必选项。一个对象的实例。
proName是必选项。一个属性名称的字符串值。
如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。
# 16. JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
如：{"age":"12", "name":"back"}
JSON字符串转换为JSON对象:
var obj =eval('('+ str +')');eval
var obj = str.parseJSON();str.parseJSON()
var obj = JSON.parse(str);JSON.parse(str)
// JSON对象转换为JSON字符串：
var last=obj.toJSONString();obj.toJSONString
var last=JSON.stringify(obj))JSON.stringify(obj)
# 17. documen.write和 innerHTML的区别
document.write只能重绘整个页面 innerHTML可以重绘页面的一部分
# 18. DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
- 1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
- 2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子节点前插入一个新的子节点
3）查找
getElementById() //通过元素Id，唯一性
getElementsByTagName() //通过标签名称
getElementsByClassName() //通过元素的class属性的值(IE容错能力较强，会得到一个数组)
querySelector() // 通过选择器查找满足第一个条件的元素
querySelectorAll() // 通过选择器查找满足条件的所有元素
# 19. call、apply和bind的区别？
# 20. 数组和对象有哪些原生方法，列举一下？
# 21. 字符串有哪些原生方法，列举一下？
# 22. 那些操作会造成内存泄漏？
# 什么是内存泄漏
- 内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。 2，垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
# 具体操作
- setTimeout, setInterval等定时器不及时清除会引发内存泄漏。
- 闭包、循环引用（在两个对象彼此引用且彼此保留时，就会产生一个循环）
- 给dom绑定的事件，在dom销毁后没有及时清除
# 25.什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。 如：border-shadow
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。 如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；
# 26.对称加密和非对称加密
# 对称加密
对称加密是最快速、最简单的一种加密方式，加密（encryption）与解密（decryption）用的是同样的密钥（secret key）。对称加密有很多种算法，由于它效率很高，所以被广泛使用在很多加密协议的核心当中。
对称加密的一大缺点是密钥的管理与分配，换句话说，如何把密钥发送到需要解密你的消息的人的手里是一个问题。在发送密钥的过程中，密钥有很大的风险会被黑客们拦截。现实中通常的做法是将对称加密的密钥进行非对称加密，然后传送给需要它的人（https的加密就是这样做的）。
# 非对称加密
非对称加密为数据的加密与解密提供了一个非常安全的方法，它使用了一对密钥，公钥（public key）和私钥（private key）。私钥只能由一方安全保管，不能外泄，而公钥则可以发给任何请求它的人。非对称加密使用这对密钥中的一个进行加密，而解密则需要另一个密钥。
虽然非对称加密很安全，但是和对称加密比起来，它非常的慢，所以我们还是要用对称加密来传送消息，但对称加密所使用的密钥我们可以通过非对称加密的方式发送出去。
为了解释这个过程，请看下面的例子：
- （1） Alice需要在银行的网站做一笔交易，她的浏览器首先生成了一个随机数作为对称密钥。
- （2） Alice的浏览器向银行的网站请求公钥。
- （3） 银行将公钥发送给Alice。
- （4） Alice的浏览器使用银行的公钥将自己的对称密钥加密。
- （5） Alice的浏览器将加密后的对称密钥发送给银行。
- （6） 银行使用私钥解密得到Alice浏览器的对称密钥。
- （7） Alice与银行可以使用对称密钥来对沟通的内容进行加密与解密了。
# 28.解释一下事件代理
事件代理是利用事件的冒泡原理来实现的，事件代理就是通过给祖先元素添加事件，通过事件目标对象开始向上查找找到匹配的子节点为止，如果找不到则到绑定事件的那个祖先元素为止，找到了就触发事件，并且可以通过js中call和apply来改变触发事件函数中的this为当前绑定节点，也是通过一层一层逐层向上的方式进行匹配查找而触发对应事件，好处就是可以使后添加的dom元素也同样有之前存在元素的事件，jquery中可以使用on，delegate，live实现的，不过在jquery1.7版本以后吧live给废除了，原因就是live绑定事件的祖先元素是整个html页面的根节点，所以性能消耗比较大，在后边的版本中给删除了，使用on，delegate代替
# 优点：
- 可以减少事件注册，节省大量内存占用
- 可以将事件应用于动态添加的子元素上
# 缺点：
- 使用不当会造成事件在不应该触发时触发
# 29. Javascript垃圾回收方法
# 标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。
垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了。
# 引用计数(reference counting)
在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
在IE中虽然JavaScript对象通过标记清除的方式进行垃圾回收，但BOM与DOM对象却是通过引用计数回收垃圾的，也就是说只要涉及BOM及DOM就会出现循环引用问题。
# 30. 说说严格模式的限制
严格模式主要有以下限制：
- 变量必须声明后再使用
- 函数的参数不能有同名属性，否则报错
- 不能使用with语句
- 不能对只读属性赋值，否则报错
- 不能使用前缀0表示八进制数，否则报错
- 不能删除不可删除的属性，否则报错
- 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
- eval不会在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反映函数参数的变化
- 不能使用arguments.callee
- 不能使用arguments.caller
- 禁止this指向全局对象
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈
- 增加了保留字（比如protected、static和interface） 设立"严格模式"的目的，主要有以下几个：
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。 注：经过测试IE6,7,8,9均不支持严格模式。
# 35. 检测浏览器版本版本有哪些方式？
- 根据 navigator.userAgent // UA.toLowerCase().indexOf('chrome')
- 根据 window 对象的成员 // 'ActiveXObject' in window
- 媒体查询
# 36. 描述浏览器的渲染过程，DOM树和渲染树的区别？
浏览器的渲染过程：
- 解析HTML构建 DOM(DOM树)，并行请求 css/image/js
- CSS 文件下载完成，开始构建 CSSOM(CSS树)
- CSSOM 构建结束后，和 DOM 一起生成 Render Tree(渲染树)
- 布局(Layout)：计算出每个节点在屏幕中的位置
- 显示(Painting)：通过显卡把页面画到屏幕上 DOM树 和 渲染树 的区别：
- DOM树与HTML标签一一对应，包括head和隐藏元素
- 渲染树不包括head和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应的css属性
# 37. 重绘和回流（重排）的区别和关系？
- 重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
- 回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流 注意：JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值。回流必将引起重绘，而重绘不一定会引起回流
# 38. 如何最小化重绘(repaint)和回流(reflow)？
- 需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
- 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
- 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
- 尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）
- 避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
- 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
- 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx
- 经常修改的节点脱离文档流
# 39. script 的位置是否会影响首屏显示时间？
在解析 HTML 生成 DOM 过程中，js 文件的下载是并行的，不需要 DOM 处理到 script 节点。因此，script的位置不影响首屏显示的开始时间。 浏览器解析 HTML 是自上而下的线性过程，script作为 HTML 的一部分同样遵循这个原则 因此，script 会延迟 DomContentLoad，只显示其上部分首屏内容，从而影响首屏显示的完成时间
# 40。 介绍DOM0，DOM2，DOM3事件处理方式区别
# DOM0级事件处理方式：
DOM0级事件无法给一个事件添加多个处理函数
btn.onclick = func;
btn.onclick = null;
# DOM2级事件处理方式：
DOM2级事件使用addEventListener，里面有三个参数，第一个参数是事件名，就是事件属性去掉on，第二个参数是事件处理函数，第三个参数是是否在事件捕获阶段执行（关于事件冒泡和事件捕获下面会介绍）。
使用DOM2事件可以随意添加多个处理函数，移除DOM2事件要用removeEventListener，传入的三个参数与添加事件完全相同。
特别的旧版本IE浏览器（IE8及一下），需要使用attachEvent和detachEvent来添加和移除事件,传入两个参数第一个是事件属性（包含on），第二个是处理函数，不支持事件捕获所以没有第三个参数
btn.addEventListener('click', func, false);
btn.removeEventListener('click', func, false);
btn.attachEvent("onclick", func);
btn.detachEvent("onclick", func);
# DOM3级事件处理方式：
DOM3级事件就是在DOM2基础上增加了更多的事件类型
- UI事件，当用户与页面上的元素交互时触发，如：load、scroll
- 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
- 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
- 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
- 文本事件，当在文档中输入文本时触发，如：textInput
- 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
- 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
- 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
# 自定义事件
通过创建Event对象来创建事件，通过dispatchEvent函数派发事件
var myEvent = new Event('myEvent');
document.addEventListener('myEvent', log, false);
function log() {
console.log('hello event');
}
document.dispatchEvent(myEvent)
# 41. 事件的三个阶段
捕获、目标、冒泡 js的冒泡(Bubbling Event)和捕获(Capture Event)的区别
- 冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
- 捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
# 事件捕获
当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。
# 事件冒泡
当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。
# 阻止冒泡
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了。
阻止捕获
阻止事件的默认行为，例如click <a>后的跳转
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;
# 43. 什么是函数节流？介绍一下应用场景和原理？
函数节流(throttle)是指阻止一个函数在很短时间间隔内连续调用。 只有当上一次函数执行后达到规定的时间间隔，才能进行下一次调用。 但要保证一个累计最小调用间隔（否则拖拽类的节流都将无连续效果）
函数节流用于 onresize, onscroll 等短时间内会多次触发的事件
# 函数节流的原理
使用定时器做时间节流，当触发一个事件时，先用 setTimout 让这个事件延迟一小段时间再执行。 如果在这个时间间隔内又触发了事件，就 clearTimeout 原来的定时器，再setTimeout一个新的定时器重复以上流程。 函数节流简单实现：
function throttle(method, context) {
clearTimeout(methor.tId);
method.tId = setTimeout(function(){
method.call(context);
}， 100); // 两次调用至少间隔 100ms
}
// 调用
window.onresize = function(){
throttle(myFunc, window);
}
# 45. JavaScript实现异步编程的方法？
- 发布/订阅
- Promise对象
- Generator函数
- Async函数
# 46. web开发中会话跟踪的方法有哪些
- cookie
- session
- url参数传递
- 隐藏input
- 自定义header
- ip地址
# 47. 常见的几种数组排序算法JS实现
1，快速排序
从给定的数据中，随机抽出一项，这项的左边放所有比它小的，右边放比它大的，然后再分别这两边执行上述操作，采用的是递归的思想，总结出来就是 实现一层，分别给两边递归，设置好出口
function fastSort(array,head,tail){
//考虑到给每个分区操作的时候都是在原有的数组中进行操作的，所以这里head,tail来确定分片的位置
/*生成随机项*/
var randomnum = Math.floor(ranDom(head,tail));
var random = array[randomnum];
/*将小于random的项放置在其左边 策略就是通过一个临时的数组来储存分好区的结果，再到原数组中替换*/
var arrayTemp = [];
var unshiftHead = 0;
for(var i = head;i <= tail;i++){
if(array[i]<random){
arrayTemp.unshift(array[i]);
unshiftHead++;
}else if(array[i]>random){
arrayTemp.push(array[i]);
}
/*当它等于的时候放哪，这里我想选择放到队列的前面，也就是从unshift后的第一个位置放置*/
if(array[i]===random){
arrayTemp.splice(unshiftHead,0,array[i]);
}
}
/*将对应项覆盖原来的记录*/
for(var j = head , u=0;j <= tail;j++,u++){
array.splice(j,1,arrayTemp[u]);
}
/*寻找中间项所在的index*/
var nowIndex = array.indexOf(random);
/*设置出口，当要放进去的片段只有2项的时候就可以收工了*/
if(arrayTemp.length <= 2){
return;
}
/*递归，同时应用其左右两个区域*/
fastSort(array,head,nowIndex);
fastSort(array,nowIndex+1,tail);
}
2，插入排序
思想就是在已经排好序的数组中插入到相应的位置，以从小到大排序为例，扫描已经排好序的片段的每一项，如大于，则继续往后，直到他小于一项时，将其插入到这项的前面
function insertSort(array){
/*start根据已排列好的项数决定*/
var start=1;
/*按顺序，每一项检查已排列好的序列*/
for(var i=start; i<array.length; start++,i++){
/*跟已排好序的序列做对比，并插入到合适的位置*/
for(var j=0; j<start; j++){
/*小于或者等于时（我们是升序）插入到该项前面*/
if(array[i]<=array[j]){
console.log(array[i]+' '+array[j]);
array.splice(j,0,array[i]);
/*删除原有项*/
array.splice(i+1,1);
break;
}
}
}
}
3，冒泡排序
故名思意 ，就是一个个冒泡到最前端或者最后端，主要是通过两两依次比较，以升序为例，如果前一项比后一项大则交换顺序，一直比到最后一对
function bubbleSort(array){
/*给每个未确定的位置做循环*/
for(var unfix=array.length-1; unfix>0; unfix--){
/*给进度做个记录，比到未确定位置*/
for(var i=0; i<unfix;i++){
if(array[i]>array[i+1]){
var temp = array[i];
array.splice(i,1,array[i+1]);
array.splice(i+1,1,temp);
}
}
}
}
4，选择排序
将当前未确定块的min或者max取出来插到最前面或者后面
function selectSort(array){
/*给每个插入后的未确定的范围循环，初始是从0开始*/
for(var unfixed=0; unfixed<array.length; unfixed++){
/*设置当前范围的最小值和其索引*/
var min = array[unfixed];
var minIndex = unfixed;
/*在该范围内选出最小值*/
for(var j=unfixed+1; j<array.length; j++){
if(min>array[j]){
min = array[j];
minIndex = j;
}
}
/*将最小值插入到unfixed，并且把它所在的原有项替换成*/
array.splice(unfixed,0,min);
array.splice(minIndex+1,1);
}
}
# 48. svn与git的区别
git是分布式的，svn不是。
git跟svn一样有自己的集中式版本库或服务器。但git更倾向于被使用于分布式模式，克隆版本库后即使没有网络也能够commit文件，查看历史版本记录，创建项目分支等，等网络再次连接上Push到服务器端。
git把内容按元数据方式存储，而svn是按文件。
所有的资源控制系统都是把文件的元信息隐藏在一个类似.svn,.cvs等的文件夹里。
git目录是处于你的机器上的一个克隆版的版本库，它拥有中心版本库上所有的东西，例如标签，分支，版本记录等。
git没有一个全局的版本号，svn有。
git的内容完整性优于svn。
因为git的内容存储使用的是SHA-1哈希算法。
git可以有无限个版本库，svn只能有一个指定中央版本库。
当svn中央版本库有问题时，所有工作成员都一起瘫痪直到版本库维修完毕或者新的版本库设立完成。
每一个git都是一个版本库，区别是它们是否拥有活跃目录（Git Working Tree）。如果主要版本库（例如：置於GitHub的版本库）有问题，工作成员仍然可以在自己的本地版本库（local repository）提交，等待主要版本库恢复即可。工作成员也可以提交到其他的版本库！
# 49. 图片懒加载与预加载
图片懒加载的原理就是暂时不设置图片的src属性，而是将图片的url隐藏起来，比如先写在data-src里面，等某些事件触发的时候(比如滚动到底部，点击加载图片)再将图片真实的url放进src属性里面，从而实现图片的延迟加载 图片预加载是指在一些需要展示大量图片的网站，实现图片的提前加载。从而提升用户体验。常用的方式有两种，一种是隐藏在css的background的url属性里面，一种是通过javascript的Image对象设置实例对象的src属性实现图片的预加载。
# 50. AMD和CMD的区别
- AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
- CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
CMD 推崇依赖就近，AMD 推崇依赖前置。
AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。
# 51. Sass、Less常用特性
- 变量(@color = #fff)
- 混合(Mixin)
- 内置函数(颜色，字符串，类型判断，数学)
- 循环
- 嵌套
- 运算
- 导入(@import)
# 52. ES6常用特性
- 变量定义(let和const,可变与不可变，const定义对象的特殊情况)
- 解构赋值
- 模板字符串
- 数组和对象新API(例：Array.from(),entries(),values(),keys())
- 箭头函数(rest参数，扩展运算符，::绑定this)
- Set和Map数据结构(set实例成员值唯一存储key值，map实例存储键值对(key-value))
- Promise对象(前端异步解决方案进化史，generator函数，async函数)
- Proxy代理和Reflect反射
- Class语法糖(super关键字)
# 54.线程与进程的区别?
- 一个程序至少有一个进程,一个进程至少有一个线程;
- 多进程拥有独立的内存,多线程共享内存,所以多线程提高了运行效率;
- 多线程的重要意义在于一个应用程序中,有多个执行程序能够同时执行,但是系统并没有将多线程看成多个独立的应用
# 55. 对前端工程师这个职位你是怎么样理解的？
与用户打交道最近的地方,负责用户所能看到的一切的构建,在满足基本功能的同时,添加炫酷的特效,排版等,提升用户体验感,加强产品粘性。
- 前端是最贴近用户的程序员，前端的能力就是能让产品从 90 分进化到 100 分，甚至更好
- 参与项目，快速高质量完成实现效果图，精确到 1px；
- 与团队成员，UI 设计，产品经理的沟通；
- 做好的页面结构，页面重构和用户体验；
- 处理 hack，兼容、写出优美的代码格式；
- 针对服务器的优化、拥抱最新前端技术。
# 57. 说说你对 SVG 理解?
SVG可缩放矢量图形是基于可扩展标记语言 XML，用于描述二维矢量图形的一种图形格式。 SVG 是一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。 SVG 严格遵从 XML 语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
# 特点：
- (1)任意放缩 用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
- (2)文本独立 SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
- (3)较小文件 总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。
- (4)超强显示效果 SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
- (5)超级颜色控制 SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。
# 58. 浅拷贝vs深拷贝
拷贝其实就是对象复制，为了解决对象复制是产生的引用类型问题。
- 浅拷贝：利用迭代器，循环对象将对象中的所有可枚举属性复制到另一个对象上，但是浅拷贝的有一个问题就是只是拷贝了对象的一级，其他级还如果是引用类型的值的话依旧解决不了
- 深拷贝：深拷贝解决了浅拷贝的问题，利用递归的形势便利对象的每一级，实现起来较为复杂，得判断值是数组还是对象；
# 59. 区分数组和对象的方法？
- 从原型入手，Array.prototype.isPrototypeOf(obj);利用isPrototypeOf()方法，判定Array是不是在obj的原型链中，如果是，则返回true,否则false。
Array.prototype.isPrototype([]) //true
- 也可以从构造函数入手，利用对向的constructor属性
- 根据对象的class属性(类属性)，跨原型链调用toString()方法。
Object.prototype.toString.call(Window);
- Array.isArray()方法。
# 60. 说说你对Promise的理解
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件监听——更合理和更强大。
Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。但是无法获取到pending状态，在promise中接受两个内置参数分别是resolve（成功）和reject（失败），Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
then方法可以传递两个回调函数第一个是成功，第二个是失败，失败回调也可以使用promise的catch方法回调，promise还有一个强大的功能那就是all方法可以组合多个promise实例，包装成一个新的Promise实例。
# 61. 介绍一下async和await；
async 会将其后的函数（函数表达式或 Lambda）的返回值封装成一个 Promise 对象，而 await 会等待这个 Promise 完成，并将其 resolve 的结果返回出来。
async / await是ES7的重要特性之一，也是目前社区里公认的优秀异步解决方案。
# 62. JS模块化的发展历程；
# 64. 箭头函数的作用域上下文和 普通函数作用域上下文 的区别
箭头函数其实只是一个密名函数的语法糖，区别在于普通函数作用域中的this有特定的指向，一般指向window，而箭头函数中的this只有一个指向那就是指当前函数所在的对象，其实现原理其实就是类似于之前编程的时候在函数外围定义that一样，用了箭头函数就不用定义that了直接使用this