1.JavaScript的数据类型
字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol（独一无二的值）。
JavaScript的数据结构
4、集合（set）
5、树(tree)
2. javascript的typeof返回哪些数据类型
string,boolean,number,undefined,function,object
JS new一个对象的过程
1.创建空对象
2.新对象执行prototype连接原型
3.绑定this到新对象上
4.执行构造函数
5.返回新对象
Set、Map、WeakSet 和 WeakMap 的区别
Set
成员唯一、无序且不重复
[value, value]，键值与键名是一致的（或者说只有键值，没有键名）
可以遍历，方法有：add、delete、has
WeakSet
成员都是对象
成员都是弱引用，可以被垃圾回收机制回收，可以用来保存DOM节点，不容易造成内存泄漏
不能遍历，方法有add、delete、has
Map
本质上是键值对的集合，类似集合
可以遍历，方法很多可以跟各种数据格式转换
WeakMap
只接受对象作为键名（null除外），不接受其他类型的值作为键名
键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
不能遍历，方法有get、set、has、delete
WeakSet 与 Set 的区别：
WeakSet 只能储存对象引用，不能存放值，而 Set 对象都可以
WeakSet 对象中储存的对象值都是被弱引用的，即垃圾回收机制不考虑 WeakSet 对该对象的应用，如果没有其他的变量或属性引用这个对象值，则这个对象将会被垃圾回收掉（不考虑该对象还存在于 WeakSet 中），所以，WeakSet 对象里有多少个成员元素，取决于垃圾回收机制有没有运行，运行前后成员个数可能不一致，遍历结束之后，有的成员可能取不到了（被垃圾回收了），WeakSet 对象是无法被遍历的（ES6 规定 WeakSet 不可遍历），也没有办法拿到它包含的所有元素
Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）。
WeakMap 对象是一组键值对的集合，其中的键是弱引用对象，而值可以是任意。
注意，WeakMap 弱引用的只是键名，而不是键值。键值依然是正常引用。
WeakMap 中，每个键对自己所引用对象的引用都是弱引用，在没有其他引用和该键引用同一对象，这个对象将会被垃圾回收（相应的key则变成无效的），所以，WeakMap 的 key 是不可枚举的。
3.判断 js 类型的方式
1. typeof
可以判断出'string','number','boolean','undefined','symbol'但判断 typeof(null) 时值为 'object'; 判断数组和对象时值均为 'object'
2. instanceof
原理是构造函数的 prototype 属性是否出现在对象的原型链中的任何位置
3. Object.prototype.toString.call()
常用于判断浏览器内置对象,对于所有基本的数据类型都能进行判断，即使是 null 和 undefined
4. Array.isArray()
用于判断是否为数组。
4.栈和堆的区别？
栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；
堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。
5.for..in 和 object.keys的区别
Object.keys不会遍历继承的原型属性
for...in 会遍历继承的原型属性
6.JS 中 == 和 === 区别是什么？
简单来说：== 代表相同， ===代表严格相同
1、对于string,number等基础类型，==和===有区别
2、对于Array,Object等高级类型，==和===没有区别
进行“指针地址”比较。
3、基础类型与高级类型，==和===有区别
7.let var const声明变量区别
变量有效区域： var 全局有效 let块级作用域内 const块级作用域内
是否允许重定义变量：var允许 let同一作用域内不允许 const同一作用域内不允许
是否有变量提升：var有 let没有 const没有
变量声明之前是否可用：var可用 let不可用（暂时性死区）const不可用（暂时性死区）
var声明变量
var 声明的变量作用域不是块级的，会扩大变量的作用域，可能造成不必要的 shadow(变量覆盖)，通常情况下都不是想要的结果。
请解释变量声明提升
通过var声明的变量会被提升至作用域的顶端。不仅仅是变量，函数声明也一样会被提升。
当同一作用域内同时出现变量和函数声明提升时，变量仍然在函数前面。
let声明变量
1.let所声明的变量只在let命令所在的代码块内有效。（块级作用域）
2.let命令不存在变量提升
3.let声明变量存在暂时性死区（即变量会绑定某个区域，不受外部影响）
ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”。（简称TDZ）
const声明变量
const声明一个只读的常量。一旦声明，常量的值就不能改变。const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。
const声明的常量，也与let一样不可重复声明。
const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。（重点）
8.split()和join()的区别
split（）是切割成数组的形式
join（）是数组转为字符串。
9.数组方法 pop() push() unshift() shift()
**pop() ：尾部删除
push():尾部添加
unshift()：头部添加
shift()**头部删除
10.call 和apply的区别
相同点：
call（）方法和apply（）方法的作用相同：改变this指向。
不同点：
call（）：第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。在使用call（）方法时，传递给函数的参数必须逐个列举出来。
不同点：
apply（）：传递给函数的是参数数组
11.闭包
闭包的概念：
闭包就是能够读取其他函数内部变量的函数
闭包的用途：
1.可以读取函数内部的变量
2.变量的值始终保持在内存中。
使用闭包的注意点：
1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
12.原型和原型链
什么是原型？
在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。
什么是原型链？
prototype：原型对象，每个函数都有一个 prototype 属性，再通过 new 命令实例对象时，该属性会成为该实例的原型对象。constructor：构造函数。指向原型对象的 constructor__proto__：实例对象的原型
在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。 原型链的终点是null。
13.js的循环机制event loop（事件循环）
event loop它最主要是分三部分：主线程、宏队列（macrotask）、微队列（microtask）
js的任务队列分为同步任务和异步任务，所有的同步任务都是在主线程里执行的，异步任务可能会在macrotask或者microtask里面
主线程
就是访问到的script标签里面包含的内容，或者是直接访问某一个js文件的时候，里面的可以在当前作用域直接执行的所有内容（执行的方法，new出来的对象等）
宏队列（macrotask）
setTimeout、setInterval、setImmediate、I/O、UI rendering
微队列（microtask）
promise.then、process.nextTick
执行顺序
1、先执行主线程
2、遇到宏队列（macrotask）放到宏队列（macrotask）
3、遇到微队列（microtask）放到微队列（microtask）
4、主线程执行完毕
5、执行微队列（microtask），微队列（microtask）执行完毕
6、执行一次宏队列（macrotask）中的一个任务，执行完毕
7、执行微队列（microtask），执行完毕
8、依次循环。。。
14.事件委托
什么是事件委托？
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件
事件委托的原理：
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件。
适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。
15.JS中如何将页面重定向到另一个页面？
使用 location.href：window.location.href =“https://www.onlineinterviewquestions.com/”
使用 location.replace： window.location.replace(" https://www.onlineinterviewquestions.com/;");
16.JS中的Array.splice()和Array.slice()方法有什么区别
slice和splice虽然都是对于数组对象进行截取,但是二者还是存在明显区别,函数参数上slice和splice第一个参数都是截取开始位置,slice第二个参数是截取的结束位置(不包含),而splice第二个参数(表示这个从开始位置截取的长度),slice不会对原数组产生变化,而splice会直接剔除原数组中的截取数据!
17. 数组去重复的方法有哪些
1.使用 set
function uniquearray(array) {
let unique_array= Array.from(set(array))
return unique_array;
}
2.使用 filter
function unque_array (arr) {
let unique_array = arr.filter(function(elem, index, self) {
return index == self.indexOf(elem);
})
return unique_array;
}
console.log(unique_array(array_with_duplicates));
3.使用 for 循环
Array dups_names = ['Ron', 'Pal', 'Fred', 'Rongo', 'Ron'];
function dups_array(dups_names) {
let unique = {};
names.forEach(function(i) {
If (!unique[i]) {
unique[i] = true; }
});
return Object.keys(unique);} // Ron, Pal, Fred, Rongo
Dups_array(names);
18. JS中的深拷贝与浅拷贝的区别？
简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。
1. 如果是基本数据类型，名字和值都会储存在栈内存中
vara=1;
b=a;// 栈内存会开辟一个新的内存空间，此时b和a都是相互独立的
b=2;
console.log(a);// 1
2. 如果是引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值
3.实现浅拷贝的方法
（1）for···in只循环第一层
（2）Object.assign方法
（3）直接用=赋值
4. 实现深拷贝的方法
（1）采用递归去拷贝所有层级属性
（2） 通过JSON对象来实现深拷贝
缺点： 无法实现对对象中方法的深拷贝，会显示为undefined
（3）通过jQuery的extend方法实现深拷贝
（4）lodash函数库实现深拷贝
（5）Reflect法
（6）手动实现深拷贝
（7）如果对象的value是基本类型的话，也可以用Object.assign来实现深拷贝，但是要把它赋值给一个空对象
（8）用slice实现对数组的深拷贝
（9）用concat实现对数组的深拷贝
（10）直接使用var newObj = Object.create(oldObj)，可以达到深拷贝的效果。
（11）使用扩展运算符实现深拷贝
19.apply，call，bind三者的区别
三者都可以改变函数的this对象指向。
三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。
三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。
如果你要传递的参数不多，则可以使用fn.call(thisObj, arg1, arg2 ...)
如果你要传递的参数很多，则可以用数组将参数整理好调用fn.apply(thisObj, [arg1, arg2 ...])
如果你想生成一个新的函数长期绑定某个函数给某个对象使用，则可以使用const newFn = fn.bind(thisObj); newFn(arg1, arg2...)
20.Javascript作用链域
作用域链的原理和原型链很类似，如果这个变量在自己的作用域中没有，那么它会寻找父级的，直到最顶层。
注意：JS没有块级作用域，若要形成块级作用域，可通过（function（）｛｝）（）；立即执行的形式实现。
21. 解释 JS 中的函数提升
JS允许将声明移动到顶部的默认行为称为提升。JS中创建函数的两种方法是函数声明和函数表达式。
变量提升
函数在运行的时候，会首先创建执行上下文，然后将执行上下文入栈，然后当此执行上下文处于栈顶时，开始运行执行上下文。
在创建执行上下文的过程中会做三件事：创建变量对象，创建作用域链，确定 this 指向，其中创建变量对象的过程中，首先会为 arguments 创建一个属性，值为 arguments，然后会扫码 function 函数声明，创建一个同名属性，值为函数的引用，接着会扫码 var 变量声明，创建一个同名属性，值为 undefined，这就是变量提升。
22.事件冒泡和事件捕获
1、事件捕获
捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)
2、事件冒泡
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
事件捕获和事件冒泡属于两个相反的过程，这里可以有一个我感觉十分恰当的比喻，当你把一个可以漂浮在水面上的物品，使劲向水里砸下去，它会首先有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后由于浮力大于物体自身的重力，物体会在到达最低点（ 最具体元素）之后漂浮到水面上，这个过程相对于事件捕获是一个回溯的过程，即事件冒泡
23.箭头函数和普通函数的区别
箭头函数语法更具优雅
1.箭头函数不用写function
2.箭头函数只有一个参数时，可以省略括号
3.箭头函数可以省略{}和return
普通函数和箭头函数的区别：
1.箭头函数没有prototype(原型)，所以箭头函数本身没有this
2.箭头函数的this在定义的时候继承自外层第一个普通函数的this。
3.如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)
4.箭头函数本身的this指向不能改变，但可以修改它要继承的对象的this。
5.箭头函数的this指向全局，使用arguments会报未声明的错误。
6.箭头函数的this指向普通函数时,它的argumens继承于该普通函数
7.使用new调用箭头函数会报错，因为箭头函数没有constructor
8.箭头函数不支持new.target
9.箭头函数不支持重命名函数参数,普通函数的函数参数支持重命名
10.箭头函数相对于普通函数语法更简洁优雅
注意事项：
1. 箭头函数一条语句返回对象字面量，需要加括号
2. 箭头函数在参数和箭头之间不能换行
3. 箭头函数的解析顺序相对||靠前
不适用场景：
箭头函数的this意外指向和代码的可读性。
24.什么是promise
Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态) ；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
为什么要用promise解决回调地狱的代码难以维护。
promise基本规则：
1. 首先Promise构造函数会立即执行，而Promise.then()内部的代码在当次事件循环的结尾立即执行(微任务)。
2. promise的状态一旦由等待pending变为成功fulfilled或者失败rejected。那么当前promise被标记为完成，后面则不会再次改变该状态。
3. resolve函数和reject函数都将当前Promise状态改为完成，并将异步结果，或者错误结果当做参数返回。
4. Promise.resolve(value)
返回一个状态由给定 value 决定的 Promise 对象。如果该值是 thenable(即，带有 then 方法的对象)，返回的 Promise 对象的最终状态由 then 方法执行决定；否则的话(该 value 为空，基本类型或者不带 then 方法的对象),返回的 Promise 对象状态为 fulfilled，并且将该 value 传递给对应的 then 方法。通常而言，如果你不知道一个值是否是 Promise 对象，使用 Promise.resolve(value) 来返回一个 Promise 对象,这样就能将该 value 以 Promise 对象形式使用。
5. Promise.all(iterable)/Promise.race(iterable)
简单理解，这2个函数，是将接收到的promise列表的结果返回，区别是，all是等待所有的promise都触发成功了，才会返回，而arce有一个成功了就会返回结果。其中任何一个promise执行失败了，都会直接返回失败的结果。
6. promise对象的构造函数只会调用一次，then方法和catch方法都能多次调用，但一旦有了确定的结果，再次调用就会直接返回结果。
25.js异步回调Async/Await与Promise区别
什么是Async/Await?
async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
async/await是基于Promise实现的，它不能用于普通的回调函数。
async/await与Promise一样，是非阻塞的。
async/await使得异步代码看起来像同步代码，这正是它的魔力所在。
async/await是寄生于Promise，Generater的语法糖。
Promise
Promise 是异步编程的一种解决方案，比传统的解决方案8i——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的
async await
async await也是异步编程的一种解决方案，他遵循的是Generator 函数的语法糖，他拥有内置执行器，不需要额外的调用直接会自动执行并输出结果，它返回的是一个Promise对象。
await函数不能单独使用，而且async函数返回的是一个Promise对象，可以使用then函数添加回调函数。当函数执行的时候，一旦遇到await函数就会先返回一个Promise对象，等到异步操作完成，再去执行后面的语句。如果 await 后面的异步操作出错，那么等同于 async 函数返回的 Promise 对象被 reject
区别
1.提案版本不同：Promise是ES6的新特性，async、await是ES7中的提案
2.代码简洁度：使用async函数可以让代码简洁很多；promise中，try/catch 不能处理 JSON.parse 的错误，因为它在Promise中。我们需要使用 .catch，这样错误处理代码非常冗余。
错误调试：Async/Await 让 try/catch 可以同时处理同步和异步错误。如果 Promise 连续调用，对于错误的处理是很麻烦的。你无法知道错误出在哪里。
不能在返回表达式的箭头函数中设置断点
如果你在.then代码块中设置断点，使用Step Over快捷键，调试器不会跳到下一个.then，因为它只会跳过异步代码。
使用await/async时，你不再需要那么多箭头函数，这样你就可以像调试同步代码一样跳过await语句。
26.JS里垃圾回收机制是什么，常用的是哪种，怎么处理的？
JS的垃圾回收机制是为了以防内存泄漏，内存泄漏的含义就是当已经不需要某块内存时这块内存还存在着，垃圾回收机制就是间歇的不定期的寻找到不再使用的变量，并释放掉它们所指向的内存。JS中最常见的垃圾回收方式是标记清除。工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。
工作流程：
垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。去掉环境中的变量以及被环境中的变量引用的变量的标记。再被加上标记的会被视为准备删除的变量。垃圾回收器完成内存清除工作，销毁那些带标记的值并回收他们所占用的内存空间。
27.ajax请求的时候get 和post方式的区别
最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数。
GET在浏览器回退时是无害的，而POST会再次提交请求。GET产生的URL地址可以被Bookmark，而POST不可以。GET请求会被浏览器主动cache，而POST不会，除非手动设置。GET请求只能进行url编码，而POST支持多种编码方式。GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。GET请求在URL中传送的参数是有长度限制的，而POST么有。对参数的数据类型，GET只接受ASCII字符，而POST没有限制。GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。GET参数通过URL传递，POST放在Request body中。
28.解释页面的回流与重绘
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。
在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
区别：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流，比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变
29.继承（6种方式）以及优缺点
1.原型链继承
2.构造函数继承
3.组合继承（原型链继承+构造函数继承）
4.原型式继承
5.寄生继承
6.组合寄生继承
//借助构造函数实现继承：缺点是父构造函数的原型链继承不了，若要全部继承除非将所有属性和方法定义在构造函数中functionParent1 () {this.name = 'parent1';}functionChild1 () {//这么做的好处是定义在父构造函数中的引用类型的属性，对于子构造函数的每个实例来说是独立的//并且在子构造函数实例化时，可以给父构造函数传参 Parent.call(this);this.type = 'child1';}//借助原型链实现继承：缺点是继承的引用类型属性是共享的，子构造函数的实例更改会影响其他实例上的这个属性，比如 play 属性functionParent2 () {this.name = 'parent2';this.play = [1, 2, 3];}functionChild2 () {this.type = 'Child2';}Child2.prototype = new Parent2();//组合方式：缺点是会执行两次父构造函数functionChild3 () {//执行第一次 Parent2.call(this);this.type = 'Child3';}Child3.prototype = new Parent2(); //执行第二次//组合优化1，不需要再将定义在父构造函数中的属性和方法再继承一次，只需要继承原型链上的Child3.prototype = Parent2.prototype;//缺点是无法区分一个实例是子函构造函数实例化的还是父构造函数实例化的let s1 = new Child3();//s1.constructor 指向了 Parent2，而不是 Child3，因为 Child3 原型对象的属性 constructor 继承了 Parent2 原型对象上的//如果你强行执行 Child3.prototype.constructor = Child3 的话，也会将 Parent2.prototype.constructor 改成 Child3//组合优化2，通过 Object.create() 创建一个中间对象，将两个原型对象区别开来，并且继承父构造函数的原型链Child3.prototype = Object.create(Parent2.prototype);Child3.prototype.constructor = Child3;//即 Child3.prototype.__proto__ === Parent2.prototype 为 true//如此 Child3.prototype 和 Parent2.prototype 被隔离开，是两个对象，不会相互影响//这种方式为理想继承方式
30.js如何处理防抖和节流？
滚动事件做复杂计算频繁调用回调函数很可能会造成页面的卡顿，这时候我们更希望把多次计算合并成一次，只操作一个精确点，JS把这种方式称为debounce（防抖）和throttle（节流）
函数防抖
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定时间到来之前，又触发了事件，就重新开始延时。也就是说当一个用户一直触发这个函数，且每次触发函数的间隔小于既定时间，那么防抖的情况下只会执行一次。
function debounce(fn, wait) {
var timeout = null; //定义一个定时器
return function() {
if(timeout !== null)
clearTimeout(timeout); //清除这个定时器
timeout = setTimeout(fn, wait);
}
}
// 处理函数
function handle() {
console.log(Math.random());
}
// 滚动事件
window.addEventListener('scroll', debounce(handle, 1000));
函数节流
当持续触发事件时，保证在一定时间内只调用一次事件处理函数，意思就是说，假设一个用户一直触发这个函数，且每次触发小于既定值，函数节流会每隔这个时间调用一次
用一句话总结防抖和节流的区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行
实现函数节流我们主要有两种方法：时间戳和定时器
时间戳：
var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this; //this指向window
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
这个节流函数利用时间戳让第一次滚动事件执行一次回调函数，此后每隔1000ms执行一次，在小于1000ms这段时间内的滚动是不执行的
定时器：
var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
当触发事件的时候，我们设置了一个定时器，在没到1000ms之前这个定时器为null，而到了规定时间执行这个函数并再次把定时器清除。也就是说当第一次触发事件，到达规定时间再执行这个函数，执行之后马上清除定时器，开始新的循环，那么我们看到的效果就是，滚动之后没有马上打印，而是等待1000ms打印，有一个延迟的效果，并且这段时间滚动事件不会执行函数。
单用时间戳或者定时器都有缺陷，我们更希望第一次触发马上执行函数，最后一次触发也可以执行一次事件处理函数
var throttle = function(func, delay) {
var timer = null;
var startTime = Date.now(); //设置开始时间
return function() {
var curTime = Date.now();
var remaining = delay - (curTime - startTime); //剩余时间
var context = this;
var args = arguments;
clearTimeout(timer);
if (remaining <= 0) { // 第一次触发立即执行
func.apply(context, args);
startTime = Date.now();
} else {
timer = setTimeout(func, remaining); //取消当前计数器并计算新的remaining
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));
31.图片的懒加载和预加载
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。
懒加载对服务器前端有一定的缓解压力作用，预加载 则会增加服务器前端压力。
懒加载：
img的data-src属性及懒加载：当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需要请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。
通俗一点：
1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张为1*1px的图片路径。
2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。
ps:自定义属性可以去任何名字
场景：对于图片过多的页面，为了加快页面加载速度，需要将页面内未出现的可视区域内的图片先不做加载，等到滚动可视区域后再去加载。
原理：img标签的src属性用来表示图片的URL，当这个属性值不为空时，浏览器就会根据这个值发送请求，如果没有src属性就不会发送请求。所以，在页面 加入时将img标签的src指向为空或者指向一个小图片（loading或者缺省图），将真实地址存在一个自定义属性data-src中，当页面滚动时，将可视区域的图片的src值赋为真实的值。
预加载：
简单理解：就是在使用该图片资源前，先加载到本地来，真正到使用时，直接从本地请求数据就行了。
32.遍历数组通常用for循环
ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。
for in遍历数组的毛病
1.index索引为字符串型数字，不能直接进行几何运算
2.遍历顺序有可能不是按照实际数组的内部顺序
3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性
所以for in更适合遍历对象，不要使用for in遍历数组。
遍历对象 通常用for in来遍历对象的键名
变量提升
函数在运行的时候，会首先创建执行上下文，然后将执行上下文入栈，然后当此执行上下文处于栈顶时，开始运行执行上下文。
在创建执行上下文的过程中会做三件事：创建变量对象，创建作用域链，确定 this 指向，其中创建变量对象的过程中，首先会为 arguments 创建一个属性，值为 arguments，然后会扫码 function 函数声明，创建一个同名属性，值为函数的引用，接着会扫码 var 变量声明，创建一个同名属性，值为 undefined，这就是变量提升。
