js易错点总结及 常见面试的坑

　　最近在研究Javascript发现了其中一些比较灵异的事情。有点让人感到无语比如：

var arr = [],
    arr2 = {};

console.log(typeof(arr) === typeof(arr2)); // true

　　上方利用typeof比较数组和对象，因为typeof获取NULL、数组、对象的类型都为object，所以console为true。

var arr = [],
    arr2 = [];

console.log(arr === arr2); // false

上方两个相同的数组比较，因为两个单独的数组永不相等，所以console为false。

var arr = [];

console.log(arr instanceof Object); // true
console.log(arr instanceof Array); // true

上方利用instanceof判断一个变量是否属于某个对象的实例，因为在JavaScript中数组也是对象的一种，所以两个console都为true。

闭包问题

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div

for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 总是5
    };
}

上方是一个很常见闭包问题，点击任何div弹出的值总是5，因为当你触发点击事件的时候i的值早已是5，可以用下面方式解决：

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div

for(var i = 0; i < elem.length; i++) {
    (function (w) {
        elem[w].onclick = function () {
            alert(w); // 依次为0,1,2,3,4
        };
    })(i);
}

在绑定点击事件外部封装一个立即执行函数，并将i传入该函数即可。

文／劳卜（简书作者）
原文链接：http://www.jianshu.com/p/1c77853d4f01
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

["1","2", "3"].map(parseInt) 答案是多少？

parseInt() 函数能解析一个字符串，并返回一个整数，需要两个参数 (val, radix)，

其中 radix 表示要解析的数字的基数。【该值介于 2 ~ 36 之间，并且字符串中的数字不能大于radix才能正确返回数字结果值】;

但此处 map 传了 3 个 (element, index, array),我们重写parseInt函数测试一下是否符合上面的规则。

function parseInt(str, radix) {

   return str+'-'+radix;

};

var a=["1", "2","3"];

a.map(parseInt);  // ["1-0", "2-1","3-2"] 不能大于radix

因为二进制里面，没有数字3,导致出现超范围的radix赋值和不合法的进制解析，才会返回NaN

所以["1", "2", "3"].map(parseInt) 答案也就是：[1,NaN, NaN]

　　alert(typeof( NaN == NaN));//结果为假。

　　var undefined;

　　undefined == null; // true

　　[] == false; // true

　　[] == ![];   // true

      0 == '';     // true

　　2 == true;   // false

     1 == true;   // true

• undefined与null相等，但不恒等（===）
•  null的类型是对象，undified的类型是undified.
• null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN
• null的使用：    （1） 作为函数的参数，表示该函数的参数不是对象。    （2） 作为对象原型链的终点。

• （1）变量被声明了，但没有赋值时，就等于undefined。 （2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。   

   （3）对象没有赋值的属性，该属性的值为undefined。      （4）函数没有返回值时，默认返回undefined。

　　把null转换为数字，结果为0。而把undefined转换为数字结果为NaN。

     

    JS 精度不能精确到 0.1 所以  。。。。同时存在于值和差值中

　　NaN：当某类型转化为数字失败时，返回NaN，表示不是一个数字；NaN不等于任何值，包括它自己，判断时需要使用isNaN(arg)函数

　　reverse();这个函数是用来进行倒序，这个没有什么可说的,所谓倒序就是大的在前面，小的在后面。

　　sort();这个函数是用来对数组进行正序排列的

     <script>标签的defer="defer"属性  defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

     <script>标签的async="async"属性async的定义和用法(是HTML5的属性)async 属性规定一旦脚本可用，则会异步执行。

　　

　　

　　

console.log(1+ "2"+"2");//1+"2"先转化为“12”然后进行字符串的相加结果是“122”
console.log(1+ +"2"+"2");//由于一元运算符“+”的优先级更高，因此+“2”转换为数值2，然后1+2=3，最后数值和字符串相加，转换为字符串的拼接，结果“32”
console.log(1+ -"1"+"2");//先执行取反，变成1-1=0，然后0+“2”，结果“02”
console.log(+"1"+  "1"+"2");//先执行数值转换，相当于执行1+“1”+“2”，结果“112”
console.log("A"- "B"+"2");//先执行"A"- "B"返回NaN,再执行NaN+"2"=>"NaN2"
console.log("A"- "B"+2);//先执行"A"- "B"返回NaN+2,NaN执行加减法均返回NaN

　

　　【以下这段来自于《javascript权威指南》】总体说来，加法操作符的行为变现为：

　　（1）如果其中一个操作数是对象，对象会遵循对象到原始值的转换规则转换为原始类值：日期对象通过toString()方法执行转换，其他对象则通过valueOf()方法执行转换（如果valueOf()方法返回一个原始值的话）。由于多数对象都不具备可用的valueOf()方法，因此他们会通过toString()方法来执行转换。

　　（2）在进行了对象到原始值的转换后，如果其中一个操作数是字符串的话，另一个操作数也会转换为字符串，然后进行字符串的连接。

　　（3）否则，两个操作数都将转换为数字（或者NaN），然后进行加法操作。

 　　两个比较特殊的

1+{}//{}=>"[object Object]",执行数值和字符串的相加，结果"1[object Object]"
true+true//2，布尔值转换为数字后讲加
1+undefined//数值转换undefined=>NaN,结果NaN
1+null//数值转换null=>0,结果1

　　但是大家要注意undefined、null这两个基本类型是没有任何属性和方法的。所以他们不会调用valueOf()和toString()

"1"+undefined//=>"1undefined"相当于执行字符串拼接
"1"+null//=>"1null"相当于执行字符串拼接

　

/* 例2.2 */
setTimeout(function() {
    console.log('taskA, asynchronous');
}, 0);
console.log('taskB, synchronize');
//while(true);

-------ouput-------
taskB, synchronize
taskA, asynchronous

     我们可以看到，定时器延时的时间明明为0，但taskA还是晚于taskB执行。这是为什么呢？由于定时器是异步的， 异步任务会在当前脚本的所有同步任务执行完才会执行。如果同步代码中含有死循环，即将上例的注释去掉，那么这个异步任务就不会执行，因为同步任务阻塞了进程。

setTimeout 就是常见的异步回调，另外常见的异步回调即ajax请求

function request(url, param, successFun, errorFun) {
    $.ajax({
        type: 'GET',
        url: url,
        param: param,
        async: true,    //默认为true,即异步请求；false为同步请求
        success: successFun,
        error: errorFun
    });
}
request('test.html', '', function(data) {
    //请求成功后的回调函数，通常是对请求回来的数据进行处理
    console.log('请求成功啦, 这是返回的数据:', data);
},function(error) {
    console.log('sorry, 请求失败了, 这是失败信息:', error);
});

　-->函数重载

　　

① js中没有重载的概念，当遇到多个重名的方法后，最后一个方法定义会覆盖前面的所有方法定义

② 利用arguments实现js函数重载：通过arguments对象可以判断用户在调用函数时，是否传递了参数，以及传递了几个参数，相当于C#中的params，它是用起来像数组的一个对象，但arguments对象本身并不是数组对象。

③ 例子

function add(){
    var sum = 0;
    for(var i =0; i < arguments.length; i++){
        sum += arguments[i];
    }
}