前端面试题以及常见问题与答案（JS部分持续更新ing......）

1.javascript的typeof返回哪些数据类型？例举3种强制类型转换和2种隐式类型转换?（附加：“= =”和“===”的不同）

object  number  function  boolean  underfind  string  symbol(ES6)

typeof null;  //object
typeof isNaN;//function
typeof isNaN(123);//boolean
typeof [];//object 
toString.call([]);//”[object Array]”

强制(String(),Boolean(),Number(),parseInt,parseFloat);
隐式（== +和-）
附加两者的不同：
前者会自动转换类型，后者不会

1==”1”//true
null==undefined//true
===先判断左右两边的数据类型，如果数据类型不一致，直接返回false
   之后才会进行两边值的判断

undefined会在以下三种情况下产生：
1.一个变量定义了却没有被赋值
2.想要获取一个对象上不存在的属性或者方法:
3.一个数组中没有被赋值的元素

2.split() join() 的区别

split()用于分割字符串，返回一个数组，例如

var string=“Hello World?name=xiaoming”;
var splitString= string.split("?");
console.log(splitString);//["Hello World","name=xiaoming"]

join()用于连接多个字符或字符串，返回值为一个字符串；例如

var a=new Array();
    a[0]="Hello";
    a[1]="xiao";
    a[2]="ming";
    alert(a.join("#")); //Hello#xiao#ming

3.js数组类型中的常用方法

方法	描述
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
shift()	删除并返回数组的第一个元素。
pop()	删除并返回数组的最后一个元素。
splice()	删除元素，并向数组添加新元素。
concat()	连接两个或更多的数组，并返回结果。
reverse()	颠倒数组中元素的顺序。
slice()	从某个已有的数组返回选定的元素。
sort()	对数组的元素进行排序。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
valueOf()	返回数组对象的原始值。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

4.普通事件和事件绑定有什么区别

（1）普通添加事件的方法：

var btn = document.getElementById("hello");
btn.onclick = function(){
	alert(1);
}
btn.onclick = function(){
	alert(2);
}
执行上面的代码只会alert 2 

(1).普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的
(2).不支持DOM事件流 事件捕获阶段=>目标元素阶段=>事件冒泡阶段

（2）事件绑定方式添加事件：

var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
	alert(1);
},false);
btn.addEventListener("click",function(){
	alert(2);
},false);
执行上面的代码会先alert 1 再 alert 2

(1).事件绑定(addEventListener)方式添加事件可以添加多个,绑定将会依次触发
(2).支持DOM事件流的

（3）E9以前：

attachEvent(“onclick”)、detachEvent(“onclick”)

5.IE和DOM事件流的区别

1.执行顺序不一样
2.参数不一样
3.事件加不加on
4.this指向问题
IE9以前：attachEvent(“onclick”)、detachEvent(“onclick”)
IE9开始跟DOM事件流是一样的，都是addEventListener

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

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

7.call和apply的区别

call和apply相同点：调用一个对象的一个方法，用另一个对象替换当前对象。
不同点例如：

B.call(A, args1,args2);即A对象调用B对象的方法。
B.apply(A, arguments);即A对象应用B对象的方法。
--------------------------------------
toString.call([],1,2,3)
toString.apply([],[1,2,3])
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)

8.b继承a的方法 （JS如何实现继承？创建对象的几种方式）

考点：继承的多种方式
1.原型继承、2.构造函数继承、3.call和apply实现继承

function b(){}
b.protoototype=new a;

该部分代码和解释详情请参考文章**[B继承A的写法](https://blog.csdn.net/weixin_43499077/article/details/83382410)
JS继承方法：原型链继承、借用构造函数继承、组合继承、寄生式继承、寄生组合继承
创建对象：工厂方式、构造函数方式、原型模式、混合构造函数原型模式、动态原型方式

9.事件委托是什么？JS的事件流模型都有什么？

利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

10.如何阻止事件冒泡和默认事件？

e. stopPropagation();//标准浏览器
event.canceBubble=true;//ie9之前
阻止默认事件：
为了不让a点击之后跳转，我们就要给他的点击事件进行阻止
return false 
e.preventDefault();

11.闭包是什么?闭包有什么缺点？什么是作用域？

闭包就是能够读取其他函数内部变量的函数。
缺点：滥用闭包函数会造成内存泄露，因为闭包中引用到的包裹函数中定义的变量都永远不会被释放，所以我们应该在必要的时候，及时释放这个闭包函数
作用域：定义一个函数就开辟了一个局部作用域，整个js执行环境有一个全局作用域。
例如：

var a = function(x){
    var b = 'bb';
    return b;
};

12.节点的操作 添加 删除 替换 插入 查找 创建

obj.appendChild()//添加
obj.insertBefore() //插入
obj.replaceChild()//替换
obj.removeChild()//删除
getElementsByTagName()//通过标签名称
getElementsByName()//通过元素的Name属性的值
getElementById()//通过元素Id，唯一性
document.createElement()//创建元素节点

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

本地对象为array obj regexp等可以new实例化
内置对象为global Math 等不可以实例化的
宿主为浏览器自带的document,window 等

14.document load 和document ready的区别

1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数;问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响
(1).Document.onload 是在结构和样式加载完才执行js
(2).window.onload：不仅仅要在结构和样式加载完，还要执行完所有的样式、图片这些资源文件，全部加载完才会触发window.onload事件
2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行;在原生的jS中不包括ready()这个方法，只有load方法就是onload事件

15.javascript的同源策略

同源策略是对javascript代码能够操作那些web内容的一条完整的安全限制。当web页面使用多<iframe />元素或者打开多个浏览器窗口的时候，这一策略就会发生作用。
同源策略的含义：一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合；

http,ftp:协议
主机名；localhost
端口名：80:http协议的默认端口
https:默认端口是8083
同源策略带来的麻烦：ajax在不同域名下的请求无法实现，
如果说想要请求其他来源的js文件，或者json数据，那么可以通过jsonp来解决

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

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];//返回的所有的checkbox
var len = domList.length;　　//缓存到局部变量
while (len--) {　　//使用while的效率会比for循环更高
　　if (domList[len].type == ‘checkbox’) {
    　　checkBoxList.push(domList[len]);
　　}
}

17.设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”

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

直接在DOM里绑定事件：`<div onclick=”test()”></div>
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

19.已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。

function combo(msg){
    var arr=msg.split("-");//[get,element,by,id]
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);//Element
    }
    msg=arr.join("");//msg=” getElementById”
    return msg;
}

20.输出今天的日期，以YYYY-MM-DD的方式，比如今天是2018年10月24日，则输出2018-10-24

var d = new Date();
// 获取年，getFullYear()返回4位的数字
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);

21.将字符串”{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲</td><td>{name}”中的{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}̲替换成10，{name}Sum （使用正则表达式）

var map={"id":"10","name":"Sum"};
var input="<tr><td>{$id}</td><td>{$name}</td></tr>";
/**
**根据传入的数据源字段值，去替换字符串
**/
function setData(dataObj,template){
    return template.replace(/{\$([^{}]+)}/ig,function(match,group1){
        return dataObj[group1];
    });
}
setData(map,input);

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

function escapeHtml(str) {
//[<>”&]:中括号中字符只要其中的一个出现就代表满足条件
//给replace第二个参数传递一个回调函数，回调函数中参数就是匹配结果，如果匹配不到就是null
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
      case “<”:
         return “&lt;”;
      case “>”:
          return “&gt;”;
      case “&”:
          return “&amp;”;
      case “\””:
         return “&quot;”;
     }
  });
}

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

该方式也称短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
注意if条件的真假判定，记住以下是false的情况：空字符串、false、undefined、null、0

24.用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。

/*function sortNumber(a,b){
   return a-b;//升序
   //return b-a;//降序
  }*/
  //下列为代码
   var iArray =[];
  function getRandom(iStart,iEnd){
   var iChoice = iStart-iEnd+1;
   return Math.abs(Math.floor(Math.random()*iChoice))+iStart;
  }
  for(var i=0;i<10;i++){
   iArray.push(getRandom(10,100))
  }
  iArray.sort(sortNumber);
  console.log(iArray)

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

当使用RegExp()构造函数的时候，不仅需要转义引号（即\”表示”），并且还需要双反斜杠（即\表示一个\）。使用正则表达字面量的效率更高。
邮箱的正则匹配：

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

26.JS中caller和callee的作用？

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

27.完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示（相当于下拉列表）

<body>
<script type=”text/javascript” >
function showImg (oSel) {
//在此处添加代码 
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}
</script>
<img id=”pic”src=”img1.jpg”width=”200″ height=”200″ />
<br />
<select id=”sel”>
<option value=”img1“>城市生活</option>
<option value=”img2“>都市早报</option>
<option value=”img3“>青山绿水</option>
</select></body>

28.列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个

对象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()

29.iframe的优缺点？

优点：
1.解决加载缓慢的第三方内容如图标和广告等的加载问题。
2. 能够原封不动地把嵌入的网页展现出来。
3. 如果有多个网页调用iframe，只需要修改iframe的内容，就可以实现对调用iframe的每一个页面内容的更改，方便快捷。
4. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用性。
5. 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
缺点：
1.会产生很多页面，不容易管理。
2.会阻塞主页面的Onload事件。
3.iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。
4.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
5.使用框架结构时，必须保证正确设置所有的导航链接，否则会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下会导致链接死循环。
6.代码复杂，无法被一些搜索引擎索引到，现在的搜索引擎爬虫还不能很好的处理iframe中的内容，所以使用iframe会不利于搜索引擎优化。

30. JS延迟加载的方式有哪些？

（1.）defer属性和async属性

<scriptsrc="file.js" defer></script>
//浏览器会并行下载file.js和其它有defer属性的script，而不会阻塞页面后续处理。defer属性在IE4.0中就实现了，
//超过10多年了！Firefox从3.5开始支持defer属性 。(所有的defer脚本保证是按顺序依次执行的)
<scriptsrc="file.js" async></script>
//async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。

（2.）动态创建DOM方式

   function downloadJSAtOnload() {
     varelement = document.createElement("script");
     element.src = "defer.js";
     document.body.appendChild(element);
   }
   if (window.addEventListener)
      window.addEventListener("load",downloadJSAtOnload, false);
   else if (window.attachEvent)
      window.attachEvent("onload",downloadJSAtOnload);
   else window.onload =downloadJSAtOnload;

（3.）使用Jquery的getScript()方法

  $.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
        console.log("脚本加载完成")
  });

（4.）使用setTimeout延迟方法的加载时间延迟加载js代码，给网页加载留出更多时间

 function A(){
        $.post("/index/login",{name:username,pwd:password},function(){
            alert("Hello");
        });
    }
    $(function (){
        setTimeout('A()', 1000); //延迟1s
    })

（5.）让JS最后加载

31.documen.write和 innerHTML 的区别？

document.write 只能重绘整个页面

<title>标题</title>
<body>
<p>文本内容</p>
<div id="testDiv">文本内容</div>
</body>
<script>
window.onload = function() {
    document.write("文本内容");
}
</script>
//执行结果显示：document.write会将页面上的所有内容清除包括标题。

innerHTML 可以重绘页面的一部分

<title>标题</title>
<body>
<p>文本内容</p>
<div id="testDiv">文本内容</div>
</body>
<script>
window.onload = function() {
    var testDiv=document.getElementById('testDiv');
    testDiv.innerHTML = "<p>I love <em>JS</em>!</p>";
}
//执行结果显示：innerHTML只会重写所属元素的内容，即<div>元素中的内容。
</script>

31.哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

1. setTimeout的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

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

jsonp的原理:就是利用浏览器可以动态地插入一段js并执行的特点完成的。(动态创建script标签，回调函数)
原因：
（1.）它们两者的调用方式很像，目的一样，都是请求url，然后把服务器返回的数据进行处理，因此jQuery等框架都把JSONP作为Ajax的一种形式。
（2.）ajax的核心是:通过XmlHttpRequest获取非本页内容，而jsonp的核心:动态添加

（3.）Ajax通过服务端代理也可以跨域，JSONP也可获取同源数据。jsonp只支持get请求，ajax支持get和post请求。
（4.）jsonp是一种方式或者说非强制性的协议;ajax也不一定非要用json格式来传递数据。

33.js中window.location属性及描述。

属性	描述
hash	从井号 (#) 开始的 URL（锚）
host	主机名和当前 URL 的端口号
hostname	当前 URL 的主机名
href	完整的 URL
pathname	当前 URL 的路径部分
port 当前	URL 的端口号
protocol	当前 URL 的协议
search	从问号 (?) 开始的 URL（查询部分）
reload	刷新当前页面

34.阻止冒泡函数

	function stopPropagation(e) {  
    e = e || window.event;  
    if(e.stopPropagation) { //W3C阻止冒泡方法  
        e.stopPropagation();  
    } else {  
        e.cancelBubble = true; //IE阻止冒泡方法  
    }  
}  
document.getElementById('need_hide').onclick = function(e) {  
    stopPropagation(e);  
}

35.javascript 中的垃圾回收机制？

Javascript具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再 被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么 函数a执行后不会被回收的原因。

36.如何在HTML中添加事件，几种方法？

 1、标签之中直接添加 onclick="fun()";
 2、JS添加 Eobj.onclick = method;
 3、现代事件 IE9以前： obj.attachEvent('onclick', method)；
         标准浏览器: obj.addEventListener('click', method, false);

37.BOM对象有哪些，列举window对象？

1、window对象 ，是JS的最顶层对象，其他的BOM对象都是window对象的属性；
2、document对象，文档对象；
3、location对象，浏览器当前URL信息；
4、navigator对象，浏览器本身信息；
5、screen对象，客户端屏幕信息；
6、history对象，浏览器访问历史信息；

38.简述readyonly与disabled的区别

两种属性的写法如下：

<input type="text"  value="xxx" disabled>
<input type="text" value="xxx" readonly>

两种写法都会使显示出来的文本框不能输入文字，
但disabled会使文本框变灰，而且通过通过表单提交时，获取不到文本框中的value值（如果有的话），
而readonly只是使文本框不能输入，外观没有变化，而且表单提交时不影响获取value值。

39.HTTP协议中，GET和POST有什么区别？分别适用什么场景？

1.get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程
2.get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB
3.get安全性非常低，post安全性较高。但是执行效率却比Post方法好
适用场景：
1.post一般用于表单提交
2.get一般用于简单的数据查询，严格要求不是那么高的场景

40.HTTP状态消息200 302 304 403 404 500分别表示什么?

200：请求已成功，请求所希望的响应头或数据体将随此响应返回。
302：请求的资源临时从不同的 URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的
304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个状态码。304响应禁止包含消息体，因此始终以消息头后的第一个空行结尾。
403：服务器已经理解请求，但是拒绝执行它。
404：请求失败，请求所希望得到的资源未被在服务器上发现。
500：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器端的源代码出现错误时出现。

41.js中如何实现一个map

描述:

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

语法:

array.map(callback[, thisArg])

参数：

callback
原数组中的元素经过该方法后返回一个新的元素。
currentValue
callback 的第一个参数，数组中当前被传递的元素。
index
callback 的第二个参数，数组中当前被传递的元素的索引。
array
callback 的第三个参数，调用 map 方法的数组。
thisArg
执行 callback 函数时 this 指向的对象。
实现：
Array.prototype.map2=function(callback){
    for (var i = 0; i < this.length; i++) {
        this[i]=callback(this[i]);
    }
};

42.js可否实现面向对象编程，如果可以如何实现js对象的继承

1、原型链
2、创建对象的几种方式
3、实现继承的几种方式

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

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

44.在JS是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的
是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。
可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

这里把符合以下条件的对象称为伪数组：
1，具有length属性
2，按索引方式存储数据
3，不具有数组的push,pop等方法