如何在使用 ECMAScript 2020 中处理伪数组的对象

阅读时长 5 分钟读完

在 ECMAScript 2020 中,新增了许多有用的特性,其中包括了一些处理伪数组的方法。如果你经常与数组和类数组对象打交道,这些方法肯定对你很有帮助。在本文中,我们将学习如何使用这些新的特性来处理伪数组对象,以及如何获得最佳的性能。

什么是伪数组

伪数组是指类似数组的对象,它们具有数值的键和 length 属性,但它们不是真正的 JavaScript 数组。类似数组的对象通常是由 DOM 方法返回的,比如 document.querySelectorAll()document.getElementsByClassName(),也包括一些内置 API 的返回值,如 arguments 对象和 NodeList 对象。

由于伪数组对象不是真正的数组,因此它们没有原生的数组方法,如 push()pop()slice() 等。这就使得在处理它们时,需要使用特殊的技巧和方法。

从伪数组对象中获取数组

在 ECMAScript 5 中,我们可以使用 Array.prototype.slice.call() 方法将伪数组对象转换为真正的数组。这个方法的基本想法是将一个对象的元素作为参数传递给 Array.prototype.slice() 方法,然后获取新数组的副本。下面是一个示例:

在 ECMAScript 6 中我们可以使用扩展运算符来替代这种方式,如下所示:

这比前一个方法更加简单和优雅,并且通常也更快。

使用 ECMAScript2020 处理伪数组

在 ECMAScript 2020 中,新的方法被添加到了数组原型中,以便处理类数组对象。这些方法包括 Array.from()Array.of()Array.prototype.flatMap()Array.prototype.reduce()Array.prototype.filter() 等。

Array.from()

Array.from() 方法可以将伪数组对象转换为真正的数组。这个方法的第一个参数是需要转换的伪数组对象,而第二个可选参数是一个映射函数,用来将伪数组中的每个元素映射到输出数组中的新元素。

这将返回一个包含所有 .elements 元素值的真正数组。

Array.of()

Array.of() 方法创建一个新的数组,其中包含了传入的所有参数的值。这个方法非常有用,因为它能够创建并初始化数组,而不用考虑参数的数量或类型。

这将返回包含数字 1 到 5 的真正数组。

Array.prototype.flatMap()

Array.prototype.flatMap() 方法创建一个新的数组,其中包含了映射函数运行后的结果。它与 Array.prototype.map() 方法类似,但是,flatMap() 方法会将映射函数返回的数组扁平化为单个数组。

这将返回一个包含原始数组中每个元素及其两倍的真正数组。

Array.prototype.reduce()

Array.prototype.reduce() 方法对数组中的所有元素执行一个归约函数,并返回最终的结果。归约函数接收一个初始值和一个累加器,将它们相加来得到新的值,在接下来的执行中它们会变成归约函数的下一对值。

这将返回所有元素总和的真正数组。

Array.prototype.filter()

Array.prototype.filter() 方法创建一个新的数组,其中包含所有通过布尔测试的元素。测试函数接收数组中的每个元素,如果测试为 true,则该元素包含在新数组中,否则就从新数组中忽略掉。

这将返回一个包含所有偶数的真正数组。

结论

在 ECMAScript 2020 中,新增加的方法和特性可以大大简化处理伪数组的编程,与之前的方法相比,使用新方法通常更加优雅,直观。我们希望本文可以帮助你更好地理解并使用这些功能。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66f28630a44b36ee576638f2

纠错
反馈