能用forEach()做到的，map()同样可以。反过来也是如此。
map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
forEach()允许callback更改原始数组的元素。map()返回新的数组。

函数提升 优于变量
解析器在向执行环境中加载数据时会率先读取函数声明，并使其在执行任何代码之前可用(可访问)，即函数声明提升、JavaScript上卷中第40页提到函数声明是优于变量提升的。可见代码
console.log(getName)
var getName = 1;
function getName() {
  console.log(2)
}
// 输出为函数getName
注意:不要学了一点就忘记别的了啊，如果两个函数名一样，后面的会覆盖前面的(认为是在函数解析的时候覆盖，即提升的时候就覆盖了)

作用域链，是由当前环境与上层环境的一系列变量对象组成，
它保证了当前执行环境对符合访问权限的变量和函数的有序访问。

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，
就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到
全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对
象构成的链表就叫做作用域链。

Promise 是异步编程的一种解决方案：
从语法上讲，promise是一个对象，从它可以获取异步操作的消息；
从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。
promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；
状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

pending，异步任务正在进行。
resolved (也可以叫fulfilled)，异步任务执行成功。
rejected，异步任务执行失败。

回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象
promise可以支持多个并发的请求，获取并发请求中的数据
这个promise可以解决异步的问题，本身不能说promise是异步的

Promise.resolve(value)
类方法，该方法返回一个以 value 值解析后的 Promise 对象
1、如果这个值是个 thenable（即带有 then 方法），返回的 Promise 
对象会“跟随”这个 thenable 的对象，采用它的最终状态
（指 resolved/rejected/pending/settled）
2、如果传入的 value 本身就是 Promise 对象，
  则该对象作为 Promise.resolve 方法的返回值返回。
3、其他情况以该值为成功状态返回一个 Promise 对象。

Promise.all的用法：谁跑的慢，以谁为准执行回调。
  all接收一个数组参数，里面的值最终都算返回Promise对象
  all方法可以说是Promise中很常用的方法了，它的作用就是将一个数组的Promise对象放在其中，当全部resolve的时候就会执行then方法，当有一个reject的时候就会执行catch，并且他们的结果也是按着数组中的顺序来排放的，那么我们来实现一下。
Promise.race的用法：谁跑的快，以谁为准执行回调
它的作用是将一个Promise数组放入race中，哪个先执行完，race就直接执行完，并从then中取值。
Promise.prototype.catch
  实例方法，捕获异常，函数形式：fn(err){}, err 是 catch 注册 之前的回调抛出的异常信息。
Promise.prototype.then
  实例方法，为 Promise 注册回调函数，函数形式：fn(vlaue){}，value 是上一个任务的返回结果，then 中的函数一定要 return 一个结果或者一个新的 Promise 对象，才可以让之后的then 回调接收。
Promise.reject
类方法，且与 resolve 唯一的不同是，返回的 promise 对象的状态为 rejected。

Promise的立即执行性
Promise 三种状态
Promise 状态的不可逆性
then方法链式调用

async/await

变量声明：let const
字符串模板
解构赋值 对象对对象 数组对数组
扩展运算符
箭头函数
  不需要 function 关键字来创建函数
  省略 return 关键字
  继承当前上下文的 this 关键字
import导入模块、export导出模块
Promise
数组常用方法：
Array.isArray
map
filter
forEach
every
reduce
splice
indexOf
slice
concat
reverse()
join()

Array.from()
Array.of()
copyWitch
find
findIndex
keys()
values()
class 静态、私有、共有

生成器（ generator）是能返回一个迭代器的函数。
生成器函数也是一种函数，最直观的表现就是比普通的function多了个星号*，
在其函数体内可以使用yield关键字,有意思的是函数会在每个yield后暂停。

可以暂停并重新开始执行的函数

generators 可以扮演三种角色
  迭代器(数据生产者)
  观察者(数据消费者)
  协作程序(数据生产者和消费者)

用CSS的"background-image"，"background-repeat"，"background-position"
的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
CSS Sprites 的优点：
减少图片字节
减少网页HTTP请求，提高网页性能
减少命名难的问题
缺点
图片合并的时候要把图片合理的合并成一张图片，防止板块内出现不必要的背景
在高分辨率下的自适应如果图片宽度不够，容易造成背景断裂
维护的时候比较困难，如果背景图有少许改动，需要改动合并图片。

如果不了解virtual dom，要理解diff的过程是比较困难的。虚拟dom对应的是真实dom， 使用document.CreateElement 和 document.CreateTextNode创建的就是真实节点。

我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。
diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁。

在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较。
diff流程图
当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，
订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。

patch函数接收两个参数oldVnode和Vnode分别代表新的节点和之前的旧节点
判断两节点是否值得比较，值得比较则执行patchVnode
不值得比较则用Vnode替换oldVnode
如果两个节点都是一样的，那么就深入检查他们的子节点。如果两个节点不一样那就说明Vnode完全被改变了，就可以直接替换oldVnode。

当我们确定两个节点值得比较之后我们会对两个节点指定patchVnode方法
这个函数做了以下事情：
  找到对应的真实dom，称为el
  判断Vnode和oldVnode是否指向同一个对象，如果是，那么直接return
  如果他们都有文本节点并且不相等，那么将el的文本节点设置为Vnode的文本节点。
  如果oldVnode有子节点而Vnode没有，则删除el的子节点
  如果oldVnode没有子节点而Vnode有，则将Vnode的子节点真实化之后添加到el
  如果两者都有子节点，则执行updateChildren函数比较子节点，这一步很重要
updateChildren
先说一下这个函数做了什么
  将Vnode的子节点Vch和oldVnode的子节点oldCh提取出来
  oldCh和vCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和vCh至少有一个已经遍历完了，就会结束比较。

v-bind  动态地绑定一个或多个特性、或一个组件 prop 到表达式。
1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，
在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"

v-model 在表单控件或者组件上创建双向绑定。
v-on 指令用于监听DOM事件 形式如：v-on:click  缩写为 @click;


[VUE中的v-if与v-show](http://www.cnblogs.com/wmhuang/p/5420344.html)
手段：v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
编译过程
：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；
只有在条件第一次变为真时才开始局部编译(编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载)
v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
性能消耗：
v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
使用场景：
v-if适合运营条件不大可能改变；v-show适合频繁切换。


v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：
如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，
元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件不太可能改变，则使用 v-if 较好。

 (1)浏览器可以对动画进行优化。
  1、 浏览器使用与 requestAnimationFrame 类似的机制，requestAnimationFrame比起setTimeout，setInterval设置动画的优势主要是:1)requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒60帧。2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。
  2、强制使用硬件加速 （通过 GPU 来提高动画性能）
  (2)代码相对简单,性能调优方向固定
  (3)对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码
缺点：
　　1、 运行过程控制较弱,无法附加事件绑定回调函数。CSS动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告
 　  2、  代码冗长。想用 CSS 实现稍微复杂一点动画,最后CSS代码都会变得非常笨重。

JavaScript
  (1)JavaScript动画控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
  (2)动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成
  (3)CSS3有兼容性问题，而JS大多时候没有兼容性问题
缺点：
　　　(1)JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。
  (2)代码的复杂度高于CSS动画

CDN的全称是Content Delivery Network，即内容分发网络。
其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，
使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联
网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、
负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近
的服务节点上。

其目的是使用户可就近取得所需内容，解决Internet网络拥挤的状况，
提高用户访问网站的响应速度。
降低核心系统负载 加速用户访问
CDN做了两件事，一是让用户访问最近的节点，二是从缓存或者源站获取资源