资讯专栏INFORMATION COLUMN

2019年前端笔试题

Neilyo / 640人阅读

摘要:为了实现这一点,他们创建了两种呈现模式标准模式和混杂模式。不存在或形式不正确会导致和文档以混杂模式呈现。无论是否编写了有效的,如果选择了错误的,那么页面就将以混杂模式呈现,其行为就可能会有错误或不可预测。

什么是web标准

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

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

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

XHTML与HTML有什么区别

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。

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

在标准模式中,浏览器根据规范呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。
混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
浏览器根据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。

写出3个使用this的典型应用

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

(2)构造函数

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

(3)input点击,获取值


(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

数组去重

// 方法一
var norepeat = funtion(arr){
    return arr.filter(function(val, index, array){
        return array.indexOf(val) === index;
    });
}
norepeat()


// 方法二
var set = new Set(arr);

数组求和

var sum = function(arr){
    return arr.reduce(function(x, y){
        return x + y
    });
}

sum()

如何显示/隐藏一个DOM元素?

Display
visibility
Opacity

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

function isString(str){
 return (typeof str == "string" || str.constructor == String);
}

网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”

function counter() { 
    var date = new Date(); 
    var year = date.getFullYear();
    var date2 = new Date(year, 12, 31, 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);

补充代码,鼠标单击Button1后将Button1移动到Button2的后面.

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;
}

鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性)

请编写一个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

如何点击每一列的时候alert其index?

  • 这是第一条
  • 这是第二条
  • 这是第三条
(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); } } } })();

请给出异步加载js方案,不少于两种

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

请设计一套方案,用于确保页面中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");
})

判断一个字符串中出现次数最多的字符,统计这个次数

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104658.html

相关文章

  • 2019年前端笔试题

    摘要:为了实现这一点,他们创建了两种呈现模式标准模式和混杂模式。不存在或形式不正确会导致和文档以混杂模式呈现。无论是否编写了有效的,如果选择了错误的,那么页面就将以混杂模式呈现,其行为就可能会有错误或不可预测。 什么是web标准?WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为 (Behavior)。...

    Baaaan 评论0 收藏0
  • 2019年前端面试题-03

    摘要:前端示例服务器端代码可靠的实例添加回调函数拼接传递的是一个匿名的回调函数,要执行的话,暴露为一个全局方法出错处理使用示例欢迎阅读年前端面试题年前端面试题年前端笔试题我是,年轻的前端攻城狮一枚,爱专研,爱技术,爱分享。 let与var的区别? Let为ES6新添加申明变量的命令,它类似于var,但是有以下不同: 1、var声明的变量,其作用域为该语句所在的函数内,且存在变量提...

    王岩威 评论0 收藏0
  • 2019年前端面试题-03

    摘要:前端示例服务器端代码可靠的实例添加回调函数拼接传递的是一个匿名的回调函数,要执行的话,暴露为一个全局方法出错处理使用示例欢迎阅读年前端面试题年前端面试题年前端笔试题我是,年轻的前端攻城狮一枚,爱专研,爱技术,爱分享。 let与var的区别? Let为ES6新添加申明变量的命令,它类似于var,但是有以下不同: 1、var声明的变量,其作用域为该语句所在的函数内,且存在变量提...

    BlackHole1 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<