2019年前端笔试题

2019-06-13 admin
  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);
```
  1. 补充代码,鼠标单击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>

```
  1. 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;
}

```
  1. 鼠标点击页面中的任意标签,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>
```
  1. 请编写一个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;
}
```
  1. 如何点击每一列的时候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);
            }
        }
    }
})();

```
  1. 请给出异步加载js方案,不少于两种
1)defer,只支持IE
2)async/await
3)创建script,插入到DOM中,加载完毕后callBack,见代码:
  1. 请设计一套方案,用于确保页面中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');
})
```
  1. 判断一个字符串中出现次数最多的字符,统计这个次数
> 方法一:利用json数据个数“键”唯一的特性
> 方法二、利用数组reduce()方法;同时应用一个函数针对数组的两个值(从左到右)。
> 方法三、利用正则表达式的replace对str的每一项进行检测

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


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

[转载]原文链接:https://segmentfault.com/a/1190000019465574

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67197.html

文章标题:2019年前端笔试题

相关文章
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
ES6笔试面试题总结
收集整理的一些ES6的笔试面试题,出处在最底部标明 把以下代码使用两种方法,来依次输出0到9? var funcs = [] for (var i = 0; i &lt; 10; i++) { funcs.push(functi...
2018-04-22
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
前端单页应用微服务化解决方案2 - Single-SPA
技术选型 经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各...
2018-09-07
Vue.js bootstrap前端实现分页和排序
写之前先抱怨几句。本来一心一意做.net开发的,渐渐地成了只做前端。最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面。 深知自己前端技术不足,以前虽说用asp.net前后台都做,但...
2017-03-14
回到顶部