乐趣区

2019年前端笔试题

  1. 什么是 web 标准

    WEB 标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。
    对应的标准也分三方面:结构化标准 语言主要包括 XHTML 和 XML,表现标准 语言主要包括 CSS,行为标准 主要包括对象模型(如 W3C DOM)、ECMAScript 等。这些标准大部分由 W3C 起草和发布,也有一些是其他标准组织制订的标准,比如 ECMA(European Computer Manufacturers Association)的 ECMAScript 标准。

  2. 请解释一下 DOCTYPE 的作用,有 DOCTYPE 和没有 DOCTYPE 有什么区别?

    <!DOCTYPE> 声明位于位于 HTML 文档中的第一行,处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。

  3. XHTML 与 HTML 有什么区别

    • XHTML 元素必须被正确地嵌套。
    • XHTML 元素必须被关闭。
    • 标签名必须用小写字母。
    • XHTML 文档必须拥有根元素。
  4. 严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。

    当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式。

    在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。浏览器根据 DOCTYPE 是否存在以及使用的哪种 DTD 来选择要使用的呈现方法。如果 XHTML 文档包含形式完整的 DOCTYPE,那么它一般以标准模式 呈现。对于 HTML4.01 文档,包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。包含过渡 DTD 和 URI 的 DOCTYPE 也导致页面以标准 模式呈现,但是有过渡 DTD 而没有 URI 会导致页面以混杂模式呈现。DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。根据 DOCTYPE 是否存在选择呈现模式,被称为 DOCTYPE 切换或 DOCTYPE 侦测。DOCTYPE 切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了有效的 CSS,如果选择了错误的 DOCTYPE,那么页面就将以混杂 模式呈现,其行为就可能会有错误或不可预测。因此一定要在每个页面上包含形式完整的 DOCTYPE 声明,并且在使用 HTML 时选择严格的 DTD。
  5. 写出 3 个使用 this 的典型应用

    (1)在 html 元素事件属性中使用,如:

    <input type=”button”onclick=”showInfo(this);”value=”点击一下”/>

    (2)构造函数

    function Animal(name, color) {
      this.name = name;
      this.color = color;
    }

    (3)input 点击,获取值

    <input type="button" id="text" value="点击一下" />
    <script type="text/javascript">
        var btn = document.getElementById("text");
        btn.onclick = function() {alert(this.value);    // 此处的 this 是按钮元素
        }
    </script>

    (4)apply()/call()求数组最值

    var  numbers = [5, 458 , 120 , -215]; 
    var  maxInNumbers = Math.max.apply(this, numbers);  
    console.log(maxInNumbers);  // 458
    var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
    console.log(maxInNumbers);  // 458
  6. 数组去重

    // 方法一
    var norepeat = funtion(arr){return arr.filter(function(val, index, array){return array.indexOf(val) === index;
        });
    }
    norepeat()
    // 方法二
    var set = new Set(arr);
  7. 数组求和

    var sum = function(arr){return arr.reduce(function(x, y){return x + y});
    }
    
    sum()
  8. 如何显示 / 隐藏一个 DOM 元素?

    Display
    visibility
    Opacity

  9. JavaScript 中如何检测一个变量是一个 String 类型?

    function isString(str){return (typeof str == "string" || str.constructor == String);
    }
    
  10. 网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”

    function counter() {var date = new Date(); 
        var year = date.getFullYear();
        var date2 = new Date(year, 11, 30, 23, 59, 59);
        /* 转换成秒 */
        var time = (date2 - date) / 1000;
        var day = Math.floor(time / (24 * 60 * 60))
        var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60))
        var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
        var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);
        var str = year + "年还剩" + day + "天" + hour + "时" + minute + "分" + second + "秒";
        console.log(str);
    }
    window.setInterval("counter()", 1000);
  11. 补充代码,鼠标单击 Button1 后将 Button1 移动到 Button2 的后面.

    <div>
    <input type="button" id ="button1" value="1" onclick="moveBtn(this);">
    <input type="button" id ="button2" value="2" />
    </div>
    <script type="text/javascript">
    function moveBtn(obj) {var clone = obj.cloneNode(true);
    var parent = obj.parentNode;
    parent.appendChild(clone);
    parent.removeChild(obj);
    }
    </script>
    
  12. JavaScript 中如何对一个对象进行深度 clone

    方法一:

    function deepClone(obj){var str = JSON.sringify(obj);
      var newobj = JSON.parse(str);
      return newobj;
     }

    方法二:

    // 深克隆
    function deepClone(obj){if (!obj) {return obj;}
        var o = obj instanceof Array ? [] : {};
        for(var k in obj){if(obj.hasOwnProperty(k)){o[k] = typeof obj[k] === "object" ? deepClone(obj[k]) : obj[k];
            }
        }
        return o;
    }
    
  13. 鼠标点击页面中的任意标签,alert 该标签的名称.(注意兼容性)

    <script type="text/javascript">
       function elementName(evt){
        evt = evt|| window.event;
        var selected = evt.target || evt.srcElement;
        alert(selected.tagName);
       }
       
       window.onload = function(){var el = document.getElementsByTagName('body');
        el[0].onclick = elementName;
       }
      </script>
  14. 请编写一个 JavaScript 函数 parseQueryString,它的用途是把 URL 参数解析为一个对象

    var url =“http://witmax.cn/index.php?key0=0&key1=1&key2=2″;
    
    
    function parseQueryString(argu){var str = argu.split('?')[1];
        var result = {};
        var temp = str.split('&');
        for(vari=0; i<temp.length; i++){var temp2 = temp[i].split('=');
            result[temp2[0]] = temp2[1];
        }
        return result;
    }
  15. 如何点击每一列的时候 alert 其 index?

    <ul id=”test”>
        <li> 这是第一条 </li>
        <li> 这是第二条 </li>
        <li> 这是第三条 </li>
    </ul>
    
    (function A() {
        var index = 0;
        var ul = document.getElementById("test");
        var obj = {};
        for (var i = 0, l = ul.childNodes.length; i < l; i++) {if (ul.childNodes[i].nodeName.toLowerCase() == "li") {var li = ul.childNodes[i];
                li.onclick = function() {
                    index++;
                    alert(index);
                }
            }
        }
    })();
    
  16. 请给出异步加载 js 方案,不少于两种

    1)defer,只支持 IE
    2)async/await
    3)创建 script,插入到 DOM 中,加载完毕后 callBack,见代码:

  17. 请设计一套方案,用于确保页面中 JS 加载完全

    function loadScript(url, callback){var script = document.createElement("script")
        script.type = "text/javascript";
        if (script.readyState){ //IE
            script.onreadystatechange = function(){if (script.readyState == "loaded" || script.readyState == "complete"){
                    script.onreadystatechange = null;
                    callback();}
            };
        } else { //Others: Firefox, Safari, Chrome, and Opera
            script.onload = function(){callback();
            };
        }
        script.src = url;
        document.body.appendChild(script);
    }
    
    loadScript('http:/xxx.min.js',function(){alert('ok');
    })
  18. 判断一个字符串中出现次数最多的字符,统计这个次数

    方法一:利用 json 数据个数“键”唯一的特性
    方法二、利用数组 reduce()方法;同时应用一个函数针对数组的两个值 (从左到右)。
    方法三、利用正则表达式的 replace 对 str 的每一项进行检测


欢迎阅读:
2019 年前端面试题 -01
2019 年前端面试题 -02
2019 年前端面试题 -03


我是 Cloudy,年轻的前端攻城狮一枚,爱专研,爱技术,爱分享。
个人笔记,整理不易,感谢阅读、点赞和收藏。
文章有任何问题欢迎大家指出,也欢迎大家一起交流前端各种问题!

退出移动版