1. every

# every
  - every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
  1. 语法： 
     arr.every(callback, thisArg)
  2. 参数:
     1. callback -> 用来测试每个元素的函数, 可以接收三个参数:
         1. element: 用于测试的当前值.
         2. index(可选): 用于测试的当前值的索引.
         3. array(可选): 调用every的当前数组.
     2. thisArg(可选) -> 执行callback时使用的this值.
   3. 返回值: 
      如果回调函数的每一次返回都为真, 返回true, 否则返回false.
   4. 总结
      如果有一个不满足条件就停止遍历, 条件就是return后面的表达式,并返回bool

Array.prototype.every = function(fn){
  var arr = this,
      len = arr.length,
      arg2 = arguments[1] || window,
      res = true;
  for(var i = 0; i < len; i++){
   if(!fn.apply(arg2, [arr[i], i, arr])){
     res = false;
     break;
   }
  }
  return res;
}

2. some

# some
  - some() 方法测试数组中是不是至少有一个元素通过了被提供的函数测试, 它返回的是一个Boolean类型            化的值
  1. 语法
    arr.some(callback, thisArg);
  2. 参数
      1. callback: 用来测试数组的每一个元素的函数,返回true表示该元素通过测试, 保留该元素,                          false则不保留,它接受以下参数:
          1. element: 数组当前正在处理的元素.
          2. index(可选): 正在处理的元素在数组中的元素
          3. arr(可选): 被调用的数组
      2. thisArg(可选) -> 执行callback, 用于this的值
   3. 返回值
      数组中有至少一个元素通过回调函数的测试就会返回true, 所有元素都没有通过回调函数才会返回                false
   4. 总结: 
      只要有一个满足条件就停止遍历, 条件就是return后面的表达式
      返回一个bool

Array.prototype.mySome = function(fn){
  var arr = this,
      len = arr.length,
      arg2 = arguments[1] || window,
      res = false;
  for(var i = 0; i < len; i++){
   if(fn.apply(arg2, [arr[i], i, arr])){
     res = true;
     break;
   }
  }
  return res;
}

3. reduce, reduceRight

# reduce-> 归纳函数
  - reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
  1. 语法
    [].reduce(function(prev, elem, index, arr){}, initialValue);
  2. 参数
     1. callback: reducer函数, 包含四个参数:
        1. prev: 上一次调用callback返回值.
        2. elem: 数组正在处理的元素.
        3. index: 数组中正在处理的元素的索引.
        4. arr: 用于遍历的数组.
      2. initialValue: 作为第一次调用 callback 函数时参数 prev 的值。若指定了初始值              initialValue，则 elem 则将使用数组第一个元素；否则 prev 将使用数组第一个元素，而 elem 将使用数组第二个元素。
   3. 返回值
       使用reducer回调函数遍历整个数组的结果.

// 增加this可选
Array.prototype.myReduce = function(fn, initialValue){
  var arr = this,
      len = arr.length,
      arg3 = arguments[2] || window;
  for(var i = 0; i < len; i++){
    initialValue = fn.apply(arg3, [arr[i], i, arr]);
  }
  return initialValue;
}
Array.prototype.myReduceRight = function(fn, initialValue){
  var arr = this,
      len = arr.length,
      arg3 = arguments[2] || window;
  for(var i = len - 1; i >= 0 ; i--){
    initialValue = fn.apply(arg3, [arr[i], i, arr]);
  }
  return initialValue;
}

4. 搜索渲染小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索选项卡</title>
</head>
<body>
    <input type="text" id="j_searchInput">
    <ul class="list">
        <span>- 暂无课程 -</span>
    </ul>
    <div id="j_data" style="display: none">
        [{"id": "1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id": "2","course":"WEB前端工程师就业班之深度JS DOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
        {"id": "3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id": "4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
        {"id": "5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
        {"id": "6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
        {"id": "7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}]
    </div>
    <script type="text/javascript">
        ;(function(doc){
            var data = JSON.parse(doc.getElementById('j_data').innerHTML),
                    oSearchInput = doc.getElementById('j_searchInput'),
                    oList = doc.getElementsByClassName('list')[0];
            var init = function(){
                bindEvent();
            }
            function bindEvent(){
                oSearchInput.addEventListener('input', searchInput, false);
            }
            function searchInput(){
                var val = oSearchInput.value,
                        len = val.length;
                if(len > 0){
                    var arr = reduceData(val, data);
                    if(arr.length > 0) {
                        oList.innerHTML = renderList(arr);
                    }else{
                        oList.innerHTML = `<span>- 暂无课程 - </span>`;
                    }
                }else{
                    oList.innerHTML = `<span>- 暂无课程 - </span>`;
                }
            }
            function reduceData(val, data){
                var nArr = data.reduce(function(prev, elem){
                    if(elem.course.indexOf(val) !== -1){
                        prev.push(elem.course);
                    }
                    return prev;
                }, []);
                return nArr;
            }
            function renderList(arr){
                var list = '';
                arr.forEach(function(elem){
                    list += '<li>' + elem + '</li>';
                })
                return list;
            }
            init();
        })(document);
    </script>
</body>
</html>

js笔记

2. every, some, reduce, reduceRight 使用与重写

1. every

2. some

3. reduce, reduceRight

4. 搜索渲染小demo