专栏首页FundebugArray构造的数组使用map为何失效
原创

Array构造的数组使用map为何失效

译者按: Array函数构造的数组没有初始化索引,无法使用map函数。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

示例

假设你需要生成一个从0到99的数组。你要怎么做呢?下面是一种解法:

const arr = [];for (let i = 0; i < 100; i++) { arr[i] = i;}

如果你和我一样,看到这种使用传统的for循环的方式会有点不大习惯了。事实上,我已经好多年不使用for循环写代码了。毕竟,各种高阶函数,像forEach, map, filter, reduce足以让我写出各种漂亮的代码。

也许你还没有沉醉于函数式编程的美妙,那么你会认为上面的解法足矣。不过,如果你用过高阶函数编程,你也许就会想:一定还有更加优雅的实现方法。

我的第一直觉就是:首选创建一个长度为100的空数组,然后由map用index去初始化每一个元素。在JavaScript中,你可以用Array构造函数来创建数组:

const arr = Array(100);

接下来你只需要用map就可以解决问题了:

const arr = Array(100).map((_, i) => i);console.log(arr[0] === undefined); // true

可是,为什么第一个元素不是0而是undefined?

解释

为了理解为何没有生效,我需要首先讲清楚一个非常重要的技术点。在内部,JavaScript数组实际上是对象,对象里面的属性名是数字,对应数组的下标。举个例子:

['a', 'b', 'c']

它实际上等价于:

{ 0: 'a', 1: 'b', 2: 'c', length: 3}

当你去访问数组的第0个元素的时候,实际上访问的是对象中属性名为0的元素。接下来我们会解释为何刚刚的代码没有效果。

当你使用Array构造函数来新建一个数组,那么它会创建一个新的数组对象,并且将长度length设定为指定的值。但是,对象里面没有数组索引:

{ //no index keys! length: 100}

当你去访问数组的第0个元素的时候,返回值为undefined。但并不是指第0个元素得值为undefined,而是当数组下标不存在的时候,默认的返回值。

并且如果数组下标不存在的话,其实map函数并没有真正的对每一个元素执行操作。因为只有当下标存在的时候,map的回调函数才会执行。

解法

因此,我们只需要在数组对象中构造出数组的下标就可以了。最好的方法就是用展开运算符:

const arr = [...Array(100)].map((_, i) => i);console.log(arr[0]);// 0

使用展开运算符后的数组对象:

{ 0: undefined, 1: undefined, 2: undefined, ... 99: undefined, length: 100}

就可以顺利使用map函数了。

关于Fundebug

Fundebug专注于JavaScript、微信小程序、小游戏BUG监控,自从2016年双十一正式上线,Fundebug已经服务了一年半时间,累计处理了5亿+错误事件,得到了众多知名用户的认可。Fundebug支持主流前端框架的bug监控,欢迎各位老铁体验!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Array构造的数组使用map为何失效?

    如果你和我一样,看到这种使用传统的 for 循环的方式会有点不大习惯了。事实上,我已经好多年不使用 for 循环写代码了。毕竟,各种高阶函数,像 forEach...

    Fundebug
  • JavaScript中Map和ForEach的区别

    Fundebug
  • 如何实现JavaScript的Map和Filter函数?

    Fundebug
  • 改进型MapReduce

    本文通过对MapReduce的分析,列出MapReduce存在的问题,然后提出一种解决这些问题的改进型MapReduce,这种改进型的MapReduce暂且取名...

    一见
  • 程序员有流派吗?

    非著名程序员
  • 【揭秘】深入 Facebook 人工智能大脑

    【新智元导读】为了对抗谷歌机器学习开源软件TensorFlow,Facebook去年宣布开源硬件Big Sur。日前,Facebook 首次对媒体开放 Prin...

    新智元
  • MySQL中的锁机制

    锁是计算机用以协调多个进程间并发访问同一共享资源的一种机制。MySQL中为了保证数据访问的一致性与有效性等功能,实现了锁机制,MySQL中的锁是在服务器层或者存...

    烂猪皮
  • MySQL优化的一些感悟

    首先对于SQL优化的概念大家都会有一种潜意识的错觉,那就是创建索引,对于业务同学来说,就会产生一种不好的使用习惯,比如有一张数据表test,有5个字段,业务...

    jeanron100
  • 背靠蚂蚁趣店市值破百亿,今日头条、美图们为何可以独立发展?

    一家公司只成立了三年多便成功登陆纽交所,打破聚美优品从成立到IPO的时间记录,上市后两个交易日股价上涨均超过20%,市值一度突破115亿美金,成为仅次于BAT、...

    罗超频道
  • 数据集难找?GAN生成你想要的数据!!!

    GAN创始人 Ian Goodfellow 在酒吧微醉后与同事讨论学术问题,当时灵光乍现提出了GAN初步的想法,不过当时并没有得到同事的认可,在从酒吧回去后发现...

    孤独的明月

扫码关注云+社区

领取腾讯云代金券