前段面试基础题

1433251330
1433251330 发布于 2017-02-17 22:27:58 浏览:2220 类型:原创 - 教程 分类:面试经验 - 面试题 二维码: 作者原创 版权保护
1 ,什么是闭包?闭包有什么好处?使用闭包要注意什么?

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

number,string,boolean,Null,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];
}
前端面试题
标签:
z
给个赞 22 人点赞
收藏 63 人收藏
评论 已有 5 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
悲凉秋风夜
悲凉秋风夜2017-02-28 20:46:565F
唯一的遗憾,标题写错了
举报 支持 (0) 回复 (0)
LRFMGJ
LRFMGJ2017-02-24 22:02:154F
学习了 灰常感谢
举报 支持 (0) 回复 (0)
刘雪花
刘雪花2017-02-21 15:46:013F
"str.plit()将字符串转化成数组",这边应该是split()函数吧
举报 支持 (0) 回复 (0)
web2014
web20142017-02-21 10:02:472F
好像是,我之前在网上看到是这样的
typeof {}、typeof []、typeof /^$/、typeof null、typeof window、typeof document     //"object"
typeof function(){}、 typeof eval,typeof Date     //"function" //@奋斗的达达:棒棒哒,不过第二题 typeof 出来的应该是 number string object function boolean undefined 吧
举报 支持 (0) 回复 (0)
奋斗的达达
奋斗的达达2017-02-20 21:01:201F
棒棒哒,不过第二题 typeof 出来的应该是 number string object function boolean undefined 吧
举报 支持 (0) 回复 (1)
1433251330 1433251330 作者