javascript烧脑题，[null]==0，[undefined]==0真假

Question

以下返回又是什么鬼？希望有大神解释清楚。

[1,null,3].map(x=>x+1)

和

[1,undefined,3].map(x=>x+1)

以及

[1,,3].map(x=>x+1)

各返回什么？

Answer 1

标题讨论的是相等运算符==么？
相等运算符的语法行为多变，其中的算法和+有些不同，无法为后面的返回结果提供参考，在这里便不赘述。
相等运算符的规则复杂，推荐参考资料
http://es6.ruanyifeng.com/#docs/spec
中第二部分--相等运算符，当中详细讲解了==的算法。

下面解释一下输出结果

[1,null,3].map(x=>x+1); \\[2, 1, 4]
[1,undefined,3].map(x=>x+1);\\[2,NaN, 4]
[1,,3].map(x=>x+1);\\[2,,4] 中间的空位是map函数直接跳过此项执行的结果

map(x=>x+1)返回一个将原数组所有元素+1的数组，这里最重要的行为是x+1,要讨论的是+号。+优先考虑字符串连接，当操作数都不是类字符串类型时，进行加法运算。这个过程中涉及类型转换(原始值转换)。

具体过程如下:

a + b
//判断是否需要转化为原始值
if(typeof a== 'object' || typeof b=='object'){//进行原始值转换
   if(a instanceof Date){
     a = a.toString();  
   }else{
     a = a.valueOf?a.valueOf():a.toString?a.toString():a;
   }
   if(b instanceof Date){
     b = b.toString();  
   }else{
   b = b.valueOf?b.valueOf():b.toString?b.toString():b;
   }
}
if(typeof a == 'string' || typeof b == 'string'){
  return String(a)+String(b);//字符串连接
}else{
  return Number(a)+Number(b);//加法运算
}

在题主提供的代码中，执行的是加法运算Number(a)+Number(b);//加法运算
这就涉及到类型转化

Answer 2

例一：

[1,null,3].map(x=>x+1)//[2, 1, 4]

代码等同于：

[1,null,3].map(function(x){
    return x + 1;
});

例二：

[1, undefined, 3].map(x=>x+1)//[2, NaN, 4]

代码等同于：

[1, undefined, 3].map(function(x){
    return x + 1;
});

例三：

[1,, 3].map(x=>x+1)//[2,, 4]

代码等同于：

[1,, 3].map(function(x){
    return x + 1;
});

其中，1 ＋ 1 = 2， 3 + 1 = 4没问题吧？

你可能是对null + 1 = 1不理解，这是因为javascript里面诡异的隐式转化导致的，各种类型隐式转换成number时，有以下规则：

Value       ToNumber(Value)
---------   ---------------
null        0
undefined   NaN
NaN         NaN
1           1
true        1

这下知道为什么null + 1 = 1了吧。

至于最后一个为什么返回的是[2,,4]，这。。。。就是没内容呗。这个我也说不出来更专业的词儿了。^^

Answer 3

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values, including undefined. It is not called for missing elements of the array (that is, indexes that have never been set, which have been deleted or which have never been assigned a value).

数组的map方法对一个数组中的空位置(没有设置过值或值被删除)不会调用提供的callback回调函数

var arr=[1,,3];//第2个位置为空位置
console.log(arr[1]);//undefined;
var result=arr.map(function(x){
     console.log(x);
     return x + 1;
});

console.log(result[0], result[1],result[2]);//2,undefined,4
arr[1]=undefined;//第2个位置为非空位置，有值undefined
result=arr.map(function(x){
     console.log(x);
     return x + 1;
});
console.log(result[0], result[1],result[2]);//2,NaN,4
delete arr[1];//删除后，第2个位置为非空位置
result=arr.map(function(x){
     console.log(x);
     return x + 1;
});
console.log(result[0], result[1],result[2]);//2,undefined,4

arr=new Array(3);//3个位置都是空位置
result=arr.map(function(x){
     console.log(x);
     return x + 1;
});
console.log(result[0], result[1],result[2]);//undefined,undefined,undefined
arr[2]=3;
//第1，2个位置是空位置
result=arr.map(function(x){
     console.log(x);
     return x + 1;
});
console.log(result[0], result[1],result[2]);//undefined,undefined,4

Answer 4

也不是什么烧脑，你对ecma不熟悉而已。

第一部分是关于数字转换的，里面明确规定undefined是转换成NaN，null是+0
https://tc39.github.io/ecma262/#sec-tonumber

第二部分关于数组的初始化，里面明确规定位置空的数组是怎么一回事
https://tc39.github.io/ecma262/#sec-array-initializer