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 条评论
登录 后参与评论

相关文章

来自专栏Java学习网

Java 8的函数式编程学习

Java 8的函数式编程学习 函数式编程语言是什么? 函数式编程语言的核心是它以处理数据的方式处理代码。这意味着函数应该是第一等级(First-class)的...

27870
来自专栏java一日一条

函数式编程的优与劣

如今函数式编程越来越流行。越来越多的编程语言支持函数式编程风格,人们学习如何使用它们。函数式编程已不像以前那么小众——现在Ruby,Java和JavaScrip...

7920
来自专栏Fundebug

JavaScript正则表达式进阶指南

例如,正则表达式/F.*g/会匹配“以F开头,以g结尾的字符串”,因此可以匹配"Hello, Fundebug!"中的Fundebug,exec方法会返回一个数...

20260
来自专栏小樱的经验随笔

【批处理学习笔记】第二十一课:数值计算

    批处理里面的数值计算功能较弱,只能够进行整型计算,忽略浮点数的小数部分;同时数值计算的范围也受限于系统位数,对于目前较为常见的32位机来说,数值计算能处...

29340
来自专栏C/C++基础

C++智能指针

C++中,动态内存的管理是通过一对运算符来完成的,new用于申请内存空间,调用对象构造函数初始化对象并返回指向该对象的指针。delete接收一个动态对象的指针,...

31610
来自专栏猿人谷

[你必须知道的.NET] 第四回:后来居上:class和struct

本文将介绍以下内容: • 面向对象基本概念 • 类和结构体简介 • 引用类型和值类型区别 1. 引言 提起class和struct,我们首先的感觉是语法几乎相...

194100
来自专栏数据科学与人工智能

【Python环境】Python函数式编程指南(1):概述

1. 函数式编程概述 1.1. 什么是函数式编程? 函数式编程使用一系列的函数解决问题。函数仅接受输入并产生输出,不包含任何能影响产生输出的内部状态。任何情况下...

23460
来自专栏轮子工厂

4. C语言 -- 一个由数据类型和取值范围引发的 BUG

之前看到有人留言催更,老夫的心里的竟然有一丝惊喜和兴奋。上周说要改版嘛( 。_ 。) ✎然后我就紧赶慢赶出了这篇稿子,但是由于一些原因,在今天才与大家间面。

13120
来自专栏Albert陈凯

Scala Essentials: 字符串内插值

字符串插值 Scala是一门高度可扩展性的程序设计语言,保持微小的内核,但具有无穷大的扩展能力。例如,「字符串内插」功能,Scala语言并不是原生地支持该特性...

29570
来自专栏北京马哥教育

Python新手常见错误之默认值设定错误

文章来源 |伯乐在线 云豆贴心提醒,本文阅读时间5分钟,文末有秘密! Python初学者通常会犯一些错误,甚至会因此损失很大的自信心。 不过你不必过多的担...

36160

扫码关注云+社区

领取腾讯云代金券