今天我想写一个能快速生成一个自然数数组的函数,就是
这样的,然后我写了下面的代码:
- [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 元素,而是只有两个位置,这两个位置上没有值,也不是 undefined。
有一个直观的方法可以得到上面的结论, 就是借助
方法,有人可能会奇怪,这个不是用来判断对象是否有一个自己的属性的吗? 其实,在 js 中,没有方法,只有函数的方法形式的调用。常见的一个用法是,将一个类数组对象变成一个数组:
- hasOwnProperty
你知道回字的四种写法吗?不知道没关系,但是你要知道函数的四种调用方式:
更多详情可以参考这篇文章函数的四种调用方式
- 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
- 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
所以神奇吧,虽然
; 都是 undefined, 但是,稀疏数组在 ['0'] 的位置是没有值的,而 b 数组确实有值的,只不过是 undefined 罢了;而稀疏数组在 [1] 的位置上则有值,那这么说,稀疏数组真的是名副其实了。其实除了在 1 的位置有值之外,稀疏数组还有一个自己的属性,就是
- a[0]===b[0]
了,这么重要的属性怎么能丢呢
- length
- hasOwnProp.call(a, 'length'); //true
现在。我们差不多可以解释最开始的问题了,map 函数的内心 os 可以是这样的:
- > 没有值你让我迭代个毛线。。。
总体上来说,稀疏数组还是人畜无害的, 只是在调用数组自己的迭代方法时要注意一下;如 forEach,map,filter 等,函数会跳过那些稀疏的位置,最后放一个快速生成自然数的链接,如何简单快速生成一个数组,数组的元素是前 N 个自然数
来源: http://www.cnblogs.com/imgss/p/xishushuzu.html