JavaScript常见面试题目

最新推荐文章于 2021-05-27 14:09:03 发布

微笑@永恒

最新推荐文章于 2021-05-27 14:09:03 发布

阅读量238

点赞数

JavaScript常见面试题目

1：javascript的typeof返回哪些数据类型?

Object number functionboolean underfind

------------------------------------------------------------------------------

2：如何判断某变量是否为数组数据类型？

· 方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效

· 方法二.obj instanceof Array 在某些IE版本中不正确

· 方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：

if(typeofArray.isArray==="undefined")

{

Array.isArray = function(arg){

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

};

}

------------------------------------------------------------------------------

3.例举3种强制类型转换和2种隐式类型转换？

强制（parseInt,parseFloat,number）
隐式（== – ===）

------------------------------------------------------------------------------

4.split()join() 的区别?

前者是切割成数组的形式，后者是将数组转换成字符串

------------------------------------------------------------------------------

5.数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

------------------------------------------------------------------------------

6：当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

· 直接在DOM里绑定事件：<div οnclick=”test()”></div>

· 在JS里通过onclick绑定：xxx.onclick = test

· 通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

------------------------------------------------------------------------------

7：Javascript的事件流模型都有什么？

· 事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播

· “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的

· “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

------------------------------------------------------------------------------

8.IE和DOM事件流的区别?

1.执行顺序不一样、
2.参数不一样
3.事件加不加on
4.this指向问题

------------------------------------------------------------------------------

9.IE和标准下有哪些兼容性的写法?

Var ev = ev || window.event
document.documentElement.clientWidth ||document.body.clientWidth
Var target = ev.srcElement||ev.target

------------------------------------------------------------------------------

10.ajax请求的时候get 和post方式的区别?

一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的

------------------------------------------------------------------------------

11.call和apply的区别?

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

------------------------------------------------------------------------------

12.ajax请求时，如何解释json数据?

使用eval parse 鉴于安全性考虑使用parse更靠谱

------------------------------------------------------------------------------

13：Ajax同步和异步的区别，如何解决跨域问题?

同步：提交请求->等待服务器处理->处理完毕返回这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

------------------------------------------------------------------------------

14.写一个获取非行间样式的函数?

functiongetStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值

if(obj.currentStyle){ //针对ie获取非行间样式

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr]; //针对非ie

};

------------------------------------------------------------------------------

15.事件委托是什么?

利用冒泡的原理，把事件加到父级上，触发执行效果。

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。

------------------------------------------------------------------------------

16.闭包是什么，有什么特性，对页面有什么影响?

闭包就是能够读取其他函数内部变量的函数。

------------------------------------------------------------------------------

17.如何阻止事件冒泡和默认事件?

冒泡：if ( e &&e.stopPropagation ) {

// 因此它支持W3C的stopPropagation()方法

e.stopPropagation();

} else{

// 否则，我们需要使用IE的方式来取消事件冒泡

window.event.cancelBubble = true;

}

默认事件：if ( e && e.preventDefault ) {

e.preventDefault();

} else {

// IE中阻止函数器默认动作的方式

window.event.returnValue =false;

}

return false;

------------------------------------------------------------------------------

18. 添加、移除、移动、复制、创建和查找节点的方法?

1）创建新节点

      createDocumentFragment()    //创建一个DOM片段
      createElement()   //创建一个具体的元素
      createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入
      appendChild()      //添加
      removeChild()      //移除
      replaceChild()      //替换
      insertBefore()      //插入

3）查找
      getElementsByTagName()    //通过标签名称
      getElementsByName()     //通过元素的Name属性的值
      getElementById()        //通过元素Id，唯一性

------------------------------------------------------------------------------

19.解释jsonp的原理，以及为什么不是真正的ajax?

利用在页面中创建<script>节点的方法向不同域提交HTTP请求的方法称为JSONP，这项技术可以解决跨域提交Ajax请求的问题。JSONP的工作原理如下所述：

假设在http://example1.com/index.php这个页面中向http://example2.com/getinfo.php提交GET请求，我们可以将下面的JavaScript代码放在http://example1.com/index.php这个页面中来实现：

var eleScript= document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = "http://example2.com/getinfo.php";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript);

当GET请求从http://example2.com/getinfo.php返回时，可以返回一段JavaScript代码，这段代码会自动执行，可以用来负责调用http://example1.com/index.php页面中的一个callback函数。

JSONP的最基本的原理是：动态添加一个<script>标签，而script标签的src属性是没有跨域的限制的。这样说来，这种跨域方式其实与ajax XmlHttpRequest协议无关了。

------------------------------------------------------------------------------

20.javascript的本地对象，内置对象和宿主对象?

1，内部对象

js中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象，包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。

其中Global和Math这两个对象又被称为“内置对象”，这两个对象在脚本程序初始化时被创建，不必实例化这两个对象。

2.宿主对象

宿主对象就是执行JS脚本的环境提供的对象。对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，所以又称为浏览器对象，如IE、Firefox等浏览器提供的对象。不同的浏览器提供的宿主对象可能不同，即使提供的对象相同，其实现方式也大相径庭！这会带来浏览器兼容问题，增加开发难度。

浏览器对象有很多，如Window和Document等等。

3.自定义对象

顾名思义，就是开发人员自己定义的对象。JS允许使用自定义对象，使JS应用及功能得到扩充

------------------------------------------------------------------------------

21.document load 和document ready的区别?

$(document).load();

当web页面以及其附带的资源文件，如CSS，Scripts，图片等，加载完毕后执行此方法。
常用于检测页面（及其附带资源）是否加载完毕。

$(document).ready();
当页面DOM对象加载完毕，web浏览器能够运行JS时，此方法即被触发。如果你想尽快执行JS，可以使用此方法。[在html的头部的script标签中的，不处于ready()中的JS代码将早于ready()执行]

------------------------------------------------------------------------------

22.”==”和“===”的不同?

==:一个是判断值是否相等

===:,一个是判断值及类型是否完全相等

------------------------------------------------------------------------------

23.javascript的同源策略?

同源策略简单的说就是一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合；

------------------------------------------------------------------------------

24.编写一个数组去重的方法?

第一种：1.构建一个新的数组存放结果

2.for循环中每次从原数组中取出一个元素，用这个元素循环与结果数组对比

3.若结果数组中没有该元素，则存到结果数组中

第二种：1.先将原数组进行排序

2.检查原数组中的第i个元素与结果数组中的最后一个元素是否相同，因为已经排序，所以重复元素会在相邻位置

3.如果不相同，则将该元素存入结果数组中

第三种：（推荐使用）

1.创建一个新的数组存放结果

2.创建一个空对象

3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。

------------------------------------------------------------------------------

26.排序算法?

Sort排序

systemSort: function(array) {
    return array.sort(function(a, b) {
        return a - b;
    });
},
冒泡排序：最简单，也最慢，貌似长度小于7最优

bubbleSort: function(array) {
    var i = 0,
    len = array.length,
    j, d;
    for (; i < len; i++) {
        for (j = 0; j < len; j++) {
            if (array[i] < array[j]) {
                d = array[j];
                array[j] = array[i];
                array[i] = d;
            }
        }
    }
    return array;
},
插入排序：比冒泡快，比快速排序和希尔排序慢，较小数据有优势

快速排序：这是一个非常快的排序方式，V8的sort方法就使用快速排序和插入排序的结合

希尔排序：在非chrome下数组长度小于1000，希尔排序比快速更快

系统方法：在forfox下系统的这个方法非常快

------------------------------------------------------------------------------

27：希望获取到页面中所有的checkbox怎么做？(不使用第三方框架) ?

------------------------------------------------------------------------------

28：什么是Ajax和JSON，它们的优缺点?

1、Ajax是一种异步提交数据的方法。

通常在html中，要想重新获取页面的数据。更新某一个地方的数据时。就必须得刷新整个页面，才能重新刷新数据。那么问题来了，当我们仅仅只需要更新某一个小地方的数据时。我们也来刷新整个页面的话，就显得有点麻烦了，于是Ajax就帮我们完成了这个功能，让我们单独开辟一条道路来进行获取数据，然后页面不需要刷新，用JS把AJAX请求的数据显示到该显示的地方。AJAX叫无刷新获取技术

优点：无数新更新数据、异步与服务器通信、前端和后端负载平衡、基于标准被广泛支持、界面与应用分离

缺点：安全问题、对搜索引擎支持较弱、破坏程序的异常处理机制、违背URL和资源定位的初衷、.AJAX不能很好支持移动设备、客户端过肥，太多客户端代码造成开发上的成本

2、json 是一种数据的载体，可以把他想象成数组一样的东西，只不过，它有点牛，就是很多格式都可以自动支持。就差不多这样了。

优点：

•作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。

•JSON不需要从服务器端发送含有特定内容类型的首部信息。

缺点：

•语法过于严谨•代码不易读•eval 函数存在风险

------------------------------------------------------------------------------

29：有这样一个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}?

------------------------------------------------------------------------------

30：正则表达式构造函数var reg=new RegExp(“xxx”)与正则表达字面量varreg=//有什么不同？匹配邮箱的正则表达式？

------------------------------------------------------------------------------

31：.Javascript中callee和caller的作用？

Callee：返回正被执行的 Function 对象，也就是所指定的 Function 对象的正文。

[function.]arguments.callee
可选项 function 参数是当前正在执行的 Function 对象的名称。

说明： callee 属性的初始值就是正被执行的 Function 对象。

callee 属性是 arguments 对象的一个成员，它表示对函数对象本身的引用，这有利于匿名函数的递归或者保证函数的封装性，例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性，这个属性有时候用于验证还是比较好的。arguments.length是实参长度，arguments.callee.length是
形参长度，由此可以判断调用时形参长度是否和实参长度一致。

Caller：返回一个对函数的引用，该函数调用了当前函数。

functionName.caller
   functionName 对象是所执行函数的名称。
  说明
       对于函数来说，caller 属性只有在函数执行时才有定义。如果函数是由顶层调用的，那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性，那么结果和functionName.toString 一样，也就是说，显示的是函数

的反编译文本。

------------------------------------------------------------------------------

32：下面这个ul，如何点击每一列的时候alert其index?（闭包）？

<ulid=”test”>

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

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

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

</ul>

33：给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：

addSpace(“helloworld”) // -> ‘h e l l o w o r l d’

------------------------------------------------------------------------------

34：函数声明与函数表达式的区别？

对于函数声明，js解析器会优先读取，确保在所有代码执行之前声明已经被解析，而函数表达式，如同定义其它基本类型的变量一样，只在执行到某一句时也会对其进行解析，所以在实际中，它们还是会有差异的，具体表现在，当使用函数声明的形式来定义函数时，可将调用语句写在函数声明之前，而后者，这样做的话会报错。

------------------------------------------------------------------------------

35：在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

能通过Array.prototype.slice转换为真正的数组的带有length属性的对象。

1，具有length属性

2，按索引方式存储数据

3，不具有数组的push,pop等方法

在JavaScript 中，函数中的隐藏变量arguments 和用 getElementsByTagName 获得的元素集合（NodeList）都不是真正的数组，不能使用 push 等方法，在有这种需要的时候只能先转换为真正的数组。

对于arguments，可以使用 Array.prototype.slice.call(arguments); 来达到转换的目的，但对于 NodeList 则不行了，其在 IE8 及以下将会报错，只能说其 JS 引擎有所限制。

因此，如果需要把NodeList 转换为真正的数组，则需要做下兼容处理。

function realArray(c) {

try {

return Array.prototype.slice.call(c);

}catch (e) {

var ret = [], i = 0, len = c.length;

for (; i < len; i++) {

ret[i] = (c[i]);

}

return ret;

}

------------------------------------------------------------------------------

36：想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）?

绑定点击事件，onmousedown/ontouchstart的时候记录鼠标点击的位置pageX、pageY，然后绑定移动事件onmousemove/ontouchmove，获得此时的pageX、pageY，然后与初始位置相减，得到差值a,b，更改元素的transformX(a),transformY(b)，到此时就实现了移动，onmouseup/ontouchend之后获得最终的位置，再进一步操作就行了

------------------------------------------------------------------------------

37：var numberArray = [3,6,2,4,1,5]; （考察基础API）?

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

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

1var numberArray = [3,6,2,4,1,5];
2
3 numberArray.reverse(); // 5,1,4,2,6,3
4
5 numberArray.sort(function(a,b){ //6,5,4,3,2,1
6 return b-a;
7 })

------------------------------------------------------------------------------

38：.将字符串”<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’);

------------------------------------------------------------------------------

39：foo = foo||bar ，这行代码是什么意思？为什么要这样写？

if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。

　　短路表达式：作为"&&"和"||"操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值

------------------------------------------------------------------------------

40：为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义?

------------------------------------------------------------------------------

41：写一个function，清除字符串前后的空格。（兼容所有浏览器）?

使用自带接口trim()，考虑兼容性：

if (!String.prototype.trim) {
2 String.prototype.trim = function() {
3 returnthis.replace(/^\s+/, "").replace(/\s+$/,"");
4 }
5}
6
7// test the function
8var str = " \t\n test string ".trim();
9 alert(str == "test string"); // alerts "true"

------------------------------------------------------------------------------

42：Javascript中callee和caller的作用？

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

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

------------------------------------------------------------------------------

43：谈一谈你对javascript的理解，javascript能做什么?

javascript是主要用在web中的一种动态的解析型语言。可以改变网页里的数据，根据用户点击等操作告诉服务器可以动态的改变网页的大小。 JavaScript

是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言,是一种轻量级的编程语言。同时也是一种广泛用于客户端

Web开发的脚本语言，常用来给

HTML网页添加动态功能，比如响应用户的各种操作,可以将动态的文本放入 HTML 页面, 可以对事件作出响应,可以读写 HTML 元素, 可被用来验证数据, 可被用来检测访问者的浏览器, 可被用来创建 cookies

------------------------------------------------------------------------------

44：在javascript中如何检测客户端的浏览器和操作系统类型?

varresolution = "分辨率:" +window.screen.width + "*" + window.screen.height;, var ua =window.navigator.userAgent;

------------------------------------------------------------------------------

45：Cookie在客户机上是如何存储的?

Cookies就是服务器暂存放在你的电脑里的文本文件，好让服务器用来辨认你的计算机。当你在浏览网站的时候，Web服务器会先送一小小资料放在你的计算机上，Cookies 会帮你在网站上所打的文字或是一些选择都记录下来。当下次你再访问同一个网站，Web服务器会先看看有没有它上次留下的Cookies资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容给你。

------------------------------------------------------------------------------

46：Prompt box是什么？它的返回值有什么用？

prompt()方法用于显示可提示用户进行输入的对话框。如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

------------------------------------------------------------------------------

47：如何获取javascript所能表示的最大值和最小值？

alert(Math.max.apply(null,a));//最大值 alert(Math.min.apply(null,a));//最小值

------------------------------------------------------------------------------

48：Null和Undefined有和区别与联系?

null:表示无值; undefined : 表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性。

------------------------------------------------------------------------------

49：如何理解javascript中的variabletyping，试用代码说明?

js的基本数据类型:number（数字类型）,string（字符串）,boolean（布尔类型 true/false） //null（空类型只有一个值null）在使用typeof测试类型时，返回object。 //undefine（未定义类型）未定义类型只有一个值underfine

------------------------------------------------------------------------------

50：如何理解javascript中的对象?

JavaScript中的所有事物都是对象：字符串、数值、数组、函数... 用function定义
---------------------
作者：NoobZhang
来源：CSDN
原文：https://blog.csdn.net/u013418331/article/details/53148073
版权声明：本文为博主原创文章，转载请附上博文链接！