ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

无法使用map遍历Array创建的数组的原因

2022-08-05 11:36:31  阅读:141  来源: 互联网

标签:map 遍历 undefined 对象 索引 数组 Array


在 JavaScript 内部,数组就是用数字作为键名的对象。

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

在本质上就等于

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

当访问数组中索引 0 的元素时,实际上访问的是对象中键名为 0 的属性的键值。这很重要,因为当你把数组作为对象看待,再结合高阶函数的运行原理,上面的问题就很好理解了。

当你使用 Array 构造函数创建了一个新的数组时,实际上是创建了一个新的数组对象,它的 length 属性等于你传给 Array 的参数,除此以外,这个对象是一个空对象。对象中并没有数组对应的索引键(index key)。

{
  //no index keys!
  length: 100
}

当你试图访问索引值为 0 的数组成员时,访问结果是 undefined,但这不是因为在索引键为 0 的位置存储的值是 undefined,而是因为 JavaScript 规定,当访问一个对象中并不存在的键名对应的键值时,会返回 undefined

当 mapreducefilterforEach 等高阶函数沿着 0 到数组长度的索引键遍历数组对象时,就会发生上面的现象,但是只有当对象的键值存在时,回应的回调函数才会执行。所以,当我们使用 map 对数组遍历时没有执行回调函数–就是因为索引键并不存在。

解决方法

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

将数组展开到一个空数组后会生成一个新数组,它每个成员都是 undefined

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

这是因为,扩展运算符比 map 方法更简单。它对数组(或者任何可遍历对象)进行从 0 到数组长度的简单循环,在当前的索引处,根据展开后的数组返回值,生成一个新的索引键。而 JavaScript 对展开数组的每一项都会返回 undefined (记住,这一些都是默认行为,因为访问的值对应的索引键并不存在),我们就得到了一个新的数组,数组成员都具备了索引键,因此是可以使用 map 进行遍历的了(同样也可以使用 reducefilterforEach 进行遍历)

标签:map,遍历,undefined,对象,索引,数组,Array
来源: https://www.cnblogs.com/yanda/p/16550732.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有