文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

盘点JavaScript中的Iterable object(可迭代对象)

2024-11-28 14:40

关注

可迭代(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 扩展字符碎片拼接的结果)

三、总结

本文基于JavaScript基础。介绍了Iterable object(可迭代对象),应用 for..of 的对象被称为 可迭代的。通过创建一个对象,详细的讲解了字符串是可迭代的。显式调用迭代器,以及在实际中 Array.from的应用。

欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

代码很简单,希望对你学习有帮助。

来源:前端进阶学习交流内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯