JavaScript面试题

最新推荐文章于 2021-09-08 16:16:42 发布

Curry 3O

最新推荐文章于 2021-09-08 16:16:42 发布

阅读量570

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/qq_42552393/article/details/100061630

版权

JS 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

答案: string、number、undefined、boolean、object 和 function

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

答案: 强制类型转换: parseInt、parseFloat、Number()、String() 、Boolean()
隐式类型转换: +、-、== 、===

3. split() 和 join() 的区别

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

4.数组方法 pop() 、push() 、unshift() 、shift()

答案:
pop() 从数组的末尾移除最后一项，减少数组的length值，返回移除的项。
push() 可接受任意类型的参数，将它们逐个添加到数组的末尾，并返回数组的长度。
unshift() 在数组的前端添加任意个项，并返回新数组的长度。
shift() 移除数组中的第一个项并且返回该项，同时将数组的长度减一。

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

答案:
var event = event || window.event
var target = event.SrcElement || event.target
document.documentElement.clientWidth || document.body.clientWidth

6. Ajax请求的时候 get 和 post 方式的区别

答案:

GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器
get请求不安全，post安全
get请求数据有限制，post无限制
post需要设置请求头(post的参数在请求体中)

7. call 和 apply 的区别

答案: call()方法和apply()方法的作用相同：改变this指向。
区别：
call()：第一个参数是this要指向的对象，后面传入的是参数列表(参数可以是任意类型，当第一个参数为null、undefined的时候，默认指向window)在使用call()方法时，传递给函数的参数必须逐个列举出来。
apply(): 第一个参数是this要指向的对象，第二个参数是数组。

8. Ajax 请求时，如何解析 json 数据

答案: json是一种轻量级交互格式,本质上就是字符串,常用于前后端的数据交互。前端向后端发送数据数据:使用JSON.stringify()方法把json对象转为字符串。前端解析后端数据:使用JSON.parse()方法把字符串转为json对象。

9.事件委托是什么

答案: 事件委托就是利用事件冒泡，指定一个事件处理程序，就可以管理某一类型的所有事件。让自己的所触发的事件，让他的父元素代替执行。

10. 闭包是什么，有什么特性，对页面有什么影响、有哪些优点

答案: 闭包指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。通俗的讲：就是函数a的内部函数b，被函数a外部的一个变量引用的时候，就创建了一个闭包。

闭包的特性：

封闭性：外界无法访问闭包内部的数据，如果在闭包内声明变量，外界是无法访问的，除非闭包主动向外界提供访问接口。
持久性：一般的函数，调用完毕之后，系统自动注销函数，而对于闭包来说，在外部函数被调用之后，闭包结构依然保存在。

对页面的影响：使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等。

闭包的优点：

希望一个变量长期驻扎在内存当中(不被垃圾回收机制回收)
避免全局变量的污染
私有成员的存在
安全性提高

11. 如何阻止事件冒泡

答案：
非IE8及以下浏览器：event.stopPropagation();
IE8及以下浏览器: event.cancelBubble = true;

12.如何阻止默认事件

答案：
非IE8及以下浏览器：event.preventDefault();
IE8及以下浏览器: event.returnValue = false;

13. 添加、删除、替换、插入到某个节点的方法

答案：

1.创建节点

createElement 创建元素节点
createTextNode 创建文本节点

2.插入节点

appendchild 在要插入的元素节点上调用，它插入指定的节点使其成为那个节点的最后一个子节点
insertBefore 在已有的元素前插入一个新元素
insertAfter 在现有的元素后面插入一个新元素

3.删除节点

removeChild 从文档树中删除一个节点(先找到要删除节点的父节点，用父节点删除)

4.替换节点

replaceChild 将一个节点替换为另一个节点(先找到要替换的节点的父节点，用父节点替换)

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

答案：jsonp 的原理:就是利用浏览器可以动态地插入一段 js 并执行的特点完成的。

不是真正 ajax 的原因:

ajax的核心是:通过XmlHttpRequest获取非本页内容。jsonp的核心:动态添加<script>标签来调用服务器提供的js脚本
ajax 通过服务端代理一样跨域, jsonp 也不并不排斥同域的数据的获取
jsonp 是一种方式或者说非强制性的协议, ajax 也不一定非要用 json 格式来传递数据
jsonp 只支持 get 请求, ajax 支持 get 和 post 请求

15. document load 和 document ready 的区别

答案：

load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数，load方法就是onload事件。缺点：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响。
$(document).ready()是当DOM文档树加载完成后执行一个函数（不包含图片，css等）所以会比load较快执行。在原生的jS中不包括ready()这个方法，Jquery才有，jquery中有 $().ready(function)

16. == 和 === 的不同

答案：

== 表示等同， === 表示严格相同
== 只比较内容， === 既比较内容也比较数据类型
== 会自动转换类型再判断是否相等，=== 不会自动类型转换，直接去比较

17.函数声明与函数表达式的区别

答案：在 Javscript 中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。

示例：

//函数声明
hello(); //这是函数声明！
function hello(){
	console.log('这是函数声明！');
}

//函数表达式
hello(); // 这里会报错 Uncaught ReferenceError: hello is not defined
const hello = function(){
	console.log('这里是函数表达式');
}

18.对作用域上下文和 this 的理解，看下列代码：

var User = {
	count: 1,
	getCount: function() {
		return this.count;
	}
};
console.log(User.getCount()); // what?
var func = User.getCount;
console.log(func()); // what?

问两处console输出什么？为什么？

答案：
第一处输出 1 ; 因为 getCount 中可以使用 User 里的 count

第二处输出 undefined ;因为 func 是在 window 的上下文中被执行的，func中的this指向的是window, 所以不会访问到count属性，最后会返回undefined

19.看下面代码，给出输出结果

for(var i = 1; i <= 3; i++){  
	setTimeout(function(){
		console.log(i);   
	},0); 
};

答案：输出结果为: 4 4 4
使用 let 声明 i 变量就不产生闭包。

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

答案：

直接在DOM里绑定事件：<div onclick="test()"></div>
在JS里通过onclick绑定：xxx.onclick = test(){}
通过事件添加进行绑定：addEventListener("click",function(){},false)

21. Javascript 的事件流模型都有什么

答案：

事件冒泡：事件开始由最具体的元素接受，然后逐级向上传播
事件捕捉：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
DOM事件流：三个阶段：事件捕捉，目标阶段(处理目标)，事件冒泡

22.看下列代码,输出什么?解释原因

var a = null;
alert(typeof a);

答案：输出 object
原因:null 是一个只有一个值的数据类型，这个值就是 null，表示空指针对象，所有用 typeof 检测会返回 object

23. 判断字符串以字母开头，后面可以是数字，下划线，字母，长度为6-30

答案：var reg = /^[a-zA-Z]\w{5,29}$/;

24. 回答以下代码，alert 的值分别是多少

var a = 100;  
function test(){  
	alert(a);  
	a = 10;  
	alert(a);  
}  
test();
alert(a);

答案：第一处输出100,第二处输出10,第三处输出10

25. javaScript 的2种变量范围有什么不同

答案：
全局变量：当前页面内有效
局部变量：方法内有效

26.null 和 undefined 的区别

答案：
null 是 javascript 的关键字，表示一个特殊值，常用来描述"空值"，typeof 运算返回object，所以可以将 null 认为是一个特殊的对象值，含义是"非对象"。
undefined 是预定义的全局变量，他的值就是"未定义"， typeof 运算返回 undefined。

27. new 操作符具体干了什么

答案：

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

28.js 延迟加载的方式有哪些

答案：

defer 属性
<script>标签定义了defer属性,表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行。

async 属性
<script>标签定义了 async 属性,与 defer 属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。目的是不让页面等待脚本下载和执行，从而异步加载页面其他内容。async 和 defer 一样，都不会阻塞其他资源下载，所以不会影响页面的加载。缺点是不能控制加载的顺序。

动态创建DOM方式

使用jQuery的getScript()方法

使用setTimeout延迟方法

让JS最后加载
把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。

29.Flash、Ajax 各自的优缺点，在使用中如何取舍

答案：

共同点：与服务器的无刷新传递消息、用户离线和在线状态、操作DOM。

优缺点：

Flash 适合处理多媒体、矢量图形、访问机器；对CSS、处理文本上不足，不容易被搜索。
Ajax 对 CSS、文本支持很好，支持搜索；多媒体、矢量图形、机器访问不足。

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

答案：

function getStyle(obj, attr) {
	if(obj.currentStyle){
		return obj.currentStyle[attr];  
	}else{
		return  window.getComputedStyle(obj,false)[attr];  
	}
}
console.log(getStyle(oDiv2,"background"));

31.希望获取到页面中所有的 checkbox (不使用第三方框架)

答案：

var inputs = document.getElementsByTagName("input"); //获取所有的input标签对象
var checkboxArray = []; //初始化空数组，用来存放checkbox对象。
for(var i=0;i<inputs.length;i++){
	var obj = inputs[i];
	if(obj.type=='checkbox'){
		checkboxArray.push(obj);
	}
}

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

答案：

//方法一
function trim(str){   
	str = str.replace(/^(\s|\u00A0)+/,'');   
	for(var i=str.length-1; i>=0; i--){   
		if(/\S/.test(str.charAt(i))){   
			str = str.substring(0, i+1);   
			break;   
		}   
	}   
	return str;   
}  

//方法二
String.prototype.trim= function(){
	return this.replace(/^\s+/,"").replace(/\s+$/,"");
}

33.javascript 语言特性中，有很多方面和我们接触的其他编程语言不太一样，请举例

答案：

javascript语言实现继承机制的核心就是原型，而不是Java语言那样的类式继承
Javascript解析引擎在读取一个 Object 的属性的值时，会沿着原型链向上寻找，如果最终没有找到，则该属性值为undefined；如果最终找到该属性的值，则返回结果
当javascript解析引擎执行“给一个 Object 的某个属性赋值”的时候，如果当前 Object 存在该属性，则改写该属性的值；如果当前的 Object 本身并不存在该属性，则赋值该属性的值

34.Cookie 在客户机上是如何存储的

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

35.如何获取 javascript 三个数中的最大值和最小值

答案：

Math.max(a,b,c);  //最大值
Math.min(a,b,c)   //最小值

36.javascript 是面向对象的，怎么体现javascript的继承关系

答案：使用prototype原型来实现。

37.form 中的 input 可以设置为 readonly 和 disable，请问2者有什么区别

答案：

readonly不可编辑，但可以选择和复制；值可以传递到后台
disabled不能编辑，不能复制，不能选择；值不可以传递到后台

38.列举 javaScript 的3种主要数据类型，2种复合数据类型和2种特殊数据类型

答案：

主要数据类型：string, boolean, number
复合数据类型：function, object
特殊类型：undefined，null

39.程序中捕获异常的方法

答案：

try{

}catch(e){

}finally{

}

40.Ajax 原理

答案：

创建对象
var http = new XMLHttpRequest();
指定请求
http.open('GET', 'url',true); //发送请求的方法和url地址
设定请求头
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
指定可选的请求主体并向服务器发送
http.send();
接收响应
http.onreadystatechange = function(){
	if (http.status === 200 && http.readyState ===4) {
		//响应数据
		console.log(http.responseText);
	}
}

41.解释什么是 Json

答案：

JSON 是一种轻量级的数据交换格式
JSON 独立于语言和平台，JSON解析器和JSON库支持许多不同的编程语言
JSON的语法表示三种类型值，简单值(字符串，数值，布尔值，null),数组，对象

42.js 中的3种弹出式消息提醒（警告窗口，确认窗口，信息输入窗口）的命令式什么

答案：

alert
confirm
prompt

43.以下代码执行结果

var uname = 'jack'
function change() {
	alert(uname) // ?
	var uname = 'lily'
	alert(uname)  //?
}
change();

答案：
第一处: undefined (变量声明提升)
第二处: lily

44.浏览器的滚动距离

答案：可视区域距离页面顶部的距离

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

45.可视区的大小

答案：

innerXXX（不兼容ie）
window.innerHeight 可视区高度，包含滚动条宽度
window.innerWidth 可视区宽度，包含滚动条宽度
document.documentElement.clientXXX(兼容ie)
document.documentElement.clientWidth 可视区宽度，不包含滚动条宽度
document.documentElement.clientHeight 可视区高度，不包含滚动条宽度

46.节点的种类有几种，分别是什么？

答案：

元素节点：nodeType === 1;
文本节点：nodeType === 3;
属性节点：nodeType === 2;
文档节点：nodeType === 9;
注释节点：nodeType === 8;

47.innerHTML 和 outerHTML 的区别

答案：

innerHTML 设置或获取位于对象起始和结束标签内的HTML(元素内包含的内容）
outerHTML 设置或获取对象及其内容的HTML形式(自己以及元素内的内容)
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
主要区别在于：
1、innerHTML与outerHTML在设置对象的内容时包含的HTML会被解析，而innerText与outerText则不会。
2、在设置时，innerHTML与innerText仅设置标签内的文本，而outerHTML与outerText设置包括标签在内的文本。

48.offsetWidth、offsetHeight 和 clientWidth 、clientHeight 的区别

答案：

offsetWidth （content宽度+padding宽度+border宽度）
offsetHeight（content高度+padding高度+border高度）
clientWidth（content宽度+padding宽度）
clientHeight（content高度+padding高度）

49.Javascript 中 callee 和 caller 的作用

答案：

callee 是返回正在被执行的function函数，也就是所指定的function对象的正文
caller 是返回一个对函数的引用，该函数调用了当前函数

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

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

具有length属性
按索引方式存储数据
不具有数组的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;
	}
}

//方法二（es6中的方法）:
Array.from()

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

答案：

function escapeHtml(str) {
	return str.replace(/[<>”&]/g, function(match) {
		switch (match) {
			case “<”:
				return “&lt;”;
			case “>”:
				return “&gt;”;
			case “&”:
				return “&amp;”;
			case “\””:
				return “&quot;”;
		}
	});
}

52.排序算法

答案：

Sort排序

systemSort: function(array) {
	return array.sort(function(a, b) {
		return a - b;
	});
}

冒泡排序

var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i <array.length; i++){
	for (var j = 0; j <array.length - i; j++){
		if (array[j] > array[j + 1]){
			temp = array[j + 1];
			array[j + 1] = array[j];
			array[j] = temp;
		}
	}
}

冒泡排序：最简单，也最慢，貌似长度小于7最优
插入排序：比冒泡快，比快速排序和希尔排序慢，较小数据有优势
快速排序：这是一个非常快的排序方式，V8的sort方法就使用快速排序和插入排序的结合
希尔排序：在非chrome下数组长度小于1000，希尔排序比快速更快
系统方法：在forfox下系统的这个方法非常快

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

答案：

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

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

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

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

54.不使用循环，创建一个长度为100的数组，并且每个元素的值等于它的下标

答案：

//方法一:
var arrNew = Array.from({length: 100},(v,k)=>k);
console.log(arrNew);

//方法二：
new Array(100).fill(0).map((_, c) => c);

55.如何理解javascript中的对象

答案：JavaScript中的所有事物都是对象：字符串、数值、数组、函数… 用function定义。

Curry 3O

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript面试题

1. javascript 的 typeof 返回哪些数据类型答案: string、number、undefined、boolean、object 和 function2.例举几种强制类型转换和隐式类型转换答案: 强制类型转换: parseInt、parseFloat、Number()、String() 、Boolean()隐式类型转换: +、-、== 、===3. spli...
复制链接

扫一扫