Js遍历数组时注意 Empty Item 的影响

更新日期: 2019-07-27阅读: 3.4k标签: 数组

这两天碰到个问题:从日志中发现一些来自 iOS 10.3 的报错「Cannot read property 'xxx' of undefined」,定位到代码的报错位置,发现是遍历某数组时产生的报错,该数组的元素应该全都是 Object,但实际上出现了异常的元素。排查该数组的来源,的确其元素并不保证都是 Object,问题很容易就解决了。

但是,为什么这个报错只发生在 iOS 10.3 呢?

继续排查,发现遍历的数组,是通过 new Array(len) 实例化,之后再按索引对元素赋值,也的确会有某些元素未赋值的情况。按以往理解,未赋值的元素不就是undefined?如果元素是undefined,那取属性的操作在所有浏览器不都应该报错?

我查阅了 ECMA 262 的文档:在new Array(len)这种形式的实例化逻辑中,创建 Array 对象后,执行了 set(array, 'length', len, true)就返回了这个 Array 对象。根据 set 的说明,该操作就是设置了 Array 对象的 length 属性(你得想起来「Array 就是 Object 的一种」)。

7.3.3 Set ( O, P, V, Throw )

  1. Assert: Type(O) is Object.
  2. Assert: IsPropertyKey(P) is true.
  3. Assert: Type(Throw) is Boolean.
  4. Let success be ? O.[[Set]](P, V, O).
  5. If success is false and Throw is true, throw a TypeError exception.
  6. Return success.

看看其它形式的实例化,会通过 CreateDataProperty(array, P, item) 来设置数组元素。

7.3.4 CreateDataProperty ( O, P, V )

  1. Assert: Type(O) is Object.
  2. Assert: IsPropertyKey(P) is true.
  3. Let newDesc be the PropertyDescriptor { [[Value]]: V, [[Writable]]: true, [[Enumerable]]: true, [[Configurable]]: true }.
  4. Return ? O.[[DefineOwnProperty]](P, newDesc).

根据以上,大概有个感觉就是,执行 new Array(len) 得到的数组,是只有 length 属性,真的没有元素。从 Object 角度看,也就是没有设置相应的属性(索引为 key, 元素为 value)。

如果元素是undefined,那么这个元素是「存在的」,它的值是undefined,而且是Enumerable可遍历到的。

继续阅读标准,可以看到 Array 的 map 方法有这么一段描述:

22.1.3.18 Array.prototype.map ( callbackfn [ , thisArg ] )
callbackfn is called only for elements of the array which actually exist; it is not called for missing elements of the array.

同样的说明还出现在every, filter, forEach, some 等方法中,也就是说, map, every, forEach 等遍历方法,是不会对不存在的元素执行回调函数

所以,数组的元素是可能「不存在」的(empty),即使是索引 index 在 length 范围内。

// 在 Chrome 中试验:
const arr = new Array(3)

console.log(arr)
// output: [empty × 3]

arr.map((item) => item.prop)
// output: [empty × 3]

arr.forEach((item) => console.log(item.prop))
// nothing

arr.reduce((res) => res += 'ha', '')
// output: ''

那么,开头说的问题,应该是 iOS 10.3 的 webview 没有按照标准实现,在遍历数组遇到 empty item 时依然执行了 callbackFn(猜测,没有找到相关官方说明)。


链接: https://www.fly63.com/article/detial/4956

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

JavaScript 数组方法

数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

JS数组的几个经典api

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!