伪数组转换为数组

伪数组：不是一个真正的数组， 但是有 length 属性， 可以通过下标访问。
例如：

var obj = {
  0: "xxx",
  1: "A",
  2: "B",
  "3": "c",
  length: 4
}

[].slice.call(obj)

node.nodeType

参见MDN关于nodeType的资料

Object.defineProperty(obj, prop, config)

• configurable : 是否可以被重新定义（能否再次使用Object.defineProperty），默认false
• enumerable: 是否可枚举， 默认false
• writable: 值是否可以被修改
• value: 初始值是多少
• set: 回调函数， 通过传递的参数设置value值
• get: 回调函数，获取当前的value值

IE8不支持Object.defineProperty, 所以在使用了此方法的vue版本中， vue项目不能在IE8上运行

Object.keys()

返回所有的自身可枚举属性组成的数组。

obj.hasOwnProperty(prop)

返回一个布尔值， 表示prop是否是obj自身的属性

var obj = {
  name: "xx"
}
console.log(obj.hasOwnProperty(name), obj.hasOwnProperty(toString))
// true, false

DocumentFragment

文档碎片
Document: 页面中用于保存多个element的容器，里面的元素如果发生改变， 势必会导致页面发生改变。 如果多个元素发生改变， 势必会影响页面的性能。
DocumentFragment： 内存中用于保存多个变量的容器，内部的元素发生改变， 不会影响界面。不属于dom树的一部分，如果多个元素需要修改内容， 将其放入文档碎片中， 一并修改（修改时不存在性能问题）， 再最终一次渲染到页面上， 可以极大的提升元素修改的性能。

参见MDN关于文档碎片的说法

<ul id="ul">
  <li></li>
  <li></li>
  <li></li>
</ul>

var ul = document.getElementById("ul")
var fragment = document.createDocumentFragment()
var child = null
while(child=ul.firstChild){
  fragment.appendChild(child)
}

while(child=ul.firstChild) 做了两件事：

1. 赋值， 将ul的第一个子节点赋值给child。
2. 比较， 如果child为真， 执行循环里面的语句
   fragment.appendChild(child)做了一件很重要的事情：
   因为一个节点只能有一个父节点， 所以将child作为fragment的子节点之后， 就相当于child已经从原来的ul之中移除了，放入了fragment中。

Array.prototype.slice.call(fragment.childNodes).forEach(node => {
  if(node.nodeType === 1){ // 过滤掉回车符
    node.textContent = "hiahiahia"
  }
})

ul.appendChild(fragment)

列表被更新了， 从原来的内容，从变成了hiahiahia.
上面只有三个li, 如果是很多给就能省下很多的性能开销。