日常总结知识点1：

bootstracp 的栅格布局原理

媒体查询
Bootstrap框架中的网格系统就是将容器平分成12份，最后结合媒体查询，就制作出了强大的响应式网格系统。

• 数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
• 在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。
• 具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素。
• 通过设置内距（padding）从而创建列与列之间的间距。

图片懒加载：

首先在渲染时，图片引用默认图片，然后把真实地址放在data-*属性上面。

<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>

然后是监听滚动，直接用window.onscroll就可以了，但是要注意一点的是类似于window的scroll和resize，还有mousemove这类触发很频繁的事件，最好用节流(throttle)或防抖函数(debounce)来控制一下触发频率。underscore和lodash里面都有封装这两个方法，这里先不多做介绍了。

接着要判断图片是否出现在了视窗里面，主要是三个高度：1，当前body从顶部滚动了多少距离。2，视窗的高度。3，当前图片距离顶部的距离。offsetTop相关属性可以参考这里，具体代码如下：

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {

  var bodyScrollHeight =  document.body.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('lazyloadimg');
  for (var i =0; i < imgs.length; i++) {
    var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度  
    if (imgHeight  < windowHeight  + bodyScrollHeight) {
       imgs[i].src = imgs[i].getAttribute('data-src');
       img[i].className = img[i].className.replace('lazyloadimg','')
    }
  }
 }

数组方法：

• arr.toString() 与 arr.join()输出相同，不过join里可以输入其它链接符
• arr.push(item)
  接受任意数量的参数，添加到数组末尾，返回新数组的长度
• arr.pop()删除数组最后一项，返回删除的项
• arr.unshift()
  接受任意数量的参数，添加到数组头部，返回新数组的长度
• arr.shift()
  删除数组第一项，返回删除的项
• arr.sort()
  如果不传参数，默认情况下数组内的元素会被转换为字符串进行比较，返回值为排序后的新数组。原数组会被改变

//对象形式的数组按属性排序
var arr = [
    {name:'zopp',age:0},
    {name:'gpp',age:18},
    {name:'yjj',age:8}
];

function compare(property){
    return function(a,b){
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
    }
}
console.log(arr.sort(compare('age')))

• arr.concat()
  没有传递参数，那么只是复制当前数组并返回副本，原数组不变；
  传递一个元素（数组）或多个元素（数组）,会将其合并到arr中，返回新数组，原数组不变
• arr.slice
  剪切数组，返回剪切之后的数组，元素不会改变
  1、传入一个参数，表示起始位置，结束位置为最末尾；2、传入2个参数，表示起始位置与结束位置，但不包括结束位置所在的元素
• splice()

1. 删除：arr.splice(index, num)
   传入两个参数，第一个为位置（ 数组下标），第二个为删除的项数，可以删除任意项，返回删除元素组成的数组，原数组变了

2. 插入：arr.splice(index,0,item)
   传入3个参数， [起始位置（ 数组下标） | 要删除的项数 为0 | 要插入的元素]， 最终返回删除掉的元素组成的数组，因为这里删除项数为0，因此会返回空数组

3. 替换：arr.splice(index, num, item)
   传入3个参数，[起始位置 | 要删除的项数 | 要插入的任意项数]， 最终返回删除掉的元素组成的数组

• arr.reduce()方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终为一个值，是ES5中新增的又一个数组逐项处理方法，
• arr.map()
  对数组中的每一项运行给定函数，返回每次函数调用的结果组成的新数组

//返回nums中每一项乘以2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.map((item, index, arr)=> item * 2 ) // [2, 4, 6, 8, 10, 8, 6, 4, 2]

• arr.forEach()
  对数组中的每一项运行给定函数，这个方法没有返回值

//返回nums中每一项乘以2的数组
var nums = [1,2,3,4,5,4,3,2,1]
nums.forEach((item, index, arr)=> item * 2 ) // undefined

• arr.indexOf()
  验证数组中是否含有某个元素，返回第一个匹配到的元素在数组中所在的位置，如果没有，则返回 -1
• arr.includes()（ES6新增：）
  数组是否包含某个值，返回true 或 false
• ES6新增：
• arr.find() arr.findIndex()
  找出第一个符合条件的数组成员，它参数是一个函数，每一个成员执行这个函数，找到返回true,没找到返回undefined
  函数的参数[当前值 | 当前的位置 | 原数组]
• for…of…
  遍历数组元素

Jquery方法：

• $.each(arr, fn)遍历数组或者对象。fn有2个参数，分别为
  [ 数组的索引或者对象的key值 | 索引或者key值对应的value值 ]
• $.map(arr, fn)
  对每项进行处理，返回处理结果组成的数组，此处fn的参数如下
  [ value: 对象/数组的值 | key值或者序列 ]