遍历DOM 树、函数记忆及样式前端笔试题

写一个traverse函数，输出所有页面宽度和高度大于50像素的节点。

function traverse(){
       return Array.prototype.filter.call(document.querySelectorAll('body *'), function(node){
       return node.offsetWidth > 50 && node.offsetHeight > 50;
       });
       }

document.querySelectorAll(selector ) 表示选中选择器下的所有元素

Array.prototype.filter(callback ) 过滤器

filter() 方法使用指定的函数测试所有元素，并创建一个包含所有通过测试的元素的新数组。

callback：用来测试数组的每个元素的函数。调用时使用参数 (element, index, array)。返回true表示保留该元素（通过测试），false则不保留。

函数记忆是指将上次的计算结果缓存起来，当下次调用时，如果遇到相同的参数，就直接返回缓存中的数据。

原理

实现这样一个 memorize 函数很简单，原理上只用把参数和对应的结果数据存到一个对象中，调用时，判断参数对应的数据是否存在，存在就返回对应的结果数据。

function memoize(f) {
    var cache = {};
    return function(){
        var key = arguments.length + Array.prototype.join.call(arguments, ",");
        if (key in cache) {
            return cache[key]
        }
        else return cache[key] = f.apply(this, arguments)
    }
}

这里执行memoize () 返回一个函数fn 执行fn(arguments) 中的arguments 就是memoize 中的arguments，将结果保存在cache 对象中。

var add = function(a, b, c) {
  return a + b + c
}

var memoizedAdd = memorize(add)

console.time('use memorize')
for(var i = 0; i < 100000; i++) {
    memoizedAdd(1, 2, 3)
}

css 伪类选择器实现table 隔行变色

奇数行为白色，偶数行为灰色，鼠标悬浮变成黄色。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style>
       tbody tr:nth-child(even){
           background-color: gray;
       }
       tbody tr:hover{
           background-color: yellow;
       }

   </style>
   <body>
       <table border="1" id="table" width="300px" height="300px">
           <tbody id="tb">
               <tr><td></td>
               </tr>
               <tr>
                   <td></td>
               </tr>
               <tr><td></td>
               </tr>
           </tbody>
       </table>
   </body>

</html>