一些前端笔试总结

来源：互联网发布：光盘菜单制作软件编辑：程序博客网时间：2024/04/29 18:51

1. 循环绑定事件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <ul>        <li>111</li>        <li>2222222</li>        <li>33333333333</li>    </ul>    <script>        // 事件绑定中涉及的变量取值为最终的值，下面i最终取oLi.length        var oUl = document.getElementsByTagName('ul')[0];        var oLi = oUl.getElementsByTagName('li');        for(var i=0; i<oLi.length; i++){                        oLi[i].onclick = function(){                alert(i);//输出结果无论点击谁都是3，而不是我们想要的0,1,2            }        }    </script></body></html>解决方案：第一种<script>    // 加一层闭包，i以函数参数形式传递给内层函数    var oUl = document.getElementsByTagName('ul')[0];    var oLi = oUl.getElementsByTagName('li');    for(var i=0; i<oLi.length; i++){        (function(val){            oLi[val].onclick = function(){                alert(val);//输出结果是0,1,2            }        })(i);                            }</script>第二种<script>    <pre name="code" class="html">      // 加一层闭包，i传给局部变量    var oUl = document.getElementsByTagName('ul')[0];    var oLi = oUl.getElementsByTagName('li');    for(var i=0; i<oLi.length; i++){        (function(){            var val = i;            oLi[val].onclick = function(){                alert(val);//输出结果是0,1,2            }        })();                            }</script>

2. bind函数的原生js实现参考

Function.prototype.bind = function (oThis) {      if (typeof this !== "function") {      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");    }    var aArgs = Array.prototype.slice.call(arguments, 1),         fToBind = this,         fNOP = function () {},        fBound = function () {          return fToBind.apply(              this instanceof fNOP && oThis ? this : oThis || window,              aArgs.concat(Array.prototype.slice.call(arguments))          );        };    fNOP.prototype = this.prototype;    fBound.prototype = new fNOP();    return fBound;  };

3. 表单有哪些相关标签

form, input, label, select, option, textarea, fieldset, legend, optgroup, button

4. 一个数组['a','a','b','b','b','c','c','c','c']，写一个通用函数，输出其中数量最多的元素名称及次数

function arr_max(arr){    // 先对数组进行排序，将相同元素放在一起  arr.sort();  // 设置新数组，存放元素名称和数量  var result = [{name:arr[0], count:1}];  // 设置一个变量，始终指向result中正在处理的对象  var index=0;  // 遍历目标数组  for(var i=0, arr_len=arr.length; i<arr_len-1; i++){    if(arr[i]!=arr[i+1]){      result.push( {name:arr[i+1], count:1} );      index++;    }else{      result[index].count += 1;    }  }  // 对result数组进行排序，按照元素的count属性大小，降序  result.sort(function(a, b){    return b.count - a.count;  });  var output = '元素' + result[0].name;  for(var j=0, result_len = result.length; j<result_len-1; j++){    if(result[j].count === result[j+1].count){      output += ',' + result[j+1].name;    }else{      break;    }  }  output += '出现次数最多，为' + result[0].count + '次'  return output;}var arr = ['a','a','c','c','d','d','a','c','d'];arr_max(arr)

5. 两列布局，左边固定320px，右边自适应

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>两列布局</title>    <style>        /*设置了高度和背景，便于看出结果*/        .left{                      width: 320px;            height: 600px;            float: left;            background-color: green;            margin-right: -320px;        }        .right{                      width: 100%;             float: right;                  }        .r-box{            margin-left: 320px;                       height: 600px;            background-color: red;                   }    </style></head><body>    <div class="left"></div>    <div class="right">        <div class="r-box"></div>    </div></body></html>

6. HTTP在状态码为302时，会产生两次http请求。

301，302 都是HTTP状态的编码，都代表着某个URL发生了转移，不同之处在于：
301 redirect: 301 代表永久性转移(Permanently Moved)。
302 redirect: 302 代表暂时性转移(Temporarily Moved )。302转向可能会有URL规范化及网址劫持的问题。可能被搜索引擎判为可疑转向，甚至认为是作弊。

0 0