1. every

  1. # every
  2.   - every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
  3.   1. 语法： 
  4.      arr.every(callback, thisArg)
  5.   2. 参数:
  6.      1. callback -> 用来测试每个元素的函数, 可以接收三个参数:
  7.          1. element: 用于测试的当前值.
  8.          2. index(可选): 用于测试的当前值的索引.
  9.          3. array(可选): 调用every的当前数组.
  10.      2. thisArg(可选) -> 执行callback时使用的this值.
  11.    3. 返回值: 
  12.       如果回调函数的每一次返回都为真, 返回true, 否则返回false.
  13.    4. 总结
  14.       如果有一个不满足条件就停止遍历, 条件就是return后面的表达式,并返回bool
  1. Array.prototype.every = function(fn){
  2.   var arr = this,
  3.       len = arr.length,
  4.       arg2 = arguments[1] || window,
  5.       res = true;
  7.   for(var i = 0; i < len; i++){
  8.    if(!fn.apply(arg2, [arr[i], i, arr])){
  9.      res = false;
  10.      break;
  11.    }
  12.   }
  13.   return res;
  14. }

2. some

  1. # some
  2.   - some() 方法测试数组中是不是至少有一个元素通过了被提供的函数测试, 它返回的是一个Boolean类型            化的值
  3.   1. 语法
  4.     arr.some(callback, thisArg);
  5.   2. 参数
  6.       1. callback: 用来测试数组的每一个元素的函数,返回true表示该元素通过测试, 保留该元素,                          false则不保留,它接受以下参数:
  7.           1. element: 数组当前正在处理的元素.
  8.           2. index(可选): 正在处理的元素在数组中的元素
  9.           3. arr(可选): 被调用的数组
  10.       2. thisArg(可选) -> 执行callback, 用于this的值
  11.    3. 返回值
  12.       数组中有至少一个元素通过回调函数的测试就会返回true, 所有元素都没有通过回调函数才会返回                false
  13.    4. 总结: 
  14.       只要有一个满足条件就停止遍历, 条件就是return后面的表达式
  15.       返回一个bool
  1. Array.prototype.mySome = function(fn){
  2.   var arr = this,
  3.       len = arr.length,
  4.       arg2 = arguments[1] || window,
  5.       res = false;
  7.   for(var i = 0; i < len; i++){
  8.    if(fn.apply(arg2, [arr[i], i, arr])){
  9.      res = true;
  10.      break;
  11.    }
  12.   }
  13.   return res;
  14. }

3. reduce, reduceRight

  1. # reduce-> 归纳函数
  2.   - reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。
  3.   1. 语法
  4.     [].reduce(function(prev, elem, index, arr){}, initialValue);
  5.   2. 参数
  6.      1. callback: reducer函数, 包含四个参数:
  7.         1. prev: 上一次调用callback返回值.
  8.         2. elem: 数组正在处理的元素.
  9.         3. index: 数组中正在处理的元素的索引.
  10.         4. arr: 用于遍历的数组.
  11.       2. initialValue: 作为第一次调用 callback 函数时参数 prev 的值。若指定了初始值              initialValue，则 elem 则将使用数组第一个元素；否则 prev 将使用数组第一个元素，而 elem 将使用数组第二个元素。
  12.    3. 返回值
  13.        使用reducer回调函数遍历整个数组的结果.
  1. // 增加this可选
  2. Array.prototype.myReduce = function(fn, initialValue){
  3.   var arr = this,
  4.       len = arr.length,
  5.       arg3 = arguments[2] || window;
  6.   for(var i = 0; i < len; i++){
  7.     initialValue = fn.apply(arg3, [arr[i], i, arr]);
  8.   }
  10.   return initialValue;
  11. }
  13. Array.prototype.myReduceRight = function(fn, initialValue){
  14.   var arr = this,
  15.       len = arr.length,
  16.       arg3 = arguments[2] || window;
  17.   for(var i = len - 1; i >= 0 ; i--){
  18.     initialValue = fn.apply(arg3, [arr[i], i, arr]);
  19.   }
  21.   return initialValue;
  22. }

4. 搜索渲染小demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>搜索选项卡</title>
  7. </head>
  8. <body>
  9.     <input type="text" id="j_searchInput">
  10.     <ul class="list">
  11.         <span>- 暂无课程 -</span>
  12.     </ul>
  13.     <div id="j_data" style="display: none">
  14.         [{"id": "1","course":"前端开发之企业级深度JavaScript特训课【JS++前端】","classes":"19","teacher":"小野","img":"ecmascript.jpg","is_free":"1","datetime":"1540454477","price":"0"},
  15.         {"id": "2","course":"WEB前端工程师就业班之深度JS DOM+讲师辅导-第3期【JS++前端】","classes":"22","teacher":"小野","img":"dom.jpg","is_free":"0","datetime":"1540454477","price":"699"},
  16.         {"id": "3","course":"前端开发之企业级深度HTML特训课【JS++前端】","classes":"3","teacher":"小野","img":"html.jpg","is_free":"1","datetime":"1540454477","price":"0"},
  17.         {"id": "4","course":"前端开发之企业级深度CSS特训课【JS++前端】","classes":"5","teacher":"小野","img":"css.jpg","is_free":"1","datetime":"1540454477","price":"0"},
  18.         {"id": "5","course":"前端就业班VueJS+去哪儿网+源码课+讲师辅导-第3期【JS++前端】","classes":"50","teacher":"哈默","img":"vuejs.jpg","is_free":"0","datetime":"1540454477","price":"1280"},
  19.         {"id": "6","course":"前端就业班ReactJS+新闻头条实战+讲师辅导-第3期【JS++前端】","classes":"21","teacher":"托尼","img":"reactjs.jpg","is_free":"0","datetime":"1540454477","price":"2180"},
  20.         {"id": "7","course":"WEB前端开发工程师就业班-直播/录播+就业辅导-第3期【JS++前端】","classes":"700","teacher":"JS++名师团","img":"jiuyeban.jpg","is_free":"0","datetime":"1540454477","price":"4980"}]
  21.     </div>
  22.     <script type="text/javascript">
  23.         ;(function(doc){
  24.             var data = JSON.parse(doc.getElementById('j_data').innerHTML),
  25.                     oSearchInput = doc.getElementById('j_searchInput'),
  26.                     oList = doc.getElementsByClassName('list')[0];
  28.             var init = function(){
  29.                 bindEvent();
  30.             }
  32.             function bindEvent(){
  33.                 oSearchInput.addEventListener('input', searchInput, false);
  34.             }
  36.             function searchInput(){
  37.                 var val = oSearchInput.value,
  38.                         len = val.length;
  40.                 if(len > 0){
  41.                     var arr = reduceData(val, data);
  42.                     if(arr.length > 0) {
  43.                         oList.innerHTML = renderList(arr);
  44.                     }else{
  45.                         oList.innerHTML = `<span>- 暂无课程 - </span>`;
  46.                     }
  47.                 }else{
  48.                     oList.innerHTML = `<span>- 暂无课程 - </span>`;
  49.                 }
  50.             }
  52.             function reduceData(val, data){
  53.                 var nArr = data.reduce(function(prev, elem){
  54.                     if(elem.course.indexOf(val) !== -1){
  55.                         prev.push(elem.course);
  56.                     }
  57.                     return prev;
  58.                 }, []);
  59.                 return nArr;
  60.             }
  62.             function renderList(arr){
  63.                 var list = '';
  65.                 arr.forEach(function(elem){
  66.                     list += '<li>' + elem + '</li>';
  67.                 })
  69.                 return list;
  70.             }
  72.             init();
  73.         })(document);
  74.     </script>
  75. </body>
  76. </html>