专栏首页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以及本文地址: https://blog.fundebug.com/2018/06/26/why-mapping-constructed-array-not-work/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

    Fundebug
  • JavaScript中Map和ForEach的区别

    Fundebug
  • Fundebug是这样备份数据的

    今年 8 月,腾讯云竟然把客户前沿数据的数据弄没了,Fundebug在第一时间进行了一些简单的技术分析:

    Fundebug
  • Tomcat优化

    T omcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 JAVA_OPTS参数。

    陈灬大灬海
  • 干货 |《从Lucene到Elasticsearch全文检索实战》拆解实践

    1、题记 2018年3月初,萌生了一个想法:对Elasticsearch相关的技术书籍做拆解阅读,该想法源自非计算机领域红火已久的【樊登读书会】、得到的每天听本...

    铭毅天下
  • 数据分析-NumPy数组的数学运算

    今天我们学习使用numpy的内置数学运算方法和基本的算术运算符两种方式对数组进行数学运算的学习,内容涉及到线性代数的向量矩阵的基本运算知识(不熟悉的童鞋回头自己...

    亚乐记
  • 从零开始打造一款简单的 apache module 后门

    记得很久以前看文章的时候里面有关于 apache module 后门的运用,时间太久都忘记那篇文章具体在哪里,关于 apache module 后门的印象也已经...

    信安之路
  • 【css基础】如何理解transform的matrix()用法

    实现炫酷的网页动画效果,自然少不了css3中transform的属性,此属性功能丰富且强大,比如实现元素的位移translate(x,y),缩放scale(x,...

    前端达人
  • DBbrain诊断日 | DBA休假,数据库CPU使用率过高怎么办?

    为更好的帮助DBA运维数据库,腾讯云将于每月12日在社群直播开展DBbrain诊断日,腾讯云高级产品经理迪B哥直播解析经典数据库运维难题,结合腾讯云数据库智能...

    腾讯云数据库 TencentDB
  • 盘一盘 Python 系列特别篇 - 装饰器

    斯蒂文是个厨师,有一天开始研究汉堡 (burger) 的做法,第一次他只用鸡肉饼做汉堡。

    用户5753894

扫码关注云+社区

领取腾讯云代金券