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

目录
  • 可迭代对象（Iterable object）
    • Symbol.iterator
    • 把对象本身构造成迭代器
    • String也是可迭代的
    • String的迭代器
    • 类数组对象和可迭代对象
    • Array.from
    • 总结

可迭代对象（Iterable object）

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

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

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

代码执行结果：

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

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

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

执行效果如下：

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

Symbol.iterator

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

方法作用包括：

  • 当使用for ... of循环迭代对象时，就会调用Symbol.iterator方法，这个方法必须返回一个迭代器（一个有next()方法的对象）。
  • 得到迭代器后，for ... of会不断的调用迭代器的next()方法获得下一个元素
  • 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){
                return {done:false,value:this.current++}
            }else{
                return {done:true}//迭代结束
            }
        }
    }
}
for(let para of obj){
    console.log(para)
}

代码执行效果：

注意，以上对象虽然可以进行迭代了，但是，迭代使用使用的材料并非对象，而是Symbol.iterator返回的迭代器（也是一个对象）。

把对象本身构造成迭代器

以上代码构造了一个内建函数Symbol.iterator()，这个函数返回了一个迭代器对象。我们还可以采用另外一种实现迭代器的方式：把对象本身做成迭代器：

let obj = {
    from:1,
    to:5,
    [Symbol.iterator](){
        this.current = this.from;
        return this;//返回对象本身
    },
    next(){//给对象添加一个next方法
        if(this.current<this.to){
            return {done:false,value:this.current++}
        }else{
            return {done:true}
        }
    }
}
for(let para of obj){
    console.log(para)
}

代码执行效果和上面的图片展示相同。

这么做虽然代码更加简洁了，但是由于并没有新的可迭代对象产生，我们就没有办法同时执行两个for ... of循环迭代同一个对象了，但是两个并行的迭代在同一个对象上是非常罕见的。

我们可以总结可迭代对象的概念：

所谓可迭代对象，就是比普通对象多了一个名为Symbol.iterator方法的普通对象，这个方法返回一个迭代器。

或者，一个具备Symbol.iterator同时具备next方法的对象也是一个可迭代的对象。

String也是可迭代的

数组和字符串都是可以迭代的，我们可以很方便的使用for...of语句迭代数组中的字符元素：

let str = '123'
for(let c of str){
    console.log(c)
}

这对于代理对（UTF-16扩展字符）同样是有效的：

let str = '
赞 (0)

相关推荐

  • JQuery 操作Javascript对象和数组的工具函数小结

    JQuery操作非集合数组函数 $.trim(value) 这个函数很简单,从value中删除任何前导或尾随的空白字符.空白字符为任何匹配Javascript正则表达式\s的任何字符.包括空格.换页.换行.回车.tab.垂直指标符等. $.each(container, callback) 对container的每一项进行迭代,为每一项调用回调函数callback. container 可以是对象或数组.如果是js对象,则迭代其每个属性:如果是数组,则迭代其每个元素. callback 回调函数

  • JavaScript1.6数组新特性介绍以及JQuery的几个工具方法

    JavaScript 1.6 引入了几个新的Array 方法,具体的介绍见:New in JavaScript 1.6 .这些方法已经被写进了ECMA262 V5.现代浏览器(IE9/Firefox/Safari/Chrome/Opera)都已经支持,但IE6/7/8不支持.jquery的工具方法中提供了类似的功能. 1.Array.forEach()和jquery的$().each().在数组中的每个项上运行一个函数.类似java5 增强的for循环. 复制代码 代码如下: var ary =

  • js判断两个数组相等的5种方法实例

    目录 前言 一. toString() 二.join() 三. JSON.stringify() 四.sort() 五.filter() 总结 前言 在 js 中是不能直接用 == 或者 === 来比较两个数组是否相等,那就需要对数组的值进行比较. 下面各种方法,要根据具体情况来使用. 一. toString() 当两个数组元素类型相同,顺序相同时,直接判断是否相等,结果不相等:转化为字符串后,结果相等 [1,2,3].toString() === [1, 2, 3].toString(); /

  • JS实现数组随机排序的三种方法详解

    JS实现数组随机排序的三种方法详解

    目录 1.利用数组方法sort实现随机排序 2.洗牌算法实现随机排序 3.洗牌算法深入分析 全部代码 1.利用数组方法sort实现随机排序 实现随机排序方法还是很多的,用for循环是可以写的,用Lodash等三方js方法库也行.但个人以为使用sort比较方便,但是他又缺点,缺点就是不够那么的随机,我看过sort运行机制后,发现他竟然是利用一个比较器两两比较出来的. var arr = [1, 2, 3, 4, 5] arr.sort(function () { return Math.rando

  • 如何将JSON字符串数组转对象集合

    目录 JSON字符串数组转对象集合 json字符串/数组与Java对象/集合互转 1.将java对象转换为json字符串 2.json字符串与Java对象的转换 JSON字符串数组转对象集合 String json ="json数组数据"; JSONArray res = JSON.getJSONArray(json); //用json的方法toJavaList,参数放入想转的集合对象就可以了 List<MonthTaskRes> monthTaskRes = res.to

  • 28个JS常用数组方法总结

    目录 1.Array.map() 2.Array.filter() 3.Array.reduce() 4.Array.reduceRight() 5.Array.fill() 6.Array.find() 7.Array.indexOf() 8.lastIndexOf() 9.Array.findIndex() 10.Array.includes() 11.Array.pop() 12.Array.push() 13.Array.shift() 14.Array.unshift() 15.Arr

  • javascript 数组去重复(在线去重工具)

    在线文本去重复工具 第一种方法: <textarea id="list" class="toolarea">我们 www.jb51.net www.baidu.com www.jb51.net 我们 shouce.jb51.net www.jb51.net tools.jb51.net www.baidu.com shouce.jb51.net tools.jb51.net 我们 www.jb51.net</textarea> <inp

  • 一文掌握JavaScript数组常用工具函数总结

    目录 一. 实现Array.isArray 二. 将类数组转换为数组 1. 借用数组的方法进行转换 2. es6的方式转换 三. 判断是否为数组 四. 数组方法实现 1.forEach 2. filter 3. every 4. some 5. findIndex 6. Reduce 五. 实现数组扁平化 1. 普通递归+concat 2. reduce+concat 3. while+concat 4. toString+split 5. flat 6. 正则 六. 去重 1. 利用 ES6 

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

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

    目录 可迭代对象(Iterable object) Symbol.iterator 把对象本身构造成迭代器 String也是可迭代的 String的迭代器 类数组对象和可迭代对象 Array.from 总结 可迭代对象(Iterable object) 数组是一个特殊的对象,它和普通对象的区别不仅仅在于元素的顺序访问.存储.另外一个重要的区别是:数组是可迭代的,也就是可以使用for ... of语句访问(迭代)所有的元素. 我们可以简单的做一个小实验: let arr = [1,2,3,4,5]

  • 详解vue数组遍历方法forEach和map的原理解析和实际应用

    一.前言 forEach和map是数组的两个方法,作用都是遍历数组.在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例. 二.代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3个参数item(当前项), index(当前项的索引), arr(原数组),还有一个可选参数this 匿名函数中的this默认是指向window的 对空数组不会调用回调函数 不会改变原数组(某些情况下可改变) 2. forEach (1) 没有返回值. var

  • 详解VUE 数组更新

    1.数据方法分类: (1)原数组改变 push  pop  unshift  shift  reverse  sort  splice (2)原数组未变,生成新数组 slice  concat  filter 对于使原数组变化的方法,可以直接更新视图. 对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化. 示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&

  • 详解c# 数组（Array）

    数组是一个存储相同类型元素的固定大小的顺序集合.数组是用来存储数据的集合,通常认为数组是一个同一类型变量的集合. 声明数组变量并不是声明 number0.number1.....number99 一个个单独的变量,而是声明一个就像 numbers 这样的变量,然后使用 numbers[0].numbers[1].....numbers[99] 来表示一个个单独的变量.数组中某个指定的元素是通过索引来访问的. 所有的数组都是由连续的内存位置组成的.最低的地址对应第一个元素,最高的地址对应最后一个元

  • 详解ES6数组方法find()、findIndex()的总结

    详解ES6数组方法find()、findIndex()的总结

    本文主要讲解ES6数组方法find()与findIndex(),关于JS的更多数组方法,可参考以下: ①JavaScript 内置对象之-Array ②ES5新增数组方法(例:map().indexOf().filter()等) ③ES6新增字符串扩张方法includes().startsWith().endsWith() 1. find() 该方法主要应用于查找第一个符合条件的数组元素,即返回通过测试(函数内判断)的数组的第一个元素的值. 它的参数是一个回调函数,为数组中的每个元素都调用一次函

  • 详解Java数组的四种拷贝方式

    目录 深拷贝与浅拷贝的区别 1.for循环进行拷贝 拷贝数值类型 拷贝引用类型 2.copyof/copyOfRange 拷贝数值类型 拷贝引用类型 3.arraycopy 拷贝数值类型 拷贝引用类型 4.clone 拷贝数值类型 拷贝引用类型 5.总结 深拷贝与浅拷贝的区别 假设现在有原数组A以及拷贝后的数组B,若是改变A中的某一个值,B数组随之相应的发生变化的拷贝方式称为浅拷贝,反之B数组不受影响,则称为深拷贝:简单总结一下两者的概念: 深拷贝:拷贝后,修改原数组,不会影响到新数组: 浅拷贝

  • 详解JS数组Reduce()方法详解及高级技巧

    基本概念 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组. 语法: arr.reduce(callback,[initialValue]) callback (执行数组中每个值的函数,包含四个参数) previousValue (上

  • MongoDB模糊查询操作案例详解(类关系型数据库的 like 和 not like)

    1.作用与语法描述 作用: 正则表达式是使用指定字符串来描述.匹配一系列符合某个句法规则的字符串.许多程序设计语言都支持利用正则表达式进行字符串操作.MongoDB 使用 $regex 操作符来设置匹配字符串的正则表达式. 语法一 { <field>: { $regex: /pattern/, $options: '<options>' } } { <field>: { $regex: 'pattern', $options: '<options>' } }

  • 详解python数组中的符号...与:符号的不同之处

    不知道大家有没有见过在python数组中使用...符号,因为前段时间读别人代码的时候遇到了这个符号立刻就云里雾里,于是这里特此记录一下.先来看一段代码: import numpy as np x = np.array([[1, 3], [5, 6], [8, 10]]) print("使用'...'符号的结果为:") print(x[..., 0]) print("使用':'符号的结果为:") print(x[:, 0]) """ 使用

  • 详解C++数组和数组名问题(指针、解引用)

    详解C++数组和数组名问题(指针、解引用)

    目录 一.指针 1.1 指针变量和普通变量的区别 1.2 为什么需要指针 1.3 指针使用三部曲 二.整形.浮点型数组 2.1 数组名其实是特殊的指针 2.2 理解复杂的数组的声明 2.3 数组名a.数组名取地址&a.数组首元素地址&a[0].指向数组首元素的指针*p 2.4 对数组名以及取值符&的理解 三.字符数组数组名 一.指针 1.1 指针变量和普通变量的区别 指针:指针的实质就是个变量,它跟普通变量没有任何本质区别.指针完整的应该叫指针变量,简称为指针. 是指向的意思.指针

随机推荐