JS面试题-CSDN博客

本文链接：https://blog.csdn.net/cyang233/article/details/105318347

1.JavaScript 的组成
ECMAScript（核心）：JavaScript 语言基础
DOM（文档对象模型）：规定了访问 HTML 和 XML 的接口
BOM（浏览器对象模型）：提供了浏览器窗口之间进行交互的对象和方法
2.offsetWidth/offsetHeight,clientWidth/clientHeight 与 scrollWidth/scrollHeight 的区别？
offsetWidth/offsetHeight 返回值包含 content + padding + border，效果与 e.getBoundingClientRect()相同
clientWidth/clientHeight 返回值只包含 content + padding，如果有滚动条，也不包含滚动条
scrollWidth/scrollHeight 返回值包含 content + padding + 溢出内容的尺寸
3.假设a=“2020“，请对变量a进行操作使其倒序排列

var a = "2020".split("");
	//将a分割为数组
	a.reverse();
	//翻转数组
	console.log(a);

4.new操作符具体干了什么呢？
1.创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。
2.属性和方法被加入道this引用的对象中。
3.新创建的对象由this所引用，并且最后隐式的返回this。
5.js数组去重

var arr = [1,2,3,2,3,4,4,5,6];
		//第一种方法
			function one(){
				var a =[];
				//定义一个临时数组
				for(var i =0;i<arr.length;i++){
				//遍历arr数组
					if(a.indexOf(arr[i])==-1){
						a.push(arr[i]);
						//如果a中没有arr[i]就把arr[i]存入a中					}
				}
				return a;
			}
			alert(a());
			//第二种
			function two(){
				var b = [],n={};
				//b为临时数组，n为hash表
				for(var i=0;i<arr.length;i++){
					if(!n[arr[i]]){
						//如果hash表中没有当前项
						{
							n[arr[i]] =true; 
							//存入hash表
							b.push(arr[i]);
							//把当前数组的当前项存入临时数组
						}
					}
				}
				return b
			}
			alert(two());
		//第三种
		function three(){
				var c = [arr[0]];
				//结果数组
				for(var i=1;i<arr.length;i++){
					//从第二项开始遍历 1,2,3,2,3,4
					if(arr.indexOf(arr[i])==i){
						c.push(arr[i]);
						//如果当前数组的第i项在当前数组的第一次出现位置不是i；
						//那么表示第i项是重复的，忽略掉。否则存入数组c
					}
				}
				return c;
			}
			alert(three())

6.javascript原型，原型链？有什么特点？
原型对象也是普通的对象，是对象一个自带隐式的_proto_属性，
原型也有可能是自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
原型链是由一些用来继承和共享属性的对象组成的(有限的)对项链。
7.eval的作用
eval功能是将对应的字符串解析成js代码并运行。
注：应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
8.javascript对象的几种创建方式
1.工厂模式
2.构建函数模式
3.原型模式
4.混合构建函数和原型模式
5.动态原型模式
6.寄生构造函数模式
7.稳妥构建函数模式
9.javascript继承的6种方法
1.原型链继承
2.借用构造函数继承
3.组合继承(原型+借用构造)
4.原型式继承
5.寄生式继承
6.寄生组合式继承
10.怎样添加，移除，移动，复制，创建和查找节点
1.创建新节点
createDocumentFragment() //创建一个dom片段
createElement() //创建一个具体的元素
createTextNode() 创建一个文本节点
2.添加，移除，替换，插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3.查找
getElementsByTagName() //通过标签名称
getElementById() //通过id ，唯一性
getElementsByName() //通过元素的name属性的值
11.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？
dns缓存，cdn缓存，浏览器缓存，服务器缓存。
12.Ajax是什么？如何创建一个Ajax？
Ajax全程是 asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客服端与服务器端的异步交互，实现页面的局部刷新。基本步骤四步走（1.创建对象，2.建立连接，3.发送数据，4.接收数据）

//1.创建一个XMLHttpRequest对象
			var xhr = XMLHttpRequest();		
			//2.发送请求，跟服务器建立一个连接
			xhr.open("type(提交方式)","url(提交的地址)");
			//2.1如果是post请求，需要设置请求头
			xhr.setRequestHeader("Content-Type","application/x_www_form_urlencoded");
			//3.发送数据给服务器	如果是get请求，请求的数据在地址的后面
			xhr.send();
			//4.接收服务器的数据.服务器返回数据会调用一个回调函数,通过回调函数去接收数据
			xhr.onreadystatechange = function(){
				//相应完成
				if(xhr.readyState ==4){
					//响应成功
					if(xhr.status ==200){
						//responseText 属性接收服务器返回的数据
					}
				}
			}

13.如何解决跨域问题？
1.jsonp，允许script加载第三方资源
2.反向代理（nginx服务内部配置 Access-Control-Allow-Origin *）
3.cors前后端协作设置请求头部，Access-Control-Allow_Origin等头部信息
4.iframe 嵌套通讯，postmessage
注：协议，域名，端口都相同才算同域，否则都是跨域。
14.页面编码和被请求的资源编码如果不一致如何处理？
get请求中的中文需要encodeURLComponent编码处理，post请求不需要进行编码。
15.阐述一下异步加载Js
1.异步加载的方案：动态插入script标签
2.通过ajax去获取js代码，然后通过eval执行
3.script标签上添加defer或者async属性
4.创建并插入iframe，让它异步执行js
16.GET和POST的区别，何时使用POST？
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符，有的浏览器是8000个字符。
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。在以下情况中，请使用POST请求
1.无法使用缓存文件(更新服务器上的文件或者数据库)
2.向服务器发送大量数据（POST没有数据量限制）
3.发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
17.Ajax的优点与缺点？
优点：
1.通过异步模式，提升了用户体验。来自服务器的新内容可以动态更改，无需重新加载整个页面。
2.优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3.Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载
缺点：
1.Ajax不支持浏览器back按钮
2.安全问题Ajax暴露了与服务器交互的细节。
3.对搜索引擎的支持比较弱
4.破坏了程序的异常机制
18.解释一下jsonp的原理，以及为什么不是真正的ajax，以及优缺点
jsonp是用来解决跨域获取数据的一种解决方案，集体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，本质上使用的并不是ajax技术。
优点：
完美的解决了在测试或开发中获取不同域下的数据，用户床第一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住jsonp数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。简单来说数据的格式没有发生很大变化
缺点：
1.jsonp只支持get请求而不支持post请求，也就是说如果想传给后台一个json格式的数据，问题就来了，浏览器会报一个http状态码415错误，告诉你请求格式不正确，这让老师很蛋疼（在登陆注册中需要给后台传一大串数据），如果都用参数的形式拼接在url后面的话不太现实，后台取值也会显得繁琐‘
2.在登陆模块中需要用到session来判断当前用户的登陆状态，这时候由于是跨域的原因，前后台取到的session是不一样的，那么就不能通过session来判断
3.由于jsonp存在安全性问题，考虑到上面的一系列问题，采用的是后台进行设置允许跨域请求（但还是存在缺陷，实际上还是跨域，如上面的session问题）Header set Access-Control_Allow_origin * 为了防止xxs攻击我们的服务器，我们可以限制域，比如 Access-Control——Allow_Origin:http:…blog.scdn.net
19.一个页面从输入URL到页面加载显示完成，这个过程都发生了什么？
1.浏览器地址栏输入url
2.浏览器会先查看浏览器缓存–系统缓存–路由缓存，如果有缓存，就直接显示。如果没有，就往下执行第三步。
3.域名解析（DNS）获取相应的ip
4.浏览器向服务器发起tcp请求，与浏览器简历tcp三次握手
5.握手成功，浏览器向服务器发送http请求，请求数据包
6.服务器请求数据，将数据返回到浏览器。
7.浏览器接收数据，读取页面内容，解析html源码，生成dom树
8.解析css样式，浏览器渲染，js交互绑定多个域名，数量不限
20.XML与JSONP的区别
1.数据体积方面：
JSONP相对于XML来说，数据的体积小，传递的速度更快
2.数据交互方面：
JSONP与javascript的交互更加方便，更容易解析处理，更好的数据交互
3.数据描述方面
JSONP对数据的描述性比XML较差
4.传输速度方面
JSONP的速度远远快于XML