从Array.prototype.slice.call()和Array.from()入手，掌握转换类数组对象的技巧

2023-12-04 16:43:50

揭秘Array.prototype.slice.call()的转换魔法

Array.prototype.slice.call()方法能够将类数组对象(arguments, NodeList)、字符串(String)转换为数组。简单来说，它可以将原本不能直接用数组方法操作的对象转换为数组，从而可以使用数组的各种方法对它们进行操作，比如排序、查找、遍历等。

例如：

//将arguments对象转换为数组
const args = Array.prototype.slice.call(arguments);

剖析Array.from()的强大功能

Array.from()方法可以将类数组(arguments,NodeList)、可迭代对象(Set, Map)、字符串(String)转换为数组。与Array.prototype.slice.call()类似，Array.from()也能够将不能直接使用数组方法操作的对象转换为数组，从而实现统一的操作方式。

其用法也非常简洁，只需将要转换的对象作为参数传入即可：

//将NodeList对象转换为数组
const nodes = Array.from(document.querySelectorAll('li'));

场景剖析：巧用转换方法应对不同对象

为了更深入地理解Array.prototype.slice.call()和Array.from()的应用场景，我们来分析一些具体案例：

处理函数参数 ：

当函数的参数是一个类数组对象时，我们可以使用Array.prototype.slice.call()或Array.from()将其转换为数组，便于后续处理。例如，arguments对象是一个类数组对象，它包含了函数被调用时传入的所有参数。我们可以使用Array.prototype.slice.call()或Array.from()将其转换为数组，以便使用数组方法对其进行操作。
处理NodeList对象 ：

NodeList对象是DOM中的一种特殊对象，它包含了元素节点的集合。我们可以使用Array.prototype.slice.call()或Array.from()将其转换为数组，以便使用数组方法对其进行操作。例如，我们可以使用Array.prototype.slice.call()或Array.from()将NodeList对象转换为数组，然后对其进行排序、查找、遍历等操作。
处理可迭代对象 ：

可迭代对象是一种可以在循环中逐个访问其元素的对象，例如Set、Map等。我们可以使用Array.from()将其转换为数组，以便使用数组方法对其进行操作。例如，我们可以使用Array.from()将Set对象转换为数组，然后对其进行排序、查找、遍历等操作。
处理字符串 ：

字符串也可以被视为一种特殊的类数组对象，因为它的每个字符都可以被看作一个元素。我们可以使用Array.prototype.slice.call()或Array.from()将其转换为数组，以便使用数组方法对其进行操作。例如，我们可以使用Array.prototype.slice.call()或Array.from()将字符串转换为数组，然后对其进行排序、查找、遍历等操作。