前端面试题总结——JS（持续更新中）

摘要：在此基础上加入了回调函数，加载完之后会执行中定义的函数，所需要的数据会以参数的形式传递给该函数。通常的做法是，为它们指定回调函数。

Object number function boolean underfind string

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

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

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

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

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

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

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

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

function getStyle(obj, attr, value) {
if(!value) {
if(obj.currentStyle) {
return obj.currentStyle(attr)
}
else {
obj.getComputedStyle(attr, false)
}
}
else {
obj.style[attr]=value
}
}

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

闭包就是能够读取其他函数内部变量的函数。
http://blog.csdn.net/gaoshanw... （问这个问题的不是一个公司）
也可以直接点击此处查看之前更的关于闭包的文章

stoppropagation / preventdefault

obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild

动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作

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

页面加载完成有两种事件：
一.是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）。
二.是onload，指示页面包含图片等文件在内的所有元素都加载完成。

前者会自动转换类型
后者不会

同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义，
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是协议、域名和端口号的组合

var arr = [ 1,5,1,7,5,9];
Math.max(...arr)  // 9 

[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]

// [2, "12", 12, 1, 6, 13]

升序：

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

var examplearr=[8,94,15,88,55,76,21,39];
function sortarr(arr){
    for(i=0;iarr[j+1]){
                var temp=arr[j];
                arr[j]=arr[j+1];
                arr[j+1]=temp;
            }
        }
    }
    return arr;
}
sortarr(examplearr);
console.log(examplearr);

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

1.由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2.闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
（关于闭包，详细了解请看JavaScript之作用域与闭包详解）

JSONP (JSON with Padding)是一个简单高效的跨域方式，HTML中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据，那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据，然后在 pageA中用script标签把pageB加载进来，那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数，pageB加载完之后会执行pageA中定义的函数，所需要的数据会以参数的形式传递给该函数。JSONP易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，JSONP是非常合适的选择。

AJAX是不跨域的，而JSONP是一个是跨域的，还有就是二者接收参数形式不一样！

在函数执行时，把变量的声明提升到了函数顶部，而其值定义依然在原来位置。

以下函数把获取一个key的参数。

  function parseQueryString ( name ){
      name = name.replace(/[[]/,"[");
      var regexS = "[?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
 
      if(results == null) {
          return "";
      } else {
     return results[1];
     }
 }

arguments虽然有一些数组的性质，但其并非真正的数组，只是一个类数组对象。
其并没有数组的很多方法，不能像真正的数组那样调用.jion(),.concat(),.pop()等方法。

在代码中出现表达式-“use strict”; 意味着代码按照严格模式解析，这种模式使得Javascript在更严格的条件下运行。

好处：
1.消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
2.消除代码运行的一些不安全之处，保证代码运行的安全；
3.提高编译器效率，增加运行速度；

坏处：
1.同样的代码，在”严格模式”中，可能会有不一样的运行结果；一些在”正常模式”下可以运行的语句，在”严格模式”下将不能运行。

1.就是一个函数的调用过程。那么就从理解这个调用过程开始吧。
函数a有一个参数，这个参数是个函数b，当函数a执行完以后执行函数b。那么这个过程就叫回调。

2.另外种解释：开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。
通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

let obj = {};
let arr = [];
 
console.log(typeof obj === "object");  //true
console.log(typeof arr === "object");  //true

从上面的输出结果可知，typeof bar === “object” 并不能准确判断 bar 就是一个 Object。可以通过 Object.prototype.toString.call(bar) === “[object Object]” 来避免这种弊端：

let obj = {};
let arr = [];
 
console.log(Object.prototype.toString.call(obj));  //[object Object]
console.log(Object.prototype.toString.call(arr));  //[object Array]

    console.log(1 +  "2" + "2"); //122
    console.log(1 +  +"2" + "2"); //32
    console.log(1 +  -"1" + "2"); //02
    console.log(+"1" +  "1" + "2"); //112
    console.log( "A" - "B" + "2"); //NaN2
    console.log( "A" - "B" + 2); //NaN
    console.log("3" + 2 + 1);//321
    console.log(typeof +"3");  //number
    console.log(typeof (""+3));  //string
    console.log("a" * "sd");   //NaN

或逻辑时：当0在前面时console.log((0|| 2));则输出为后面的数，为2；

     当除0以为的数在前面时console.log((2|| 0));则输出为2；

与逻辑时：当只要有0时console.log(0&&2 );则输出都为0；

     当不存在0时，console.log(1&&2 );则输出都为后面的一个，为2；
                 console.log(2&&1 );则输出为1；

0, "0", +0, -0, false, "",null,undefined,null,NaN

要注意空数组([])和空对象({}):

    console.log([] == false) //true
    console.log({} == false) //false
    console.log(Boolean([])) //true          

 var a={},
        b={key:"b"},
        c={key:"c"};
     
    a[b]=123;
    a[c]=456;
     
    console.log(a[b]);

因为在设置对象属性时，JS将隐式地stringify参数值。
在本例中，由于b和c都是对象，它们都将被转换为“[object object]”。
因此，a[b]和[c]都等价于[[object object]]，并且可以互换使用。
所以，设置或引用[c]与设置或引用a[b]完全相同。`

(function(x) {
    return (function(y) {
        console.log(x);
    })(2)
})(1);

输出1，闭包能够访问外部作用域的变量或参数。

function Foo() {
    getName = function () { alert (1); };
    return this;
}
Foo.getName = function () { alert (2);};
Foo.prototype.getName = function () { alert (3);};
var getName = function () { alert (4);};
function getName() { alert (5);}

Foo.getName(); //2
getName(); //4
Foo().getName(); //1
getName(); //1
new Foo.getName(); //2
new Foo().getName(); //3
new new Foo().getName(); //3

AJAX全称为“Asynchronous JavaScript And XML”（异步JavaScript和XML）是指一种创建交互式网页应用的开发技术、改善用户体验，实现无刷新效果。

优点

a、不需要插件支持
b、优秀的用户体验
c、提高Web程序的性能
d、减轻服务器和带宽的负担

缺点

a、破坏浏览器“前进”、“后退”按钮的正常功能，可以通过简单的插件弥补
b、对搜索引擎的支持不足

a、什么是deferred对象

在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。
简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是”延迟”，所以deferred对象的含义就是”延迟”到未来某个点再执行。
它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统一的编程接口。

b、它的主要功能，可以归结为四点：

(1)、实现链式操作
(2)、指定同一操作的多个回调函数
(3)、为多个操作指定回调函数
(4)、普通操作的回调函数接口

跨域是指不同域名之间相互访问。
JavaScript同源策略的限制，A域名下的JavaScript无法操作B或是C域名下的对象

实现：

(1)、JSONP跨域：利用script脚本允许引用不同域下的js实现的，将回调方法带入服务器，返回结果时回调。
1 通过jsonp跨域

    1.原生实现：






2.document.domain + iframe跨域  
    此方案仅限主域相同，子域不同的跨域应用场景。
    1.父窗口：(http://www.domain.com/a.html)

 



  
        
            2.子窗口：(http://child.domain.com/b.html)
            
      

  
弊端：请看下面渲染加载优化

1、 nginx代理跨域
2、 nodejs中间件代理跨域
3、 后端在头部信息里面设置安全域名

(3)、跨域资源共享（CORS）
跨域资源共享（CORS）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。

CORS与JSONP相比:

a、JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
b、使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
c、JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。
更多跨域的具体内容请看 https://segmentfault.com/a/11...

a.模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。
b.在一些示例中javascript有大量的html字符串，html中有一些像onclick样的javascript，这样javascript中有html，html中有javascript，代码的偶合度很高，不便于修改与维护，使用模板引擎可以解决问题。

JavaScript是一种动态、弱类型、基于原型的语言，通过浏览器可以直接执行。
当浏览器遇到 恢复方法：javascript:alert(document.oncontextmenu="")