在前端开发中，我们经常需要处理一些数据结构，比如数组、对象、字符串等等。在这些数据结构中，数组是最常见的一种。在 JavaScript 中，数组是一个非常灵活的数据结构，但是有时候我们会遇到一些类似数组的对象，比如 NodeList、arguments 等等，这些对象称为 Array Like 对象。
ES9 引入了一个新的特性，叫做 Iterable，可以让我们更方便地操作类似数组的对象。本文将介绍 Iterable 和 Array Like 对象之间的互操作，帮助读者更好地理解和使用这些特性。
Iterable
Iterable 是一种新的数据类型，表示可以被迭代的对象。在 JavaScript 中，一个对象如果实现了 Iterable 接口，那么它就可以被 for...of 循环遍历。
Iterable 接口只有一个方法，就是 Symbol.iterator 方法。这个方法返回一个迭代器对象，这个迭代器对象必须包含一个 next 方法，这个方法返回一个对象，包含两个属性，value 和 done。
下面是一个简单的示例：
const arr = [1, 2, 3];
const it = arr[Symbol.iterator]();
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: 3, done: false }
console.log(it.next()); // { value: undefined, done: true }在这个示例中，我们首先获取了一个数组的迭代器对象，然后使用 next 方法逐个访问数组元素。当访问完所有元素之后，再调用一次 next 方法，返回的对象的 done 属性为 true。
除了数组，还有很多其他的数据结构也实现了 Iterable 接口，比如 Set、Map、String 等等。这些数据结构可以被 for...of 循环遍历。
Array Like 对象
Array Like 对象是指那些具有 length 属性，但是没有数组的一些方法的对象。比如 NodeList、arguments 等等。这些对象看起来像是数组，但是不能直接使用数组的方法。
下面是一个示例：
function sum() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
console.log(sum(1, 2, 3)); // 6在这个示例中，我们定义了一个函数 sum，它使用了 arguments 对象来计算所有参数的和。虽然 arguments 看起来像是一个数组，但是它并不是一个真正的数组，因为它没有数组的方法。
Iterable 和 Array Like 对象之间的互操作
Iterable 和 Array Like 对象之间可以相互转换。我们可以使用 Array.from 方法将 Iterable 对象转换为数组，也可以使用扩展运算符（...）将 Iterable 对象展开为数组。同样，我们也可以使用 Array.from 方法将 Array Like 对象转换为数组。
下面是一个示例：
// 将 Iterable 对象转换为数组
const arr1 = Array.from(new Set([1, 2, 3]));
const arr2 = [...new Set([1, 2, 3])];
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]
// 将 Array Like 对象转换为数组
function toArray() {
return Array.from(arguments);
}
console.log(toArray(1, 2, 3)); // [1, 2, 3]在这个示例中，我们首先使用 Set 数据结构创建了一个 Iterable 对象，然后使用 Array.from 方法和扩展运算符将它们转换为数组。接着，我们定义了一个函数 toArray，它使用了 arguments 对象，并将其转换为数组。
总结
在本文中，我们介绍了 Iterable 和 Array Like 对象之间的互操作。Iterable 是一种新的数据类型，表示可以被迭代的对象。Array Like 对象是指那些具有 length 属性，但是没有数组的一些方法的对象。我们可以使用 Array.from 方法将 Iterable 对象转换为数组，也可以使用扩展运算符将 Iterable 对象展开为数组。同样，我们也可以使用 Array.from 方法将 Array Like 对象转换为数组。
学习和掌握 Iterable 和 Array Like 对象之间的互操作，可以帮助我们更好地处理各种数据结构，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65882113eb4cecbf2dd502c8