在 ECMAScript 2020 中,新增了许多有用的特性,其中包括了一些处理伪数组的方法。如果你经常与数组和类数组对象打交道,这些方法肯定对你很有帮助。在本文中,我们将学习如何使用这些新的特性来处理伪数组对象,以及如何获得最佳的性能。
什么是伪数组
伪数组是指类似数组的对象,它们具有数值的键和 length
属性,但它们不是真正的 JavaScript 数组。类似数组的对象通常是由 DOM 方法返回的,比如 document.querySelectorAll()
和 document.getElementsByClassName()
,也包括一些内置 API 的返回值,如 arguments
对象和 NodeList
对象。
由于伪数组对象不是真正的数组,因此它们没有原生的数组方法,如 push()
、pop()
、slice()
等。这就使得在处理它们时,需要使用特殊的技巧和方法。
从伪数组对象中获取数组
在 ECMAScript 5 中,我们可以使用 Array.prototype.slice.call()
方法将伪数组对象转换为真正的数组。这个方法的基本想法是将一个对象的元素作为参数传递给 Array.prototype.slice()
方法,然后获取新数组的副本。下面是一个示例:
function toArray(pseudoArray) { return Array.prototype.slice.call(pseudoArray); } var a = toArray(document.querySelectorAll('.elements'));
在 ECMAScript 6 中我们可以使用扩展运算符来替代这种方式,如下所示:
const a = [...document.querySelectorAll('.elements')];
这比前一个方法更加简单和优雅,并且通常也更快。
使用 ECMAScript2020 处理伪数组
在 ECMAScript 2020 中,新的方法被添加到了数组原型中,以便处理类数组对象。这些方法包括 Array.from()
、Array.of()
、Array.prototype.flatMap()
、Array.prototype.reduce()
和 Array.prototype.filter()
等。
Array.from()
Array.from()
方法可以将伪数组对象转换为真正的数组。这个方法的第一个参数是需要转换的伪数组对象,而第二个可选参数是一个映射函数,用来将伪数组中的每个元素映射到输出数组中的新元素。
const a = Array.from(document.querySelectorAll('.elements'), el => el.value);
这将返回一个包含所有 .elements
元素值的真正数组。
Array.of()
Array.of()
方法创建一个新的数组,其中包含了传入的所有参数的值。这个方法非常有用,因为它能够创建并初始化数组,而不用考虑参数的数量或类型。
const a = Array.of(1, 2, 3, 4, 5);
这将返回包含数字 1 到 5 的真正数组。
Array.prototype.flatMap()
Array.prototype.flatMap()
方法创建一个新的数组,其中包含了映射函数运行后的结果。它与 Array.prototype.map()
方法类似,但是,flatMap()
方法会将映射函数返回的数组扁平化为单个数组。
const a = [1, 2, 3, 4, 5]; const b = a.flatMap(value => [value, value * 2]);
这将返回一个包含原始数组中每个元素及其两倍的真正数组。
Array.prototype.reduce()
Array.prototype.reduce()
方法对数组中的所有元素执行一个归约函数,并返回最终的结果。归约函数接收一个初始值和一个累加器,将它们相加来得到新的值,在接下来的执行中它们会变成归约函数的下一对值。
const a = [1, 2, 3, 4, 5]; const sum = a.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
这将返回所有元素总和的真正数组。
Array.prototype.filter()
Array.prototype.filter()
方法创建一个新的数组,其中包含所有通过布尔测试的元素。测试函数接收数组中的每个元素,如果测试为 true
,则该元素包含在新数组中,否则就从新数组中忽略掉。
const a = [1, 2, 3, 4, 5]; const even = a.filter(value => value % 2 === 0);
这将返回一个包含所有偶数的真正数组。
结论
在 ECMAScript 2020 中,新增加的方法和特性可以大大简化处理伪数组的编程,与之前的方法相比,使用新方法通常更加优雅,直观。我们希望本文可以帮助你更好地理解并使用这些功能。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66f28630a44b36ee576638f2