当前位置: 首页 > 科技观察

遍历得到一个数组还是Iterator遍历器?

时间:2023-03-21 22:35:26 科技观察

1.背景故事的开头是这样的...遍历数组和对象属性时,是用obj.keys(),obj.values()和obj.entries()还是Object.keys(obj),Object.values(obj),Object.entries(obj)方法造成了一些混乱。话不多说,先把问题放上来:需求:想遍历一个对象,获取遍历对象的属性值。实现:Object.keys(),Object.values()和Object.entries()方法问题:一不小心把数组的entries(),keys(),values()方法搞混了~QAQ2、keys(),values(),entries()遍历方法熟悉ES语法数据结构的朋友一定很清楚,原生对象数据结构并不是obj.keys(),obj.values()和obj.entries()方法,支持数组、映射、集合等数据结构。但是仍然可以通过Object.keys(obj)、Object.values(obj)、Object.entries(obj)获取native对象中的可遍历属性,形成数组类型的数据结构。也就是说,有keys()、values()和entries()两个方法:ES5-ES2017先后引入了Object.keys、Object.values和Object.entries方法,返回一个数组,其成员为参数对象本身(不包括继承的)所有可遍历(可枚举)属性的键名/键值/键值对,可以用for...of循环遍历;ES6提供了entries()、keys()和values()——可用于遍历array/Map/Set等类数组数据结构实例,返回一个(Iterator)遍历器对象,可以用for遍历...循环。注意这里有两个区别:两者的调用语法不同,很明显;前者返回一个可迭代对象,而后者返回一个真正的数组。你惊呆了吗?那么我们先来看第一个问题——调用语法的区别Q1:Object.keys、Object.values和Object.entriesmethods为了区分这两种调用语法,我们不得不回顾一下关于原型链的知识。因为这里的entries()、keys()和values()方法只是调用原型对象构造函数上的方法。如下图可以看出,对于一个普通的对象,这三个方法都在Object对象的[[prototype]]下的构造函数中;对于数组结构,这三个方法可以在数组原型链和原型链上层对象原型的构造函数中找到:也就是Object.keys(arr)调用了top-的方法数组原型链的层次原型对象构造器,数组本身支持的arr.keys()方法调用数组原型链上的方法。方法。即对象只支持前一种调用方式,而数组支持两种调用方式:同时,我们知道在JavaScript中,对象是一切复杂结构的基础。它还对应于其他复杂结构的原型链的顶端是对象原型结构。现在你应该能知道为什么普通对象不支持obj.keys()、obj.values()和obj.entries()方法了,但是这里你要问另外一个问题:Q2:如何让一个对象支持obj.keys()、obj.values()和obj.entries()方法怎么样?理论上我们可以为一个对象构造任意方法,那么如何实现和数组一样的遍历方法呢?本质上,这个方法可以生成一个遍历器。letobjE={data:['hello','world'],keys:function(){constself=this;return{[Symbol.iterator](){letindex=0;return{next(){if(index{if(index