详解如何优雅迭代JavaScript字面对象
更新时间：2022年05月26日 09:23:01 作者：速冻鱼
迭代是访问集合元素的一种方法,可以被迭代的对象称为可迭代对象,下面这篇文章主要给大家介绍了关于如何优雅迭代JavaScript字面对象的相关资料,需要的朋友可以参考下
为什么要实现自定义迭代器
因为在JavaScript中字面量对象是不支持迭代的
如何实现JavaScript字面量对象迭代
- 只要正确实现字面对象的Symbol.iterator这个属性所对应的迭代器函数即可
- 注意⚠️该迭代器函数只是一个函数，而不是真正的迭代器
- 迭代器是一个对象，需要提供next函数来提供给类似for of forEach这种迭代函数使用
实现方法
第一种使用比较简单的遍历来实现
let obj = {uname: "zhangsan"};
obj[Symbol.iterator] = function () {
const keys = Object.keys(this);
let index = 0;
return {
next() {
return {
value: obj[keys[index++]],
done: index > keys.length
}
}
};
};
let iterator = obj[Symbol.iterator]();
console.log(iterator.next());
//{value: 'zhangsan', done: false}
obj.uname='sudongyu'
iterator = obj[Symbol.iterator]();
console.log(iterator.next());
//{value: 'sudongyu', done: false}第二种使用生成器函数来实现
/**
* 将{}对象转换为可迭代对象
*/
function object2iterator(obj){
obj[Symbol.iterator]=function* () {
let properties = Object.keys(this);
for (let i of properties) {
yield [i, this[i]];
}
}
return obj
}生成器详细API 请参考 mdn
解析为什么生成器函数要这样设计
以下纯个人理解，如果有歧义就当我放屁～ 哈哈哈
- 迭代器函数是一个函数，这样每次调用都会为将要return的迭代器中的next函数创建一个全新的词法作用域
- 这样每次在创建新的迭代器时，执行iterator.next()的时候就可以利用闭包访问到属于自己的外层词法环境中的变量，在方法一中也就是能够从index为0开始迭代
- 这样每个独立的迭代器对象就能相互隔离～
注意⚠️：我还想表达以下几个观点：
- JavaScript中的对象只是数据的载体，集合
- 所以我们不能把对象中的函数或者属性作为对象的一部分
- 对象的属性和函数它们只是一个间接的关系，虽然有点难理解，但是我还是想表达一下这个观点
- 打个比方来讲，你(对象)身上的钱(属性或者对象上的函数)只是你作为了它暂时的载体，并不意味着这个钱就属于你身体的一部分
总结
到此这篇关于如何优雅迭代JavaScript字面对象的文章就介绍到这了,更多相关迭代JS字面对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了冻结JS对象方法技术，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
遇到了操作iframe的相关问题，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数，下面与大家分享下操作iframe兼容各种浏览器的方法2013-07-07
js中的onchange和onpropertychange (onchange无效的解决方法)
这篇文章主要介绍了js中的onchange和onpropertychange (onchange无效的解决方法)，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要介绍了过期软件破解办法实例详解的相关资料,5行脚本代码即可改变软件期限，具有参考价值，其他软件可参考此方法，需要的朋友可以参考下2017-01-01
下面小编就为大家带来一篇JS实现动态增加和删除li标签行的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
导致这个问题产生的原因，一般是因为js（一个比较复杂的js）写在body里面，在body元素加载完之前调用出现问题。显然，解决该问题的方法就是将这一段js放在body元素解析完毕之后。2010-11-11
这篇文章主要介绍了在 JavaScript 中生成不可修改属性对象的方法,包括相关函数及原理,并列举了在状态管理、数据缓存、函数式编程等场景中的实际应用,还通过代码示例进行了详细说明,需要的朋友可以参考下2024-12-12
本篇文章主要介绍了详解webpack介绍&安装&常用命令，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了解决微信授权成功后点击按返回键出现空白页和报错的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
生成html静态文件后的分页（客户端版）...2006-07-07
最新评论