美文网首页
2020年WEB前端开发面试题最新整理(1-10)

2020年WEB前端开发面试题最新整理(1-10)

作者: 野生程序猿A | 来源:发表于2020-08-17 17:31 被阅读0次

    1.JavaScript的数据类型都有什么?

    基本数据类型:String,Boolean,Number,Undefined, Null

    引用数据类型:Object(Array,Date,RegExp,Function)

    那么问题来了,如何判断某变量是否为数组数据类型?

    方法一.判断其是否具有“数组性质”,如slice()方法。可自己给该变量定义slice方法,故有时会失效

    方法二.obj instanceof Array 在某些IE版本中不正确

    方法三.方法一二皆有漏洞,在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性,最好的方法如下:

    if(typeof Array.isArray==="undefined")

    {

    Array.isArray = function(arg){

    return Object.prototype.toString.call(arg)==="[object Array]"

    }; 

    }

    2.已知ID的Input输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架)

    document.getElementById(“ID”).value

    3.希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)

    var domList = document.getElementsByTagName(‘input’)

    var checkBoxList = [];

    var len = domList.length;  //缓存到局部变量

    while (len--) {  //使用while的效率会比for循环更高

    if (domList[len].type == ‘checkbox’) {

      checkBoxList.push(domList[len]);

      }

    }

    4.设置一个已知ID的DIV的html内容为xxxx,字体颜色设置为黑色(不使用第三方框架)

    var dom = document.getElementById(“ID”);

    dom.innerHTML = “xxxx”;

    dom.style.color = “#000”;

    5.当一个DOM节点被点击时候,我们希望能够执行一个函数,应该怎么做?

    直接在DOM里绑定事件:<div onclick=”test()”></div>

    在JS里通过onclick绑定:xxx.onclick = test

    通过事件添加进行绑定:addEventListener(xxx, ‘click’, test)

    那么问题来了,Javascript的事件流模型都有什么?

    “事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播

    “事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的

    “DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

    6.什么是Ajax和JSON,它们的优缺点。

    Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。

    优点:

    可以使得页面不重载全部内容的情况下加载局部内容,降低数据传输量

    避免用户不断刷新或者跳转页面,提高用户体验

    缺点:

    对搜索引擎不友好(

    要实现ajax下的前后退功能成本较大

    可能造成请求数的增加

    跨域问题限制

    JSON是一种轻量级的数据交换格式,ECMA的一个子集

    优点:轻量级、易于人的阅读和编写,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)

    7.看下列代码输出为何?解释原因。

    var a;

    alert(typeof a); // undefined

    alert(b); // 报错

    解释:Undefined是一个只有一个值的数据类型,这个值就是“undefined”,在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。

    8.看下列代码,输出什么?解释原因。

    var a = null;

    alert(typeof a); //object

    解释:null是一个只有一个值的数据类型,这个值就是null。表示一个空指针对象,所以用typeof检测会返回”object”。

    9.看下列代码,输出什么?解释原因。

    var undefined;

    undefined == null; // true

    1 == true;  // true

    2 == true;  // false

    0 == false;  // true

    0 == '';    // true

    NaN == NaN;  // false

    [] == false; // true

    [] == ![];  // true

    undefined与null相等,但不恒等(===)

    一个是number一个是string时,会尝试将string转换为number

    尝试将boolean转换为number,0或1

    尝试将Object转换成number或string,取决于另外一个对比量的类型

    所以,对于0、空字符串的判断,建议使用 “===” 。“===”会先判断两边的值类型,类型不匹配时为false。

    那么问题来了,看下面的代码,输出什么,foo的类型为什么?

    var foo = "11"+2-"1";

    console.log(foo);

    console.log(typeof foo);

    执行完后foo的值为111,foo的类型为Number。

    var foo = "11"+2+"1";    //体会加一个字符串'1' 和 减去一个字符串'1'的不同

    console.log(foo);

    console.log(typeof foo);

    执行完后foo的值为1121(此处是字符串拼接),foo的类型为String。

    10.看代码给答案。

    var a = new Object();

    a.value = 1;

    b = a;

    b.value = 2;

    alert(a.value);

    答案:2(考察引用数据类型细节)

    相关文章

      网友评论

          本文标题:2020年WEB前端开发面试题最新整理(1-10)

          本文链接:https://www.haomeiwen.com/subject/rrhtrktx.html