关于JavaScript的面试题

什么是JavaScript？
基于对象和事件驱动并具有相对安全性的客户端脚本语言

JavaScript与ECMAScript的关系？
JavaScript是ECMAScript的表现，ECMAScript是JavaScript的规范

变量的命名规则？
1.名字见名知义，遵循驼峰标识。例：userName passWord
2.变量名只能以字母,_,$开头
3.不能使用关键和保留字
4.变量名不要相同(后面的会覆盖前面)

window.onload的作用？
window.onload是等文档和资源都加载完成后调用的事件，保证js获取元素
的时候，已经加载。

js数据类型？
6大类型
基本数据类型：Number String Boolean null undefined
复杂类型：Object，array，function

null和undefined的区别？
Null访问一个不存在对象返回的值，表示空对象
Undefined：访问一个未初始化变量(声明完没有赋值的变量)返回的值，表示空变量

运算符的种类？
算术运算符，赋值运算符，比较运算符，逻辑运算符，三目运算符

“== ” 与“===”的区别？
==,判断相等，判断的过程中会隐式转换为number类型进行比较 “10”==10 true
=== 恒等，严格相等，“10”===10 false

console.log(0.1+0.2 == 0.3)。
False，有些小数在运算的过程中会出现偏差，因此最好不要用小数作为判断条件

NaN会在什么样的情况下出现呢？列举出现这种情况的代码。
NaN：not a number
A.自己定义
B.运算过程中出现错误,原本应该是数字的地方出现一些不能转换为数字的值
10+“s” ，Number(“s”),

列举三种强制类型转换和2种隐式类型转换。
Number(“10”); 强转为Number
parseInt(“10.5”);强转为number，取整
parseFloat(“10.5”);强转为number，保留小数
String(10); 强转为字符串
10.toString(); 强转为字符串
“10”+20 ； 1020 +号遇到字符串变成连接符，20隐式转换为字符串
1+true; 2 true隐式转换为1
10==“10” “10”隐式转换为10

document.write()与innerHTML的区别？
document.write：
操作body的内容
会覆盖之前已经存在的body中的内容，document.write添加的内容会叠加
innerHTML：
操作所有闭合标签的内容
会覆盖之前的所有内容

谈谈对this对象的理解？
this存在任何地方，不同环境代表不同的含义，取决于调用时的环境。
A.事件处理函数中的this—触发事件的对象
document.onclick = function(){ alert（this） }
B.普通函数中的this—window
function sum（）{ alert(this)} sum()

写一个获取非行间样式的函数
function getStyle(elem,attr) {
if(elem.currentStyle){
return elem.currentStyle[attr];
}else{
return getComputedStyle(elem)[attr];
}
}

说说你对作用域链的理解？
作用域链是js中的一种查找机制，从当前作用域查找，当前作用域没有往上一级作用域查找，一直到最外层，如果都找不到则是is not define

请解释变量提升？
浏览器解析js代码至少会经过两个过程，预解析和逐步执行
预解析：找东西var，function，如果找到var，会在内存中存储变量没有值，function则会存储整个函数
逐步执行：逐行执行代码
console.log(a); //undefined 不会报错 找到var存储了变量a，但是没有赋值默认为undefined
var a = 10; //给内存中的a赋值10
console.log(a); //10
//2.function
console.log(sum); //整个函数，找到函数会将整个函数都存储在内存中
sum(); //存储了整个函数，因此可以在前面调用
function sum() {
console.log(10+20);
}

函数声明和函数表达式声明的区别？
函数声明：
sum(); //10
function sum(){ console.log(10)}
表达式声明
s(); //报错 s is not a function
var s = function(){ console.log(20)}
在预解析的过程中，函数会存储整个，因此可以在之前调用，表达式是var声明，只会存储undefined

JavaScript两种变量范围有什么不同？
Js中两种变量，全局变量和局部变量
全局变量：函数外声明，在任何地方都能被修改和访问，会一直存储在内存中
局部变量：函数内声明，只能在函数内部使用，出了函数{}就会被销毁

定时器的分类？他们的区别及用法是什么？
Js中有两种定时器：setInterval：间歇执行，setTimeout：延迟执行
setInterval(函数，时间) 时间单位ms，
语法：setInterval(function(){},1000); 隔一秒执行函数一次
一般用于倒计时，轮播图
setTimeout(函数，时间) 时间单位ms，
语法：setTimeout(function(){},1000); 延迟一秒执行函数一次，只会执行一次
一般用于广告，广告弹出层

js有哪些对象？
原生对象：Object，Function ,Array, String, Date, Boolean, Number,RegExp,Error
内置对象：Global(全局 window,documet),Math
宿主对象：DOM BOM
全局对象：window

把下面的字符串去重，并去除掉特殊字符按照数字在前字母在后的顺序排序字符串
如下：“1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”
var str = “1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs”;
var n = “”;
var s="";
for(var i=0;i<str.length;i++){
if((str[i]>=0&&str[i]<=9)&&n.indexOf(str[i])==-1){
n+=str[i];
}else if((str.charCodeAt(i)>=97&&str.charCodeAt(i)<=122)&&s.indexOf(str[i]) == -1){
s+=str[i];
}
}
console.log(n+s); //12345fdsarg

截取字符串“abcdefg”中的def。
var str = “abcdefg”;
if(str.indexOf(“def”)!=-1){
console.log(str.substr(str.indexOf(“def”),3));
}

有这样一个url：http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e,请写一段js程序提取url中各个get参数(参数名和参数个数不确定)，将其key-value形式返回到一个json结构中，如{a:“1”,b:“2”，c:“”，d：“xxx”，e:undefined}
var str = “http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e”;
var json = {}; //存储
var arr = str.substring(str.indexOf("?")+1).split("&");//获取？后面的，并且按&分割
for(var i = 0;i<arr.length;i++){
var a = arr[i].split("=");
json[a[0]] = a[1]||"";
}
console.log(json);

数组方法pop() push() unshift() shift()？
push:在数组末尾添加一个或多个元素，返回当前数组下标
Pop:在数组末尾删除一个元素，返回被删除的元素
unshift：在数组的头部添加或删除元素，返回当前数组下标
shift：在数组头部删除一个元素，返回被删除的元素

split() join() 的区别？
split是字符串的方法，将字符串按照特定标志分割成数组
例：“u&s”.split(“&”) ------ [“u”,”s”]
Join:是数组方法，将数组按标志组合成字符串 [“u”,”s”].join（“-”）–‘u-s’

编写一个数组去重的方法。
function sort(arr) {
for(var i = 0;i<arr.length;i++){
for(var j = i+1;j<arr.length;j++){
if(arr[i] == arr[j]){
arr.splice(j,1);
j–; //删除一个元素后，后面的元素会依次往前，下标也需要依次往前
}
}
}
return arr
}

冒泡算法排序？
for(var i = 0;i<arr.length;i++){
for(var j = 0;j<arr.length-i;j++){
if(arr[j] > arr[j+1]){ //
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}

DOM怎样添加、移除、移动、复制、创建和查找节点
获取子节点
父节点.children
父节点.childNodes
获取父节点
子节点.parentNode
子节点.offsetParent
创建
document.createElement(‘标签名’)
document.createTextNode(‘文本内容’)
添加
父节点.appendChild(子节点)
父节点.insertBefore(newChild，refChild)
复制
被复制的节点.cloneNode(true)
删除：
节点.remove()
父节点.removeChild（子节点）
替换
父节点.replaceChild（newChild，refChild）

什么是window对象? 什么是document对象?
window是js中最大的对象，表示窗口，包含document
document文档对象，表示HTML

offsetWidth、clientWidth、scrollTop的区别？
offsetWidth：占位宽，包含 内容宽+左右padding+左右border
clientWidth：可视宽，包含 内容宽+左右padding
scrollTop：页面被卷去的高

如何获取url地址中搜索内容？
window.location.search

事件、IE与火狐的事件机制有什么区别？
IE的事件流是冒泡流，而火狐同时支持冒泡流和捕获流。

如何阻止冒泡？
ev.stopPropagation?ev.stopPropagation():ev.cancelBubble = true;

事件绑定和普通事件有什么区别。
标签.事件：如果给同一个元素添加同一个事件，后面的会覆盖前面
事件绑定：可以给同一个元素添加同一个事件，不会被覆盖

如何用原生js给元素绑定两个click事件？
oDiv.addEventListener(‘click’,fun1);
oDiv.addEventListener(‘click’,fun2);

解释一下事件流？
事件捕获阶段：当事件发生的时候，将事件从window依次往子元素传递
确定目标阶段：确定事件目标
事件冒泡阶段：事件目标开始处理事件，处理完以后会将事件依次传递给父元素，一直到window
事件都是在事件冒泡处理,ie只有冒泡

事件委托是什么。
将所有的操作交给父元素，将事件添加给父元素，父元素接收到这个事件的发生，找到具体触发事件的子元素，让子元素处理事件
oUl.onclick = function (ev) {
var ev = window.event || ev;
var target = ev.target || ev.srcElement;//ev.srcElement:ie获取事件目标
target.style.background = “orange”;
}

给10000个li添加点击事件。
oUl.onclick = function (ev) {
var ev = window.event || ev;
var target = ev.target || ev.srcElement;//ev.srcElement:ie获取事件目标
target.style.background = “orange”;
}

拖拽效果中有几种事件？
按下onmousedown，拖拽onmousemove，弹起onmouseup

什么是回调函数？
某个动作做完以后执行的函数

使用正则表达式验证邮箱。
^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$/

请用js去除字符串空格 var str = “ fdf er re545 6565 2fdfd ”
var reg = /\s/g;
Consloe.log(str.replace(reg,””));

判断字符串是否是这样组成的。第一个字符必须是字母，后面可以是字母、数字、下划线，总长度5-20。
var reg = /¹\w{4,19}$/ig;
If(reg.test(reg)){
console.log(“是”)
}else{
console.log(“否”)
}

cookie的利弊？
优点：极高的扩展性和可用性
1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。
3.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。
4.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。
缺点：
1.Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。
2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
因为这些弊端（主要是cookie的大小和多少都受限制，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用），IE8以后，就出现一个web storage；它仅仅是为了本地缓存数据而存在；但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在。

封装一个获取cookie的函数。
function getCookie(key) {
var json = {};
var cookies = document.cookie.split("; “);//[“userName=web0311”, “passWord=123”]
for(var i = 0;i<cookies.length;i++){
var arr = cookies[i].split(”=");
json[arr[0]] = arr[1];
}
return json[key];
}

new操作符具体干了什么呢?
1.先创建了一个新的空对象
2.然后让这个空对象的__proto__指向函数的原型prototype
3.将对象作为函数的this传进去，如果return 出来东西是对象的话就直接返回 return 的内容，没有的话就返回创建的这个对象

call()和apply()的区别和作用？
都是用来改变this的指向，在传值的过程中会有些区别
call（this的指向，参数1，参数2…）
apply（this的指向,[参数1，参数2…]）

JavaScript对象的几种创建方式？
1.字面量创建
var obj = {
name:“web”,
eat:function(){}
}
缺点：代码冗余，适合单个对象创建
2.实例创建
var obj = new Object();
obj.name = “web”;
obj.eat = function(){}
缺点：代码冗余，适合单个对象创建
3.工厂模式创建
function createObj(name){
var obj = new Object();
obj.name = name;
obj.eat = function(){}
return obj
}
createObj(“web”);
缺点：识别不明确
4.构造函数创建
function Student(name){
//new Object
this.name = name;
this.eat = function(){}
}
new Student(name)
缺点：浪费内存
5.原型创建
原型对象：prototype ，构造函数中，共享的一块区域
原型属性：proto,实例对象中，指向原型对象
function Student(){}
Student.prototype.name = “web”;
Student.prototype.eat = function(){}
new Student();
缺点：不能传参
6.混合创建，构造函数(可变的)+原型(共享，不变的)
function Student(name){
this.name = name;
}
Student.prototype.eat = function(){
}

JavaScript对象的几种继承方式？
//原型链继承
function Student(name,age){
this.name = name;
this.age = age;
}
Student.prototype.study = function () {

​ console.log(“Fd”);
}
function SmallStudent(name,age){
//对象冒充继承
Student.call(this,name,age);
}
//原型链继承：
SmallStudent.prototype = new Student(“web”,18);

JavaScript原型，原型链 ？
js每声明一个function，都有prototype原型，prototype原型是函数的一个默认属性，在函数的创建过程中由js编译器自动添加。
也就是说：当生产一个function对象的时候，就有一个原型prototype。原型中存储对象共享的属性和方法。
原型链：
当你定义一个函数对象的时候，其内部就有这样一个链表关系。声明foo对象，自带了_proto_的属性，而这个属性指向了prototype，从而实现对象的扩展（例如继承等操作）

小贤有一条可爱的狗(Dog),它的叫声很好听(wow),每次看到主人的时候就会乖乖叫一声(yelp),从这段描述可以得到以下对象：
function Dog(){
this.wow = function(){
alert(‘wow’);
}
this.yelp = function(){
this.wow();
}
}
小芒和小贤一样原来也有一条可爱的狗，可是突然有一点疯了(MadDog),一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例形式用代码来实现。(继承，原型，setInterval)
function Dog(){
this.wow = function(){
alert(‘wow’);
}
this.yelp = function(){
this.wow();
}
}
function MadDog(){
Dog.call(this);
var _this = this;
this.yelp = function(){
setInterval(function () {
_this.wow();
},500);
}
}
或者
function MadDog(){
Dog.call(this);
this.yelp = function(){
setInterval(this.wow,500);
}
}

什么是闭包，闭包有什么作用，说说你对闭包的理解。
闭包:就是能够读取其他函数内部变量的函数（函数里面套函数，内部函数访问外部函数变量），
在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
作用：闭包中使用的变量会一直存储在内存中，类似全局变量 ，避免全局污染，可以解决全局变量的问题。
function fun(){
var c = 10;
return function(){
console.log(c++);
}
}
var f = fun(); //f = function(){ console.log(c++); }
f();//10
f();//11

用闭包方式完成下面代码的修改，使得属性user，id外界不可见
User = function(){}
User.prototype = {
id:””,
name:””,
getId:function(){return this.id},
setId:function(){this.id = id},
getName:function(){return this.name},
setName:function(){this.name=name}
}
//直接声明两个变量，这两个变量的作用域只是在这个函数体之中所以外界是不能访问的
var User = function () {
var id = “id”;
var name = “name”;
this.proto = {
getId:function () {
return id;
},
setId:function (_id) {
id = _id;
},
getName:function () {
return name;
},
setName:function (_name) {
name = _name;
}
}
}
var u = new User();
u.setId(“007”);
u.setName(“tom”);
console.log(u.name,u.getName()); //undefined,tom

创建ajax的过程。
function ajax(json) {
json.data = json.data||""; //如果没有请求参数，为空
json.contentType = json.contentType || “application/x-www-form-urlencoded”; //如果没有字符编码，用默认的
//1.创建对象
if(window.XMLHttpRequest){ //正常
var ajax = new XMLHttpRequest();
}else { //兼容ie6
var ajax = new ActiveXObject(“Microsoft.XMLHTTP”);
}

​ //2.建立连接
​ if(json.type.toUpperCase() ==“get”.toUpperCase()){
​ ajax.open(“GET”,json.url+"?"+json.data,true);
​ //3.发送请求
​ ajax.send();
​ }else {
​ ajax.open(“POST”,json.url,true);
​ //3.设置请求头 ajax.setRequestHeader(“Content-type”,json.contentType+";charset=utf-8");
​ //4.发送请求
​ ajax.send(json.data);
​ }
​ //4.监听结果
​ ajax.onreadystatechange = function () {
​ if(ajax.readyState == 4){
​ if(ajax.status == 200){
​ json.success(ajax.response);
​ }
​ }
​ }
}

ajax请求的时候get 和post方式的区别，什么时候用post。
1、GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的
2、GEt传输数据容量小，不安全，post传输数据内容大，更加安全；
当向服务器发送一些数据的时候选择post比较安全

ajax请求时，如何解释json数据。
如果是字符串形式的json：eval("("+ajax.response+")")
如果是本地的json文件：JSON.parse(data)

同步和异步的区别?
异步：客户端与服务器请求数据的过程中，可以做其他的事情
同步：客户端与服务器请求数据的过程中，不能做其他的事情

常见的http状态码？
不需要知道全部，常见的就可以，比如200 404 503
200状态码：表示请求已成功，请求所希望的响应头或数据体将随此响应返回
201状态码：表示请求成功并且服务器创建了新的资源，且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话，应当返回 ‘202 Accepted’
202状态码：服务器已接受请求，但尚未处理
301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求
304自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。
301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求
304自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。
401状态码：请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
403状态码：服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。
404状态码：请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。
500状态码：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。
503状态码：由于临时的服务器维护或者过载，服务器当前无法处理请求。通常，这个是暂时状态，一段时间会恢复

eval的作用是？
eval:计算某个字符串，并且执行其中的JavaScript代码
console.log(eval(“2+3”)); //5
console.log(res); //’[“img/1.jpg”,“img/2.jpg”,“img/3.jpg”,“img/4.jpg”]’
console.log(eval(res)); //(4) [“img/1.jpg”, “img/2.jpg”, “img/3.jpg”, “img/4.jpg”]

js哪些操作会造成内存泄露？
1）意外的全局变量引起的内存泄露
function leak(){
leak=“xxx”;//leak成为一个全局变量，不会被回收
}
2）被遗忘的定时器或者回调
3）闭包引起的内存泄漏

$(document).ready() 方法和window.onload 有什么区别？
window.onload与ready的区别
1.window.onload会覆盖之前的
ready的区别，不会覆盖，会叠加
2.window.onload等文档和资源都加载完成以后调用
ready只要文档加载完成以后就会调用

jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
在默认情况下，通过$.extend()合并操作不是递归的（浅拷贝）;如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。然而，如果将 true 作为该函数的第一个参数，那么会在对象上进行递归的合并（深拷贝）。
浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。
深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

$ ().attr与$().prop()的区别?
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
$("#chk1").prop(“checked”) == false
$("#chk2").prop(“checked”) == true
如果上面使用attr方法，则会出现：
$("#chk1").attr(“checked”) == undefined

怎么解决跨域问题？
通过jsonp解决跨域，即通过script标签的src属性引入一个js文件，通过回调函数将数据返回
KaTeX parse error: Expected 'EOF', got '&' at position 34: …script src=’url&̲callback=showDa….ajax()方法中，只需配置一个dataType:‘jsonp’，就可以发起一个跨域请求
ajax如何实现异步定时5秒刷新？
setInterval(function(){
host = window.location.host
$.post(“http://”+host+"/index.php/Article/cpMes/value/1");
},5000);
页面编码和被请求的资源编码如果不一致如何处理？
比如：http://www.yyy.com/a.html 中嵌入了一个http://www.xxx.com/test.js
a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的 ，那就需要在引入的时候
< script src=“http://www.xxx.com/test.js” charset=“utf-8”>同理，如果你的页面是utf-8的，引入的js是gbk的，那么就需要加上charset=“gbk”.

Ajax的缺点？
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。

jquery中 $ .get()提交和$.post()提交有区别吗？
get一般用来进行查询操作，url地址有长度限制，请求的参数都暴露在url地址当中，如果传递中文参数，需要自己进行编码操作，安全性较低。
post请求方式主要用来提交数据，没有数据长度的限制，提交的数据内容存在于http请求体中，数据不会暴漏在url地址中。

jquery.extend 与 jquery.fn.extend的区别？
\1. jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
2.jquery.fn.extend(object);给jQuery对象添加方法。
$ .extend({
add:function(a,b){return a+b;}
});
//$.add(3,4);
jQuery添加一个为 add的“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了.
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
$.fn.extend({
alertClick:function(){
KaTeX parse error: Expected '}', got 'EOF' at end of input: … alert((this).val());
});
}
});
//页面上为：
< input id=“input1” type=“text”/>
//使用
$("#input1").alertClick();

---

1. a-z ↩︎