javascript之面试题精讲

from:http://blog.csdn.net/q121516340/article/details/51332454

1,检测数组的几种方式:

        Array.isArray(); es5javascript

        toString.call([]);//”[object Array]”php

        var arr=[];css

        arr.constructor;//Arrayhtml

        instanceof Array前端

2,传统事件绑定和符合W3C标准的事件绑定有什么区别?

       <div onclick=””>123</div>java

       div1.onclick=function(){};node

       符合W3C标准的事件绑定的方式 addEventListener/attachEventjquery

       A、非IE浏览器:webpack

             addEventListenergit

            一、 若是说给同一个元素绑定了两次或者屡次相同类型的事件,因此的绑定将会依次触发

            二、 支持DOM事件流的

            三、 进行事件绑定传参不须要on前缀

           addEventListener(“click”,function(){},true);//此时的事件就是在事件捕获阶段执行

           第三个参数:表明是否在捕获阶段执行,默认值是false

          addEventListener(“click”,function(e){})

          addEventListener(“click”,function(){},false) 事件在冒泡阶段执行

     B、IE浏览器

           ie9开始,ie11 edge:addEventListener

           ie9之前 ie8:attachEvent/detachEvent

          一、 进行事件类型传参须要带上on前缀

                dom1.attachEvent(“onclick”,functioin(){});

          二、 这种方式只支持事件冒泡,不支持事件捕获

 

三、IE和标准下有哪些兼容性的写法

     ev = ev || window.event                       获取触发事件的对象

     var target = ev.srcElement||ev.target   获取事件的源对象

     document.documentElement.clientWidth || document.body.clientWidth

四、call和apply的区别

     call和apply相同点:

             都是为了用一个本不属于一个对象的方法,让这个对象去执行

             toString.call([],1,2,3)

             toString.apply([],[1,2,3])

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

             Object.apply(this,arguments)

     区别:

            call第二个参数开始接受一个参数列表

            apply第二个参数开始接受一个参数数组

 

5Javascript如何实现继承?

     原型链继承,借用构造函数继承,原型+构造函数组合继承,寄生式继承

6Javascript建立对象的几种方式?

     第一种:对象字面量、Object构造函数

     第二种:构造函数

     第三种:纯构造函数

     第四种:空构造函数+原型

     第五种:混合构造函数+原型

     第六种:动态原型

     第七种:寄生构造函数

     第八种:Object.create()——ES5 ie9+

     如下是寄生构造函数模式:

——实际上是工厂模式的变种,只不过是放在其余构造函数中建立对象

    代码以下:

function SpecialArray(){
    var values = [];
    values.push.apply(values, arguments);
    values.toPipedString = function(){
        return this.join("|");
    };
    return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString());  //"red|blue|green"

7JavaScript this指针、闭包、做用域

     this:指向调用上下文

     闭包:内层做用域能够访问外层做用域的变量

     做用域:定义一个函数就开辟了一个局部做用域,整个js执行环境有一个全局做用域

八、javascript的同源策略

     同一来源指的是域名,协议和端口号的组合

 

     协议:http,ftp https

     端口名:80:

     http协议的默认端口:80

     https:协议的默认端口是8083

     同源策略带来的麻烦:ajax在不一样域名下的请求没法实现,

     若是说想要请求其余来源的js文件,或者json数据,那么能够经过jsonp来解决

    JSONP的实现原理:经过动态建立script标签

九、编写一个数组去重的方法

     [1,3,1,5,2,3,7]=>[1,3,5,2,7]

    方法:

    一、 先建立一个空数组,用来保存最终的结果

    二、 循环原数组中的每一个元素

    三、 再对新数组对每一个元素进行位置查找,判断是否存在,若是没有,将把这个元素放到新数组中

    四、 返回这个新数组

 

function(){
    var newArr=[];
    for(var i=0;i<arr.length;i++){
         if(newArr.indexOf(arr[i])==-1){
               newArr.push(arr[i])
         }
    }
    return newArr
}

 

十、JavaScript是一门什么样的语言,它有哪些特色?

      运行环境:浏览器中的JS引擎(v8.。。 ff:splidemonkey)

      运行在Node.js:v8引擎上

      语言特性:面向对象(建立对象的多种方式,继承的多种方式、原型链),动态语言

 

十一、如何检测数组的数据类型

      方法1、判断其是否具备“数组性质”,如slice()方法。可本身给该变量定义slice方法,故有时会失效

      方法2、obj instanceof Array 在某些IE版本中不正确

      方法3、toString.call([]);//”[object Array]”

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

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

  Array.isArray = function(arg){

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

    };

}

 

 

十二、但愿获取到页面中全部的checkbox怎么作

 

 var domList = document.getElementsByTagName(‘input’)
 var checkBoxList = [];//返回的全部的checkbox
 var len = domList.length;  //缓存到局部变量
 while (len--) {  
  if (domList[len].type == ‘checkbox’) {
      checkBoxList.push(domList[len]);
  }
}

 

 

1三、Javascript的事件流模型都有什么? DOM事件流

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

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

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

 

1四、看下列代码输出为什么?解释缘由。

 var a;
 alert(typeof a); // “undefined”
 //alert(b); // 报错 
 b=10;
 alert(typeof b);//”number”

 

 

undefined会在如下三种状况下产生:

a、一个变量定义了却没有被赋值

b、想要获取一个对象上不存在的属性或者方法:

c、一个数组中没有被赋值的元素

 

 

1五、看代码给答案。

 var a = new Object();
 a.value = 1;
 b = a;
 b.value = 2;
 alert(a.value);//2

 

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

 

 

1六、var numberArray = [3,6,2,4,1,5]; (考察基础API)

1) 实现对该数组的倒排,反转,输出[5,1,4,2,6,3]

   reverse()

2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]

   冒泡排序

1七、输出今天的日期,以YYYY-MM-DD的方式,好比今天是2014年9月26日,则输出2014-09-26

 var d = new Date();

// 获取年,getFullYear()返回4位的数字 //今年:2016

var year = d.getFullYear();

// 获取月,月份比较特殊,0是1月,11是12月

var month = d.getMonth() + 1;

// 变成两位

month = month < 10 ? '0' + month : month;

// 获取日

var day = d.getDate();

day = day < 10 ? '0' + day : day;

alert(year + '-' + month + '-' + day);

 

1八、将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10,{$name}替换成Tony (使用正则表达式)

      答案:”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);

 

1九、foo = foo||bar ,这行代码是什么意思?为何要这样写?

       这种写法称之为短路表达式

       答案:if(!foo) foo = bar; //若是foo存在,值不变,不然把bar的值赋给foo。

       短路表达式:做为”&&”和”||”操做符的操做数表达式,这些表达式在进行求值时,只要最终的结果已经能够肯定是真或假,求值过程便了结止,这称之为短路求值。

       注意if条件的真假断定,记住如下是false的状况

       空字符串、false、undefined、null、0

 

20、看下列代码,将会输出什么?( 变量声明提早 )

 var foo = 1;

 function(){

    var foo;

    console.log(foo); //undefined

    foo = 2;

    console.log(foo); // 2;  

}

 

     函数声明与变量声明会被JavaScript引擎隐式地提高到当前做用域的顶部,可是只提高名称不会提高赋值部分。

 

2一、有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不肯定),将其按key-value形式返回到一个json结构中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

 

2二、

a、看下面代码,给出输出结果。

 for(var i=1;i<=3;i++){

  setTimeout(function(){

      console.log(i);   

  },0); 

};

 

     答案:4 4 4。

     缘由:setTimeout会在js引擎空闲的时候再执行

     JavaScript事件处理器在线程空闲以前不会运行。追问,

 

b、如何让a中代码输出1 2 3?

 for(var i=1;i<=3;i++){

   setTimeout((function(a){  //改为当即执行函数

       console.log(a);   

   })(i),0); 

};

 

2三、写一个function,清除字符串先后的空格。(兼容全部浏览器)

     使用自带接口trim(),考虑兼容性:

 if (!String.prototype.trim) {

    String.prototype.trim = function() {

        return this.replace(/^\s+/, "").replace(/\s+$/,"");

        //\s匹配空白字符:回车、换行、制表符tab 空格

     }

}

 // test the function

var str = " \t\n test string ".trim();

alert(str == "test string"); // alerts "true"

 

 

2四、Javascript中callee和caller的做用?

     arguments.callee:得到当前函数的引用

 

     caller是返回一个对函数的引用,该函数调用了当前函数;若是不是由其余函数调用的,那么返回值就是null

     callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

    那么问题来了?

     若是一对兔子每个月生一对兔子;一对新生兔,从第二个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成)

 

2五、Javascript中, 如下哪条语句必定会产生运行错误? 答案(  BC   )

     A、var obj=NaN;

    B、var 0bj = [];(这里是一个数字0)

    C、var obj = //;

    D、var obj = {};

 

2六、如下两个变量a和b,a+b的哪一个结果是NaN?答案(   C  )

A、var a=undefind; b=NaN          //拼写 undefined

B、var a=‘123’; b=NaN          //字符串

C、var a =undefined , b =NaN

D、var a=NaN , b='undefined'       //”NaNundefined”

 

2七、var a=10; b=20; c=4;  ++b+c+a++ 如下哪一个结果是正确的?答案(  B  )

     A、34   B、35  C、36  D、37

    //21+4+10

2八、typeof运算符返回值中有一个跟javascript数据类型不一致,它是function

 

2九、定义了一个变量,但没有为该变量赋值,若是alert该变量,javascript弹出的对话框中显示undefined

 

3一、写出程序运行的结果?

for(i=0, j=0; i<10, j<6; i++, j++){
    //终止条件:j=5 i=5
    k = i + j;//k=10
}
//结果:10

 

3二、阅读如下代码,请分析出结果

 var arr = new Array(1 ,3 ,5);

arr[4]='z';//[1,3,5,undefined,’z’]

arr2 = arr.reverse();   //arr2=[’z’,undefined,5,3,1];

//arr=[’z’,undefined,5,3,1]

arr3 = arr.concat(arr2);

alert(arr3);

    弹出提示对话框:z,,5,3,1,z,,5,3,1


3三、给一个按钮绑定点击事件的函数,确认用户是否退出当前页面,确认以后关闭窗口

confirm

window.close()

 

3五、列举浏览器对象模型BOM里经常使用的至少4个对象,并列举window对象的经常使用方法至少5个

对象:window document location screen history navigator

方法:alert() confirm() prompt() open() close()

3六、简述列举文档对象模型DOM里document的经常使用的查找访问节点的方法

Document.getElementById 根据元素id查找元素

Document.getElementByName 根据元素name查找元素

Document.getElementTagName 根据指定的元素名查找元素

 

3八、简述建立函数的几种方式

第一种(函数声明):

function sum1(num1,num2){

   return num1+num2;

}

第二种(函数表达式):

var sum2 = function(num1,num2){

   return num1+num2;

}

匿名函数:

function(){}:只能本身执行本身

 

第三种(函数对象方式):了解

var sum3 = new Function("num1","num2","return num1+num2");

 

4一、documen.write和 innerHTML 的区别?

document.write 只能重绘整个页面

innerHTML 能够重绘页面的一部分

4二、内存泄露是什么?

内存泄漏指任何对象在您再也不拥有或须要它以后仍然存在。

垃圾回收器按期扫描对象,并计算引用了每一个对象的其余对象的数量。

若是一个对象的引用数量为 0(没有其余对象引用过该对象),或对该对象的唯一引用是循环的,那么该对象的内存便可回收。

 

4三、判断一个字符串中出现次数最多的字符,统计这个次数

答:var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
        if(!json[str.charAt(i)]){ //str.charAt(i) =”a”
                json[str.charAt(i)] = 1; //json[“a”]=1
        }else{
                json[str.charAt(i)]++; //让a键的值+1,也就是这个字符多出现了一次
        }
};
var iMax = 0;
var iIndex = '';
for(var i in json){
        if(json[i]>iMax){
                iMax = json[i];
                iIndex = i;
        }
}
alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

 

 

4四、写一个获取非行间样式的函数 //内嵌、外联,行内

function getStyle(obj,attr,value){

      if(!value){

                   if(obj.currentStyle)//ie{

                           return obj.currentStyle(attr);

                   }else{//标准浏览器

                          obj.getComputedStyle(attr,false);

                  }

      }else{

                obj.style[attr] = value;

      }

}

4五、解释jsonp的原理

     动态建立script标签,给请求的地址中添加一个get参数,这个参数表明回调函数,也就是但愿服务器处理完个人请求以后,在前端执行这个对调函数

 

4六、javascript的本地对象,内置对象和宿主对象

     本地对象为array obj regexp等能够new实例化

     Array RegExp String Boolean 。。。

     内置对象为global、Math 等不能够实例化的

     关于global对象咱们没法在浏览器中发现她的存在,由于他的属性和方法都被绑定在了window对象中

 

     每个宿主对象他的实现都是取决于不一样的浏览器的,这样就产生了浏览器兼容性问题

     宿主为浏览器自带的document,window 等

4七、字符串反转,如将 '12345678' 变成 '87654321'

 //大牛作法;

//思路:先将字符串转换为数组 split(),利用数组的反序函数 reverse()颠倒数组,再利用 jion() 转换为字符串

var str = '12345678';

str = str.split('').reverse().join('');

 

 

4八、window.location.search返回的是什么?

      答:查询(参数)部分。除了给动态语言赋值之外,咱们一样能够给静态页面,并使用javascript来得到相信应的参数值

        返回值:?ver=1.0&id=timlq 也就是问号后面的!

//url:http://www.sina.co//url:http://www.sina.com/getage?number=1&year=2016//url:http://www.sina.com/getage?number=1&year=2016//url:http://www.sina.com/getage?number=1&year=2016m/getage?number=1&year=2016

 

4九、window.location.hash 返回的是什么?

     答:锚点 , 返回值:#love ;

     //url:http://www.sina.com/getage?#age

     这时就返回”#age”

 

50、window.location.reload() 做用?

      答:刷新当前页面。

 

5一、看题作答:

 function f1(){

    var tmp = 1;

    this.x = 3;
console.log(tmp); console.log(this.x); } var obj = new f1(); console.log(obj.x) //3 console.log(f1()); //1 undefined

 

 

5二、下面输出多少?

 var o1 = new Object();

 var o2 = o1;

 o2.name = "CSSer";

 console.log(o1.name); //”CSSer”

 

 

5四、观看代码,有什么输出

 var a = 6;

 setTimeout(function () {    

    var a = 666;//因为变量a是一个局部变量

    alert(a);      // 输出666,

}, 0);

a = 66;

console.log(a);  //先打印全局变量a的值:66  再执行setTimeout里面的局部变量

 

     由于var a = 666;定义了局部变量a,而且赋值为666,根据变量做用域链,
     全局变量处在做用域末端,优先访问了局部变量,从而覆盖了全局变量 。

 

5七、观察如下代码的输出

 window.color = 'red';

 var o = {color: 'blue'};

 function sayColor(){

    alert(this.color);

}

考点:1、this的指向

      2、call的用法

sayColor(); //red

sayColor.call(this); //red this指向的是window对象

sayColor.call(window); //red

sayColor.call(o); //blue

 

5八、结果是什么?

 function foo(){

    foo.a = function(){alert(1)}; 

    this.a = function(){alert(2)}; //obj.a

    a = function(){alert(3)};

    var a = function(){alert(4)};

}; 

foo.prototype.a = function(){alert(5)};

foo.a = function(){alert(6)};

foo.a(); //6

var obj = new foo();

obj.a(); //2

foo.a(); //1

 

 

5九、分析代码结果

 var a = 5; 

function test(){

   var a; 

  a = 0; 

    alert(a); 

    alert(this.a); //没有定义 a这个属性

        alert(a)

}

test(); // 0, 5, 0

var obj=new test(); // 0, undefined, 0 //因为类它自身没有属性a, 因此是undefined

 

 

60、结果是

 var bool = !!2; alert(bool);//true;          

      技巧:双向非操做能够把字符串和数字转换为布尔值。

6一、匹配输入的字符:第一个必须是字母或下划线开头,后面就是字母和数字或者下划线构成,长度5-20

var reg = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}/

 

 

6二、BOM对象有哪些,列举window对象?

    一、window对象 ,是JS的最顶层对象,其余的BOM对象都是window对象的属性;

    二、document对象,文档对象;

    三、location对象,浏览器当前URL信息;

    四、navigator对象,浏览器自己信息;

    五、screen对象,客户端屏幕信息;

    六、history对象,浏览器访问历史信息;

6三、JS中的简单继承

     ——>call方法

 //顶一个父母类,注意:类名都是首字母大写的哦!

  function Parent(name, money){

            this.name = name;

            this.money = money;

            this.info = function(){

                alert('姓名: '+this.name+' 钱: '+ this.money);

            }

        }

        //定义孩子类

        function Children(name){

            Parent.call(this, name); //继承 姓名属性,不要钱。  

            this.info = function(){

                alert('姓名: '+this.name);

            }

        }

        //实例化类

        var per = new Parent('parent', 800000000000);

        var chi = new Children('child');

        per.info();

        chi.info();

 

 

6四、bind(), live(), delegate()的区别

      bind: 绑定事件,对新添加的事件不起做用,方法用于将一个处理程序附加到每一个匹配元素的事件上并返回jQuery对象。

     live: 方法将一个事件处理程序附加到与当前选择器匹配的全部元素(包含现有的或未来添加的)的指定事件上并返回jQuery对象。

     delegate: 方法基于一组特定的根元素将处理程序附加到匹配选择器的全部元素(现有的或未来的)的一个或多个事件上。

 

     最佳实现:jquery 1.7以后:就推荐使用on() off()

 

6五、简述link和import的区别?

     区别1:link是XHTML标签,除了加载CSS外,还能够定义RSS等其余事务;@import属于CSS范畴,只能加载CSS。

     区别2:link引用CSS时,在页面载入时同时加载;@import须要页面网页彻底载入之后加载。

     区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

     区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。

 

6六、看下列代码输出什么?

 var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo); //“number”

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

 

 

6八、你如何优化本身的代码?

代码重用:声明函数把整个过程封装起来;把他们弄成一些对象

避免全局变量(命名空间,封闭空间,模块化mvc..) AngularJS

拆分函数避免函数过于臃肿:单一职责原则:条理更加清晰,更好的维护

适当的注释,尤为是一些复杂的业务逻辑或者是计算逻辑,都应该写出这个业务逻辑的具体过程

内存管理,尤为是闭包中的变量释放

变量的命名规范:尤为是在实际项目中

$div:表明一个jquery对象

dom:表明一个原生的dom对象

但愿一个函数是构造函数:函数的首字母都要大写

变量必定要语义化

 

70、请将一个URL的search部分参数与值转换成一个json对象

 //search部分的参数格式:a=1&b=2&c=3

function getJsonFromUrlSearch(search){
    var item;
    var result={};
    if(search.indexOf('&')<0){
        item=search.split('=');
        result[item[0]]=item[1];
        return result;
    }
    var splitArray=search.split('&');
    for (var i = 0; i < splitArray.length; i++) {
        var obj = splitArray[i];
        item=obj.split('=');
        result[item[0]]=item[1];
    }
    return result;
}
var c=getJsonFromUrlSearch("a=1&b=2&c=3");

 

 

7一、请用原生js实现jquery的get\post功能,以及跨域状况下

ajax

先建立一个HttpRequest()

再设置他的请求头:请求的数据类型:json/xml

再设置他的onreadstatechange

最后再提交这个请求

7二、请简要描述web前端性能须要考虑哪方面,你的优化思路是什么?

//参见雅虎14web优化规则

//0、减小http请求:

//一、小图弄成大图(雪碧图、精灵图),

//二、合理的设置缓存 localStorage  cookie

//三、资源合并、压缩 html代码的最小化,压缩体积:就是减小带宽

//四、一些小的js文件合并成大的js文件

//五、将外部的js文件置底

7三、简述readyonly与disabled的区别

readonly只针对input(text / password)和textarea有效,

而disabled对于全部的表单元素都有效,当表单元素在使用了disabled后,当咱们将表单以POST或GET的方式提交的话,这个元素的值不会被传递出去,而readonly会将该值传递出去

7四、请尽量详尽的解释ajax的工做原理

思路:先解释异步,再解释ajax如何使用

异步是为了进行局部刷新,提高用户体验

2005 年诞生ajax

Ajax的原理简单来讲经过XmlHttpRequest对象来向服务器发异步请求,从服务器得到数据,而后用javascript来操做DOM而更新页面。这其中最关键的一步就是从服务器得到请求数据。要清楚这个过程和原理,咱们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript能够及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

7五、为何扩展javascript内置对象不是好的作法?

由于扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性

//若是说是整个项目中都适用的功能,那么能够进行扩展

7六、什么是三元表达式?“三元”表示什么意思?

? :

由于运算符会涉及3个表达式

var a=3>2?5:2;

7七、module(12,5)//2  实现知足这个结果的module函数

function module(a,b){
    return a%b;//return a/b;
}

 

7八、HTTP协议中,GET和POST有什么区别?分别适用什么场景 ?

get传送的数据长度有限制,post没有

get经过url传递,在浏览器地址栏可见,post是在报文中传递

 

适用场景:

post通常用于表单提交

get通常用于简单的数据查询,严格要求不是那么高的场景

 

 

7九、HTTP状态消息200 302 304 403 404 500分别表示什么

200:请求已成功,请求所但愿的响应头或数据体将随此响应返回。

302:请求的资源临时从不一样的 URI响应请求。因为这样的重定向是临时的,客户端应当继续向原有地址发送之后的请求。只有在Cache-Control或Expires中进行了指定的状况下,这个响应才是可缓存的

304:若是客户端发送了一个带条件的 GET 请求且该请求已被容许,而文档的内容(自上次访问以来或者根据请求的条件)并无改变,则服务器应当返回这个状态码。304响应禁止包含消息体,所以始终以消息头后的第一个空行结尾。

403:服务器已经理解请求,可是拒绝执行它。

404:请求失败,请求所但愿获得的资源未被在服务器上发现。

500:服务器遇到了一个不曾预料的情况,致使了它没法完成对请求的处理。通常来讲,这个问题都会在服务器端的源代码出现错误时出现。

80、HTTP协议中,header信息里面,怎么控制页面失效时间(last-modified,cache-control,Expires分别表明什么)

Last-Modified

文 档的最后改动时间。客户能够经过If-Modified-Since请求头提供一个日期,该请求将被视为一个条件GET,只有改动时间迟于指定时间的文档 才会返回,不然返回一个304Not Modified)状态。Last-Modified也可用setDateHeader方法来设置。

Expires

应该在何时认为文档已通过期,从而再也不缓存它?

 

8一、请列举js数组类型中的经常使用方法

方法

描述

concat()

链接两个或更多的数组,并返回结果。

join()

把数组的全部元素放入一个字符串。元素经过指定的分隔符进行分隔。

pop()

删除并返回数组的最后一个元素

push()

向数组的末尾添加一个或更多元素,并返回新的长度。

reverse()

颠倒数组中元素的顺序。

shift()

删除并返回数组的第一个元素

slice()

从某个已有的数组返回选定的元素

sort()

对数组的元素进行排序

splice()

删除元素,并向数组添加新元素。

toSource()

返回该对象的源代码。

toString()

把数组转换为字符串,并返回结果。

toLocaleString()

把数组转换为本地数组,并返回结果。

unshift()

向数组的开头添加一个或更多元素,并返回新的长度。

valueOf()

返回数组对象的原始值

8二、列举经常使用的js框架以及分别适用的领域

jquery:简化了js的一些操做,而且提供了一些很是好用的API

jquery ui、jquery-easyui:在jqeury的基础上提供了一些经常使用的组件 日期,下拉框,表格这些组件

require.js、sea.js(阿里的玉帛)+》模块化开发使用的

jquery mobile:是jquery本身出的支持移动端网页开发,不过很是笨重,可是功能很是强大

zepto:精简版的jquery,经常使用于手机web前端开发 提供了一些手机页面实用功能,touch

 

ext.js:跟jquery差很少,可是不开源,也没有jquery轻量

angular、knockoutjs、avalon(去哪儿前端总监,做者:司徒正美):MV*框架,适合用于单页应用开发(SPA)

8三、如何获取对象a拥有的全部属性(可枚举的、不可枚举的,不包括继承来的属性)

Object.keys——IE9+ ES5

或者使用for…in并过滤出继承的属性

for(o in obj){

  if(obj.hasOwnproperty(o)){//判断o不是继承来的属性

    //把o这个属性放入到一个数组中

}

}

8四、下面这段代码想要循环昝输出结果01234,请问输出结果是否正确,若是不正确,请说明为何,并修改循环内的代码使其输出正确结果

for(var i=0;i<5;++i){

setTimeout(function(){

console.log(i+’’);

},100*i);

}

8五、解释下这个css选择器什么发生什么?

[role=nav]>ul a:not([href^-mailto]){}

8六、描述错误的是 D

A:Http状态码302表示暂时性转移 对

B:domContentLoaded事件早于onload事件  //正确

 onload 事件触发时,页面上全部的DOM,样式表,脚本,图片,flash都已经加载完成了。

 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash

C: IE678不支持事件捕获  

D:localStorage 存储的数据在电脑重启后丢失     //错误,由于没有时间限制

8七、关于link和@import的区别正确的是  AB

A: link属于XHTML标签,而@import是CSS提供的;

B:页面被加载时,link会同时被加载,然后者引用的CSS会等到页面被加载完再加载

C:import只在IE5以上才能识别 而link是XHTML标签,无兼容问题

D: link方式的样式的权重高于@import的权重

import诞生于CSS2.1规范,任何支持CSS2.1以上版本的浏览器都支持Import

link方式的样式跟import没有权重高低这么个说法,只有书写顺序的不一样才会决定样式

8八、变量的命名规范以及命名推荐

8九、三种弹窗的单词以及三种弹窗的功能

alert

confirm

prompt

9一、写一个post请求并带有发送数据和返回数据的样例

$.ajax({
    url:"1.html",
    data:{name:"张三",age:18},//post数据
    dataType:"json",
    type:"POST",
    success:function(data){
        //data:返回的数据
    },
    error:function(){
        //异常处理
    }
});

90、jQuery框架中$.ajax()的经常使用参数有哪些?

type

类型:String

默认值: "GET")。请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可使用,但仅部分浏览器支持。

url

类型:String

默认值当前页地址。发送请求的地址。

success

类型:Function

请求成功后的回调函数。

参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

这是一个 Ajax 事件。

options

类型:Object

可选。AJAX 请求设置。全部选项都是可选的。

async

类型:Boolean

默认值: true。默认设置下,全部请求均为异步请求。若是须要发送同步请求,请将此选项设置为 false

注意,同步请求将锁住浏览器,用户其它操做必须等待请求完成才能够执行。

beforeSend(XHR)

类型:Function

发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是惟一的参数。

这是一个 Ajax 事件。若是返回 false 能够取消本次 ajax 请求。

cache

类型:Boolean

默认值: truedataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

jQuery 1.2 新功能。

contentType

类型:String

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

默认值适合大多数状况。若是你明确地传递了一个 content-type 给 $.ajax() 那么它一定会发送给服务器(即便没有数据要发送)。

data

类型:String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为Key/Value 格式。若是为数组,jQuery 将自动为不一样值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'

dataFilter

类型:Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的dataType 参数。函数返回的值将由 jQuery 进一步处理。

dataType

类型:String

预期服务器返回的数据类型。若是不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,好比 XML MIME 类型就被识别为 XML。在 1.4中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

· "xml": 返回 XML 文档,可用 jQuery 处理。

· "html": 返回纯文本 HTML 信息;包含的 script 标签会在插入 dom 时执行。

· "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意:在远程请求时(不在同一个域下),全部 POST 请求都将转为 GET 请求。(由于将使用 DOM 的 script标签来加载)

· "json": 返回 JSON 数据 。

· "jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 为正确的函数名,以执行回调函数。

· "text": 返回纯文本字符串

error

类型:Function

默认值自动判断 (xml 或 html)。请求失败时调用此函数。

有如下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。

若是发生了错误,错误信息(第二个参数)除了获得 null 以外,还多是 "timeout", "error", "notmodified" 和 "parsererror"

这是一个 Ajax 事件。

9二、闭包:下面这个ul,如何点击每一列的时候alert其index?

<ul id="test">

<li>这是第一条</li>

<li>这是第二条</li>

<li>这是第三条</li>

</ul>

//非闭包实现

var lis=document.querySelectorAll('li');
document.querySelector('#test').onclick=function(e){
    for (var 0lis.lengthi++) {
        var li lis[i];
        if(li==e.target){
            alert(i);
        }
    }
};

//闭包实现

var lis=document.querySelectorAll('li');
for (var 0lis.lengthi++) {
    var li lis[i];
    li.onclick=(function(index){
        return function(e){
            alert(index);
        };
    })(i);
}

9三、Javascript中callee和caller的做用?

caller是返回一个对函数的引用,该函数调用了当前函数;

用法:fn.caller

callee是返回正在被执行的function函数,也就是所指定的function对象的正文。

用法:arguments.callee

9四、在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

伪数组(类数组):没法直接调用数组方法或指望length属性有什么特殊的行为,但仍能够对真正数组遍历方法来遍历它们。典型的是函数的argument参数,还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。

可使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

9五、《正则》写出正确的正则表达式匹配固话号,区号3-4位,第一位为0,中横线,7-8位数字,中横线,3-4位分机号格式的固话号

经常使用正则表达式语法要熟悉

/0[0-9]{2,3}-\d{7,8}/  010 021 020 025 028 0755:深圳

9六、请写出一个程序,在页面加载完成后动态建立一个form表单,并在里面添加一个input对象并给它任意赋值后义post方式提交到:http://127.0.0.1/save.php

9七、下面代码会有什么样的输出

var User = { 对象

count = 1,属性

getCount:function(){ 方法

return this.count;

}

}

console.log(User.getCount());

var func = User.getCount;

console.log(func());

答案:1 undefined

9八、下面代码的输出:

(function test(){

      var a=b=5;    //b是一个隐式的全局变量

      alert(typeof a);

      alert(typeof b);

})();

alert(typeof a);

alert(typeof b);

//number number undefined number

9九、下列JavaScript代码执行后,iNum的值是

var iNum = 0;

for(var i = 1; i< 10; i++){

     if(i % 5 == 0){

         continue;

    }

iNum++;

}

分析:

i=1 1

i=2 2

i=3 3

i=4 4

i=5

i=6 5

i=7 6

i=8 7

i=9 8

100、输出结果是多少?

 1)  

var a;

var b = a * 0;

if (b == b) {

     console.log(b * 2 + "2" - 0 + 4);

} else {//b=NaN

     console.log(!b * 2 + "2" - 0 + 4); //1*2+”2”-0+4

}

答案:26

考点:乘号运算符的运算规则

一、 若是其中一个数是NaN,则结果就是NaN

二、若是乘积超过了ECMAScript设定的范围,那么就会返回Infinity、-Infinity

三、若是参与乘法运算的某个操做数不是数值,js引擎会先调用Number()将这个数变成一个数值类型,

好比:空字符串就会变成0 布尔值true就会变成1,空数组[]也会变成0,undefined转换结果则是变成了NaN

 

10一、如下代码会有什么输出

<script>

     var a = 1;

</script>

<script>

var a;

var b = a * 0;

if (b == b) { //b=0

        console.log(b * 2 + "2" - 0 + 4); //0*2+”2”-0+4

} else {

        console.log(!b * 2 + "2" - 0 + 4);

}

</script>

答案:6

10二、观察输出结果

var t = 10;

function test(t){

       var t = t++;//此时的t是一个局部变量,全局变量没有任何变化

   console.log(t);//此时的结果又是多少?

}

test(t);

console.log(t);

答案:10

10三、输出结果:

var t = 10;

function test(test){

      var t = test++;

}test(t);

console.log(t);

答案:10

10四、输出结果:

var t = 10;

function test(test){

       t = test++;//这一步全局变量t的值等于改变前的test的值

}test(t);

console.log(t);

答案:10

10五、输出结果:

var t = 10;

function test(test){

      t = t + test;//undefined+10=NaN

      console.log(t);

      var t = 3;

}test(t);

console.log(t);

答案:NaN  10

10六、输出结果:

var a;

var b = a / 0;

if (b == b) {//b=NaN

        console.log(!b * 2 + "2" - 0 + 4);

} else {

        console.log(!b * 2 + "2" - 0 + 4);

}

答案:26

107:、输出结果:

<script>

      var a = 1;

</script>

<script>

    var a;

    var b = a / 0;

    if (b == b) {  //b=Infinity

        console.log(b * 2 + "2" + 4);

    } else {

        console.log(!b * 2 + "2" + 4);

    }

</script>

答案:Infinity24

10八、下列JavaScript代码执行后,运行的结果是

<button id='btn'>点击我</button>

var btn = document.getElementById('btn');

var handler = {

    id: '_eventHandler',

    exec: function(){

        alert(this.id);

    }

}

btn.addEventListener('click', handler.exec);

答案:btn,由于handler.exec是由btn这个按钮执行的

10九、☆☆☆下列JavaScript代码执行后,依次alert的结果是

var obj = {proto: {a:1,b:2}};

function F(){};

F.prototype = obj.proto;

var f = new F();

obj.proto.c = 3;

obj.proto = {a:-1, b:-2};

alert(f.a);//1

alert(f.c);//3

delete F.prototype['a'];

alert(f.a);//undefined

alert(obj.proto.a);//-1

1十、下列JavaScript代码执行后的效果是

<ul id='list'>

<li>item</li>

<li>item</li>

<li>item</li>

<li>item</li>

<li>item</li>

</ul>

var items = document.querySelectorAll('#list>li');

for(var i = 0;i < items.length; i++){

     setTimeout(function(){

           items[i].style.backgroundColor = '#fee';

    }, 5);

}

答案:异常

1十一、程序中捕获异常的方法?

window.error=function(){};

try{}catch(){}finally{}

1十二、给字符串扩展一个兼容全部浏览器的清除先后的空格的方法

if (!String.prototype.trim) {

String.prototype.trim = function() {

return this.replace(/^\s+/, "").replace(/\s+$/,"");

} }

11三、下列控制台都输出什么

function setName(){

name="张三";

}

setName();

console.log(name);

答案:"张三"

11四、

//考点:一、变量声明提高 二、变量搜索机制

var a=1;

function test(){

console.log(a);

var a=1;

}

test();

答案:undefined

11五、

var b=2;

function test2(){

window.b=3;

console.log(b);

}

test2();

答案:3

11六、

c=5;//声明一个全局变量c

function test3(){

window.c=3;

console.log(c); //答案:undefined,缘由:因为此时的c是一个局部变量c,而且没有被赋值

var c;

console.log(window.c);//答案:3,缘由:这里的c就是一个全局变量c

}

test3();

117:

var arr = [];

arr[0]  = 'a';

arr[1]  = 'b';

arr[10] = 'c';

alert(arr.length); //答案:11

console.log(arr[5]); //答案:undefined

118:

var a=1;

console.log(a++); //答案:1

console.log(++a); //答案:3

119:

console.log(null==undefined); //答案:true

console.log("1"==1); //答案:true,由于会将数字1先转换为字符串1

console.log("1"===1); //答案:false,由于数据类型不一致

120、

parseInt(3.14); //3

parseFloat("3asdf"); //3

parseInt("1.23abc456");

parseInt(true);//   "true"=> NaN

//对一个非数字或者一个非字符串类型进行数据转换的时候,会先把这个数据转换为一个字符串类型,而后再转换为数值类型

考点:考察非数字转换为整数的熟练度

12一、

//考点:函数声明提早

function bar() {

    return foo;

    foo = 10;

    function foo() {}

    //var foo = 11;

}

alert(typeof bar());//"function"

12二、

考点:函数声明提早

var foo = 1;

function bar() {

foo = 10;

return;

function foo() {}

}

bar();

alert(foo);//答案:1

12三、

console.log(a);//是一个函数

var a = 3;

function a(){}

console.log(a);////3

12四、

//考点:对arguments的操做

function foo(a) {

    arguments[0] = 2;

    alert(a);//答案:2,由于:a、arguments是对实参的访问,b、经过arguments[i]能够修改指定实参的值

}

foo(1);

12五、

function foo(a) {

    alert(arguments.length);//答案:3,由于arguments是对实参的访问

}

foo(1, 2, 3);

12六、

bar();//报错 由于bar这个名称只能在函数内部被访问

var foo = function bar(name) {

console.log("hello"+name);

console.log(bar);

};

//alert(typeof bar);

foo("world");//"hello"

console.log(bar);//undefined

console.log(foo.toString());

bar();//报错

12七、

function test(){

console.log("test函数");

}

setTimeout(function(){

console.log("定时器回调函数");

}, 0)

test();

function foo(){

var name="hello";

}

12八、jQuery 的 slideUp动画 ,若是目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,该如何处理呢?

先stop(true,true)后slideUp()

示例代码参考:J:\代码,PPT,笔记,电子书\面试题\面试题_jquery_slideup.html

关于stop()参考:J:\代码,PPT,笔记,电子书\面试题\面试题_jquery.png

 

12九、Ajax 是什么? 如何建立一个Ajax?

Ajax并不算是一种新的技术,全称是asynchronous javascript and xml,能够说是已有技术的组合,主要用来实现客户端与服务器端的异步通讯效果,实现页面的局部刷新,早期的浏览器并不能原生支持ajax,可使用隐藏帧(iframe)方式变相实现异步效果,后来的浏览器提供了对ajax的原生支持

使用ajax原生方式发送请求主要经过XMLHttpRequest(标准浏览器)、ActiveXObject(IE浏览器)对象实现异步通讯效果

基本步骤:

var xhr =null;//建立对象 

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

     xhr.open(“方式”,”地址”,”标志位”);//初始化请求 

     xhr.setRequestHeader(“”,””);//设置http头信息 

     xhr.onreadystatechange =function(){}//指定回调函数 

     xhr.send();//发送请求 

130、同步和异步的区别?

同步:阻塞的

-张三叫李四去吃饭,李四一直忙得不停,张三一直等着,直到李四忙完两我的一块去吃饭

=浏览器向服务器请求数据,服务器比较忙,浏览器一直等着(页面白屏),直到服务器返回数据,浏览器才能显示页面

异步:非阻塞的

-张三叫李四去吃饭,李四在忙,张三说了一声而后本身就去吃饭了,李四忙完后本身去吃

=浏览器向服务器请求数据,服务器比较忙,浏览器能够自如的干原来的事情(显示页面),服务器返回数据的时候通知浏览器一声,浏览器把返回的数据再渲染到页面,局部更新

13一、GET和POST的区别,什么时候使用POST?

GET:通常用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,通常在2000个字符,有的浏览器是8000个字符

POST:通常用于修改服务器上的资源,对所发送的信息没有限制

在如下状况中,请使用 POST 请求:

1. 没法使用缓存文件(更新服务器上的文件或数据库

2. 向服务器发送大量数据(POST 没有数据量限制)

3. 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

13二、ajax的缺点

 一、ajax不支持浏览器back按钮。

 二、安全问题 AJAX暴露了与服务器交互的细节。

 三、对搜索引擎的支持比较弱。//不会执行你的js脚本,只会操做你的网页源代码

 四、破坏了程序的异常机制。

 五、没法跨域请求,解决方式:jsonp

13三、http常见的状态码有那些?分别表明是什么意思?

200 OK      //客户端请求成功

400 Bad Request  //客户端请求有语法错误,不能被服务器所理解

403 Forbidden  //服务器收到请求,可是拒绝提供服务

404 Not Found  //请求资源不存在,输入了错误的URL

500 Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable  //服务器当前不能处理客户端的请求,一段时间后可能恢复正常

13四、严格模式

连接:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html

 

全局变量显式声明

 

静态绑定

 

禁止使用with语句

 

eval中定义的变量都是局部变量

 

禁止this关键字指向全局对象

 

禁止在函数内部遍历调用栈 arguments.callee

 

严格模式下没法删除变量。只有configurable设置为true的对象属性,才能被删除

 

正常模式下,对一个对象的只读属性进行赋值,不会报错,只会默默地失败。严格模式下,将报错。

 

严格模式下,对一个使用getter方法读取的属性进行赋值,会报错。

 

严格模式下,对禁止扩展的对象添加新属性,会报错。

 

严格模式下,删除一个不可删除的属性,会报错。

 

正常模式下,若是对象有多个重名属性,最后赋值的那个属性会覆盖前面的值。严格模式下,这属于语法错误。

 

正常模式下,若是函数有多个重名的参数,能够用arguments[i]读取。严格模式下,这属于语法错误。

 

正常模式下,整数的第一位若是是0,表示这是八进制数,好比0100等于十进制的64。严格模式禁止这种表示法,整数第一位为0,将报错。

 

不容许对arguments赋值

 

arguments再也不追踪参数的变化

 

禁止使用arguments.callee

 

严格模式只容许在全局做用域或函数做用域的顶层声明函数。也就是说,不容许在非函数的代码块内声明函数

if else while for 没法声明函数

 

严格模式新增了一些保留字:implements, interface, let, package, private, protected, public, static, yield

13五、new操做符具体干了什么呢?

一、建立一个空对象,而且 this 变量引用该对象,同时还继承了该函数的原型。

 二、属性和方法被加入到 this 引用的对象中。

 三、新建立的对象由 this 所引用,而且最后隐式的返回 this 。

13六、模块化开发怎么作?

理解模块化开发模式:浏览器端requirejs,seajs;服务器端nodejs;ES6模块化;fis、webpack等前端总体模块化解决方案;grunt、gulp等前端工做流的使用

13七、AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)规范区别?

理解这两种规范的差别,主要经过requirejs与seajs的对比,理解模块的定义与引用方式

的差别以及这两种规范的设计原则

参考连接1:https://www.zhihu.com/question/20351507/answer/14859415

参考连接2:https://github.com/seajs/seajs/issues/277

 

一、对于依赖的模块,AMD 是提早执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改为能够延迟执行(根据写法不一样,处理方式不一样)。CMD 推崇 as lazy as possible.

二、CMD 推崇依赖就近,AMD 推崇依赖前置。

3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。好比 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每一个 API 都简单纯粹。

13八、requireJS的核心原理是什么?(如何动态加载的?如何避免屡次加载的?如何 缓存的?)

核心是js的加载模块,经过正则匹配模块以及模块的依赖关系,保证文件加载的前后顺序,根据文件的路径对加载过的文件作了缓存

13九、谈一谈你对ECMAScript6的了解?

ES6新的语法糖,类,模块化等新特性

关于ES6参考连接:http://es6.ruanyifeng.com/

1. ECMAScript 6简介

2. letconst命令

3. 变量的解构赋值

4. 字符串的扩展

5. 正则的扩展

6. 数值的扩展

7. 数组的扩展

8. 函数的扩展

9. 对象的扩展

10. Symbol

11. ProxyReflect

12. 二进制数组

13. SetMap数据结构

14. Iteratorfor...of循环

15. Generator函数

16. Promise对象

17. 异步操做和Async函数

18. Class

19. Decorator

20. Module

140、javascript对象的几种建立方式?

1. 工厂模式

2. 构造函数模式

3. 原型模式

4. 混合构造函数和原型模式

5. 动态原型模式

6. 寄生构造函数模式

7. 稳妥构造函数模式

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

14一、javascript继承的 6 种方法?

1. 原型链继承

2. 借用构造函数继承

3. 组合继承(原型+借用构造)

4. 原型式继承

5. 寄生式继承

6. 寄生组合式继承

14二、JavaScript 原型,原型链 ? 有什么特色?

1. 原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有本身的原型,若是一个原型对象的原型不为 null 的话,咱们就称之为原型链

2. 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链

14三、简述一下你对web性能优化的方案?

    一、尽可能减小 HTTP 请求

二、使用浏览器缓存

三、使用压缩组件

四、图片、JS的预载入

五、将脚本放在底部

六、将样式文件放在页面顶部

七、使用外部的JS和CSS

八、精简代码

14四、模块化怎么作?

一、 使用字面量实现命名空间(YUI):

Itcast.common.dom={};

Itcast.common.css={};

Itcast.common.event={};

二、使用闭包

当即执行函数,不暴露私有成员

var module1 = (function(){

    var _count = 0;

    var m1 = function(){

      //...

    };

    var m2 = function(){

      //...

    };

    return {

      m1 : m1,

      m2 : m2

    };

  })();

相关文章
相关标签/搜索