事情是这样的
今天我想写一个能快速生成一个自然数数组的函数，就是[0,1,2,3]这样的，然后我写了下面的代码:
new Array(10).map((item, index) => {
return index
})
我本以为会得到一个0-9的数组，结果确发现map方法并没有执行。原来是稀疏数组在搞鬼。
什么是稀疏数组
首先看下面这个问题:
a = [undefined,undefined];
b = new Array(2);
a，b的元素个数是不是一样呢，从length上来看的一样的，都是2，就是说都有两个undefined,但是，对a和b都调用map方法却发现a的执行了，而b的没有执行。问题就在于b数组并没有两个undefined元素，而是只有两个位置(其实是只有一个长度属性length)，这两个位置上没有值，也不是undefined。
[undefined,1,undefined,] 和 [,1,,]的区别在哪里
有一个直观的方法可以得到上面的结论,就是借助hasOwnProperty方法，有人可能会奇怪，这个不是用来判断对象是否有一个自己的属性的吗?其实，在js中，没有方法，只有函数的方法形式的调用。常见的一个用法是，将一个类数组对象变成一个数组:
函数调用的四种方式
你知道回字的四种写法吗？不知道没关系，但是你要知道函数的四种调用方式:
- 普通调用 b()
- 方法调用 a.b()
- call,apply调用 [].slice.call(arguments)
- new 调用 new A()
更多详情可以参考这篇文章函数的四种调用方式
var divs = document.querySelectorAll('div');
Array.isArray(divs)//false
divs = [].slice.call(divs)
Array.isArray(divs)//true
这里就是对一个类数组对象调用数组的方法，使它变成一个数组。下面，我们来看看如何借助hasOwnProperty让稀疏数组现出原形。首先，定义两个数组。
var a = [,1,,];
var b = [undefined,1,undefined];
借助索引运算试试
上面，我们定义了两个数组，通过索引运算得到的值都是相同的:
for(var i = 0; i < a.length; i++){
console.log(a[i] === b[i])
}
//打印出3次true
所以，索引运算是判别不出真假孙悟空的,接下来我们请出hasOwnProperty同学:
借助hasOwnProperty
var hasOwnProp = Object.prototype.hasOwnProperty;
hasOwnProp.call(a, '0'); //false
hasOwnProp.call(b, '0'); //true
hasOwnProp.call(a, '1'); //true
hasOwnProp.call(b, '1'); //true
所以神奇吧，虽然a[0]===b[0];都是undefined,但是，稀疏数组在['0']的位置是没有值的，而b数组确实有值的，只不过是undefined罢了；而稀疏数组在[1]的位置上则有值，那这么说，稀疏数组真的是名副其实了。其实除了在1的位置有值之外，稀疏数组还有一个自己的属性，就是length了，这么重要的属性怎么能丢呢
hasOwnProp.call(a, 'length'); //true
总结
现在。我们差不多可以解释最开始的问题了，map函数的内心os可以是这样的：
> 没有值你让我迭代个毛线。。。
总体上来说，稀疏数组还是人畜无害的,只是在调用数组自己的迭代方法时要注意一下；如forEach,map,filter等，函数会跳过那些稀疏的位置，最后放一个快速生成自然数的链接，如何简单快速生成一个数组，数组的元素是前N个自然数
贴上vue官网生成20个元素的非稀疏数组的代码
Array.apply(null, { length: 20 }) //es6 Array.from({length:20})
//变体 Array.apply(null,new Array(5))