前端面试题

1 ,什么是闭包?闭包有什么好处?使用闭包要注意什么?

闭包:函数嵌套函数,内部函数可以引用外部函数的参数和变量,变量和参数不会被垃圾回收机制所回收
好处:1)希望一个变量长期驻扎在内存之中
     2)避免全局变量的污染
     3)私有成员的存在
注意:可能会造成内存泄漏

详情可参考:http://www.jianshu.com/p/76ad6105bb8b

2,在js中通过typeof能弹出的数据类型有哪些

number,string,boolean,function,object,undefined

3,arr.pop(),arr.push()有什么区别

<script>
var arr=[2,1,3,21,12];
arr.pop();//从数组最后面一个数字删除,返回被删除的数字=》12
arr.push(8)//从数组最后面添加一个数字,返回添加之后数组的长度=》5;

</script>

4,以下代码弹出结果是什么?

    alert(aSome);
    function aSome(){
        var aSome=3;
        function bSome(){
            var aSome=1;
            alert(aSome);
        }
        bSome();
    }
    aSome();

结果:
1,弹出整个aSome函数体,因为函数预解析
2,弹出1

5,以下代码执行结果是多少?

<script>
    var a='a1';
    a++;
    alert(a);
</script>
结果为NaN,因为字符串++时进行隐示类型转化,字母++结果为NaN

6,以下代码的执行结果是多少?

var a='撒旦';
a=parseFloat(a);
alert(a==a);
结果为false,a进行转化以后为NaN,NaN和任何值都不相等,包括自己。

7,常见字符串方法,数组方法,数学方法.

//字符串方法
    str.charAt()
    str.toLowerCase()
    str.toUpperCase()
    str.indexOf()
    str.laseIndexOf()
    str.substring()
    str.split()
//数组方法
    arr.push()
    arr.unshift()
    arr.pop()
    arr.shift()
    arr.join()
    arr.splice()
    arr.reverse()
    arr.concat()
    arr.sort()
//数学方法
    Math.random()
    Math.pow()
    Math.sqrt()
    Math.abs()
    Math.floor()
    Math.ceil()
    Math.round()
    Math.max()
    Math.min()

8,怎样判断浏览器类型是ie6?

if(window.navigator.userAgent.toLowerCase().indexOf('msie 6.0')!=-1){
    alert('是ie6');
}

9,以下代码的执行结果是多少?

<script>
    var a=b=0;
    while(a<=100){
        b+=a;
        a++;
    }
    alert(b);
</script>
结果:5050

10,var str='abc12 34 43av 345 abd567 98 9';写一个程序找出其中的数字

alert(str.match(/\d+/g))

11,get和post的区别

1.Post传输数据时,不需要在URL中显示出来,而Get方法要在URL中显示。
2.Post传输的数据量大,可以达到2M,而Get方法由于受到URL长度的限制,只能传递大约1024字节.
3.Post顾名思义,就是为了将数据传送到服务器段,Get就是为了从服务器段取得数据.而Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post的信息作为http请求的内容,而Get是在Http头部传输的。
get 方法用Request.QueryString["strName"]接收
post 方法用Request.Form["strName"] 接收
注意:
虽然两种提交方式可以统一用Request("strName")来获取提交数据,但是这样对程序效率有影响,不推荐使用。
一般来说,尽量避免使用Get方式提交表单,因为有可能会导致安全问题

12,cookie,localStorage和sessionStorage有什么区别?

共同点:都是保存在浏览器端,且同源的。

区别:
1)cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
2)cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
3)存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
4)数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
5)作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

13,以下代码的执行结果是多少?

<script>
    alert(aSome);
    function aSome(){
        var aSome=3;
        function bSome(){
            var aSome=1;
            alert(aSome);
        }
        bSome();
    }
    alert(aSome());
</script>
结果:
1,整个函数体aSome
2,1
3,undefined 因为函数没有返回值

14,以下代码的执行结果是多少?

<script>
    alert(aSome);
    var aSome=function(){
        var aSome=3;
        function bSome(){
            var aSome=1;
            alert(aSome);
        }
        bSome();
    }
    aSome();
</script>
结果:
1,undefined 变量预解析
2,1

15, 字符串转数字的方法有哪些,怎么进行转换的?

//转化成整数
parseInt('12')=>12
parseInt('12abc')=>12
parseInt('12.5abc')=>12
//保留小数
parseFloat('12')=>12
parseFloat('12abc')=>12
parseFloat('12.5abc')=>12.5

//转化纯数字
Number('12')=>12
Number('12abc')=>NaN
Number('12.5abc')=>NaN

16,封装一个获取随机整数的函数

<script>
//n,m的随机数封装
function rnd(n,m){
    return Math.floor(Math.random()*(m-n)+n);
}
</script>

17.javascript是面向对象的,怎么体现javascript的继承关系?

1.属性
    父级构造函数.apply(this,arguments);
2.方法
    子级构造函数.prototype=new 父级构造();
    子级构造函数.prototype.constructor=子级构造;

18,怎样创建,添加(2种)和删除元素

//创建元素ele表示创建元素的标签名
document.createElement(ele);
//添加
//从后面添加
oParent.appendChild(要添加的元素)
//从前面添加
oParent.insertBefore(要添加的元素,添加到谁的前面);
//要删除的元素
oParent.removeChild(要删除的元素)

19,设置属性的方法有哪些?

1)"." 操作已存在的属性
2)"[]"可以接收变量,"."能操作的,"[]"都可以操作
3)setAttribute(name,value)设置自定义属性

20.列举for/for in 二种循环方法的区别和优缺点。

for
for(初始化; 条件; 自增){
    语句
}
快
不能遍历对象的属性
for in
    for(初始化 in object){
        语句
}
慢
可以遍历对象的属性

21,描述typeof与instanceof,constructor的区别是什么?

typeof
    检测基本数据类型
Instanceof
    检测复合类型
constructor
    检测构造函数

22,javascript中出现undefined的情况有哪些?

1,函数没有返回值,或者返回值为空,出现undefined
2,变量定义了未赋值;
3,引用没有提供实参函数形参的值,出现undefined
4,查询一个对象属性或者数组元素的值不存在,出现undefined

可参考:http://www.jianshu.com/p/b0700cce78c8
23,“=”,“==”,“===”有什么区别?

"="表示赋值 例如a=1;相当于把1赋值给a
"=="表示比较,会做类型转化,然后再进行比较
"==="表示严格比较,不会做类型转化
注:关于具体区别,后续文章会继续跟进

24,数组和字符串如何进行相互转换?

arr.join()将数组转化成字符串
str.plit()将字符串转化成数组

25,你知道的排序方法有哪些?

归并排序,快排,冒泡排序,选择排序
注:关于具体代码,后续文章会继续跟进

26,以下代码alert的结果是什么?

alert(1&&2);
结果为2

27,call和apply的作用什么,区别是什么?

Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

相同点:两个方法产生的作用是完全一样的

不同点:方法传递的参数不同

foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments)==this.foo(arg1, arg2, arg3)

在JavaScript中,代码总是有一个上下文对象,代码处理该对象之内. 上下文对象是通过this变量来体现的, 这个this变量永远指向当前代码所处的对象中。

一、方法的定义
call方法:
语法:call(thisObj,Object)
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:
语法:apply(thisObj,[argArray])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

28,什么是事件委托?

利用事件冒泡原理,将子级的事件加给父级,使用事件委托,可节省性能,也可以给js动态创建的元素加事件

29,解释一下jsonp的原理,为什么不是真正的ajax?

动态创建script标签,回调函数
Ajax是页面无刷新请求数据操作

30,以下代码的执行结果是多少?

var User = {
 count: 1,

 getCount: function() {
  return this.count;
 }
};

console.log(User.getCount()); // what?

var func = User.getCount;
console.log(func()); // what?
结果为
1,1
2,undefined

31,回答以下代码,alert的值分别是多少

<script>
var a = 100;
function test(){
    alert(a);
    a = 10;  
    alert(a);
}
  test();
alert(a);
</script>
结果为
1,100
2,10
3,10

32,new操作符具体干了什么呢?

1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。

33,ajax原理是什么?

(1)创建对象
var xhr = new XMLHttpRequest();
(2)打开请求
xhr.open('GET', 'example.txt', true);

(3)发送请求
xhr.send(); 发送请求到服务器

(4)接收响应
xhr.onreadystatechange =function(){}
 (1)当readystate值从一个值变为另一个值时,都会触发readystatechange事件。
 (2)当readystate==4时,表示已经接收到全部响应数据。
 (3)当status ==200时,表示服务器成功返回页面和数据。
 (4)如果(2)和(3)内容同时满足,则可以通过xhr.responseText,获得服务器返回的内容。

34,程序中怎样捕获异常?

try{}catch(e){}

35,以下代码的执行结果是多少?

var uname = 'jack'
function change() {
    alert(uname) // ?
    var uname = 'lily'
    alert(uname)  //?
}
change()
结果:
1,undefined
2,lily

36,怎样获取浏览器的滚动距离?

scrollTop=document.documentElement.scrollTop||document.body.scrollTop

37,offsetWidth offsetHeight和clientWidth clientHeight的区别

(1)offsetWidth (content宽度+padding宽度+border宽度)
(2)offsetHeight(content高度+padding高度+border高度)
(3)clientWidth(content宽度+padding宽度)
(4)clientHeight(content高度+padding高度)

38,获取本月一共有多少天,怎么获取?

<script>
var oDate=new Date();
oDate.setMonth(oDate.getMonth()+1);
oDate.setDate(0);
alert(oDate.getDate());
</script>

39,什么叫引用?

把一个对象,赋值给新的对象,这个新的对象添加的属性,之前的对象也具备

40,什么是事件对象?

事件对象描述了事件更加详细的信息

41,window.onload和domReady有什么区别?

window.onload是需要html,css,img等页面加载完毕才开始加载js
domReady只需要dom树加载完毕就可以加载js

42,列举css清除浮动的方法

1,为浮动元素父级加overflow:hidden
2,在浮动元素下面加<br style="clear:both"/>
3,为浮动元素父级加height
4,为浮动元素父级加.clearfix
.clearfix:after{display:block; content:'';clear:both;}
.clearfix{zoom:1;}

43,如何让一个元素垂直水平居中?

<style>
    div{width: 200px; height: 200px; background: red; position: absolute;left:50%; top:50%; margin-left:-100px; margin-top:-100px;}
</style>

44,你知道的css选择器有哪些?

id选择器( # myid)
类选择器(.myclassname)
标签选择器(div, h1, p)
相邻选择器(h1 + p)
子选择器(ul > li)
后代选择器(li a)
通配符选择器( * )
属性选择器(a[rel = “external”])
伪类选择器(a: hover, li: nth – child)

45,介绍一下css盒子模型?

有两种, IE 盒子模型、标准 W3C 盒子模型;
IE的content部分包含了 border 和 pading;
w3c盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
影响盒子模型大小的包括content+padding+border

46,谈谈This对象的理解。

this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。
但是有一个总原则,那就是this指的是调用函数的那个对象。
this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象

47,以下代码的执行结果是

<script>
    function fn() {
        this.a = 0;
        this.b = function() {
            alert(this.a)
    }
    }
    fn.prototype = {
        b: function() {
            this.a = 20;
            alert(this.a);
        },
        c: function() {
            this.a = 30;
            alert(this.a);
        }
    }
    var myfn = new fn();
    myfn.b();
    myfn.c();
</script>
结果
1,0
2,30

48,css3中transform可以设置哪些样式?

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

49,简述对‘use strict’怎么理解?

好处:
1,定义变量,必须加var
2,if,for等语句里不能加函数
3,干掉了with

作用域
1,作用在script标签内部
2,可以作用在函数内部
3,放在整个js文件开头

50,getStyle(obj,‘width’)和obj.offsetWith有什么区别

function getStyle(obj,name){
    return (obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false))[name];
}
getStyle.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容