欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端面试题整理

程序员文章站 2022-03-04 11:58:08
...

1.写出下面程序的运行结果:

if([] instanceof Object){
    console.log("hello");
}else{
    console.log("world");
}
复制代码

答案是:hello

2.写出下面程序的运行结果:

var x = 1;
function ScopeTest(){
    alert(x);
    var x = "hello world";
    alert(x);
}
ScopeTest();
复制代码

答案是:undefined

             Hello world

3.写出下面程序的运行结果:

var t = true;
window.setTimeout(function(){
    t = false;
},1000);
while(t){

}
alert("end");
复制代码

答案是:浏览器卡死,因为浏览器执行到setTimeout()定时器时,先不执行,先把它放到异步队列中,接着执行while循环同步任务,这时是一个死循环,所以,浏览器卡死。

4.写出下面程序的运行结果:

for(var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(i);
    },1000);
}
复制代码

答案是:

5

5

5

5

5.写出下面程序的运行结果:

(1) console.log(isNaN(NaN));	
(2) console.log(isNaN(23));
(3) console.log(isNaN('ds'));
(4) console.log(isNaN('32131dsafdas'));
(5) console.log(NaN === NaN);
(6) console.log(NaN === undefined);
(7) console.log(undefined === undefined);
(8) console.log(typeof NaN);
复制代码

答案是:

(1) true (2) false (3) true (4) true (5) false (6) false (7) true (8) number

6.写出下面程序的运行结果:

console.log( ‘hello’ + (1<2) ? 'world' : 'me');
复制代码

答案是:world

7.写出下面程序的运行结果:

if(10 > 9 > 8 == true){
    console.log("html5");
}else{
    console.log("css3");
}
复制代码

答案是:css3

8.写出下面程序的运行结果:

var obj = {};
obj.name = "first";
var peo = obj;
peo.name = "second";
console.log(obj.name);
复制代码

答案是:second

9.写出下面程序的运行结果:

var length = 10;
function fn(){
    console.log(this.length);
}
var obj = {
    length : 5,
    method : function(fn){
        fn();
        arguments[0]();
    }
};
obj.method(fn , 1);
复制代码

答案是:

10

2

10.写出下面程序的运行结果:

var output = (function(x){
    delete x;
    return x;
})(0);
console.log(output);
复制代码

答案是:0

11.平常在项目中,用到过css3的哪些新特性?

答案是:圆角,阴影,弹性盒子,transition,animation等。

12.列举3种强制类型转换和2种隐式类型转换?

答案是:强制类型转换:Number() , String() , Boolean(); 隐式类型转换:布尔值参与的+运算,会先将布尔值转成对应的数字,然后再进行+运算;数字和字符串使用+运算,会将数字转成字符串,然后再进行字符串的连接。

13.call和apply的区别?

答案是:call(新this对象,参数数组); apply(新this对象,参数列表);

14.什么是javascript的同源策略?

答案是:同源策略,限制一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

15.你采取过哪些网站性能优化方法?

答案是:(1) 资源压缩合并,减少http请求; (2)非核心代码异步加载; (3)利用浏览器缓存; (4)使用CDN; (5)预解析DNS

16.列出几种js继承的实现方式?

答案是:

(1) 借助构造函数实现继承
function Parent(){
this.name = ‘lxf’;
}
function Child(){
Parent.call(this);
this.age = 18;
}
这种方式只能实现部分继承,即父类的构造方法中的属性,子类可以继承,其缺点是,父类原型上的属性或方法,子类无法继承。
(2)借助原型链实现继承
function Parent(){
this.name = ‘lxf’;
this.play = [1,2,3];
}
function Child(){
this.age = 18;
}
Child.prototype = new Parent();
这种继承方式的缺点是用子类Child实例化两个对象后,var s1 = new Child(); var s2 = new Child(); s1.play.push(4); console.log(s2.play); 也会打印出[1,2,3,4],其原因是两个对象的__proto__指向了同一个原型对象。
(3)组合方式
function Parent(){
this.name = ‘lxf’;
}
function Child(){
Parent.call(this);
this.age = 18;
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
此种方式是最完美的方式。
复制代码

17.rem实现自适应布局的原理是什么?

答案是:rem是根据html的font-size大小来变化,正是基于这个出发,我们可以在每一个设备下根据设备的宽度设置对应的html字号,从而实现自适应布局。