登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript类数组和可迭代对象的实现原理详解

WBOY
发布: 2022-06-09 11:37:19
转载
2309人浏览过

本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于类数组和可迭代对象的实现原理,包括了把对象本身构造成迭代器、string的迭代器等等相关内容,下面一起来看一下吧,希望对大家有帮助。

JavaScript类数组和可迭代对象的实现原理详解

【相关推荐:javascript视频教程web前端

可迭代对象(Iterable object)

数组是一个特殊的对象,它和普通对象的区别不仅仅在于元素的顺序访问、存储。另外一个重要的区别是:数组是可迭代的,也就是可以使用for ... of语句访问(迭代)所有的元素。

我们可以简单的做一个小实验:

let arr = [1,2,3,4,5]for(let val of arr){
    console.log(val)}
登录后复制

代码执行结果:

image-20220604080921048

以上代码就简单的使用了数组的迭代特性,我们在访问数组元素的时候,不必使用元素的下标。

如果我们对一个普通对象使用for ... of语句会发生什么呢?

let obj = {
    name:'xiaoming',
    age:12,}for(let para of obj){ //代码会报错
    console.log(para)}
登录后复制

执行效果如下:

image-20220604081556714

这就证明普通的对象和数组之间还有一个可迭代的差距,我们称具备迭代功能的对象为可迭代对象

Symbol.iterator

如果我们希望一个对象可以迭代,必须为对象添加一个名为Symbol.iterator的方法(一个专门使对象可迭代的内建Symbol)。

方法作用包括:

  1. 当使用for ... of循环迭代对象时,就会调用Symbol.iterator方法,这个方法必须返回一个迭代器(一个有next()方法的对象)。
  2. 得到迭代器后,for ... of会不断的调用迭代器的next()方法获得下一个元素。
  3. next()方法返回的内容必须符合格式:{done:Boolean,value:any},当done:true时,循环结束,否则value就是下一个值。
迭代器:迭代器是借鉴C++等语言的概念,迭代器的原理就像指针一样,它指向数据集合中的某个元素,你可以获取它指向的元素,也可以移动它以获取其它元素。迭代器类似于数组中下标的拓展,各种数据结构,如链表(List)、集合(Set)、映射(Map)都有与之对应的迭代器。JS中的迭代器是专门为了遍历这一操作设计的。每次获取到的迭代器总是初始指向第一个元素,并且迭代器只有next()一种行为,直到获取到数据集的最后一个元素。我们无法灵活移动迭代器的位置,所以,迭代器的任务,是按某种次序遍历数据集中的元素。

实现一个可迭代对象:

let obj = {
    from:1,
    to:5,}obj[Symbol.iterator] = function(){
    //返回一个迭代器
    return {
        current:this.from,
        last:this.to,
        next(){
            if(this.current<this.last><p>代码执行效果:</p>
<p><img src="https://img.php.cn/upload/article/000/000/067/05759c456d9c107fab3194b506d39378-4.png" alt="image-20220604083540285"></p>
<p>注意,以上对象虽然可以进行迭代了,但是,迭代使用使用的材料并非对象,而是Symbol.iterator返回的迭代器(也是一个对象)。</p>
<h2>把对象本身构造成迭代器</h2>
<p>以上代码构造了一个内建函数Symbol.iterator(),这个函数返回了一个迭代器对象。我们还可以采用另外一种实现迭代器的方式:把对象本身做成迭代器:</p>
<pre class="brush:php;toolbar:false">let obj = {
    from:1,
    to:5,
    [Symbol.iterator](){
        this.current = this.from;
        return this;//返回对象本身
    },
    next(){//给对象添加一个next方法
        if(this.current<this.to><p>代码执行效果和上面的图片展示相同。</p>
<blockquote><p>这么做虽然代码更加简洁了,但是由于并没有新的可迭代对象产生,我们就没有办法同时执行两个for ... of循环迭代同一个对象了,但是两个并行的迭代在同一个对象上是非常罕见的。</p></blockquote>
<p>我们可以总结可迭代对象的概念:</p>
<p>所谓可迭代对象,就是比普通对象多了一个名为Symbol.iterator方法的普通对象,这个方法返回一个迭代器。</p>
<p>或者,一个具备Symbol.iterator同时具备next方法的对象也是一个可迭代的对象。</p>
<h2>String也是可迭代的</h2>
<p>数组和字符串都是可以迭代的,我们可以很方便的使用for...of语句迭代数组中的字符元素:</p>
<pre class="brush:php;toolbar:false">let str = '123'for(let c of str){
    console.log(c)}
登录后复制

这对于代理对(UTF-16扩展字符)同样是有效的:

let str = '...'for(let c of str){
    console.log(c)}
登录后复制

执行效果如下:

image-20220604085545804

String的迭代器

并非只有for...of语句能够使用迭代器,我们还可以显式的调用迭代器:

let str = '12345'let itr = str[Symbol.iterator]()while(true){
    let result = itr.next()
    if(result.done)break;
    console.log(result.value)}
登录后复制

代码执行效果:

image-20220604085813686

以上代码执行了遍历字符串字符的操作,是不是觉得可迭代对象就没有这么神秘了!

类数组对象和可迭代对象

类数组和可迭代在遍历功能上非常相似,都可以方便的方式内部元素,但是二者仍然有明显的区别:

  1. iterable可迭代对象:实现了Symbol.iterator的对象;
  2. array-like类数组对象:具有数字索引,并且有length属性;

字符串就是一个即使类数组又是可迭代的对象。

可迭代和类数组对象通常都不是数组,如果我们想把一个可迭代或者类数组对象转为数组,需要使用Array.from方法。

Array.from

使用Array.from将字符串转为数组:

let str = '123'let arr = Array.from(str)console.log(arr)
登录后复制

代码执行效果如下:

image-20220604091552590

把自定义的类数组对象转为数组:

let obj = {
    0:'0',
    1:'1',
    2:'2',
    length:3}let arr = Array.from(obj)console.log(arr)
登录后复制

代码执行结果:

image-20220604091736400

Array.from的完整语法:

Array.from(obj[, mapFunc, thisArg])
登录后复制

mapFunc方法会在生成数组之前对每个可迭代或类数组元素调用,如果mapFunc是一个成员方法,可以使用thisArg提供this指针。

举个例子:

let str = '12345'let arr = Array.from(str,itm=&gt;+itm)console.log(arr)
登录后复制

代码执行结果:

image-20220604092137378

这里通过映射函数,将本应该生成字符数组转为数字数组。

总结

  1. 可以使用for...of语法的对象被称为可迭代对象
  2. 可迭代对象是在普通对象的基础上实现了Symbol.iterator方法的对象
  3. Symbol.iterator方法返回了一个迭代器;
  4. 迭代器包含一个next方法,该方法返回下一个元素的值;
  5. next方法返回值需要满足格式{done:Boolean,value:nextVal},当done:true时,迭代结束
  6. Array.from可以把类数组和可迭代对象转为数组;

【相关推荐:javascript视频教程web前端

以上就是JavaScript类数组和可迭代对象的实现原理详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号