盘点JavaScript中的Iterable object（可迭代对象）-技术圈

点击上方“前端进阶学习交流”，进行关注

回复“前端”即可获赠前端相关学习资料

今

日

鸡

汤

男儿何不带吴钩，收取关山五十州。

大家好，我是进阶学习者。

一、概念

可迭代（Iterable） 对象是数组的泛化。这个概念是说任何对象都可以被定制为可在 for..of 循环中使用的对象。

数组是可迭代的。但不仅仅是数组，很多其他内建对象也都是可迭代的。

二、通过创建一个对象，就可以轻松地掌握可迭代的概念。

1.字符串是可迭代的

数组和字符串是使用最广泛的内建可迭代对象。

对于一个字符串，for..of 遍历它的每个字符：

for (let char of "test") {  // 触发 4 次，每个字符一次  alert( char ); // t, then e, then s, then t}

对于代理对（surrogate pairs），它也能正常工作！

（译注：这里的代理对也就指的是 UTF-16 的扩展字符）

let str = '𝒳😂';for (let char of str) {    alert( char ); // 𝒳，然后是 😂}

2. 显式调用迭代器（如何显式地使用迭代器？）。

将会采用与 for..of 完全相同的方式遍历字符串，但使用的是直接调用。这段代码创建了一个字符串迭代器，并“手动”从中获取值。

let str = "Hello"; // 和 for..of 做相同的事//             for (let char of str)                alert(char);            let iterator = str[Symbol.iterator]();            while (true) {                let result = iterator.next();                if (result.done) break;                alert(result.value); // 一个接一个地输出字符            }

注：

很少需要这样做，但是比 for..of 给了更多的控制权。例如，可以拆分迭代过程：迭代一部分，然后停止，做一些其他处理，然后再恢复迭代。

3. Array.from

有一个全局方法 Array.from 可以接受一个可迭代或类数组的值，并从中获取一个“真正的”数组。然后就可以对其调用数组方法了。

例：

let arrayLike = {                0: "Hello",                1: "World",                length: 2            };            let arr = Array.from(arrayLike); // (*)            alert(arr.pop()); // World（pop 方法有效）// World（pop 方法有效）

运行结果：

在 (*) 行的 Array.from 方法接受对象，检查它是一个可迭代对象或类数组对象，然后创建一个新数组，并将该对象的所有元素复制到这个新数组。

现在用 Array.from 将一个字符串转换为单个字符的数组：

let str = '𝒳😂';// 将 str 拆分为字符数组let chars = Array.from(str);alert(chars[0]); // 𝒳alert(chars[1]); // 😂alert(chars.length); // 2

运行结果：

注：

与 str.split 方法不同，它依赖于字符串的可迭代特性。

因此，就像 for..of 一样，可以正确地处理代理对（surrogate pair）。（译注：代理对也就是 UTF-16 扩展字符。）

另外一种表达方式

技术上来说，它和下文做了同样的事：

let str = '𝒳😂';let chars = []; // Array.from 内部执行相同的循环for (let char of str) {    chars.push(char);}alert(chars);

运行结果：

但 Array.from 精简很多。

甚至可以基于 Array.from 创建代理感知（surrogate-aware）的slice 方法（译注：也就是能够处理 UTF-16 扩展字符的 slice 方法）：

function slice(str, start, end) {                return Array.from(str).slice(start, end).join('');            }            let str = '𝒳😂𩷶';            alert(slice(str, 1, 3)); // 😂𩷶// 原生方法不支持识别代理对（译注：UTF-16 扩展字符）            alert(str.slice(1, 3)); // 乱码（两个不同 UTF-16 扩展字符碎片拼接的结果）