前端笔试题总结

最新推荐文章于 2024-06-26 13:57:36 发布

原创最新推荐文章于 2024-06-26 13:57:36 发布 · 573 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文精选了JavaScript面试中常见的选择题及简答题，涵盖了变量类型判断、数组操作、链表特性、异步执行顺序等内容，并解析了localStorage与sessionStorage的区别、HTML5的新特性和移除元素、link与@import的区别等知识点。

一.选择题

在 javascript 中，以下返回 false 的选项是（）
A. var test = 1; typeof test == ‘number’;
B. var test = 1.2; typeof test == ‘float’;
C. var test = undefined; typeof test == ‘undefined’;
D. var test = {}; typeof test == ‘object’;
E. var test = ‘4399’-0; typeof test == ‘number’;
F. var test = ‘null’; typeof test == ‘object’;

答案：B
解析：typeof操作符可能返回的值有：undefiend、boolean、string、number、object、function

var arrTemp = [1, 2, 3];
arrTemp.shift();
arrTemp.push(1);
arrTemp.unshift(2);

var arrNew = arrTemp.concat([1, 2]);

console.log(arrNew);

以上 javascript 代码，在浏览器中运行的结果是（）

A .[2 ,2, 3, 1 ,1, 2]
B. [2, 1, 2, 1, 1, 2]
C. [2, 2, 3, 1, [1,2]]
D. [2, 1, 2, 1, [1,2]]

答案：A
解析：
shift函数的作用是删除第一项，所以arrTemp.shift的结果是[2, 3]，push函数的作用是在数组的末尾添加数据，所以arrTemp.push(1)的结果是[2, 3, 1]，unshift函数的作用是在数组的第一项添加数据，arrTemp.unshift(2)的结果是[2, 2, 3, 1]，concat函数的作用是添加数据至末尾，不论是什么数据，最终添加的都是元素，arrTemp.concat([1, 2])的结果是[2, 2, 3, 1, 1, 2]

链表不具备的特点是（）
A. 可随机访问任何一个元素
B. 插入、删除操作不需要移动元素
C. 无需事先估计存储空间大小
D. 所需存储空间与线性表长度成正比

答案：A

解析：B：链表的插入和删除是通过操作指针来完成的，不需要移动元素；C：链表是动态存储的结构，无需事先估计存储空间大小；

console.log(null == undefined, null === undefined);

答案：true, false
解析：null是Null类型，undefined是Undefined类型

下面代码的执行结果是

function get(callback) {
    var a = 'a';

    $.ajax({
        url : 'https://httpbin.org/get',
        method : 'get',
        success: function() {
        setTimeout(function() {
            console.log(a);
        }, 0);

        callback && callback();
    }
  });

  console.log('c');
}

get(function() {
  console.log('b');
});

答案：b、c、a

下面代码的执行结果是

function Mike(){
    this.sayMike = function(){};
}

function Tom(){}

Tom.prototype = new Mike()
Tom.prototype.sayTom = function(){}

var tom = new Tom()

console.log(tom.__proto__.sayTom  === Tom.prototype.sayTom);

console.log(tom.__proto__.__proto__  === Mike.prototype);

答案：true, true
解析：

这里写图片描述

下面代码的执行结果是

function fun() {
    for (var i = 0; i < 4; i++) {
        setTimeout(function () {
            console.log(i);
        }, 1000);
    }
}

答案：4,4,4,4
解析：setTimeout中的函数在1s之后才开始执行，而在这期间，i的值已经累加到4，所以输出的结果就是4个4

下面代码的执行结果是

function fun() {
    for (var i = 0; i < 4; i++) {
        setTimeout(function () {
            console.log(i);
        }, i*1000);
    }
}

答案：4,4,4,4
解析：遇上一个题同理，不同的是间隔的时间段不同

请写出链接的顺序

答案：link、visited、hover、active

下面代码的执行结果是

var Base = function() {
}

Base.prototype = {type: 5};

var a = new Base();
Base.prototype = {type: 8};
console.log(a.type);   // 5

a = new Base();
console.log(a.type);   // 8

二.简答题

localStorage与sessionStorage的区别是什么？
答：localStorage和sessionStorage都是存储在客户端的，sessionStorage在关闭网页之后存储的数据就会丢失，而localStorage会一直存储在客户端中，除非用户通过浏览器提供的API清除

HTML5都有哪些新特性？移除了哪些元素？
答：新特性：增强了图形渲染、影音、数据存储、多任务处理等处理能力
移除的元素： basefont、font、center、u、big、strike、tt、frameset、noframes、frame

页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载css外，还用于定义RSS，定义rel链接属性等作用，而@import是CSS提供的，只能用于加载CSS
（2）页面被加载的同时，link会同时被加载，而@import引用的CSS会等待页面被加载完再加载
（3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHML标签，无兼容性问题

持续更新中……