一些前端笔试总结

最新推荐文章于 2022-11-28 10:30:55 发布

山外人家

最新推荐文章于 2022-11-28 10:30:55 发布

阅读量397

点赞数

分类专栏：前端笔试文章标签： js 前端笔试 html css

本文链接：https://blog.csdn.net/liyujia6636/article/details/52633818

版权

前端笔试专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
一些前端笔试总结

1. 循环绑定事件 Document 111 2222222 33333333333 // 事件绑定中涉及的变量取值为最终的值，下面i最终取oLi.length var oUl = document.getElementsByTag
复制链接

扫一扫